코린이의 개발 일지

Next.js란? 서버사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능하게 하는 Node.js위에서 빌드된 오픈소스 웹 개발 프레임워크 SSR을 이해해보자 우선 SSR을 이해해보자 SSR이란? 서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식 SSR과 CSR의 차이점 리액트는 CSR 기반이고 Next는 SSR 기반이라는건 알겠는데, 그럼 정확히 동작이 어떤식으로 흘러간다는 걸까? 아래의 그림을 보면 좀 더 명확히 이해가 가능하다. 가장 주요한 차이점은 SSR의 경우 브라우저에 대한 서버의 응답이 렌더링할 준비가 된 페이지이고, CSR은 자바스크립트만 연결된 거의 빈 페이지를 응답으로 받는다. 즉 SSR은 자바스크립트가 다운로드되고 실행될..

CI/CD란? 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법이다. CI는 개발자를 위한 자동화 프로세스인 지속적인 통합 CD는 지속적인 서비스 제공 및 지속적인 배포를 의미 → 두개다 두 파이프라인의 추가 단계에 대한 자동화를 뜻한다. github Action이란? Github에서 제공하는 workflow를 자동화 하도록 도와주는 도구이다. 테스트, 빌드, 배포 등의 작업 자동화 사용 방법 이번 프로젝트에서 api서버랑 프로그램 서버 포트번호를 다르게 해서 생성한 ncloud 서버 ACG에 port 번호 새로 추가해줬다. (서버하나에 포트번호 여러개 쓸 수 있다. 참고해두자) 사용할 레포에서 새 workflow 생성 ⇒ 본인 상황에 맞춰서 선택하면 되는거 같다..

window.addeventListener를 써보자 맨처음에 이 방법으로 keyDown이벤트를 발생시켜 보았다. 리액트스럽게 훅으로만 대부분을 해결해서 코드를 짜는게 목표였지만 onKeyDown으로 도저히 작동을 안해서 (내가 잘못쓰고 있는 것였다.) 그냥 직접 이벤트 리스너를 붙여봤다. (리액트에서 권유하는 방법은 아니니 안쓰는 편이 좋다) 근데 문제가 발생했다. 이벤트 리스너를 렌더링 할 때마다 달아주면 리스너가 너무 많이 달리니까 useEffect안에 넣어뒀는데 그것도 문제였다. 리스너는 딱 한번만 호출되어야하는데 useEffect가 여러번 호출되면서 이벤트 리스너가 너무 많이 붙여지는게 문제였다. 해결한 코드는 다음과 같다. import React, { RefObject, useRef, useEf..

OAuth 서비스 제공자 (깃허브, 페이스북 등)가 신뢰할 수 없는 타 어플리케이션에게 사용자의 아이디와 패스워드를 제공하지 않더라도 사용자의 특정 정보에 접근하거나 작업을 처리할 수 있도록 하는 방법이자 표준. 웹사이트에서 SNS계정으로 로그인 하는게 대표적인 예이다. 작은 서비스에서 직접 비밀번호를 관리해야 하거나 하는 번거로운 부분을 떠안고 가지 않고 부담을 대기업에게 넘길 수 있다. JSW(Json web Token)와는 다르게 토큰 자체는 큰 의미를 가지고 있지 않다. 즉 토큰 자체가 데이터를 포함하고 있지는 않다. (권한을 확인하고 서비스 제공자에게 데이터를 요청하는 용도) JSW 란? 유저를 인증하고 식별하기 위한 토큰 기반 인증 토큰 자체에 사용자의 권한 정보나 서비스를 사용하기 위한 정보..