개발기록

React vs Vue | Nextjs vs Nuxtjs 이전까지 React로 학습하였으나 이번 과제로 Vue에 대해 새롭게 학습할 기회가 되어 좋았다. 과제를 수행하며 겪었던 트러블슈팅을 기록하고 새로 학습한 내용들을 블로그로 정리하였다. React의 SSR 프로임워크가 Next라면 Vue의 SSR 프레임워크는 Nuxt이다. React와 비교한 Vue는 템플릿 기반의 문법을 사용한다는 점과 작고 가벼워 빠르게 프로젝트를 구축할 수 있다는 장점이 있다. React에서 설정 및 최적화에 관한 내용을 학습하는 러닝커브가 Vue에서는 적고, 쉽게 배울 수 있다. 단방향 바인딩인 React에서 전역상태관리를 위한 라이브러리가 필요했고, 이것에 대한 학습 난이도가 높았던 반면, Vue는 양방향 바인딩으로 Reac..

웹사이트를 운영하면서 중요한 것 중 하나는 사용자 경험이다. 이를 위해 최근에는 SEO(검색엔진 최적화)는 필수적인 요소가 되었다. 내가 Nextjs로 프로젝트를 제작하게 된 계기도 SEO를 직접 구성해보고 작업해보면서 중요성을 경험해보기 위함이기도 하다. SEO는 단순히 검색엔진에서 상위 노출을 위한 것은 아니다. 더 나은 사용자 경험을 제공하기 위한 방법이다. 사용자 경험에서 중요한 것 중 하나는 성능이다. 빠른 로딩속도와 안정적인 서비스로 사용자의 만족도를 높이고, 검색엔진에도 긍정적으로 평가받는다. 그러나 성능만이 전부는 아니다. 웹사이트의 접근성은 다양한 사용자들에게 동일한 서비스를 제공하기 위해 필수적으로 작성해야 한다. 권장사항과 검색엔진 최적화 또한 웹사이트의 전반적인 품질을 높이기 위해 ..

Google OAuth 2.0 Google OAuth 2.0은 인증을 위한 개방형 표준 프로토콜로, 사용자들이 비밀번호를 공개하지 않고, 제 3자 어플리케이션에 리소스에 대한 접근 권한을 부여할 수 있게 해준다. 구글 OAuth는 OAuth 2.0 프로토콜을 구글 서비스에 적용하여 사용할 수 있게 만들었다. Google OAuth를 사용하려면 다음과 같은 순서로 작업이 필요하다. 구글 개발자 프로필 설정 구글 개발자 콘솔에서 새 프로젝트 생성 사용자 인증정보에서 OAuth 동의 OAuth 클라이언트 ID에서 어플리케이션 및 허용 URL등 설정 로컬에 auth/google 라이브러리 설치 Root에 Provider 설정 아래와 같이 설정하여 프로젝트에서 구현해보자. Google auth를 검색하여 Goog..

Prisma와 PlanetScale prisma와 planetsacle은 간단하게 백엔드데이터를 구성할 수 있도록 도와주는 도구들이다. prisma를 이용하여 유저정보 뿐만 아니라, 위시리스트, 상품데이터 등을 SQL쿼리작성없이 안전한 방식으로 이 데이터에 접근할 수 있다. prisma를 통하여 데이터베이스 마이그레이션과 CRUD 작업을 보다 쉽게 할 수 있다. planetscale은 MySql기반으로 분산 데이터베이스를 구축 및 관리할 수 있도록 도와준다. 위시리스트 데이터베이스 만들기 이전에 작성했던 prisma파일에서 model을 하나 생성해주면 된다. yarn prisma db push 위 명령어를 통해 planetscale의 db를 생성할 수 있다. 아래는 만들어진 db의 테이블이다. 나는 이 ..

React-Query & Debounce 웹 어플리케이션에서 데이터를 실시간으로 처리하고 제공하려면 많은 통신이 필요하다. 조회할 데이터가 많아지거나 짧은 시간에 반복적인 API호출을 하게 되면 서버에 과부하가 될 뿐만 아니라, 서비스를 이용하는 사용자도 네트워크에서 데이터를 반복적으로 받아오기 때문에 비 효율적이다. 이러한 상황에서, 효율적인 데이터 조회와 불필요한 API호출을 줄이기 위해 React-Query와 Debounce를 활용하여 어플리케이션을 최적화할 수 있다. React-Query React-Query는 React 어플리케이션에서 서버상태를 효과적으로 동기화하고 캐시하는데 사용되는 라이브러리이다. React-Query를 사용하여 데이터의 새로고침, 캐시유지 등을 손쉽게 관리할 수 있다. 주..

