본문 바로가기

프로젝트 회고 🌊

오늘의집 클론코딩 🏠
프로젝트 회고 🌊 2023. 7. 28. 오늘의집 클론코딩 🏠 1. React-Query - 리액트 쿼리가 버전 업그레이드 되면서 @tanstack/react-query로 이름이 바뀜. 그걸로 설치해주면 된다. 1) useQuery, useMutation 커스텀 훅 //usePostQuery.js export const PostQueryKey = "post"; //게시물 가져오기 export const usePostQuery = (postId) => { return useQuery([PostQueryKey, postId], () => getPost(postId), { enabled: !!postId, staleTime: 3000, keepPreviousData: true, }); }; //게시물 수정 export const useUpdatePostMutation =..
리액트 기능구현 스터디-4. 카카오, 네이버, 구글 소셜로그인 리팩토링 회고 ☀️
프로젝트 회고 🌊 2023. 7. 14. 리액트 기능구현 스터디-4. 카카오, 네이버, 구글 소셜로그인 리팩토링 회고 ☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 소셜로그인 규격 로그인 버튼을 넣고 인가코드까지 받아오기. STEP 2 : 백엔드 서버를 통하여 accessToken 받고 로그인 완료. 로그아웃 완료 STEP 3 : 자동로그인 , token 삭제시 라우팅처리 2) 시간 - 07.12 오후 3시~ 오후 9시 (리팩토링: 07.13) 3) 사용기술과 라이브러리 - React, styled-components, react-router-dom v6, axios, react-redux, redux-toolkit 4) 전체 회고 개인프로젝트로 하고 있던 블로그 프로젝트에 기존 로그인 말고도 소셜로그인을 추가했다. 기존로그인은 항해에서 올려준거라 언제 서버 꺼질지 몰라서... 일단 소셜로그인은 백엔드를 가지고 있으니..
React 기능 구현 스터디 - 2. 검색 기능 (리팩토링 회고) ☀️
프로젝트 회고 🌊 2023. 7. 3. React 기능 구현 스터디 - 2. 검색 기능 (리팩토링 회고) ☀️ 1. 주제 소개 1) 완성 조건 STEP 1 : 검색어를 입력하여 데이터를 가져와서 뿌려주기 STEP 2 : 검색어를 입력하면 자동완성창 혹은 연관검색어 검색창완성 STEP 3 : option 드롭다운으로 옵션선택할수있게하기 2) 시간 - 07.01 토요일 오후 3시~ 오후 9시 (1시간동안 밥 먹음. 그리고 후회함) 3) 사용기술과 라이브러리 - React, react-router-dom, styled-components, material-ui icons 4) 폴더 구조 5) 전체 회고 이번 코드에서도 Flux 패턴을 적용해 각 컴포넌트와 컨테이너의 기능들을 명확히 하려고 노력했다. 짧은 시간이었어서 아쉽게도 렌더링 최적화와와 env 파일을 활용하지 못해서 아쉬웠지만, 정해진 시간이 지나고 스터디 팀원..
React 리액트 투두리스트 앱 (+ Redux, Styled-component)
프로젝트 회고 🌊 2023. 6. 29. React 리액트 투두리스트 앱 (+ Redux, Styled-component) 💻 Project name: Todo-List 🕚 Project Execution Period: 2023.06.27 ~ 2023.06.29 항해99에서 주특기 리액트 2주차 과제로 다른 팀원 한명과 간단한 투두리스트 앱을 만들었다. 과제에서 요구된 사항은 할 일 추가 / 조회/ 삭제 / 수정 기능이었고, 추가적으로는 할 일 상세 내용 업데이트와 반응형 웹을 구현했고 사이드바에서는 오늘 날짜를 띄웠다. 배포: https://todolist-react-jade.vercel.app/ (vercel) https://github.com/nayoung3669/todolist_react GitHub - nayoung3669/todolist_react: 리액트 리덕스 투두 앱 ✍🏻 (페어) 리액트 리덕스 투두 앱 ✍🏻..
React 기능 구현 스터디 - 1. 페이지네이션 (리팩토링 회고)
프로젝트 회고 🌊 2023. 6. 27. React 기능 구현 스터디 - 1. 페이지네이션 (리팩토링 회고) 스터디에서 한 React에서 Pagination 구현하기 과제를 리팩토링해보았다. 스터디 팀장님의 피드백과 팀원들의 코드를 살펴보며 추가하면 좋을 점을 정리해서 issue에 작성해서 올렸다. react-router-dom의 params를 사용하여 페이지 이동하기 Custom hook으로 usePromise.js 만들어 재사용하기 fetch 시에 5페이지씩 가져오기 (params : random -> asc 변경) 이미지 onLoad 속성 추가하기 이제 리팩토링을 해보자 🐱 1. react-router-dom 의 useParams를 통해 라우팅을 구현 이를 통해 유저가 3 페이지 혹은 4페이지에 새로고침을 하더라도 그 페이지에 계속 머물러있게 하는 기능 //App.js function Nav() { ret..
WIL - Virtual DOM
프로젝트 회고 🌊 2023. 6. 26. WIL - Virtual DOM https://legacy.reactjs.org/docs/faq-internals.html Virtual DOM and Internals – React A JavaScript library for building user interfaces legacy.reactjs.org
스터디 발표 회고 2023.06.21
프로젝트 회고 🌊 2023. 6. 24. 스터디 발표 회고 2023.06.21 🎤 오늘 한 발표 CS정리 - 스코프 (완료 ✅) - 호이스팅 (완료 ✅) - 클로저 (완료 ✅) 리액트 다루는 기술 - styled-css , scss (완료 ✅) - react-virtualized (완료 ✅) - Todo List (완료 ✅) 💻 후기 소현님이 반복문의 속도 차이에 대해 설명해주셔서 알고리즘 문제 풀 때 같이 고민했던 속도에 대한 설명을 들었다. for문과 reduce, forEach 순으로 빠르고 map은 모든 원소를 돌면서 원하는대로 가공해서 내보내기 때문에 시간이 조금 더 걸린다. 그리고 하루님의 코드 리펙토링하신 것을 보고 자신이 작성한 코드를 어떻게 하면 더욱 효율적으로 만들 수 있는지에 대해 고민하는 것이 중요하다는것을 느꼈다. 다른 사람의 코드를 많이 참고해보고, 어떤 ..
CS 스터디 발표 회고 1 - 비동기 처리, RESTful API
프로젝트 회고 🌊 2023. 6. 19. CS 스터디 발표 회고 1 - 비동기 처리, RESTful API 오늘 밤에는 약 일주일간 준비한 CS 관련 발표를 진행했고 다른 팀원들의 설명도 들으며 많은 것을 새롭게 알게 됬다. 내가 진행한 발표는 실행컨텍스트스택, 싱글스레드, 콜백헬, 그리고 이것들의 대안인 Promise 객체와 async/await, fetch와 axios 차이에 관한 발표였다. 발표 자료 : https://nayoungkim00.tistory.com/43 자바스크립트의 비동기 처리 동작 원리 | 콜스택, 이벤트루프, Promise, fetch, async/await 목차 1. 비동기처리의 필요성 1-1. 실행컨텍스트 스택 1-2. 싱글스레드 2. 비동기처리의 동작 원리 2-1. 브라우저의 이벤트 루프 2-2. 왜 싱글스레드일까? 3. 콜백 비동기 처리의 문제점 3-1. 콜백 헬 (Ca nay..
9조 웹미니프로젝트 S.A (Starting Assignment)
프로젝트 회고 🌊 2023. 6. 7. 9조 웹미니프로젝트 S.A (Starting Assignment) 1. 프로젝트 제목/간단설명 2. 와이어프레임 3. API(개발해야 하는 기능들) 4. public github repo 주소 1. 프로젝트 제목/간단설명 1-1. 제목 내가& nbsp;하려고 만든< 개 임. 1-2. 개요 이번 사전 미니 웹 프로젝트로 자바스크립트로 구현된 다양한 재미있는 미니게임이 모여있는 웹사이트를 개발했습니다. 이 프로젝트에는 옛날 픽셀 게임들을 활용해 구현된 세 가지의 미니게임으로 구성되어 있습니다. 웹사이트의 대부분의 그래픽과 폰트, 스타일에서 픽셀아트 느낌을 최대한 내보려고 노력했습니다. 1-3. 특징 1) 픽셀 아트와 레트로 디자인: 독특한 시각적 요소를 위해 flaticon에서 픽셀 아이콘을 주로 사용했다. 배경 사진 또한 무료 배경사진 사이트에서 픽셀아트 위주의 사진으로..

티스토리툴바