- NextJS 에는 다른 frontend 프레임워크들 처럼 개발시점의 strict 모드에서 코드가 2번 실행되는 문제 아닌 문제가 있습니다.클라이언트 사이드의 생명주기에 따라 1번만 실행되는 것을 가정하고 코드를 작성한 순간 오동작으로 인해 버그처럼 작용하는 경우가 있죠. 대표적인 예로는, 클라이언트 사이드 랜더링 직후 useEffect 에서 서버측에 데이터를 요청하려고 할 때에,useEffect 가 한번 실행되었다가 바로 취소되어서 오동작을 경험하는 경우가 있습니다. 물론, 배포모드로 실행하면 문제가 없어지지만,개발시에 테스트를 위해 일일이 개발모드로 빌드 및 실행을 하는 것은 번거로운 일이므로 이를 패턴화 시켰습니다. - useRef 및 개발 모드 탐지를 통해 처리가 가능합니다.페이지 코드에서,co..

- 백엔드에서 처리해야할 가장 기본적인 공격인 브루트 포스 공격을 방어하는 기본적인 방식에 대해 알아보겠습니다.브루트포스는 비밀번호 무작위 대입 방식입니다.말 그대로 될 때까지 시도해보는 보안 탈취 공격으로, 회원 비밀번호 입력, 인증번호 입력 등 비밀키를 이용한 보안 api 에 있어 가장 단순하면서도 가장 무서운 공격 방식이죠.서버측에서 이에 대항하기 위한 단순하면서 가장 효율적인 방식을 알아보겠습니다. - 위에서 소개한대로, 브루트포스 공격은 모든 가능성을 시험해보는 공격입니다.비밀번호를 알아내기 위해 매크로를 만들어 몇번이고 시도하는 것이죠. 이러한 브루트포스가 뭔지 알고있다면, 프로그래밍을 아는 분이라면 대응 방식을 마련하는 것은 어렵지 않을 것입니다.가장 대표적인 것으로는, 일정 시간 내의 연속..

- 이번 포스팅으로는 서비스 구현시 이미지 업로드를 어떻게 구현할 지에 대해 설명하겠습니다. - 미디어 리소스는 sparse 한 데이터입니다.텍스트나 HTML 과 같이 뜻이 정제되어 함축되어 있는 의미 데이터와는 달리, 목적에 비해 용량이 큰 데이터라는 뜻입니다.이러한 큰 데이터를 다룰 때, 서버 입장에서는 비용을 고려하지 않을 수 없습니다.저장소 구축 비용과 관리비용, 데이터 전송 비용이 대표적입니다. 저장소의 구축은 즉, 데이터를 저장할 스토리지 디바이스의 구입 및 설치 비용을 뜻합니다.디바이스는 고장 확률이 있기에 백업도 고려해야 하므로 적게 잡아도 2배의 비용이 들죠.이러한 초기 비용을 잡기 위하여 많이 사용하는 것이 AWS S3 와 같은 스토리지 클라우드 서비스입니다. 제가 주로 사용하는 것이 ..

- 이번 포스팅에서는 Springboot 에서 Redis 캐싱을 적용하는 매우 간단하고 깔끔한 방법을 알아보겠습니다.먼저 캐싱이란, 조회하려는 값을 일시적으로 저장해두고 활용함으로써 연산량을 줄이는 기법입니다. 서버사이드 프로그래밍에서 매우 중요한 기법으로, 그 중요성에 대해 먼저 알아봅시다. - 캐싱의 중요성1. 서버-클라이언트 아키텍쳐의 특징상,서버는 불특정 N개의 클라이언트의 요청을 동시에 받을 경우가 있습니다.모든 요청에 동일한 작업을 수행하는 것은 비효율적일 수 있습니다. 2. 특히 DB 와 같은 데이터에 견고하게 저장된 데이터를 조회하여 그 정보를 반환하는 서비스의 경우, 데이터 접근에 들어가는 비용이 매우 크며 DBMS 에 부담을 줍니다.N 개의 클라이언트의 요청을 받는 M 개의 서버의 요청..

- Swagger API 는 API Document 를 자동으로 만들어주어 협업에 도움을 주는 것 뿐만 아니라,Postman 과 같은 별도의 외부 테스트 툴을 사용하지 않아도 API 문서에서 바로 API 를 테스트 하게 해주고,코드상으로는 별도의 주석을 남길 필요가 없이 API 관리가 가능하기에 굉장히 유용한 기술입니다. 이번 포스팅에서는 Springboot 에서 Swagger 를 사용할 때에 어떤식으로 활용하는 것이 좋은지에 대한 간략한 팁을 짧게 소개드리겠습니다. - Swagger Controller 기본 형태import com.raillylinker.services.RootServiceimport io.swagger.v3.oas.annotations.Operationimport io.swagger...

