TIL

1. 프로젝트 개요 프로젝트 인원 : 4 프로젝트 참여자 : 김범수, 김지예, 윤호준, 진영호 2. 프로젝트 명칭 산책어때? 3. 소개 오래 앉아 있어서 약해진 당신의 무릎을 지켜줄 산책 원하는 위치에 맞는 산책로를 추천순이나 리뷰순으로 정리해서 보여주는 웹사이트 4. 프로젝트 일정 23/12/05 - 23/12/11 5. 프로젝트 기능 계획 필수 구현 기능 위치 API : 사용 API (네이버 : https://navermaps.github.io/maps.js.ncp/) 검색 기능 네이버 리뷰 데이터 크롤링 (cheerio) 페이징네이션 or 더 보기 버튼 선택 구현 기능 댓글 기능 로그인 기능 별 명소 편의점, 카페 체크박스해서 같이 보여주기 6. 와이어 프레임

요약 Ract로 Fan Letter App 만들기 - thunk로 리팩토링 기존에 만든 팬레터 앱에서 redux에서 react-toolkit을 활용해 react-thunk로 리팩토링하는 작업 고민한 내용 props와 context api는 이해가 잘 되서 금방 적용했는데 기존 redux를 작업한게 많지가 않는게 가장 큰 문제였다. 일단 기존 redux할 것들까지 찾아서 툴킷화하는데 시간이 꽤 많이 걸렸다 1. JSON-SERVER 기존인 더미데이터를 활용해서 화면에 보여주는 형식이었다면, 이번엔 json-server 모듈을 활용해 db.jsoin 파일로 직접 넣어줬다. .env 파일에 url을 집어넣어서 전역으로 사용했었다. 2. React Thunk 기존 이름에서 -Slice.js로 파일들을 만들었고 ..

요약 React, Firebase 활용한 뉴스피드 프로젝트 뉴스 피드란? 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간( 커뮤니티(o), 뉴스(x) 사용된 주요 기능 react, firebase, redux 고민한 내용 처음 팀장을 맡아서 뼈대 만드는 작업을 하는 것부터 쉽지 않았다. 다들 작업을 바로 할 수 있게 빠르게 넘겨줘야하는데 무엇들이 필요할지 몰라 고민을 많이했다. 그리고 뼈대를 넘겨줬지만 디자인 작업을 추후에 하자곤 했지만 뼈대만 두고 작업하기엔 다들 너무 힘이 들거같았다. 그래서 큰 틀을 잡으면서 아예 로고나 전체적인 UI는 대략적이지만 잡은 상태로 넘겼다. 메인 컬러나 서브 컬러 등도 다들 컴포넌트로 사용하기 좋게끔..그래서 언제든 바꿀 수 있게.. 나중에 시간이 나는 누군가가 바꾸..

1. 프로젝트 개요 프로젝트 인원 : 4 프로젝트 참여자 : 김범수, 김지예, 윤호준, 진영호 2. 프로젝트 명칭 오늘 하루 3. 소개 너희들 하고 싶은 말 다 해봐! 큰 틀 없이 본인들의 하고 싶은 이야기나 하루 있었떤 일 등 다양한 정보들을 공유하는 장소 4. 프로젝트 일정 23/11/21 - 23/11/24 5. 프로젝트 기능 계획 6. 와이어 프레임 7. API 명세서 8-과제대신해조 (notion.so) 위 링크에서 API 내용 확인

요약 Ract로 Fan Letter App 만들기 - 3 검색 input을 추가하여 filter 적용하기 고민한 내용 useSearchParams을 사용하고 url상 파라미터를 넘겨 검색하면서 해당 내용을 보여주고싶었다. 그렇지만 지금 화면상에 보이는 구조상 검색해서 필터링 되서 그때 그때 보여주는게 더 낫겠다 싶다는 생각을 했다. 1. Main.jsx 기본 세팅은 간단했다.useState로 검색되는 값을 검색 될 때마다 필터링해줬다. // 검색기능 const [search, setSearch] = useState(""); const searchHandler = (e) => { setSearch(e.target.value.toLowerCase()); }; 그리고 list 뿌려주는 곳에서 검색된 내용이 이..

요약 Ract로 Fan Letter App 만들기 - 2 localstorage를 이용하여 가상 DB를 만들어 데이터 전달 및 수정 삭제 고민한 내용 useState로 작업을해서 props로 넘길까 생각을 하다가 어차피 새로고침해도 데이터가 남아있는게 더 보기 좋을거 같단 생각에 localstorage를 담아 리스트로 업데이트하며 뿌려주기로 했다. 1. Main.jsx 기본적인 임의의 data를 몇개 만들고 담는다. 그 이후부터는 남겨져 있는 localStorage 데이터로 확인을 한다. 그리고 기본 배열이 변화될 때마다 새롭게 useEffect로 lists의 변화를 감지해 setItem을 했다 import data from "../fakeData.json"; function Main() { // 기존 ..

요약 Ract로 Fan Letter App 만들기 고민한 내용 팬레터 앱 만들기 작업을 하기로해서 평소 좋아하던 마블로 작업 캐릭터에게 남기는 컨셉을 잡았다. 제일 대치되던 두 캐릭터로 탭메뉴를 구성했고, 그냥 탭을 누르는 형태가 아닌 탭을 누르면 해당 컨셉색으로 전체를 꾸며주고 싶었다. 탭을 눌렀을 때, 탭 뿐만 아니라 다른 색상들도 전부다 바뀌길 원했다. 생각한 해결 방법 먼저 아직 파일들으 쪼개기 전 단계여서 한 페이지에 정리를 하고 있다. styled-components를 사용해서 click 했을 때 색상들을 변경하게 작업했다. 1. 기존 색상 정의 변경될 때 사용될 색상을 미리 정의했다 const blue = { basic: "#3747ff", light: "#838cf5", dark: "#1e..

요약 Ract로 To Do List 만들기 고민한 내용 처음에 공부한데로 id값을 전체 length에서 + 1씩 추가를 했다. 하지만 리스트 하나가 아니라 '작업 중'과 '작업 완료'로 나뉘게 되면서 순서가 꼬이게 됐다. 생각한 해결 방법 그래서 먼저 작업중이든 작업완성이든 하나라 리스트에 담아서 아이디값을 부여했다. 기본값에 isDone을 넣어 완성인지 아닌지로 판단하고 순서별로 정리가 될 수 있게 id값 순서대로 리스트를 정리했다. 이외에 페이지들 components를 어떻게 나눌지도 고민을 했다. 1. 기본 state 정의 기본 state를 정해서 마지막 id값으로 늘어나게끔 정의했다. let number = 2; function Input({ todos, setTodos }) { // 추가하게 될..

요약 TMDB API나 영화진흥위원회 API를 활용한 영화 관련 정보 사이트 팀 제작 인트로 해당 영화 정보 사이트 팀 프로젝트를 진행하면서 어려움이나 얻은 것들을 정리해보자 한다. 시작부터 완성까지 들었던 고민들을 풀어놓고자 한다. 1. 기획 작업 먼저 기능 개발을 초점을 두다보니 지나고나서 보니 '이 기능이 꼭 있었어야했나?', '해당 표시가 UX적으로 맞는 것인가?' 라는 의문점이 들었다. 예전부터 다른 것보다 기획이 중요하단 얘기를 들었어서. 이건 하나의 프로젝트로 끝이지만 기획이 어그러졌으면 개발을 다 끝내고도 다시 뒤엎는 순간이 올 수도 있겠단 생각이 들면서 다음엔 기획을 또 직접 하게 된다면 더 시간을 들여서 잡아야겠다. 개발 공부를 하고 있는 사람끼리 하다보니 대화로써 이어갔는데, 나중에 ..