뭉균의 개발일지

🚪 들어가며  프로젝트를 진행하며 위의 사진과 같이 서버로부터 넘겨받은 주소 데이터를 지도로 구현해야하는 업무를 접했습니다. 예를 들어, address: "부산광역시 부산진구 중앙대로" 와 같은 형식의 데이터를 받으면 이 주소를 이용하여 해당 주소지의 지도를 렌더링하는 것이었습니다. 지도 API의 종류는 많지만, 저는 샘플 코드가 많은 카카오 지도 API를 사용하여 업무를 시작했습니다.  📊 구현 과정 1. App key 발급 https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 우선, Kakao ..

🚪들어가며 linkbrary 프로젝트를 진행하며 로그인 및 회원가입 페이지의 디자인과 기능을 구현하는 역할을 맡았습니다.  로그인 및 회원가입 페이지의 기본적인 디자인과 기능 구현을 마무리 한 후, 간편 로그인 / 회원가입 기능을 만들었습니다. 구글과 카카오로 간편 로그인 기능을 구현했는데 이번 포스팅에서는 카카오로 구현하는 방법을 작성했습니다.  🔐 카카오 간편 로그인 과정 저는 애플리케이션 및 앱 키 생성과정은 생략하고 설명을 진행하겠습니다.자세한 과정은 아래 링크에서 확인하실 수 있습니다 🙂‍↕️https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#kakaologin Kakao Developers카카오 API를 활용하여 다양한 어플리..

🚪 들어가며 예시 코드를 Next.js로 작성하여 이번 포스팅을 Next.js로 분류하였고 바닐라 js나 react에서도 비슷한 방식으로 구현할 수 있습니다. 예시 코드에서 스타일링은 tailwind CSS를 통해 간단히 구현했습니다.   📚 개념 정리  모달 창(Modal)은 화면 위에 나타나는 팝업 창으로, 사용자가 그 창을 닫거나 조작하지 않으면 배경의 다른 요소들과 상호작용할 수 없게 만듭니다. 주로 사용자에게 중요한 정보를 전달하거나 특정 작업을 완료하도록 요구할 때 사용됩니다.모달 창은 일반적으로 absolute 또는 fixed 포지셔닝을 사용하여 화면의 중앙에 위치시키며, 배경은 흐리게 하거나 클릭할 수 없도록 막습니다. 저는 fixed를 사용하여 모달 창을 만들었습니다.   🖥️ 예시..

🚪 들어가며 지난 글에서 React와 비교했을 때, Next.js를 사용해야하는 이유에 대해 포스팅했습니다.(참고: https://mungyun.tistory.com/10) [Next.js] 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유🚪 들어가며 React는 웹 애플리케이션 개발에서 널리 사용되는 라이브러리로, 컴포넌트 기반 아키텍처 덕분에 재사용성과 유지보수성이 높은 코드를 작성할 수 있습니다. 그러나 단일 페이지mungyun.tistory.com이번 포스팅에서는 React의 CSR, Next.js의 SSR의 과정을 자세히 살펴보고자 합니다.   📌 React의 CSR 동작 과정    1. 접속 요청: 사용자가 웹사이트를 방문하면, 브라우저는 서버에 HTML 파일을 요청합니다.  2..

🚪 들어가며 React는 웹 애플리케이션 개발에서 널리 사용되는 라이브러리로, 컴포넌트 기반 아키텍처 덕분에 재사용성과 유지보수성이 높은 코드를 작성할 수 있습니다. 그러나 단일 페이지 애플리케이션(SPA)으로 동작하는 React는 몇 가지 한계를 가지고 있습니다. 이런 한계를 해결하기 위해 등장한 프레임워크가 바로 Next.js입니다. 이번 포스팅에서는 React만 사용할 때와 비교해 Next.js를 사용해야 하는 이유를 알아보겠습니다. 🎈 React의 특징과 장점, 한계 React의 주요 특징React는 사용자가 인터페이스를 효율적으로 구성할 수 있도록 돕는 UI 라이브러리입니다. 이를 통해 복잡한 상태 관리와 컴포넌트의 재사용성을 극대화할 수 있습니다. 또한, 가상 DOM을 활용해 성능을 최적화..