Google Maps API Google Maps API는 Google이 제공하는 Map 인터페이스다. 지리정보와 지도 데이터를 사용할 수 있는 도구를 제공해준다. 위 API를 이용해서 내가 작업하고 있는 프로젝트에 사용해보려고 한다. Google Maps API는 여러 방법으로 프로젝트에 적용할 수 있다. 지도 위에서 위치를 검색하거나 상호작용 가능 API를 사용하여 위도, 경도를 표시 API의 경로를 검색하고 지도에 표시 현재 사용자의 위치를 추적 나는 내 프로젝트에 해당 국가의 위치만 표시하려고 한다. 이제 내 프로젝트에 적용을 해보자! 현재 내 프로젝트에서는 국가 정보 페이지에 접속하게 되면 Map의 링크로 이동하도록 구현하였다. 프로젝트에 사용하는 api 구조는 다음과 같다. { "code":"..

Next.js는 React 라이브러리를 포함하고 있는 React의 프레임워크이다. React에 프레임워크가 왜 필요할까? 이 차이를 이해하려면 CSR과 SSR의 차이를 이해해야 한다. CSR vs SSR CSR(Client Side Rendering) : 서버가 클라이언트에게 HTML과 JS파일을 보내주고 클라이언트가 렌더링을 한다. SSR(Server Side Rendering) : 서버에서 HTML의 렌더링 준비를 마친다. CSR은 SPA의 렌더링 방식으로 React에서 채택하여 사용하고 있다. CSR은 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식이다. 클라이언트에서 요청이 오면 서버는 완성된 HTML을 보내주는 게 아닌 스크립트 링크가 걸린 HTML파일을 응답으로 보내준다. 이후 ..

SSR context getServersideProps를 사용해 서버렌더링을 하면서 context에서 서버 요청 정보를 가져오려고 context를 사용하려고 했다. context라는 매개변수는 현재 브라우저에서 요청 받은 정보들이 들어있다. 해당 요청에서 query를 사용해 데이터를 렌더링하려고 했으나 context의 타입을 지정해야 했는데... 에러로 인해 context의 정보가 나오지 않아 타입을 지정할 수 없었다. 검색결과 ! Next에서 제공하는 Props를 위와 같이 getServerSideProps의 타입으로 지정해주면 되었다. 위의 context의 console을 찍어보면 객체형태로 접속 요청에 대한 모든 정보를 보관하는 것을 볼 수 있다. 사용자의 요청을 context로 서버딴에서 받아 사..

배송지 컴포넌트 컴포넌트를 작성하던 중 문제가 생겼다. 컴포넌트 교체로 UI를 리렌더링하면 되겠다라는 생각으로 접근했다가 기획을 엎어야 할지 코드를 엎어야 할지 그 중간에서 팀원들과 고민을 했었다. 배송지 컴포넌트는 내가 같은 레이아웃 부분이었고, 컴포넌트는 2개 왼쪽 오른쪽 최종 구현은 다음과 같다. 조건부 렌더링 위에서 구현이 끝나는 것은 아니었다. 오른쪽 파란박스안에 Input들은 인데 "결제하기-배송옵션"에서도 쓰이지만 "배송지수정"에서도 쓰인다. 아래에서 살펴보자. 왼쪽 배송지 추가버튼을 누르면 Modal컴포넌트 안에 컨텐츠로 Edit()이 들어간다. 위 Edit은 "배송지 추가(수정)"모달에서는 수령인이 보여야하고 "결제하기-배송옵션"에서는 수령인이 필요없기 때문에 조건에 따라 렌더링되도록 구..

팀 프로젝트 기획 프로젝트 구성 프로젝트명 : RunBase - 러닝에 최적화된 신발과 의류, 잡화 등을 판매하는 브랜드 개발팀 : Frontend 6명 / Backend 3명 기획기간 : 2023.7.25 ~ 2023.8.1 개발스택 : React, Typescript, Styled-Components 우리 AfterWe 팀은 Nike를 모티브로 하여 러닝에 최적화된 신발과 의류 및 스포츠용품을 판매하는 온라인 커머스를 만들기 위해 Figma를 이용하여 기획을 시작했다. 단순 클론코딩이 아니라 우리만의 가치와 특성을 녹여 필요한 부분은 더하고 필요 없는 부분을 덜어내는 과정에서 많은 토론의 시간을 가졌다. 확실히 팀 프로젝트를 2번 경험하고 나서 기획을 하니 고려해야 할 부분이 정말 많다고 생각했다. ..