전체 글

9.25 월 - 메인프로젝트 데일리 회고(멘토 미팅)

카카오맵 api 사용 참고: [React] 카카오 맵 API로 지도 검색 앱 구현하기 with TypeScript 멘토 미팅 질의응답 Q1) 로그인 상태에 따른 조건부 렌더링 상태 실시간 반영 x 로그인 요청 성공 시 로컬스토리지에 loginStatus 란 임의의 값을 true로 저장해둔 상태 로그인 요청은 components > Form > user > LoginForm.jsx 컴포넌트에서 실행 navbar 조건부 렌더링은 components > Nav > Nav.jsx > NavTop.jsx 컴포넌트에서 실행 Nav 컴포넌트는 App.jsx에서 라우팅 경로 상단에 위치하므로 state를 내려주고 올려받아야 의도대로 렌더링 될 것으로 예상됨 function App() { return ( **** ***..

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

1. 한 일 1.1 AWS 세팅 시도한 것들: 클라이언트 정적웹 배포자동화 적용 테스트(dev-fe 브랜치) 클라이언트(route53, cloudFront, s3) 정적웹(https) ↔ 서버(http) ec2연결 테스트 http 클라이언트 연결 테스트 - 성공( s3 ↔ ec2 ) 클라이언트 배포자동화 테스트 Route53, cloudFront, s3 연동한 https 클라이언트 정적웹 배포 후 클라이언트 배포시 생성했던 도메인의 acm 인증서를 백엔드 서버 인스턴스가 설치된 ec2에 연동하려 시도하였으나 acm 인증서가 버지니아 북부 리전에서만 검색이 되며, 서울 리전에서 ec2와 rds를 연동하여 백엔드 서버를 구축한 상황에서 해당 ssl 인증서가 불러와지지 않았음. 성공: cloudFront 배포..

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 여서 내일 해결하기로 일단 넘겨두었다.