Til
TIL | AWS EC2 + NginX로 React app 배포
NginX란? 클라이언트로부터 요청을 받았을 때, 요청에 맞는 정적 파일(html, css 등)을 응답하는 HTTP Web Server를 제공하는 소프트웨어이다. EC2 환경에서 nginx 설치 및 설정 EC2 가상 환경으로 접속 ssh ubuntu@해당 인스턴스 아이피(퍼블릭) nginx 설치 sudo agt-get update sudo apg-get upgrade sudo apt-get install nginx nginx 구동 및 확인 sudo service nginx start: 웹서버 실행 sudo service nginx stop: 웹서버 실행 중지 sudo service nginx status: 웹서버 재시작 nginx 설정 파일 수정 server { listen 80; location / {..
TIL | NEXTjs Routing, Dynamic Routes
Routing, Dynamic Routes in NEXT NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다. pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다. Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다. getStaticPaths export async function getStaticPaths() { return { paths: [{ params: { id: 1 } }, { params: { id: 2 } }], // array 형태 fallback: true, // boolean 형태 }; } 동적 라우팅 기능을 구현하기 위해서 NEXT.js..
TIL | NEXTjs Pre-rendering
Pre-rendering NEXT-js를 사용하게 되면 기본적으로 모든 페이지마다 Pre-rendering을 하게 된다. CRA를 통해 구현한 SPA의 Client-side Rendering과 다르게 렌더링의 주체가 client가 아닌 server이며, 이는 성능 개선 및 보다 향샹된 SEO를 제공한다. (비교 글은 여기 작성해놓았다.) Pre-rendering은 정적 요소가 먼저 그려진 후 사용자에게 보여지며, JS 로딩 후 정적 문서를 데이터 변경 및 사용자에게 반응할 수 있는 동적 형태로 변환하는 과정이 이루어진다. (이를 hydration이라고 한다.) NEXT는 두 가지 형태의 Pre-rendering가 존재하는데, 이는 다음과 같다. Static Generation DOM 요소들이 build가..
TIL | Index signature
Index signature 이슈 Nextjs, tailwind를 통해 간단한 클론을 해보던 도중, 아래와 같은 이슈가 발생하였다. 위 사진은 fetch가 속한 getServerSideProps와 데이터를 받아올 쿼리문이 작성된 json 파일을 통해 데이터를 받아온 후 Home컴포넌트에 전달하는 로직이다. 그런데 requests[genre] 부분에서 지속적으로 에러가 발생하였다. 위 사진에는 보이지 않지만, 헤더의 아이템을 클릭했을 때 동적으로 변하는 쿼리값에 따라서 받아오는 데이터도 변했어야 하므로 변수로 접근해야만 해당 기능이 구현 가능하기 때문에 확인해보니 다음과 같은 방법이 필요했다. 해결 위와 같은 에러가 발생한 이유는, 바로 index signature을 지정하지 않았기 때문에다. 즉 Java..
TIL | Interface VS Type
Interface VS Type Alias Interface 인스턴스를 생성하는 class 처럼, 특정한 규칙을 담고 있는 것을 구현할 때 사용하는 것이 적절하다. 1. 기존에 존재하는 인터페이스의 프로퍼티 확장 interface Person { name: string; age: number; } // interface Person { gender: string; } // const yongmin: Person = { name: "yongmin", age: 29, gender: "male", }; 기존 존재하던 인터페이스에 새로운 프로퍼티를 추가할 수 있다. 동일한 이름의 인터페이스에 추가하고자 하는 프로퍼티 값만 적어주면 된다. (공식문서에서는 동일한 인터페이스가 존재할 경우, 해당 필드값들을 merg..
TIL | Generics
Generics(제네릭) 제네릭은 재사용성이 높은 컴포넌트를 만들 때 자주 활용된다. 즉, 특정 타입에 고정되지 않고 여러 타입에서 동작할 수 있는 컴포넌트를 생성하는데 사용된다. 마치 타입을 함수의 변수처럼 유동적으로 지정하여 사용하는 것을 뜻한다. 제네릭은 선언 시점이 아닌, 생성 시점에 타입을 명시하여 다양한 타입의 사용을 가능케 한다. 제네릭을 사용하는 이유 제네릭을 사용하지 않을 경우 const getValue1 = (value: number): number => { return value; }; console.log(getValue1(15)); // 15 // const getValue2 = (value: string): string => { return value; }; console.log..