IT's Time

1. 프로젝트 정의 1) 주제 : 취소 수수료 없는 숙소 양도 거래 서비스 2) 개발 기간 : 2023.12.06 ~ 2024.1.30 3) 개발 Repo https://github.com/Yanol-Market/frontend GitHub - Yanol-Market/frontend Contribute to Yanol-Market/frontend development by creating an account on GitHub. github.com 2. 사용 스택 3. 맡은 기능 1) 로그인 이메일 혹은 비밀번호를 잘못 입력 했을 시 에러를 띄어주는 유효성 검증을 진행 했습니다. 비밀번호를 잊어버렸을 때 가입한 이메일로 임시 비밀번호를 보내주는 기능을 구현 했습니다. 서비스에서 상품 등록 시 필요한 야놀자..

그동안 애매하게 알았거나 잘 몰랐던 것들과 알아도 복습하자는 의미로 자주 사용했던 것들을 한번 정리해봤다. 1. useState : 동적인 값을 상태(state)라고 하는데 이를 관리해주는 함수다. 이 함수를 통해 컴포넌트에서 상태를 관리할 수 있다. import React , {useState} from 'react'; const [number , setNumber] = useState(0); 2. useRef : 자바스크립트에서 querySelector , getElementById 등을 통해 특정 DOM을 선택해주었다. React에서도 이 처럼 저장공간 또는 DOM요소에 접근하기 위해 사용되는 것이 바로 useRef이다. .current 를 붙여서 사용한다! => useRef로 관리하는 변수는 값이..

Next.js 세 번째 복습으로 react-query를 선택했다. react-query는 React에서 사용해본 경험은 있지만 Next.js에서 서버 컴포넌트와 클라이언트 컴포넌트에서 사용하는 방식이 달라서 이를 기록하고자 했다. 그 전에 React-Query를 사용 하는 이유에 대해 생각해보자. 1) 서버의 데이터를 가져오는 것 / 리덕스는 컴포넌트끼리 데이터 공유 할 때 사용 2) 캐싱이 가능해서 트래픽 줄여줌 3) query.getClient로 데이터 공유도 가능 4) React-Query로 캐싱 후 zustand로 데이터 공유 자주 사용 5) 로딩 , 에러 , 펜딩 , 성공 같은 인터페이스 표준화 지원 다음으로 Next.js에서 React-Query를 사용하는 방법은 크게 두 가지가 있다고 한다...

