분류 전체보기

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

1. 양육환경 자가진단 테스트 컴포넌트 구현 네, 아니오 버튼 뿐만 아니라 이전, 다음 버튼으로 문항 자체만 이동도 할 수 있도록 구현하고자 했으나 이전 버튼 클릭 시 한번 다음 문항으로 갔다가 이전으로 가고, 다음 버튼 클릭시에도 한번 이전으로 갔다가 다음 문항으로 가는 문제가 어떻게 코드를 바꿔보더라도 해결이 되지 않아 제외시키고 어쩔 수 없이 네, 아니오 버튼 클릭 시 점수 최신화와 다음 문항으로만 이동만 되고 점수에 따라 화면에 표시될 결과가 달라지도록만 기능 구현을 시간상 마무리하였다. 1.1 체크리스트 컴포넌트 start: 테스트 시작 전 커버이미지와 시작버튼을 보여주다 시작버튼 클릭 시 state가 false로 변하고 체크리스트 문항으로 화면에 보여질 내용을 조건부 렌더링 하기 위한 stat..

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

1. 멘토님 조언사항 프론트 코드 지켜내기(DTO) [무료] 인프콘 2022 다시보기 - 인프런 | 강의 백, 프론트 유지보수 기간의 미스매치가 발생하는 경우 프론트만 수정할 수 있을 때 dto를 정의하고 추후 백엔드 개발자와 공유하고 dto 제거 초기개발단계에서 사용 목데이터 커링 패턴 어려운건 어렵게 배워라 2. 배포환경 https 통신 테스트 클라이언트 정적웹 netlify 배포(https) ↔ 백엔드(https) Route53 + ELB + EC2 + RDS 통신 테스트 성공 서버 무중단배포 필요 2.1 엔드포인트 변경 무색: 백엔드 서버 주소로 대체됨 노랑: 목서버 코드 대체 필요 파랑: 미구현 src redux userSlice.js components Form mypage MyPageForm..

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. 이미지 여러장 업로..