좋은 SW 개발자되기

Keep (유지할 항목) 큰 문제 없이 first project 프로젝트를 잘 마무리 했듯이 final project도 잘 마무리 하기. Bare minimum 기능 구현에 그치지 않고 적극적으로 서비스 발전 시도하기. 공동 노션에 각자 TIL 작성하기 Problem (문제라고 생각하는 항목) 작업을 하다보면 밤늦게까지 잡고있는 경우가 있는데, 무리하지 않고 컨디션 관리 잘하기. SR 단계에서 초기에 정해주어야 하는 것 확실하게 잡고 가기. ex) 파일구조, 재사용 될 컴포넌트, 상태, 사용할 스택 등 Try (Action Items) SR 단계에서 꼼꼼하게 정하기 수면시간 철저하게 확보하기 redux-persist 사용하기, 반응형 웹페이지 제대로 구현하기

KEEP 오늘의 좋았던 경험 책장에 책 색깔 렌더링 될 때마다 색깔 변하던 것 안바뀌게 수정. 색깔 배열을 만들어서 배열안에 있는 색깔을 랜덤하게 추출 해서 styled component에 props로 전달해 주었는데, 매번 랜덤한 색깔을 넘겨주다보니 렌더링 될때마다 색깔이 변하는 현상이 발생했다. //아래처럼 해줘서 매번 같은 색깔이 들어가도록 해줘서 색깔이 매번 바뀌는 것을 고정된 색깔로 해주었다. const color = [ "#e76438", "#4f8f91", "#e48365", "#2c5854", "#eebb3a", "#3a506b", ]; //중략 {shelf.map((book, idx) => ( reviewHandler(book)} idx={idx} > {book.title.length >..

KEEP 오늘의 좋았던 경험 처음 기획한 기능구현을 모두 마치고, 클라이언트를 동작시켜 보면서 에러를 하나씩 해결해 나갔다. 그 중 만났던 에러는 delete API 요청이었는데, axios delete 요청에는 인자가 2개 들어 들어갈 수 있다. url, options이고, 어떤 값을 전달해 주고 싶다면 {data : {value : newValue} }이런 식으로 작성해주면 된다. 마이 페이지에서 읽고있는 책 부분에 최대 6개까지만 추가할 수 있도록 처음에 기획했지만, 더 들어가는 경우 select 창에 리스트화 해서 6개 이상도 들어갈 수 있도록 해주었다. select 에서 option을 선택하고, 다시 맨 처음 option이 보이도록 해주고 싶었고, e.target.selectedIndex = 0..

KEEP 오늘의 좋았던 경험 클라이언트 배포를 했고, 자동화까지 마쳤다. 자동화를 위해 AWS Pipeline을 생성해서 Github 레포지토리와 연결해서 변경된 사항을 push했지만 웹페이지에는 반영이 되지않았다. 그래서 그 원인을 팀원들 다 같이 찾았고 invalidation 기능을 사용하면 변경사항을 바로 반영해줄 수 있다는 것을 알게되었다. 불가능할것 같았던 책장을 만들었다. 약 5시간에 걸쳐 CSS를 수정했고 나름 책장에 책이 꽂혀있는 것 처럼 만들었다. 처음 기획했던 Bare-minimum 기능은 모두 구현했다. PROBLEM 고쳐나갈 경험 컨디션 관리를 잘 해야할 것 같다. 아직 과제를 다 마치려면 1달은 더 있어야 하니까 잘 관리해야할 것 같다. CSS는 많이 알면 알 수록 많은 것을 시도..

KEEP 오늘의 좋았던 경험 MyPage rack 부분 디자인 완료. 회원탈퇴 기능 구현 중 알림 메시지가 뜨면 모달창이 꺼지는 현상 발견. 저녁 시간 내내 잡고있다가 리덕스 사용의 필요성을 느낌 리덕스로 구현 80% 완료 확실히 리덕스가 편하다는 것을 느꼈다. 사용할 상태만 확실하게 구분해서 액션과 리듀서를 만들어 놓으면 프롭스를 어디서부터 넘겨주고 어디에 상태를 둬야할지를 고민하지 않아도 된다. 페이지가 몇개 되지않는데도 리덕스를 사용하지 않으면 복잡해지고 예기치 못한 에러들이 발생하는데, 더 많은 페이지를 다루려면 리덕스를 꼭 사용해야할 것 같다. PROBLEM 고쳐나갈 경험 너무 급하게 코드 작업을 해나간 감이 없지않아 있는것 같다. 처음에 잘 세팅해놓지 않고, 충분히 기획을 하지 않은 상태에서 ..

KEEP 오늘의 좋았던 경험 Main 페이지 Footer가 페이지의 맨밑에 그냥 잘 있게 만들기 성공. 위 처럼 페이지가 구성 되어있을 때, 최상위 태그에 flex를 걸어준다. .wrapper { display: flex; flex-direction: column; height: 100vh; } 그리고 Content 컴포넌트에 flex: 1로 화면 전체를 다 사용하라고 해준다. 이때, Header와 Footer에 height로 높이를 설정해주면 스크롤을 내리거나 화면이 작아질때 높이가 달라질 수 있다. padding을 줘서 높이를 조절해주면 된다. LogIn 페이지 디자인 완료. BookReviewModal 리뷰 삭제기능 만들기. PROBLEM 고쳐나갈 경험 CSS 생각보다 알고있어야 하는 지식이 많은것..

KEEP 오늘의 좋았던 경험 BookInfoModal, BookMarkModal, BookReviewModal, Notifycation 작업 완료했다. React에서 font적용시키는 방법을 배웠다. 참고링크 //사용하고싶은 폰트를 다운받아서 woff파일로 변환시킨 뒤에 폴더안에 저장시켜준다. import Qwigley from "../assets/fonts/Qwigley-Regular.woff"; //그리고 아래처럼 작성해주면 된다. const MainLogo = styled.div` @font-face { font-family: "Qwigley"; src: url(${Qwigley}) format("woff"); } font-family: "Qwigley"; font-size: 100px; font-..

KEEP 오늘의 좋았던 경험 유저들이 회원가입을 할 수 있도록 SignUp 작업을 완료했고, 회원임을 인증해주는 LogIn 페이지 작업 완료했다. git merge하고 pull할때 어떻게 해야 충돌이 안일어나는지 아직 잘 이해가 안된다. 막상 잘 해줬다고 생각했는데도 pull을 받을 때 충돌이 일어났고, 제대로 저장이 안되는일이 발생했다. 여러번 하다보면 어떤 부분에서 충돌이 일어나고 어떻게 해줘야할지가 명확해질 것 같다. PROBLEM 고쳐나갈 경험 git pull error 더보기 더보기 에러 메시지 pull을 받아오려고 하는데 충돌이 발생해서 생기는 오류였다. error: Your local changes to the following files would be overwritten by merge..

KEEP 오늘의 좋았던 경험 간단한 마크다운 사용. 간단한 문법을 정리해 보았다. 더보기 더보기 1. 머리말 (Header) # H1 입니다. ## H2 입니다. ### H3 입니다. #### H4 입니다. ##### H5 입니다. ###### H6 입니다. 2. 수평선 (Horizon) 무엇을 사용하든 동일한 수평선을 만듭니다. --- *** --- H1과 H2를 위한 수평선 문법. 이것은 H1수평선 예제입니다. ========================= 이것은 H2수평선 예제입니다. ------------------------- 3. 인용구 (BlockQuote) > 인용구 입니다. >> 인용구안에 인용구를 사용할 수 있습니다. 4. 목록 (List) 순서가 없는 리스트입니다. * 리스트1 * 리..