기록/코드스테이츠 프론트엔드

9.20 금 - 메인프로젝트 데일리 회고

오늘 한 일 1. 프론트 코드 병합 팀원: sns 게시글 댓글기능 로직 구현, 스타일링 나: Story 컴포넌트 기능 버그 수정, css 수정 2. Story 컴포넌트 css 수정 [x] 화살표 위치 아래로 쳐진것 수정 [x] 마우스 호버 시 크기가 커져도 부모 컴포넌트 영역에 잘리지 않고 넘치게 수정 추후 계획 주말간 할 일 axios 인스턴스화 인증요청 axios 인터셉터 적용해야 하는지 확인, 필요 시 적용 userSlice의 로그인 관련 코드 사용가능한 상태로 수정 sns 게시글 등록폼 수정시에도 사용가능하도록 수정 혹은 별도 폼 제작 수정폼 최초 실행 시 현재 기존 업로드된 이미지와 텍스트가 preview, value로 보여져야 함 수정중 제출 전에 입력값으로 미리보기 이미지 변경, 텍스트도 새..

9.22 목 - 메인프로젝트 데일리 회고

1. 어제 한 일 1.1 Stories 컴포넌트 구현 화면에 보여질 항목은 5개로, 넘치는 부분은 overflow: scroll 처리 페이지네이션으로 개선 필요 클릭시 모달창으로 팝업 유저정보와 인풋창을 position: absolute로 주어서 부모 위치와 상관없이 존재하고 있어 현재 위치값이 좀 어색하게 화면에 보여짐 background-blend-mode: darken; 스타일 적용이 안되고 있음 1.2 http 통신 테스트 회원가입, 로그인 확인 경우에 따른 예외처리 구현 필요 백엔드 코드 수정으로 로그인 시 토큰값 응답 헤더로 잘 들어오게 수정 완료. JWT 토큰값 웹 스토리지에 저장 시 XSS 공격을 방지하기 위한 대비책에 대해 학습과 적용 필요 2. 오늘 한 일 2.1 Stories 컴포넌트..

9.21 수 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] Stories 컴포넌트 이번주 https 통신 연결( 프론트 s3 + cloudFront ↔ 서버 ELB + ACM ) → 다음주 기능 테스트 및 완성 개발환경과 배포환경 통일 → 다음주 회원가입, 로그인 시 응답에 따른 예외처리 클라이언트에서 로그인 시 서버로부터 인가정보 응답으로 받기 게시글 작성요청 시 인가정보 확인 후 응답에 따른 예외처리 가급적 모든 페이지의 디자인 구현 완료 2. 오늘 한 일 Stories 컴포넌트 구현 화면에 보여질 항목은 5개로, 넘치는 부분은 overflow: scroll 처리 페이지네이션으로 개선 필요 클릭시 모달창으로 팝업 유저정보와 인풋창을 position: absolute로 주어서 부모 위치와 상관없이 존재하고 있어 현재 위치값이 좀 어..

9.20 화 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] sns 포스트 업로드 폼 [x] 이미지, 텍스트 입력 모두 요청 데이터로 반영, 이미지 여러장 업로드 [x] 여러장 업로드 가능하도록 수정 [x] 라우팅이 아닌 모달창으로 팝업되도록 구현 [x] 데일리스크럼 회의록 정리 이번주 ec2 ↔ s3 연결 회원관리 기능(회원가입, 로그인, jwt 인가) 프론트, 백 모두 완성 FE - 마이페이지, SNS 기능 페이지와 세부 컴포넌트들 가급적 완성(로직 x, 스타일) 2. 오늘 한 일 2.1 SNS 포스트 업로드 폼 완성 [x] 모달창으로 구현 [ ] 시멘틱 태그를 사용해서 마크업부분 리팩토링 [x] 미리보기 이미지 캐러셀로 모달창 구현 참고 낙타의 블로그 :: 효율적인 modal 관리 with React(1) 1. 이미지 여러장 업로..

9.19 월 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] 위키에 칸반보드 사용규칙 문서화 [x] 프로젝트에 칸반보드 적용 [x] 회의 [ ] sns 포스트 업로드 폼, stories 컴포넌트 스타일부분 제작(로직 구현 x) [x] 데일리스크럼 회의록 정리 [x] 멘토 미팅시간 질문지 작성 [x] 멘토 미팅 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 fe ↔ be 통신 연결 확인 dev-fe 브랜치 개발환경 초기세팅, 파일구조, 주석 작성 2. 오늘 한 일 2.1 협업 설정 칸반보드 세팅 라벨 추가 이슈, pr 템플릿 추가 레포지토리 위키 작성 2.2 컴포넌트 제작 (로직 x, 스타일만) 입력..

