Node.js
-
ReactNode.js/프론트엔드 2021. 12. 3. 10:53
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..
-
NextJSNode.js/프론트엔드 2021. 11. 25. 12:30
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 저..
-
TS + Sequelize | Error: SyntaxError: Cannot use import statement outside a module 해결 방법Node.js/백엔드 2021. 6. 3. 12:14
프로젝트 진행 중 Sequelize 설정 후 DB 생성을 위해 npx sequelize db:create 명령어를 입력했는데 다음과 같은 에러를 맞닥뜨렸다. config.ts를 읽는 도중 발생한 에러다. 이는 ts-node가 .sequelizerc 파일을 트랜스파일 대상으로 인식하지 못하여 발생한다고 한다. config.ts는 ES6 문법(import export)을 사용하고, Sequelize는 CommonJS(require, module.exports)를 사용하여 충돌이 생긴 것이다. .sequelizerc를 컴파일할 때 ts-node가 불러와지도록 require('ts-node').register({ /* options */ })를 .sequelizerc에 추가해주면 에러가 해결된다.
-
Redux의 원리와 불변성Node.js/프론트엔드 2021. 5. 14. 01:14
Redux는 JS 어플리케이션에서 state를 관리하는 라이브러리다. 다시 말해서, 어플리케이션의 데이터를 관리하는데 사용한다. 어플리케이션의 state는 store라는 객체 트리에 저장된다. state는 불변성을 지니고 있다. state 객체와 그것의 프로퍼티를 직접 바꿀 수 없다. 즉 새로운 object를 생성하고, 새로운 상태를 다시 계산한 후 그것을 새로운 object로 업데이트한다. reducer는 이전 state와 action을 갖고 있고, 새로운 state를 리턴하는 함수이다. Actions : Action은 수행해야할 action의 종류를 정의하는 type 필드와 정보나 데이터를 담고 있는 필드들을 가지고 있다. Action Creator는 action을 리턴하는 함수이다. Reducer ..
-
CookieNode.js/백엔드 2021. 5. 1. 06:40
쿠키(cookie)란 브라우저에 저장 가능한 작은 데이터 조각이다. HTML5에서 WebStorage API (LocalStorage, sessionStorage) 가 소개 되기 전까지 브라우저에 데이터를 저장할 수 있는 유일한 방법이었다. 쿠키는 4KB(=4096byte) 미만의 하나의 문자열이고, 브라우저에 저장된 후 document.cookie 로 접근할 수 있으며 세미콜론(;)으로 구분된 key-value 쌍을 포함하고 있다. document.cookie를 통한 쿠키 연산 document.cookie 는 getter와 setter를 가진 object다. document.cookie로 새로운 값을 할당하면 setter 가 동작한다. 모든 쿠키는 하나의 스트링으로 저장되기 때문에 아래와 같은 방법으로..
-
가로 스크롤 만들기Node.js/프론트엔드 2021. 4. 1. 12:15
white-space: nowrap 과 overflow: auto 를 사용하여 가로 스크롤을 만들 수 있다. white-space 는 엘리먼트가 공백 문자를 처리하는 법을 지정하는 속성인데, white-space: nowrap 은 연속 공백을 하나로 합친다. 즉 줄 바꿈이 엘리먼트에서만 일어난다. 위처럼 줄 바꿈이 일어난 엘리먼트의 공백을 아래처럼 없애준다. 반면 overflow 는 엘리먼트의 컨텐츠가 너무 커서 block formatting context 에 딱 맞지 않을 때 사용하는 속성이다. 데스크탑 브라우저의 경우 컨텐츠가 넘칠 때 overflow: auto로 아래처럼 스크롤바를 노출할 수 있다. 컨텐츠 양에 따라 스크롤바를 추가할지 안 할지를 자동으로 정한다. 코드 예시 .html Mark Jo..
-
-
[ESLint] eslint.workingDirectories 옵션Node.js/프론트엔드 2020. 12. 27. 11:04
한 프로젝트 안에 폴더가 여러 개 있고 각각의 폴더가 서로 다른 구성 파일(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로 지..