- 이번 포스팅에서는 ReactJS 에서 페이지 이동시 화면 전환 애니메이션을 적용하는 방법에 대해 설명하겠습니다. (진행)- 바로 설정부터 시작하겠습니다.>> npm install framer-motion명령어로 페이지 화면 전환을 지원하는 라이브러리를 설치합니다. 저는 현재 버전으로, "dependencies": { "framer-motion": "^12.23.24", "i18next": "^25.6.1", "react": "^19.1.1", "react-dom": "^19.1.1", "react-i18next": "^16.2.4", "react-router-dom": "^7.9.5" }, 위와 같이 12.23.24 버전을 사용중입니다. - react-router-..

(상황 설명)- NextJS 에서 useEffect 를 사용하여 클라이언트단에서 페이지가 띄워지는 시점에 동작하는 코드를 작성.일반적인 상황에서는 동작을 잘 하지만 새 탭을 열어서 페이지를 요청한 경우 useEffect 가 실행되지 않는 문제가 발생 - 브라우저가 처음 실행된 상황에서는 문제가 없음.일단 해당 페이지로 이동하고, 새 탭을 띄워서 다른 탭으로 해당 사이트에 이동했을 때에 문제가 발생 (실험 진행)- 기존 프로젝트가 여러 라이브러리를 사용하고 있으므로 라이브러리 사용의 충돌 때문일 경우와 NextJS 고유의 특성일 가능성, 그리고 문제 발생 방식에 따라 브라우저단에서 페이지를 캐싱하는 것임을 가정. - NextJS 관련 특성에 대하여 이러한 현상은 인터넷 및 ChatGPT 에도 결과가 나오지..

- 이번 포스팅에서는 NextJS 의 커스텀 에러 페이지를 처리하는 방식에 대해 알아보겠습니다. - NextJS 에서는 기본적으로 제공하는 에러 페이지가 존재합니다.기본적으로 가장 흔하게 발생하는 에러인,요청한 주소에 대한 반환값이 없을 때에 대한 404 Not Found 에러와,서버측 실행 로직이 잘못되어 에러가 났다는 것을 뜻하는 500 에러입니다. 기본 NextJS 에서 404 에러가 발생하면, 위와 같이 기본 에러 페이지가 나옵니다. 제법 깔끔해서 그대로 사용해도 무방하지만 서비스에 맞는 커스텀 에러 페이지를 만드는 방법을 아래에 정리합니다. - 기본적인 에러 코드 페이지 처리는,layout.tsx 가 위치한 루트 경로에 미리 지정된 이름의 에러 페이지를 작성하기만 하면 됩니다. 두 종류이며,no..

- PWA(Progressive Web App) 는 웹 사이트를 마치 앱처럼 사용할 수 있게 해주는 기술입니다. 이것이 설정된 사이트는 위에서 보이는대로 앱에서 열기 버튼이 나오고,이것을 누르면, 이처럼 PWA 애플리케이션 창이 떠서 브라우저의 웹사이트가 아니라 마치 OS 의 애플리케이션처럼 사용할 수 있게 되죠.대다수의 사이트에서는 그리 필요한 기능은 아니지만, 애플리케이션처럼 띄워두고 사용하는데에 적합한 종류의 사이트라면 UX 에 좋은 옵션을 제공하는 기술이며, nextjs 에서 기본 제공해주는 기술이므로 처음부터 이를 고려하여 처리하는 것이 나쁘지 않죠. - nextJS 에서 PWA 를 사용하기 위해서는 manifest.json 파일이 필요합니다.http://localhost/manifest.j..

- 이번 포스팅에서는 NextJS 에서 멀티 프로필로 환경 설정을 하는 처리 방식에 대해 알아보겠습니다.카카로 로그인을 구현할 때에 필요한 카카오 API Key, 백엔드 서버와 통신할 때 필요한 보안키, 그외 설정값을 어떤식으로 처리하는 것이 좋은지에 대해 정리합니다. (환경변수 분리의 중요성)- 백엔드 프론트엔드 할 것 없이 환경변수는 매우 중요한 정보입니다.탈취되거나 노출되면 위험한 종류의 정보도 있기에, 이를 그대로 Github 와 같은 VCS 에 올려서 누구나 접근이 가능하게 두는 것은 위험한 일이며, 같은 팀 내에서도 권한에 따라 숨겨야 하는 정보도 있죠. - 보안적 측면에서의 중요성 뿐만 아니라, 환경변수를 분리하는 것은 클린 코딩의 원칙에도 중요한 작업입니다.백엔드 서버로 요청을 보낼 때, ..