Frorong

[JS] .cjs, .mjs 차이가 무엇인가요?  프로젝트를 진행하다가 이런 확장자의 파일을 볼 수 있었을 것이다. .mjs나 .cjs 말이다. 그냥 js면 js지 mjs랑 cjs는 무엇인가? 오늘은 이 의문에 대한 답을 찾아볼 것이다. 사실 이 문제는 모듈에 대해서 알아볼 필요가 있다. module자바스크립트는 초기에는 큰 파일을 필요로 하지 않았다. 자바스크립트의 역할은 웹 사이트에서 약간의 상호작용을 도와주는 정도였다. 하지만 웹의 규모가 커짐에 따라 자바스크립트의 양은 급속도로 늘어났다. 심지어 자바스크립트가 영향을 주는 범위는 브라우저를 벗어나 nodejs 등으로 확산되었다. 때문에 자바스크립트 파일을 필요에 따라 불러와 사용할 수 있는 니즈가 있었고, 현재는 모듈 기능을 사용하게 해주는 많은 ..

[Docker] NextJS 배포를 위한 도커 컨테이너화. 먼저 도커란 무엇인가?Docker란?도커는 컨테이너 기반 가상화 플랫폼이다. 소프트웨어를 컨테이너라는 단위로 패키징하여 빠르게, 어디서든 개발하고 배포할 수 있다.  도커는 서비스와 운영체제 간의 호환성을 해결하기 위해 등장하였다. 예를 들어 내 개발 환경이 Window이고, 배포 서버 환경이 Linux여서 문제가 발생한다면? 머리 아플 것이다. 도커는 다른 운영체제에서도 같은 환경을 구성할 수 있도록 해주기 때문에 이런 문제를 해결할 수 있다. 도커를 설치하고 원하는 환경을 지정해준다. 도커는 지정된 파일을 보고 파일에 명시된 구성으로 가상의 컨테이너를 형성한다. 한 개의 서버가 여러 개의 컨테이너들을 보유할 수 있고, 이 컨테이너들은 각각 독..

[Next] 인증되지 않은 사용자 OAuth 로그인 이후 이전 페이지로 리다이렉트 구현. NextJS App Router 배경 최근 gsm-networking(우리 팀에서 만든 서비스)에 게시판 기능이 릴리스 되었다. 다양한 주제의 게시글을 작성하고 서로 이야기할 수 있는 기능이다. 이 게시판 기능의 트래픽을 만들기 위해 단체 채팅방에 내가 작성한 글의 링크를 공유했다. 여기서 문제를 확인할 수 있었다. 인증되어있지 않은 유저가 링크를 통해 접속한다면, server side fetching 이후 이런 화면을 보게 된다. 로그인을 진행한다면 메인 페이지로 이동된다. 그럼 유저는 원래 목적인 공유된 게시글을 바로 확인할 수 없다. 로그인 이후 다시 링크를 통해 접속하거나, 메인 페이지부터 원하는 게시글까지 ..

Server Side Rendering이 무엇일까? server side rendering을 이해하기 위해서는 먼저, client side rendering에 대한 이해가 필요하다. 브라우저 렌더링 관련 참고 게시글. 왜 translate를 사용해야 할까? 브라우저 렌더링 과정! 우리가 css 속성으로 애니메이션을 구현할 때에는 translate를 사용하라고 한다. 왜 때문일까? left나 right 속성으로 위치를 조정할 수도 있을 텐데 말이다. 그걸 이해하기 위해선 먼저 브라우저 렌더 frorong.tistory.com Client Side Rendering client side rendering은 클라이언트 즉, 브라우저 측에서 렌더링을 진행한다는 것이다. HTML, CSS, JS파일이 클라이언트로..