Miracle Morning, LHWN

# 화살표 함수 (Arrow Function) 형식에서 라이프 사이클 함수 (Life Cycle) 을 사용할 필요가 없는 이유 > 함수가 () => {} 작업을 수행할 때 마다 새로운 함수 객체를 만들어내는데, 이런식으로 작동하면 동일한 요소의 여러 복사본을 렌더링할 때 브라우저가 동일한 기능을 재사용하는 것을 방지하여 JavaScript 엔진에 의한 최적화를 더 어렵게 만든다. ​ 이로 인해 성능(Performance) 문제가 발생하게 되어, React 의 Life Cycle 메서드에는 화살표 함수를 사용하지 않는 것이 좋다.

CORS (Cross-Origin Resource Sharing) 클라이언트와 서버가 포트가 다른 상태에서 클라이언트 측에서 서버 측으로 무언가 요청했을 때, 브라우저가 보안상의 이유로 요청을 차단하는 문제이다. ​ 가령, 클라이언트의 포트가 3000이고, 서버의 포트가 4000으로 열려있으면 보안상의 이유로 차단된다. 이 문제를 해결할 수 있는 방법 중의 하나가 '프록시 (Proxy)' 이다. 프록시(Proxy)란? 프록시(Proxy) 라는 것은 사전적 의미로 해석하면 '대리, 대리인'이라는 의미를 갖고 있다. 프로토콜에 있어서는 '대리응답'이라는 개념으로 이해하면 될 것 같다. 111.111.111.111 이라는 IP 를 가진 유저가 인터넷에 어떠한 요청을 하게 되는 경우에 IP 가 전달되는데, 인터..

yarn start 명령으로 프로젝트를 시작하려하면 해당 오류가 빈번하게 발생한다... ~ yarn start /bin/sh: react-scripts: command not found 그럼 여기서 react-scripts 뭘까 ​ ※react-scripts 는 Node.js 의 모듈로서 create-react-app 으로 프로젝트를 생성할 때 함께 설치되는 라이브러리로, (create-react-app 은 react 프로젝트를 간편하고 빠르게 실행하기 위해 사용한다.) create-react-app 만을 위해 만들어진 모듈이다. ​ 원래 내가 npm 대신 사용하는 yarn 에는 'start' 라는 명령이 없다. (yarn run 이나 npm start 가 맞음) 어쨌든, yarn start 라는 명령을..

데이터 조회 (GET) # 데이터베이스의 데이터를 조회할 때에는 find() 메서드를 사용한다. exports.list = async (ctx) => { let books; try { books = await Book.find().exec(); } catch (e) { return ctx.throw(500, e); } ctx.body = books; }; ※ let 이나 const 는 scope 가 블록단위이다. books = await Book.find().exec(); .exec() 함수를 뒤에 붙여주어야 실제로 데이터베이스에 요청이 이루어진다. 이때의 반환 값은 Promise 이기 때문에 await 을 사용할 수 있다. ​ # 이번에는 여러 옵션을 주어 최근에 생성된 3개의 데이터만 조회해보자. (..

Mongoose 란 Mongoose 는 MongoDB 기반의 ODM(Object Data Mapping) Node.js 전용 라이브러리이다. ODM은 쉽게 말해 데이터베이스 객체지향 프로그래밍 언어 사이에 호환되지 않는 데이터를 변환해주는 프로그래밍 기법이다. 즉, MongoDB 에 있는 데이터를 우리의 어플리케이션에서 JavaScript 객체로 사용할 수 있도록 해준다. ​ ※ 프로젝트 생성 시 npm init 을 하면 package.json 이 생성된다. 프로젝트에 사용한 패키지들 # express : 웹 프레임워크 # body-parser : 데이터 처리 미들웨어 (req.body 를 통해 요청에 접근할 수 있게 해준다.) # mongoose : MongoDB 연동 라이브러리 프로젝트 구조 # mo..

