본문 바로가기

Daily/Today I Learned89

210406 - 210423 한 달간의 회고기록 ✍🏻 4월 한 달 동안은 프로젝트를 진행하면서, 팀원들과 매일 밤 11시마다 공동 노션에 각자 회고를 작성하고 공유하는 시간을 가졌다. 정말 눈 뜨자마자부터 눈 감기 직전까지 하루종일 컴퓨터 앞에 앉아있는 생활을 반복하다보니 오늘, 내일의 경계가 없어지는 느낌이었는데 다 같이 모여서 하는 회고 덕분에 잠깐이나마 배운것을 정리하고 느낌을 기록하고 되돌아볼 수 있었다. SR(기획)단계가 끝난 후부터 4F(Fact, Feeling, Finding, Future action) 방식으로 기록했는데, 내가 작성했던 부분만 다시 정리해보면서 며칠만에 사라지고 있는 기억을 되살려 보려고 한다. 210406 Fact (사실) 마일스톤 작성, 태스크 카드 생성 및 분배 Redux Setting Navbar 구현 Feeling .. 2021. 4. 30.
210325_TIL (First Project - Day11) 🍎 오늘 한 일 최종 배포테스트 최종적으로 서버, 클라이언트 모두 마지막 배포 테스트를 진행했다. 맨 처음에는 console.log() 지우는 걸 깜빡해서 켜자마자 콘솔창에 각자 확인용으로 찍어둔 수많은 이상한 문구들이 나왔고.. local 환경에서 테스트를 하다가 요청 주소를 변경하지 않은 부분도 있었다. 이 부분은 실수 방지와 테스트의 편의를 위해 .env 파일로 따로 생성을 해두기로 했다. 예상은 했지만 진짜진짜최종종종종_final 정도에서 끝난 것 같다. 사실 아직도 수정사항들이 남아있어서 내일 아침에도 다시 배포를 해야할것 같다 :). UX 개선 배포 후에 각자 서핀을 만들어보고, 기능들을 사용해보면서 불편한 점이 있는지 팀원분들의 다양한 의견을 들어보면서 개선해야 할 점들을 정리했다. 생각보다.. 2021. 3. 28.
210324_TIL (First Project - Day10) 🍎 오늘 한 일 썸네일 이미지 처리 기본적으로 사용자가 올린 썸네일 이미지는 우리 S3 버킷에 보관하도록 했다. 백엔드분이 버킷과 파일을 생성 및 삭제하는 코드를 구현해두셔서, 그 함수를 이용해 사용자가 올린 파일이 버킷으로 가도록 연결시키는 부분과 다시 받아온 s3버킷 파일 주소와 다른 정보들을 서버로 전달하는 부분을 작성했다. 썸네일을 지정하지 않았을 경우에는 default 이미지가 필요할 것 같아서, 몇몇 이미지들이 랜덤하게 들어가도록 해두었다. parallax scrolling 효과 추가 메인페이지를 좀 더 동적으로 보이도록 개선했다. 새로 올라온 리스트들을 보여주는 부분이 너무 심심해보여서(?) 서핑이라는 우리 컨셉에 맞게 좌우로 움직이도록 하고자 했는데, 이 부분은 css의 keyframe과 .. 2021. 3. 28.
210323_TIL (First Project - Day9) 🍎오늘 한 일 URL 파싱 기능 추가 URL 을 입력하면 해당 URL html의 부분을 가져오는 함수를 작성했다. axios로 해당 url의 html을 긁어온 후 title 부분만 매칭시키는 정규식을 적용해 서버의 controller에 추가했다. 클라이언트에서는 사용자가 url 이름을 입력하지 않으면 자동으로 요청을 보내 title을 가져오도록 구현해두었다. 원래 클라이언트에서 바로 요청을 보내게 하려고 했는데, 리액트 서버에서 바로 요청을 보내려면 프록시 설정을 따로 해줘야한다고해서, 우리 서버를 한번 거쳐 요청을 보내도록 계획을 수정했다. CSS 개선 뼈대만 있는 상태인 서핀 모달창의 레이아웃과 색상, 효과 등을 수정했다. 총 네가지 상태에서 같은 모달창을 이용하는데, 이 상태에 따라 형태가 변하게 .. 2021. 3. 28.
210322_TIL (First Project - Day8) 🍎오늘 한 일 서버 - 클라이언트 연동 테스트 서버와 클라이언트의 요청, 응답 부분이 거의 다 작성된 것 같아서 두번째 테스트를 진행했다. 첫번째 테스트보다 구현해둔 기능이 훨씬 많아서 오래 걸리기도 했고, 엮여있는 부분이 많아서 한 곳에서 생긴 에러가 또다른 에러를 낳고.. 자잘한 오류를 해결하는데 시간을 굉장히 많이 썼다. 정규시간(9to6) 동안은 거의 테스트만 진행한 것 같다. 그래도 제대로 연결되는걸 보니 좀 마음이 놓인다. 여전히 날 힘들게하는 훅스.. 그리고 내가 실제 사용자라고 생각하고 테스트를 하다보니 사용하기에 불편하거나 추가되어야 할 기능이 계속 발견되기도 했다. 2주가 생각보다 너무 짧다.. 벌써 이틀밖에 안남았다니ㅣㅣㅣ 🍎 교훈 ✔️ 코드리뷰의 필요성 ✔️ 우선순위를 잘 정하자 🍎.. 2021. 3. 27.
210321_TIL (First Project - Day7) 🍎 오늘 한 일 함수 작성 마무리 Modal Page의 API 요청 관련 함수 작성을 마무리지었다. Dropdown UI 가 필요한 부분도 있어서 이부분도 완성했다. 이 과정에서 datalist와 select 태그의 차이점에 대해서 알게되었고, 서버에 계속해서 요청을 보낼 생각이었는데 그럴 필요가 없다는 것도 깨달아서 코드를 수정했다. Custom Hook 만들어보기 이벤트 처리를 위해 useRef와 useEffect를 이용한 Custom Hook 을 하나 만들었다. 좀 더 다양한 곳에서 쓰기 위해서 매개변수를 받을 수 있게 했다. 차트에 Gradient 효과 추가 브라우저에 내장된 canvas API 를 이용해서 라이브러리로 만든 차트에 gradient 효과를 추가할 수 있다고 해서 도전해봤다. 리액트.. 2021. 3. 22.
210320_TIL (First Project - Day6) 🍎 오늘 한 일 Modal창 UI 관련 함수 작성 오전동안 모달창 UI와 관련된 함수 작성을 마무리지었다. 코드가 점점 복잡해지고 있어서 최대한 재활용 가능한 함수로 작성해보려고 노력했는데 리팩토링이 좀 더 필요할 것 같다. 그리고 뜬금없는 부분에서 에러가 나서 보니까 변수명이 중복되어서 발생한 에러였다. 여기저기서 한 기능에 대한 여러 변수가 생기다보니까 이런일이 생긴 것 같아서 변수명을 앞으론 좀 더 신중하게 지어야 할 필요성도 느꼈다. 🍎 해야할 일 ✔️ 모달창 API 요청 관련 함수 작성 ✔️ 새로고침문제 해결 ✏️ 오후에는 가족들이랑 맛있는거 먹고 잠 보충을 했다. 번아웃이 오기 전에 이렇게 가끔씩은 아무생각 안하는 시간이 필요한 것 같다. 그리고 체력이 점점 떨어지는게 느껴져서 진짜로 운동을 .. 2021. 3. 21.
210319_TIL (First Project - Day5) 🍎 오늘 한 일 User 관련 API 요청, 함수 작성 완료 유저와 관련된 API 요청 (login, logout, signup, withdrawal, edit..) 과 관련된 함수들을 작성했다. 확실히 함수를 만들고 뭔가 돌아가게 만드는게 재밌다,, 이제 진짜 뭘 하는 느낌이 든다. 로컬서버에서 클라이언트 - 서버 연결 테스트 진행 어느정도 유저와 관련된 부분은 완성이 된 것 같아서 로컬 환경에 따로 서버를 만들어서 처음으로 클라이언트와 서버를 합쳐봤다. 지금까지는 각각 작성해서 혹시 합쳤을 때 어긋나는 부분이 있을까봐 걱정했는데, 확실히 API문서를 꼼꼼하게 작성해 둔 덕분인지 잘 작동했다. 클라이언트 요청에 따라 DB까지도 잘 작동하고 User 관련 CRUD 요청은 모두 성공했다. 백엔드분이 서버부.. 2021. 3. 20.
210318_TIL (First Project - Day4) 🍎 오늘 한 일 SCSS 레이아웃 클라이언트 요청이나 함수들을 작성할 때 제대로 작동하는지 테스트해보려면 일단은 시각적으로 확인하는게 좋을 것 같아서, 와이어 프레임을 기반으로 뼈대가 되는 레이아웃만 먼저 구현해두었다. SCSS를 이용했는데 확실히 구조가 계층적이라 길을 잃어도 금방 찾을 수도 있고, 코드랑도 비교하기가 수월했다. 프론트엔드 팀원들 모두 SCSS 의 장점에 동의해주셔서 다행이다. 우선 큰 틀은 대략 완성이 되어서 세세한 디자인같은건 기능 구현이 어느정도 되면 보충을 해야겠다. ESLint, Prettier 설정 코딩 컨벤션을 정했다고 생각했는데 아침에 merge를 하는 과정에서 포매팅때문에 충돌이 생겼다. 그래서 모든 팀원들이 formatting 형식을 동일하게 하는 시간을 가졌다. 세팅.. 2021. 3. 19.
210317_TIL (First Project - Day3) 🍎 오늘 한 일 Wireframe 구체화 설계해둔 와이어 프레임을 바로 코드를 작성할 수 있을 정도로 구체화했다. class name, id 도 포함해서 설계했는데 BEM 방식으로 이름을 정해보기로 했다. 이 과정이 엄청 오래 걸렸는데 맞는 방식으로 한건지 확신이 들지가 않아 리팩토링이 필요할 것 같다. Component 구조 설계, 파일 생성 완성된 Wireframe을 바탕으로 컴포넌트 구조를 설계했다. 어느 부분을 컴포넌트로 만들건지, Page 파일들은 어떤식으로 작성할건지 의논하고 컴포넌트를 몇개씩 맡아서 와이어 프레임을 코드로 옮기는 작업을 했다. Github Issue Card, PR 태스크를 분배하기 위해서 우리 프로젝트의 github 레파지토리 이슈카드를 이용하기로 했다. 작성 규칙을 정해서.. 2021. 3. 18.
210316_TIL (First Project - Day2) 🍎 오늘 한 일 API 문서 작성 어제 작성했던 플로우 차트에 어떤 요청이 필요한지 먼저 생각해보며 추가를 해보고, API 문서를 작성하기 시작했다. 확실히 플로우 차트가 좀 더 구체화되니까 작성하기가 편했던 것 같다. 물론 수정 과정을 계속 거쳤고 앞으로도 거쳐야 하겠지만, 초반에 꼼꼼하게 문서나 차트들을 작성해두는게 나중에 작업할 때 훨씬 순조롭게 진행될 것 같기도 하고, 태스크를 분배해서 각자 작업을 하고 합치는 과정에서 충돌이 덜 생길 것 같다는 생각이 든다. 팀 규칙, 코딩 컨벤션 팀원들 간의 생활습관부터 평소 코드를 작성할 때 방식도 달라서 팀 규칙도 정하는 시간을 가졌다. 생활적인 면에서는 고정적인 회의 시간이나 혹시 갈등이 생긴다면 어떤식으로 대처할지, 서로 이런건 안했으면 좋겠다.. 등 .. 2021. 3. 17.
210315_TIL (First Project - Day1) 🍎 오늘 한 일 Firtst Project - 시작, 아이디어 선정 팀원분들과 만나서 각자 생각해본 프로젝트 아이디어들을 공유하고, 의견을 덧붙여가다보니 모두가 동의하는 방향으로 프로젝트 주제가 결정되었다. 일단은 모두 처음 시작해보는, 기간이 2주밖에 주어지지 않는 프로젝트라, 새로운 스택보다는 지금까지 배웠던 것들을 활용하고 파이널 프로젝트를 위해 단단히 다져두는걸 목표로 진행하기로 했다. 팀 이름이랑 프로젝트 이름도 이것저것 제안하다보니 좋은 이름이 나왔다. 모두의 맘에 딱 들기도 했고, 오래 걸릴 줄 알았는데 생각보다 금방 진행되어서 가장 뿌듯했다 :D 팀원들 각자가 하고싶은 역할이 뚜렷하기도 하고 그렇게 포지션이 겹치지도 않아서 역할은 자연스럽게 결정되었다. 나는 백엔드쪽을 우선적으로하다가 프론.. 2021. 3. 16.
반응형

티스토리툴바