NOW OR NEVER

React의 class 형 Component 제작 기본 패턴 React란? 코드 양이 많을 경우 한 눈에 코드가 들어오지 않고 혼란스러운 상태를 초래한다. 이를 하나의 태그로 줄여주는 역할을 하는 것이 React이다. 웹브라우저는 이세상에 react라는 기술이 있는지 모른다. 왜냐하면 react는 그냥 사람들이 짜는 코드이고 react가 최종적으로 웹브라우저한테 html 코드를 공급해주기 때문이다. react는 JSX 언어이다 React의 js에서 짜는 코드들은 유사 Javascript이다. react에서 짠 코드를 javascript로 작성할 경우 에러가 발생한다. 왜냐하면 js의 경우 tag를 표현하는 부분들을 따옴표 등을 활용하여 잘 작성해야 하는데 react의 경우 그냥 tag를 작성해도 잘 동작..

TypeScript 자바스크립트를 알고 있다면 금방 배움 장점 자바스크립트는 weakly type으로 실수를 하게 될 수 있음 코드가 실제로 실행이 되어야만 실수한지 안한지 알 수 있음 타입스크립트 사용시 이런 문제점 보완 가능 VS code 같은 IDE 사용시 많은 도움을 얻을 수 있음 함수 사용시 어떤 파라미터 넣는지 컴포넌트의 props에 어떤 값을 넣는지 실수로 빠뜨린 props 있을 시 에러 감지 사소한 실수 많이 방지 파일 생성 법 디렉토리 생성 : git bash 에서 mkdir 디렉토리명 git bash 에서 cd 디렉토리명 package JSON 생성 : git bash 에서 yarn init -y 해당 디렉토리 에디터로 열기 : git bash 에서 code ./ typescript(t..

리액트 컴포넌트 스타일링 Sass 문법적으로 짱 멋진 스타일 시트 스타일시트의 재사용성, 코드 가독성 높여줌 반복되는 코드는 @mixin 활용 사용시 props 이름만 설정시 true 값을 갖는 것과 동일 라이브러리 설치 yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할) classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능 falsy한 값(false, null, 0, undefined) 무시 사용 : 사용하려는 파일 상단에 import ..