npm과 yarn의 차이점 # npm : Node Package Manager라는 프로그램으로, 자바스크립트 라이브러리를 설치하고, 버전을 관리한다. npm은 node_modules라는 폴더에 라이브러리를 내려받아 저장하고, package.json이라는 파일에 설치된 라이브러리의 정보를 적어서 저장한다. (라이브러리 명세를 적는 이유는 라이브러리의 용량이 크기 때문에 명세를 통해서 다운받을 수 있도록 하기 위함) ​ # yarn : npm의 동작방식과 유사하고, 페이스북에서 npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리도구이다. ​ → 즉, npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용했는데, 이 특징은 편리하지만 안정성의 위험도가 증가한다. 반면 yarn ..

# 최근 웹 어플리케이션은 쿠키를 통해 직접 인증을 구현하지 않고, 쿠키는 사용자를 식별하는 용도로만 사용한다. 대신 실제 데이터는 session을 통해 서버 쪽에 안전하게 파일이나 데이터베이스의 형태로 저장한다. ​ # 여기서는 인증 라이브러리인 express를 사용해본다. (※ plugin과 middleware는 비슷한 개념) (※ express 는 프론트인 React 를 이용해서 백엔드 서버를 만들 수 있도록 해주는 프레임워크이다.) npm install -s express session // 여기서 -s는 "이 프로젝트는 express session 모듈에 의존하고 있다"는 의미 # 예제 소스 (express session github에서 공식적으로 제공하고 있는 샘플 소스) // nodejs/e..

# bash와 zsh의 차이 : Linux는 기본적으로 bash를 사용하지만, 다른 쉘 환경으로도 전환을 할 수가 있는데 그것이 zsh이다. 다만, zsh은 최신 버전으로 bash와 호환되지만 더 많은 기능을 가지고 있다. (예를 들어 기본으로 제공되는 맞춤법 수정, 향상된 명령줄 완성, 셸의 플러그인 역할을 하는 로드 가능한 모듈, 명령 대신 파일 이름 또는 명령 줄의 다른 항목을 별칭으로 지정할 수 있는 전역 별명 및 더 많은 테마 지원) ​ Oh My Zsh : 플러그인 및 zsh 용 테마와 같은 주요 확장 기능을 제공해준다. 이를 통해 사용자는 보다 개인화된 인터페이스를 사용하여 쉘에서 작업하고 다양한 도구, 편리한 기본 지원 시스템에 액세스할 수 있다 ​ # vi 마지막 행 모드 (Last Li..

# 내 프로젝트 메인의 기본 UI는 Material UI를 이용하여 만들었다. npm install @material-ui/core yarn add @material-ui/core package.json 파일의 dependencies에 @material-ui/core 모듈이 추가되었는지 확인한다. # Git : 버전관리 시스템 ​ # Node.js / NPM : Node.js 는 자바스크립트를 서버환경에서 실행하는 JavaScript Runtime인데, 이를 설치하면 NPM도 같이 설치된다. NPM은 Node.js로 만들어진 모듈들을 설치 및 버전관리를 할 수 있는 프로그램이다. ​ # MongoDB : 인기있는 NoSQL (Not Only SQL : 관계형 DB보다 덜 제한적인 일관성 모델을 이용하는 ..

# 만일 React 앱에서 에러가 발생한다면 아래와 같은 에러 페이지가 노출된다. 다만, 이 화면은 개발 환경에서만 보여지는 화면이고 실제 사용자에게 보여지는 화면을 보려면 우측 상단의 X 버튼을 클릭하면 된다. 아래 화면처럼 실제 사용자들에게는 빈 페이지만 노출되어 더욱 당황스럽게 할 것이다. Null Checking props 로 전달되는 user 가 존재하지 않는 경우를 분리하여 null 을 렌더링해주는 것이다. function User({ user }) { if (!user) { return null; } return ( ID: {user.id} Username: {user.username} ); } 이렇게 Null Checking 을 해주면 빈 페이지가 노출되는 것은 동일하지만, 에러는 발생하지..