프로그래밍의 언어의 어휘 구조는 그 언어로 프로그램을 작성할 때 지켜야 할 기본적인 규칙의 집합이다.대소문자 구분, 스페이스, 줄바꿈주석리터럴식별자와 예약어유니코드선택 사항인 세미콜론자바스크립트는 대소문자를 구별한다. 키워드, 변수, 함수 이름, 기타 식별자를 쓸 때

뷰 라우터는 Vue.js를 이용해서 SPA를 구현할 때 사용하는 Vue.js의 공식 라우터이다.라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치를 말합니다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤

eslintrc.js개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤수있게 도와주는 라이브러리 타입스크립트를 쓰는 가이드 라 인 제시, 문법에 오류가 나면 알려주는 역할 등등prettierrc주로 코드 형식을 맞추는데 사용한다. 작은따옴표(')를 사용 할지 큰 따옴표

next.js를 이용해서 CRUD 기능을 만들어 볼 예정이다.Nest (NestJS)는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구 축하기위한 프레임 워크입니다. 프로그레시브 JavaScript를 사용하고 TypeScript로 빌드되고 완벽하게 지원

하나의 페이지에서 다른 페이지로 이동하려면 반드시 프론트 서버에 request를 보내고 원하는 페이징r reponse를 받아야 한다.MPA는 가장 전통적인 방식이다. MPA의 M은 Multiple이며 모든 페이지는 각각의 html로 이루어진다. 페이지가 이동할 때마다

타입스크립트를 쓰면 자바스크립트에 없는 문법도 사용이 가능하다. 객체지향 언어에서 제공하는 Public, private, static, protected 와 같은 키워드가 사용이 가능하다.타입스크립트는 class 안에서 public 키워드를 사용가능하다.원하는 속성 왼

함수에 붙는 return type으로 사용이 가능하다.never 타입은 특이한 조건이 있다.절대 return을 하지 않아야한다.함수 실행이 끝나지 않아야한다. (endpoint가 없어야 함)이런 함수들에 never를 붙일 수 없다. 조건 1번은 만족하지만 2번은 만족하

자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미한다.즉, 자원의 표현에 의한 상태 전달: 자원의 표현 \- 자원 : 해당 소프트웨어가 관리하는 모든 것자원의 표현 : 그 자원을 표현하기 위한 이름: 상태(정보) 전달 \- 데이터가 요청되어지

함수에 어떤 파라미터가 몇개 들어올지 미리 정의가 불가능한 경우가 있다.3개일지 4개일지 아니면 100개일지 모른다면 점 3개 ... rest 파라미터로 만들어주면 된다.함수 파라미터 작명할 때 점 3개를 붙여주면 여기엔 파라미터가 잔뜩 들어올 수 있다~ 라고 정의가

Cross-Origin Resource Sharing의 줄임말로, 교차-출처 리소스 공유라고 한다. 간단하게 말해 다른 출처라고 한다.브라우저에서는 보안상의 이유로 다른 도메인에서 허용하지 않은 요청에 대하여 제한하고 있다. 일반적으로 다른 도메인 상에 대한 데이터 요

일반적인 클라이언트단의 프로젝트는 netlify와 같은 사이트를 이용해서 배포가 간단하게 진행이 가능하지만 서버의 배포는 다른 서비스를 이용해야 한다.오늘은 Heroku를 이용한 서버 배포를 해볼 예정이다.Heroku는 원래 무료 서비스를 지원하다가 이제 무료 서비스가

리덕스 툴킷은 리덕스를 보다 작은 코드양으로 간편하게 사용할 수 있는 방법이다.리덕스 툴킷은 리덕스를 사용하다보면 redux devtool, immer, thunk 등 여러가지 라이브러리를 추가적으로 설치해야 하지만, redux-toolkit 내부에 이미 설치가 되어

useOnClickOutside 훅은 ref 의 속성이 걸린 곳 이외에 공간에서 클릭과 같은 이벤트가 일어 났을 때 이벤트를 처리 해줄 수 있는 훅이다.모달창을 띄우는 span을 클릭했을 때는 모달창이 뜨고 그 이외의 다큐먼트를 클릭했을 때는 모달창이 닫히는 예제이다.

공식문서 참고React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 어플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있다.React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자와

프로젝트를 하다보면 api키들을 사용하는 일이 있을 것인데 이런 개인정보와 같은 key들은 다른사람들에게 공유가 되어서는 안되고, 깃헙 같은 코드 저장소에도 숨겨서 관리해야 한다.config 폴더 생성key들을 관리 할 config 폴더를 생성한다. config 폴더에

개발을 하다보면 늘어나는 api 규칙들을 하나의 파일에서 관리하게 되면 유지보수에도 불합리 하기 때문에 express.Router 를 이용해서 폴더별로 관리해준다.express 공식문서(http://expressjs.com/en/guide/routing.htm

collection이 많아질수록 서버의 index.js 파일의 코드 양이 많아져서 유지보수에 불합리 하다.이럴때 폴더를 분리하여 연결 해주는 Express.Router를 사용해보자server > Router > post.jsRouter 폴더를 하나 생성한 뒤 자신이 작

남들이 만들어둔 css를 간단하게 import해서 사용할 수 있는 bootstrap 반응형 까지도 작업이 되어있는 장점이 있다.npm i react-bootstrap리액트 부트스트랩을 사용하기전 index.html에 Link로 연결해주는 작업public > index.

Collections에는 카테고리별로 Collection을 생성할 수 있다. 지금 해볼거는 커뮤니티 글 정보인 post collection을 생성 할 예정이다.Post.jsserver -> index.js이후 3000번 포트 클라이언트에서 보낸 데이터가 잘 들어갔는지