프론트엔드

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

1. 한 일 - 카카오맵 코드 리팩토링 1.1 ReactKakaoMapSDK 사용 카카오맵 api 공식문서의 바닐라 자바스크립트 문법을 단순히 리액트로만 바꾸기 보다, 처음부터 리액트에 맞게 만들어진 라이브러리를 사용하는 것이 좋겠다 판단하여 기존 코드를 전부 걷어내고 해당 라이브러리를 사용하여 useEffect 훅 안에서 검색 결과에 해당하는 마커를 지도에 표시해주며 검색 결과의 디테일한 정보가 나타나는 리스트를 map으로 화면에 렌더링하도록 하였다. 1.2 바닐라 자바스크립트 코드 제거 기존 방식에서 document.createElement, addEventListener, appendChild 등 바닐라 자바스크립트 방식으로 DOM 조작을 굉장히 많이 사용하고 있었고 검색 결과로 리턴하는 태그들을 ..

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

리팩토링 - 마크업 1. input 요소에는 label 요소가 항상 있어야 합니다. 2. 프로젝트에서 ul의 자식으로 a가 있는데 이러면 안 됩니다. → ul 안에 li, li 안에 a태그를 위치시키도록 수정 완료 3. 버튼 요소의 자식으로 헤딩을 넣을 순 없습니다. scrollToSection(submenu1)} > 입양 상담 센터 4. 푸터에서 주소는 addr 요소를 사용하면 좋습니다. → p 대신 전체를 address로 감싸고 줄바꿈은 br로 처리함 5. 버튼에 텍스트가 없으면 aria-label을 사용하면 좋습니다. → 텍스트를 가지지 않은 버튼은 aria-label 속성으로 버튼의 역할을 설명해주면 좋다. 6. 페이지의 타이틀이 없습니다. → 헤딩태그 추가 필요 7. body 요소는 하나여야 합..

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.17 토 - 메인프로젝트 데일리 회고

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