쥐돌이메모장 쥐돌이메모장

1. UI를 빌드하기 위한 오픈 소스 라이브러리다. 2. 프레임워크가 아닌 라이브러리다. 3. UI에 집중한다 (HTTP request 핸들링, 라우팅은 다른 라이브러리들이 해줌.) 컴포넌트 기반 아키텍처 어플리케이션을 small encapsulated parts로 쪼갠 다음 복잡한 UI로 composed 된다. → 재사용 가능한 코드 선언적 React에 UI가 어떻게 생겼는지 알려주면 React가 그것을 실제 UI로 빌드해준다. DOM 업데이트 가장 비용이 많이 드는 연산 중 하나인데 React에서 그것을 멋지게 핸들링해준다. npx : npm package runner npx가 있으면 패키지를 전역 설치 안 하고 바로 사용할 수 있다 예) npx create-react-app JSX(JavaScrip..

1. package.json package.json의 scripts의 build 명령어 => production 배포하기 전에 nextjs 어플리케이션 빌드(컴파일) start 명령어 => 컴파일된 어플리케이션을 production 모드에서 실행. nextjs는 자체 서버를 가지고 있기 때문에 start 명령어가 필요함. 완전한 static 사이트를 개발할 때는 build만 하면 됨. build => start 순서 2. next.config.js nextjs 설정 파일 reactStrictMode : unsafe life cycle, legacy api usage 등등 3. .next 폴더 dev나 build 스크립트 실행 시 생김. nextjs 어플리케이션이 served됨. build output 저..

Redux는 JS 어플리케이션에서 state를 관리하는 라이브러리다. 다시 말해서, 어플리케이션의 데이터를 관리하는데 사용한다. 어플리케이션의 state는 store라는 객체 트리에 저장된다. state는 불변성을 지니고 있다. state 객체와 그것의 프로퍼티를 직접 바꿀 수 없다. 즉 새로운 object를 생성하고, 새로운 상태를 다시 계산한 후 그것을 새로운 object로 업데이트한다. reducer는 이전 state와 action을 갖고 있고, 새로운 state를 리턴하는 함수이다. Actions : Action은 수행해야할 action의 종류를 정의하는 type 필드와 정보나 데이터를 담고 있는 필드들을 가지고 있다. Action Creator는 action을 리턴하는 함수이다. Reducer ..

white-space: nowrap 과 overflow: auto 를 사용하여 가로 스크롤을 만들 수 있다. white-space 는 엘리먼트가 공백 문자를 처리하는 법을 지정하는 속성인데, white-space: nowrap 은 연속 공백을 하나로 합친다. 즉 줄 바꿈이 엘리먼트에서만 일어난다. 위처럼 줄 바꿈이 일어난 엘리먼트의 공백을 아래처럼 없애준다. 반면 overflow 는 엘리먼트의 컨텐츠가 너무 커서 block formatting context 에 딱 맞지 않을 때 사용하는 속성이다. 데스크탑 브라우저의 경우 컨텐츠가 넘칠 때 overflow: auto로 아래처럼 스크롤바를 노출할 수 있다. 컨텐츠 양에 따라 스크롤바를 추가할지 안 할지를 자동으로 정한다. 코드 예시 .html Mark Jo..

한 프로젝트 안에 폴더가 여러 개 있고 각각의 폴더가 서로 다른 구성 파일(e.g. eslintrc, .eslintignore)을 가지고 있으면, current working directory를 지정해주는 것이 중요하다. eslint.workingDirectories 옵션을 사용하여 current working directory를 지정할 수 있다. [{ "mode": "location" }] : ESLint가 workspace 폴더 위치 또는 파일 위치(workspace 폴더가 열려 있지 않을 때)를 사용하게 한다. 디폴트 설정. [{ "mode": "auto" }] : package.json, .eslintignore 그리고 .eslintrc* 파일이 위치한 폴더를 working directory로 지..

본 글은 "프론트엔드 개발환경의 이해와 실습(webpack, babel, eslint..)" 강좌를 토대로 작성되었습니다. jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html 프론트엔드 개발에 Node.js가 필요한 이유? 1. 최신 JS 스펙으로 개발할 수 있다. JS 스펙은 빠르게 발전하는 반면에 브라우저의 지원 속도는 항상 뒤쳐진다. 따라서 Webpack, Babel, NPM 같은 Node.js로 만들어진 도구를 사용하여 자동화된 프론트엔드 개발 환경을 갖출 필요가 있다. TypeScript, SASS 같은 고수준 프로그래밍 언어를 사용할 때도 전용 트랜스파일러가 필요한데, 이것 역시 Node.js 환경이 뒷받침되어야 한다. 2...

React로 어플리케이션을 만들 때 아래 두 방법으로 컴포넌트와 뷰들을 생성할 수 있다. 1. 표준 React 오브젝트와 메서드 사용 페이지에 react와 react-dom을 추가해주면 된다. 2. JSX(JavaScript + XML) 사용 JSX 문법에서는, 뷰 레이어를 생성하기 위해 JavaScript 안에 Hello World! 같은 HTML 엘레먼트를 사용할 수 있다. JSX를 사용하기 위해선 JSX를 이해하고 브라우저에서 실행 가능한 포맷으로 변환해 줄 transpiler가 필요하다. 이 역할을 Babel이 해준다. Transpiling은 클라이언트 기반과 서버 기반으로 나뉜다. 클라이언트 기반 transpiling은 파일 안에 script 태그를 포함하고, JSX를 로드하기 위해 type="..