뭉균의 개발일지

🚪들어가며 우선, 해당 글은 React-query의 Mutation에 관한 개념을 알고 있다는 가정 하에 작성했습니다😎  인스타그램이나 페이스북을 하다보면 특정 게시물에 좋아요를 누르는 경험을 쉽게 할 수 있습니다. 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고 클라이언트에서 즉시 좋아요 수가 증가합니다. 이때 사용자는 "좋아요가 바로 반영되었구나"라고 느끼지만, 실제로는 서버에 요청이 전송되고 처리 중인 상태일 수 있습니다. 이처럼 서버가 요청을 성공적으로 처리할 것이라고 가정(낙관적인 가정)하고, 먼저 클라이언트 상태를 변경하는 것을 Optimistic Update라고 합니다.  Optimistic Update 적용 전서버에서 좋아요 상태가 업데이트되고 응답이 클라이언트로 돌아올 때까..

🚪 들어가며  프로젝트를 진행하며 위의 사진과 같이 서버로부터 넘겨받은 주소 데이터를 지도로 구현해야하는 업무를 접했습니다. 예를 들어, 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를 활용하여 다양한 어플리..

🚪 들어가며3주차에서는 그 동안 구현했던 코드를 리펙토링하고 readme 작성, 프로젝트 회고하는 시간을 가졌습니다. 팀 회고는 저희 팀의 노션에 작성하였고 저는 이번 포스팅을 통해 프로젝트를 진행하며 좋았던 점, 배웠던 점, 보완할 점을 작성하며 개인적인 회고 시간을 가지려 합니다.  📅 이번주 활동 🔨 코드 리펙토링  배포 이후에 보이는 오류, 에러 또는 디자인이 어긋난 부분을 수정했습니다. 또한, 코드 안에서 반복되는 코드를 재사용가능한 컴포넌트로 분리했고 사용된 코드들을 더 좋은 코드로 수정하고자 노력했습니다.   🔗 최종 배포링크: https://taskify9-1.vercel.app/ 새로운 일정 관리 🎯 TaskifyTaskify를 통해 일정을 관리해보세요taskify9-1.verc..

🚪 들어가며 예시 코드를 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을 활용해 성능을 최적화..