양치는 했나요?

안녕하세요. 루루개발자입니다. 최근 Next.js 에서 렌더링이 진행되는 과정 및 원리 등에 대한 질문을 받았는데 제 스스로가 만족스러운 답변을 하지 못했습니다. 단순히 서버 사이드에서 한번 렌더링 하고 그 뒤에 클라이언트에서 다시 렌더링 되는 정도로만 알고 있었는데, 이번 기회에 한번 정리를 해보고자 합니다. Next.js 렌더링 과정 Next.js 의 렌더링 과정에 대해 정리해보겠습니다. Pre-Rendering Next.js 는 서버 사이드에서 먼저 페이지를 Pre-Rendering 합니다. 좀 더 정확히 말하면 서버 사이드에서 ReactDOMServer.renderToString 라는 함수를 사용하여 페이지에 대한 html 문서를 문자열로 가져오는 것이라고 할 수 있습니다. 해당 html 문서에는..

안녕하세요! 루루개발자입니다. 이번 글에서는 최근 Next.js 의 Typescript 환경에서 local, development, production 환경을 셋팅한 과정을 공유드리고자 합니다. 왜 local, development, production 환경을 셋팅해야 하나? 로컬에서 구동할 때, 개발 서버에서 구동할 때, 운영 서버에서 구동할 때 통신해야 할 API Base Url 이나 콜백 받아야할 Url 등을 다르게 처리되어야 하는 경우가 종종 발생하곤 합니다. 이럴 때 config 파일이 각 환경에 맞게 분리되어 있다면 원하는 config 파일로 구동하여 각 환경마다 다른 값으로 처리가 가능하기 때문에 local, development, production 환경을 셋팅하는 것은 중요합니다. .en..

안녕하세요. 루루개발자 입니다. 요즘 aws s3 로 파일을 업로드하여 서비스하는 플랫폼이 많아졌습니다. 대표적으로 노션이 그렇구요. 그래서 aws s3 로 파일을 업로드하는 샘플 코드 하나는 구현해 놓으면 나중에 필요할 때 편하게 갖다 쓰기 위해 nest.js 에서 aws s3 로 파일을 업로드 하는 샘플 프로젝트를 만들어보았습니다. nest.js 를 선택한 이유는 앞으로 만약 제가 백엔드 개발을 하게 된다면 실무에서 가장 사용해보고 싶은 프레임워크였기 때문입니다. 그래서 앞으로도 node.js 백엔드 기반의 프로젝트를 만들게 된다면 nest.js 로 만들 예정입니다. :) https://github.com/wisdomstar94/nestjs-aws-s3-upload GitHub - wisdomstar..

안녕하세요. 루루개발자 입니다. 이번 시간에는 css 에서 사용하는 길이 단위 종류에 대해서 알아보도록 하겠습니다. 절대 길이 (Absolute Lengths) 크기가 고정되어 있으며 정확히 그 크기로 표시됩니다. 요즘 여러 디바이스가 존재하면서 화면 크기가 매우 다양하기 때문에 절대 길이 단위는 사용하지 않는 것이 좋습니다. cm : centimeters 단위 고정 길이로 표시합니다. mm : millimeters 단위 고정 길이로 표시합니다. in : inches (1in = 96px = 2.54cm) 단위 고정 길이로 표시합니다. px : pixels (1px = 1/96th of 1in) 단위 고정 길이로 표시합니다. pt : points (1pt = 1/72 of 1in) 단위 고정 길이로 표시..

도트 감성

폼생폼사

안녕하세요. 루루개발자 입니다. 최근 안드로이드 디바이스의 절전모드로 인해 겪었던 이슈에 대해 공유드리고자 합니다. 이슈가 생긴 서비스의 플로우는 어떻게 되나? 어떤 서비스의 로그인 페이지가 있습니다. A 앱에서는 이 로그인 페이지를 웹뷰로 표시하고, 로그인 페이지에서 "로그인" 버튼을 클릭하면 B 앱이 위에 표시되며 로그인이 진행 된 후 B 앱이 종료되며 다시 A 앱의 웹뷰 화면으로 돌아가게 됩니다. 발생한 이슈는 무엇인가? 문제는, B앱이 호출된 직후 A앱 Webview 페이지의 javascript 에서 이후 로직이 진행되어야 하는데 해당 로직이 진행되지 않아 팝업창이 표시되지 않는 현상이 발생하였습니다. 다양한 케이스로 테스트를 해본 결과 원인은 절전모드에 있었습니다. 안드로이드 디바이스의 절전모드..