끄적이는 개발노트

이번 포스트에서는 Next.js에 대해 간단히 알아본다. Next.js는 React.js의 서버사이드 렌더링을 쉽게 구현할 수 있게 도와주는 프레임워크다. 기존의 React.js는 SPA(Single Page Application)으로, url이 달라져도 새로운 html을 다시 만들지 않아 화면의 리로딩이 줄어든다. 또한, CSR(Client Side Rendering) 방식으로 작동하여, 서버에서는 비어있는 html을 응답하고 클라이언트 쪽에서 화면을 채운다. 이 때, 발생하는 문제점이, 앱의 규모가 커지면 클라이언트 쪽에서 html을 채워주는 내용이 많아져, 첫 로딩이 굉장히 느려진다. 또한, html을 기반으로 요소를 찾는 검색엔진에서 비어있는 html 파일로 인해 SEO(Search Engine ..

아직 블로그 포스트로 다루지는 않았지만, Next.js에서는 api를 통한 서버사이드 렌더링이 가능하다. 이는, 생산성이 높고, React.js를 다룰 줄 안다면 Next.js에 대해 좀만 학습한다면 쉽게 서버를 개발할 수 있는 장점이 있다. 하지만, 규모가 큰 프로젝트일수록 프론트엔드와 백엔드 개발을 구분지어 개발할 필요가 있어, Next-Nest를 연동한 서버구축을 실습하고 다뤄보고자 한다. Next-Nest 포스트에서는 Next.js와 NestJS를 이용한 서버를 구축한다. 일종의 프론트엔드와 백엔드 개발을 나누어 각각 최적화된 프레임워크를 사용하여 서버를 구축해본다. 프론트엔트 : Next.js 백엔드 : NestJS 1. 필수 패키지 npm 설치 $> sudo apt-get install npm..

이번 포스트에서는 이전에 배운 타입스크립트 개념으로 블록체인을 만드는 실습을 해본다. 다만, 지금은 블록체인이 무엇인지 구성요소에 대해서 알지 못하는 상태이다. 따라서, 강의를 학습하며, 타입스크립트가 프로젝트에 어떻게 사용되는지에 대해 초점을 맞춘다. 이번에 만들 간단한 블록체인 프로젝트 역시 노마드코더의 강의영상을 참고하여 학습하며 만들었다. 노마드코더의 'Typescript로 블록체인 만들기' 강의영상 1. watch 모드 설정 tsc-watch npm을 개발모드로 설치한다. $> npm i tsc-watch --dev tsconfig.json 파일을 다음과 같이 수정한다. // tsconfig.json { "compilerOptions": { "module": "commonjs", "target"..

이번 포스트에서는 타입스크립트의 class에 대해 알아본다. // index.ts class Human { public name: string; public age: number; public gender: string; constructor(name: string, age: number, gender: string){ this.name = name; this.age = age; this.gender =gender; } } const lynn = new Human("Lynn", 18, "female"); const sayHi = (person: Human): string => { return `Hello ${person.name}, you are ${person.age}, you are a ${perso..

이번 포스트에서는 interface에 대해 알아본다. 대부분의 경우, 데이터를 Object 형태로 넘겨준다. 이를 사용하기 위해서 사용되는 개념이 interface로 완성된 예제 코드는 아래와 같다. // index.ts interface Human { name: string; age: number; gender: string; } const person = { name: "HBC", age: 26, gender: "male" } const sayHi = (person: Human): string => { return `Hello ${person.name}, you are ${person.age}, you are a ${person.gender}`; }; console.log(sayHi(person));..

이번 포스트에서는 타입에 대해 살펴본다. 1. 간단 실행 우선, 실제로 타입스크립트를 실행했을 때 자바스크립트와의 차이점을 알아본다. index.ts의 내용을 다음과 같이 변경한다. // index.ts const name = "HBC", age = 26, gender = "male"; const sayHi = (name, age, gender) => { console.log(`Hello ${name}, you are ${age}, you are a ${gender}`); }; sayHi(name, age, gender); export {}; 위 코드를 자바스크립트로 실행한다 생각해보면, 자바스크립트에서는 name, age, gender 중 하나가 빠진 채로 sayHi를 실행해도 undefined로 내용..