분류 전체보기
TIL | nodejs 설치 정리
Ubuntu Node.js 및 npm 설치 프로젝트를 진행하면서, 작업을 위해 해당 인스턴스에서 매번 node.js를 설치해야 했었다. 때문에 매번 자료들을 찾아보고 설치하는 것이 아닌, 나를 위해서 기록용으로 node의 LTS버전 설치 과정을 정리해봤다. (전에 NVM으로 설치를 해봤는데, 더 헷갈리는 느낌이 들어서 내가 원하는 버전만을 설치하는 방법을 더 선호한다. ) package update & upgrade sudo apt-get update sudo apt-get upgrade update 설치된 패키지들의 최신 버전 체크 upgrade: update로 확인된 최신 버전들의 패키지 업그레이드 apt(Advanced Packaging Tool) 와 apt-get의 차이점이 갑자기 궁금해서 찾아본..
TIL | Docker 맛보기
Docker란? host OS에 컨테이너를 설치하여, 가상 머신처럼 독립된 실행환경을 제공 독립된 실행 환경은 또다른 OS를 설치하여 환경을 구성하는 것이 아닌, App을 실행하는데 필요한 소스, 파일, 라이브러리 존재 Docker 설치 Install docker Engin on Ubuntu를 참고하여 설치하도록 하자. docker 구버전이 있다면 삭제하기 sudo apt-get remove docker docker-engine docker.io containerd runc host에 docker 설치 전, docker repository set-up하기 sudo apt-get update # sudo apt-get install \ apt-transport-https \ ca-certificates \..
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..