Miracle Morning, LHWN

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 ..

대부분의 시스템에서는 회원관리를 하고 있고, 이에 따라 인증(Authentication) 과 인가(Authorization) 에 대한 처리를 해주어야 한다. Spring 에서는 Spring Security 라는 별도의 프레임워크에서 관련된 기능을 제공하고 있다. Spring Security Spring Security 는 Spring 기반의 애플리케이션의 보안 (인증과 권한, 인가 등) 을 담당하는 스프링 하위 프레임워크이다. Spring Security 는 '인증'과 '권한'에 대한 부분을 Filter 흐름에 따라 처리하고 있다. Filter 는 Dispatcher Servlet 으로 가기 전에 적용되므로 가장 먼저 URL 의 요청을 받지만, Interceptor 는 Dispatcher 와 Contro..

# 최근 웹 어플리케이션은 쿠키를 통해 직접 인증을 구현하지 않고, 쿠키는 사용자를 식별하는 용도로만 사용한다. 대신 실제 데이터는 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 을 해주면 빈 페이지가 노출되는 것은 동일하지만, 에러는 발생하지..

# LifeCycle Method : 컴포넌트가 브라우저에 나타나고, 업데이트되고, 사라질 때, 에러가 났을 때 호출되는 메서드들 → 클래스형 컴포넌트에서만 사용할 수 있다. (useEffect 랑 비슷) # 마운트 될 때의 생명주기 - constructor : 컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 - getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용 - render : 컴포넌트를 렌더링하는 메서드 - componentDidMount : 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드. 호출되는 시점에는 컴포넌트가 이미 화면에 나타난 상태 ​ # 업데이트 생명주기 - getDerivedStateF..