뭉균의 개발일지

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

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

🚪 들어가며 이번 포스팅은 Taskify 개발 2주차를 진행하며, 해당 주에 개발하고 공부한 내용을 정리하기위해 작성했습니다.혹시 1주차 회고를 보고 싶은 분들은 해당 링크를 참고해주세요! (링크: https://mungyun.tistory.com/28) [프로젝트 회고] 일정 관리 웹 애플리케이션 Taskify - 1주차🚪 들어가며  저는 코드잇 스프린트 프론트 엔드 9기 수료 중이며, 2024년 10월 18일(금)부터 2024년 11월 5일(화)까지 약 3주간 중급 프로젝트를 진행합니다. 이 기간 동안 4명의 팀원들과 함께 일정mungyun.tistory.com  ⚒️ 나의 역할 1. 할 일 수정 Modal 디자인 및 기능 구현    할 일 수정 Modal의 디자인을 위의 그림과 같이 구현했습니다..

🚪 들어가며  저는 코드잇 스프린트 프론트 엔드 9기 수료 중이며, 2024년 10월 18일(금)부터 2024년 11월 5일(화)까지 약 3주간 중급 프로젝트를 진행합니다. 이 기간 동안 4명의 팀원들과 함께 일정 관리 웹 애플리케이션 Taskify를 제작할 예정입니다.이번 프로젝트는 Next.js 프레임워크를 사용하여 진행하는 첫 번째 프로젝트로, 로그인과 같은 사용자 기능을 처음으로 적용해보는 것에 대해 설레는 마음을 가지고 프로젝트를 시작했습니다.😎   📚 프로젝트 소개 Taskify는 일정 관리와 공유 기능을 제공하는 웹 애플리케이션입니다. 사용자는 가족, 회사 등 다양한 커뮤니티를 생성하고, 멤버를 초대하여 일정과 할 일 목록을 함께 관리할 수 있습니다. 커뮤니티 내에서 작성된 일정은 카드..

🚪 들어가며 프로젝트 진행 중 백엔드(서버)에서 토큰 값을 넘겨줄 때, 프론트엔드에서 토큰의 저장 방식을 결정해야 하는 상황이 발생했습니다. 이 경우에 쿠키 또는 로컬 스토리지에 토큰을 보관해야하는데 각각 어떤 상황에 사용해야하는 지 의문이 생겨 해당 부분을 공부하게 되었고 공부한 내용을 정리하기위해 이번 포스팅을 작성했습니다🖥️  📚 쿠키와 로컬 스토리지가 무엇인가? 🍪 쿠키(Cookie) 쿠키는 웹 서버에서 클라이언트(사용자의 브라우저)에 저장하는 작은 데이터 파일입니다. 웹사이트를 방문할 때 특정 정보를 클라이언트에 저장해두고, 이후 재방문 시 이 정보를 활용하여 사용자 경험을 맞춤화하거나 사용자의 로그인 상태를 유지하는 용도로 사용됩니다. 쿠키는 브라우저에 저장되며, 서버와 클라이언트 간의..

🚪 들어가며    JavaScript에서 화살표 함수는 ES6(ECMAScript 2015)에서 새롭게 도입된 기능입니다. 화살표 함수는 간결한 문법으로 함수 표현식을 작성할 수 있게 해주며, 특히 this 바인딩 방식에서 기존의 일반 함수와 중요한 차이가 있습니다. 이 외에도 다양한 특징들을 일반함수와 비교하여 알아보겠습니다. 해당 포스팅에서 등장하는 예시코드는 JavaScript로 작성했습니다.   📌 함수 선언 방식 일반 함수: 함수 선언식 또는 함수 표현식으로 정의할 수 있습니다.function regularFunction() {} // 함수 선언식 화살표 함수: 함수 표현식으로만 사용할 수 있습니다.const arrowFunction = () => {}; // 함수 표현식 여기서 등장하는..

🚪 들어가며 지난 글에서 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..

🚪 들어가며 리액트는 컴포넌트 기반의 UI 라이브러리로, 상태 변경 시 화면을 효율적으로 업데이트해주는 특성이 있습니다. 그러나 컴포넌트가 자주 재렌더링되는 경우 불필요한 계산이나 렌더링이 발생하여 성능 저하를 일으킬 수 있습니다. 이러한 성능 이슈는 주로 대규모 애플리케이션이나 복잡한 로직을 처리하는 컴포넌트에서 두드러지게 나타납니다.리액트는 이런 문제를 해결하기 위해 메모이제이션(Memoization) 기능을 제공합니다. 메모이제이션은 특정 값이나 함수를 캐싱해두고, 동일한 입력 값에 대해 불필요한 재계산을 방지하는 최적화 기법입니다. 리액트에서 제공하는 useMemo, useCallback, 그리고 React.Memo는 이러한 성능 최적화를 위한 메모이제이션 도구입니다.  📌 useMemo의 개..