이 두 부분은 가장 어렵다고 느낀 부분이라 따로 적으려고 뺐다. 1. Parallel Routing (병렬 라우팅) : 동시에 또는 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링 할 수 있게 해준다. 예를 들어 team과 analytics의 페이지를 동시에 띄어줄 수 있다. 즉, 동일한 URL에서 완전히 분리된 코드를 사용 가능하게 해준다. 방법은 슬롯이라고 불리는 @folder 컨벤션을 사용해서 구분해준다. 또 같은 수준의 레이아웃으로 props로 전달 한다. @folder 는 URL 구조에 영향을 미치지 않는다. export default function Layout(props: { children: React.ReactNode analytics: React.ReactNode team:..

이번 파이널 프로젝트 들어가기 전까지 Next.js에 대해 공부했다. 비록 파이널 프로젝트는 React를 사용하지만 그래도 Next.js는 알아야 한다고 생각했기에 제로초님 강의를 들었고 지금까지 배운 내용을 복습하고자 한다. 1. Next.js란? Next.js는 React의 프레임워크이다 반대로 React는 라이브러리인데 라이브러리는 어플리케이션을 만들 때 필요한 자원의 모임이고 프레임워크는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경이다. Next.js는 서버사이드 렌더링(SSR) , 정적 사이트 생성(SSG)과 같은 기능들을 제공한다. 2. SSR과 SSG란? 1) SSR 웹 페이지를 브라우저에서 렌더링 하는 대신, 서버에서 렌더링 한다. 브라우저가 ..

0. 느낀 점 이번 미니프로젝트를 11/20 ~ 12/01일까지 진행 후 1주일의 리팩토링 기간을 가졌는데 정말 많은 것을 배웠고 또 느꼈던 계기가 되었다. 특히 백엔드와 협업하면서 정말 많은 것을 깨달았고 소통의 중요성도 배웠다. 원래는 마지막에 느낀 점을 쓰려고 했는데 생각보다 길어져서 앞에서 작성하고자 한다. 다른 팀보다 한 명이 부족한 상황에서 초반에 사람이 부족해서 못한 기능을 후순위로 뒀는데(장바구니,예약,예약확인) 원래 맡았던 부분들이 지체 됐다 보니 조급한 마음으로 급하게 후순위를 가져갔고 그래서 내 생각보다 완성도 있게 짜진 못했던 것 같다. 나중에 다같이 도와주더라도 초반 역할 분담은 확실하게 해야 함을 느꼈다. 그리고 백엔드와는 많은 일이 있었지만 결론적으로는 많은 소통을 해가면서 데..

이번에 두 번째 토이프로젝트를 11/6~11/16일까지 진행했는데 짧지만 많은 걸 배웠던 시간 같았다. 바로 내일부터 백엔드와 같이 프로젝트를 하기 때문에 오늘 틈틈이 복습 할 것을 적어두려고 한다. 복습 내용은 남들이 보기엔 사소할수도 있지만 내가 이번에 프로젝트 하면서 어려움을 느꼈던 부분 위주로 적으려고 한다. 주제는 채팅 서비스였기 때문에 우리 조는 카카오톡을 비슷하게 따라하고자 했다. 1. 동적 라우팅(Dynamic Routing) 이번 프로젝트에서 NextJs를 사용했는데 사실 아쉬운 점 중 하나였다. SSR과 SSG , CSR의 차이점을 충분히 이해하지 못해 이를 활용하지 못했던 점이 아쉬웠다. 스택 선정이 매우 중요함을 느꼈고 나중에 NextJs 관련해선 길게 포스팅 해볼 예정이다. 일단 ..

문제 : https://school.programmers.co.kr/learn/courses/30/lessons/150368 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 풀이 문제 풀이는 떠오르는데 막상 코드로 작성하기가 어렵다..꾸준히 보는 것만이 답인 것같다.. 그래도 점점 문제를 보면서 어떤 식으로 접근 할 지 떠오르는 점에 의의를 두고자 한다. 이번 문제는 카카오 문제였는데 아래처럼 접근하고자 했다. 1) 먼저 할인율을 10, 20 , 30 ,40% 로 나누고 이를 적용한 할인가격을 비교하려 했다. => 할인 가격을 비교하는 것보다 먼..

9월에 진행했던 첫 번째 토이프로젝트로 직원들을 위한 위키 사이트를 만들었는데 두 번째 토이프로젝트를 하기 앞서 이 때 부족했던 점을 살펴보고 복습하고자 한다. 내가 맡은 부분 : 로그인 / 회원가입 / 유저 정보 입력 페이지 1. 구현사항 1) 회원 가입 / 로그인 페이지 - 구글 아이디 및 이메일로 회원 가입 구현 2) 유저 정보 입력 페이지 - firebase와 연동해서 정보 입력하기 , 로그인 후 내 정보 수정을 눌렀을 때 로컬 스토리지에 데이터가 있으면 그 데이터 유지해주고 거기서 갱신시키도록 함 2. 막혔던 부분 - firebase의 DB 컬렉션을 구성할 때 user 컬렉션과 팀 컬렉션을 직접 짰는데 초반에 어떻게 해야 하는 지 감이 안와서 많이 헤맸던 것같다. - firebase의 유저 정보..

이번에는 Redux와 더불어 자주 쓰이는 Recoil에 대해 알아보고자 한다. 1. Recoil Recoil은 Redux의 보일러플레이트 코드 단점 문제를 개선 한 라이브러리이다. Redux는 직관적이지만 하나의 상태를 관리하더라도 많은 코드가 필요하기 때문에 Redux Toolkit이 나왔지만 그럼에도 많은 코드의 소모를 가져왔고 이에 대한 하나의 대안으로 나온 라이브러리가 바로 Recoil이다. 0) 설치 $ npm i recoil @types/recoil // src/index.tsx import { createRoot } from "react-dom/client"; import { RecoilRoot } from "recoil"; import App from "./App"; const rootEl..