9.18 일 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] fe ↔ be 통신 연결 확인 [x] jwt 토큰 인가 테스트, 개념정리 2. 오늘 한 일 통신 연결 확인 백엔드 서버를 임시로 ngrok을 통해 올리고 프론트는 내 로컬에서 켜서 백엔드의 ngrok 주소로 요청을 보내보았으나 안되어 2번째로는 netlify로 프론트엔드 임시 배포를 띄운 버젼에서 요청을 보내보았으나 안되었고, 마지막으로 aws s3에 클라이언트를 정적웹으로 올려서 백엔드로 요청을 보내니 요청과 응답이 잘 주고받아졌다. jwt 응답 헤더에 담긴 토큰값을 로컬스토리지에 저장해서 요청 헤더에 담아 보내려 했으나 계속해서 토큰값이 들어오지 않고 undefined 여서 내일 해결하기로 일단 넘겨두었다.

9.17 토 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] redux toolkit 토이프로젝트로 실습 및 메인프로젝트 코드에 반영 [x] redux toolkit 가이드 문서 보완 [ ] fe ↔ be 통신 연결 확인 [ ] jwt 토큰 인가 테스트, 개념정리 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 navbar 검색창 디자인 수정 2. 오늘 한 일 redux toolkit, thunk 메인프로젝트 적용 토이프로젝트로 실습 문서화 메인프로젝트에 적용 Redux Toolkit(작성중) 3. 공부할 것 jwt 생각했던 것보다 더 알아야 할 내용이 많다. https 통신 클라이언트와 서버가 별개..

9.16 금 - 메인프로젝트 데일리 회고

1. 할 일 오늘 [x] [구현] 로그인, 회원가입 폼 제작 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 fe ↔ be 통신 연결 확인 dev-fe 브랜치 개발환경 초기세팅, 파일구조, 주석 작성 2. 오늘 한 일 eslint 설정파일 에러 해결 airbnb 방식 린트 설정에 필요한 추가 패키지들이 package.json에 없어서 발생한 에러였고 누락된 패키지들을 package.json에 추가하여 npm i 해서 해결함. 회원가입, 로그인 폼 제작 기존에는 styled-component 작성과 로직을 따로 분리하지 않고 하나의 파일에서 전부 작성하여 스타일과 로직을..

9.15 목 - 메인프로젝트 데일리 회고

1. 체크리스트 오늘 [x] 피그마 파일 화면별 세부 동작 정의 [ ] styled-components 활용안 노션 문서 작성 완료 [x] 세부 기능 재조정 전체 팀원 회의 [x] 로그인 방식, 로그인 상태 유지 인가 방식 확정 이번주 fe 멘토 미팅 조언 내용 반영 - 칸반보드, 화면정의, 회고, 파일구조 redux toolkit 활용안 노션 문서 작성 완료 칸반보드 활용안 문서 작성 완료 및 레포지토리 반영 fe ↔ be 통신 연결 확인 dev-fe 브랜치 개발환경 초기세팅, 파일구조, 주석 작성 2. 오늘 한 일 2.1 화면 정의서 로그인, 회원가입 부분은 전체 팀원들과 세부사항을 정의하였다. 하지만 SNS기능의 세부사항과 지도 API를 활용하는 부분들에 대해선 모든 팀원들이 이번 프로젝트에서 처음..

13주차 - 반응형 웹 제출 과제

https://youtu.be/x7_BgPSltuM 배포 링크 : https://master--heartfelt-halva-3acfea.netlify.app/ isInteractive ? master--heartfelt-halva-3acfea.netlify.app canvas태그를 사용하고 css 애니메이션, 반응형 레이아웃을 구현만 하면 되고 창의력 좀 발휘해보라고 해서, 분명 시작은 개발자 포트폴리오 앱이었는데 도저히 라우터 해시링크 먹통난게 해결이 안되서 이래저래 바꾸다 보니 결국 문자 그대로 안드로메다로 가버렸네...?! 처음엔 데이터 시각화도 프론트엔드에게 중요한 업무기 때문에 chart.js를 써보려고 했는데 이리 저리 구글링하며 해봐도 안되어서 레퍼런스로 이해하기로 넘기고 하고싶었던것만 다 ..