토이프로젝트/개인 블로그 (5) 썸네일형 리스트형 tsconfig.json 설정, eslint, prettier 패키지 설치(2021.01.28) 안녕하세요! 새콤하고달콤입니다. 오늘은 tsconfig.json 파일과 eslint 설정을 진행하려고 합니다. * tsconfig.json - 자바스크립트는 동적인 언어 즉, 런타임 환경에서 자료형이 변경되기 때문에 자료형 자체의 체크가 굉장히 어렵다는 단점이 있는데 이러한 점을 보완하기 위해서 typescript를 사용합니다. - tsconfig.json은 typescript로 짜여진 코드를 javascript로 변환해주어야 하는데 변환하기 위한 설정을 관리하는 곳 - compilerOptions : - allowJs : 자바스크립트 파일 컴파일 허용 여부 - checkJs : .js 파일의 오류 검사 여부 - noImplicitAny : 'any' 타입으로 구현된 표현식 혹은 정의 에러처리 여부 { .. backend - sequelize 선언, model 설정, frontend - prettier 설정(2021.01.27) * sequelize란? - Node.js에서 가장 많이 사용하고 있는 ORM입니다. - Promise 패턴 기반의 Node.js ORM입니다. Chaining을 통해서 callback hell에서 탈출할 수 있습니다. - async await의 깔끔한 코드를 작성할 수 있습니다. * ORM란? - Object Relational Mapping(객체-관계 매핑)의 약자입니다. 자동으로 DBMS의 데이터를 객체 형태로 변환해줘서 더 객체 지향적인 코드를 생산할 수 있도록 도와줍니다. 이를 통해 개발자는 데이터를 가지고 어떤 작업을 할지에만 집중할 수 있습니다. 또한 손쉽게 DBMS를 변경할 수 있어서 제품이 높은 이식성을 가질 수 있게 됩니다. // db/index.js - sequelize 모듈을 가져옵.. koa 관련 패키지 설치 및 apollo server 패키지 설치 (2021.01.25) 안녕하세요! 새콤하고달콤입니다. 오늘은 간단하게 koa와 관련된 패키지, apollo server와 관련된 패키지를 설치해보았습니다. 먼저 프론트엔드는 next와 apollo server를 연동하기 위한 패키지 및 graphql 관련 패키지를 설치하였습니다. 백엔드는 koa와 관련된 패키지 및 cors 패키지를 설치하였습니다. 1. 프론트엔드 "@apollo/react-hooks": "^4.0.0", "apollo-boost": "^0.4.9", "apollo-client": "^2.6.10", "graphql": "^15.4.0", "next-with-apollo": "^5.1.0", - @apollo/react-hooks : apollo를 hooks 문법으로 사용하기 위해서 설치합니다. - graph.. 개인 블로그 만들기 - 2021.01.21 (gitignore, GraphQL, .env, mongodb) 프론트엔드 1. FrontEnd 디렉터리에 .next 디렉터리를 .gitignore 처리를 해주었습니다. node_modules .next 2. GraphQL에 대한 학습 - API 질의어, 페이스북에서 개발한 언어인데, REST API를 대체해 사용할 수 있습니다. - 기존의 REST API와는 다르게 클라이언트에서 서버로 원하는 데이터를 쿼리로 작성해 원하는 데이터만 가져올 수 있습니다. - 오버패칭(OverFetching)의 최소화 : 오버패칭(OverFetching)은 당장 필요한 데이터 외에 필요없는 데이터들까지 서버에서 받아오는 것을 뜻하는데 GraphQL은 클라이언트에서 원하는 데이터만 쿼리로 작성해 서버에서 가져올 수 있습니다. - 언더패칭(UnderFetching)의 최소화 : 한 번에 .. next.js 사용하기 안녕하세요! 새콤하고달콤입니다. 오늘은 next.js를 설치해보고 간단하게 실습하는 과정을 진행해보도록 하겠습니다. * next.js 1. universal 리액트 어플리케이션의 서버렌더링을 쉽게 구현할 수 있게 도와주는 프로그램입니다. 2. universal이란, 어디서든 작동한다는 것을 말합니다. 서버에서 미리 사전 작업을 해놓고, 클라이언트에게 던져줘서, 클라이언트가 좀 더 작업을 하게하고, 양쪽에서 코드와 뷰를 공유합니다. 3. SPA의 경우, 초기 렌더링할 때, 렌더링 비용이 많이 발생하기 때문에 좋지 못한 성능을 가져올 경우가 있습니다. 이를 해결하기 위해서 초기에 서버사이드 렌더링을 진행함으로서, 초기 렌더링 문제를 해결할 수 있습니다. * 환경 설정 - 다음의 패키지를 설치합니다. yarn.. 이전 1 다음
