괴발개발 성장기

# 배경 처음에는 if문을 많이 사용했다. 근데 동료가 이럴때에는 삼항연산자를 사용하면 코드가 깔끔하다는 걸 알려줬다. 나는 그래서 if문을 점점 안쓰게 된다. 갑자기 삼항연산자의 장,단점이 갑자기 궁금해졌다. # 장점 할당연산자를 효율적으로 사용할 수 있다. => if문을 사용할 때마다 return값을 사용한다. 그런데 삼항연산자를 사용하면 return은 한번만 사용하면 된다. # 단점 중첩 삼항연산자를 사용하는 경우 가독성이 떨어진다. # 문법 조건 ? 참일때 : 거짓일때 # 예시 type=== "BANNER" ? 1208 : 500 배너인 경우 1208이고 아니면 500으로 한다 처음에는 삼항연산자만 쓰고 중첩인 경우에는 if문을 사용했는데 중첩도 가능하다는 사실을 알았다. 그래서 중첩 삼항 연산자..

# 배경 배열로 오는 데이터를 string으로 Body에 넣어서 API 호출을 하고 싶었다 # 문법 배열변수.join('구분자') 구분자를 넣지 않으면 기본값은 ,(콤마)로 구별 된다. # 예시 const arr = ['서울특별시','인천광역시','경기도','대전광역시'] const str1 = arr.join() console.log(str1) // 서울특별시,인천광역시,경기도,대전광역시 const str2 = arr.join('/') console.log(str2) // 서울특별시/인천광역시/경기도/대전광역시 const str3 = arr.join(' ') console.log(str3) // 서울특별시 인천광역시 경기도 대전광역시 const str4 = arr.join('vs') console.lo..

react-router-dom가 버전6으로 업데이트 되면서 변화가 많아졌다. 참고자료 https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Overview Declarative routing for React apps at any scale reactrouter.com 나에게 영향이 있는 부분만 정리했다. 1) 가 로 변경되었다. 그리고 component는 방식도 {Main}에서 {} 으로 변경되었다. 변경전 코드 변경후 코드 2) useHistory를 사용했는데 useNavigate으로 변경되었다. 변경전 import React from 'react'; import {Button} from "antd"; import {us..

# react-router-dom 사용 환경 준비 1) yarn에서 react-router-dom를 설치 yarn add react-router-dom 2) App.js에 코드를 작성했다. class App extends Component { render() { return ( ); } } Switch: 자식컴포넌트로 생성된 Route 중에 첫번째 Route를 렌더링 해준다. 이걸 통하여 특정 컴포넌트만 렌더링해서 화면을 띄울 수 있다. Route : 특정 컴포넌트마다 URL 지정해준다 3) Main.js import {useHistory} from "react-router-dom"; const Main = () => { const history = useHistory(); return ( { histo..

다 만들어져 있어서 처음을 어떻게 만들어야하는지 몰라도 업무하는데 문제가 없었다. 하지만 공부를 하면서 느껴졌다. 내가 처음을 모르는구나... 기초 지식이 없는 느낌이었다. create-react-app를 설치하면 자동으로 파일 생성 된다. public 폴더안에 index.html 파일이 있다 src 폴더안에 App.js와 index.js 파일이 있다. # index.js 코드 import App from './App'; ReactDOM.render( , //App.js 파일로 이동하고 document.getElementById('root') //id가 root인 곳으로 이동한다 =>index.html 파일안에 id가 root가 있어서 찾아간다. ); document.getElementById() : 해..

항상 만들어진 프로젝트에서 업무를 한다. 그래서 리액트 처음 시작하는 방법을 모른다는 걸 느꼈다. 한페이지를 만드는 건 하는데... 시작을 모르네 참 아이러니한 일이다 그래서 오늘은 시작하는 방법을 배웠다. 1) 우선 폴더를 하나 만들었다. 2) 터미널에 아래 코드를 입력합니다. => CRA(create-react-app)를 설치 npx create-react-app 폴더명 create-react-app 패키지를 이용해 react-study(폴더명) 이라는 이름을 가진 프로젝트를 생성하는 코드 3) 다 진행되면 아래와 같은 파일들이 생성된다 이 중에서 꼭 필요한 것만 제외하고 삭제했다.

# 이슈 가격에 3자리마다 콤마를 찍고 싶다 # 예시 const num = 50000; const amount = num.toLocaleString('ko-KR'); console.log(amount) ; //50,000 생각보다 간단한데? 여러가지 방법이 있지만 나는 간단한 방법으로 사용했다.

사용한 목적 백엔드에서 id는 int로 설정했을 때 프런트에서 ""로 값을 넘기면 백엔드에서 0으로 인식하여 0인 경우를 검색한다. 그래서 그걸 막기 위해서 조건이 성립할 때만 값이 넘어가게 했다. const searchParam = { mobile: searchType === "mobile" ? searchText : "", name: searchType === "name" ? searchText : "", invoiceNo: searchType === "invoiceNo" ? searchText : "", status: status ? status : "", }; if (id) { searchParam.id = id; } id 값이 null이면 /address?mobile=01000000000&nam..

# 얕은 복사 얕은 복사는 사본을 만들지 않고 원본을 참조하면서 복사한 척 하는 것 Ex) slice() # slice slice 는 배열을 복사하는 기능(string 가능, 객체는 불가능) 중첩된 배열인 A를 A'로 복사한 후 A'에 중첩되어있는 배열안에 값을 넣으면 원본인 A에 중첩되아있는 배열안에 영향을 미쳐 값이 들어간다. 중첩된 배열이 아닌 배열안에 값을 넣었을 때에는 원본 A에 영향을 받지 않는다 const arr =[1,2,[3,4]] const copied = arr.slice(); console.log("arr", arr) //[1,2,[3,4]] console.log("copied", copied) //[1,2,[3,4]] copied[2].push(5) copied.push(9) co..

컴포넌트를 만들어서 부모 페이지에 내가 만든 컴포넌트를 보이게 하는 건 이해하기 쉬웠지만 정작 컴포넌트(자식)에 있는 값을 부모에게 주는 방법을 할때 마다 이해가 가지 않았다. 이렇게 정리를 하니까 이해할 수 있었다. # Select 사용하기 위한 컴포넌트 (child) const SelectType = (props) => { return ( { props.id(value) }} > "핸드폰" "이름" "제목" ); }; # LIST에 컴포넌트인 SelectType을 가져온다 => 간단히 말해서 부모이다 import SelectType from "../SelectType"; const List = () => { const [selectId, setSelectId] = useState(0); return ..