부트캠프

10.12 수 - 메인프로젝트 데일리 회고/데모데이

1. 피드백 1.1 지도 검색기능 일부 키워드 무반응 1회 검색 후 input창 안 비워짐, 재검색 시 검색 안됨 2. 회의록 2.1 AWS 비용 정산 추후 논의 2.2 AWS 보안 대책 체크리스트 [x] AmazonCloudWatch 설정 [x] 예산 생성(budget) [x] 루트 사용자의 MFA 활성화 [x] 미사용 IAM사용자 삭제 [ ] IAM사용자 권한 재조정 [x] 레포지토리의 AWS 관련 Actions secrets 삭제 (배포자동화용 IAM계정 삭제함으로 의미없는 환경변수임) 참고 해킹 사례 aws - 저에겐 2174만원이 없습니다. (해킹과금) MFA 설정 MFA 개념과 AWS MFA 등록 방법(feat. AWS IAM) 2.3 리팩토링 계획 추후 논의

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

리뷰 메인 프로젝트까지 끝났고 데모데이와 취업특강만 진행하면 6개월간의 부트캠프 여정도 끝이 난다. 처음 해본 팀 프로젝트에 처음 해본 팀장으로 정말 준비할 것도 많았고 나의 부족함이 절실하게 느껴졌었다. 기껏 다 구현해놓은 기능들도 백에서 안되거나 프론트에서 안되거나 해서 빼거나 축소하고 프론트와 백을 별도로 배포한 상태에서 https로 연결되도록 통신을 붙이는 것도 정말 많이 해메었고, 지금의 아키텍쳐가 절대 좋은 구조는 아니지만, 아쉬운 대로 우리는 최선을 다 했고 어쨌든 이것만은 못 뺀다 못 박은 기능들은 어쨌든 완성했다. 막판에 발표 ppt조차 만들 기력과 의지도 없어 노션 띄워놓고 발표영상 찍고 마감 30분 전에 업로드하고 있는데 마감기한을 연장한다는 소식을 듣고 기쁘기보단 빡칠 정도로 소진되..

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

1. 랜딩페이지 제작 1.1 외부 소스 3d 모델링 파일 사용 참고자료 https://www.youtube.com/watch?v=wxvSHOrBHbw&list=PLK8VVt9yHQg77lSciXjvnCix0tp5R3l8R&index=25&t=1s 3d 모델링 파일 .gltf 형식으로 다운로드 gltf → gltf2 로 포멧 변환 (gltf-pipeline 사용) gltf2 → 자바스크립트 컴포넌트로 코드로 사용할 수 있도록 변환 (gltfjsx 사용) 프로젝트에 파일 가져오기(gltf파일: public 폴더, js파일: components 폴더) 컴포넌트로 변환한 js파일 export default로 변경 gltf2 포멧 변환 // gltf2 변환기 전역 설치 npm i -g gltf-pipeline /..

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

체크리스트 [x] 개인: 체크리스트 구현 마무리 - 결과창 스타일링 추가하기 [ ] FE: 불필요한 주석, 콘솔로그, 미사용 코드 제거, 리덕스로거 삭제 [ ] 팀: 새로고침 시 로그인 상태 풀리는 문제 해결 [ ] 팀: 서버 배포자동화 [x] 팀: 발표자료 준비 논의 1. 개인작업 - 체크리스트 구현 마무리 결과 점수에 따라 다르게 보여지는 결과 페이지 스타일링과 내용을 추가하여 마무리하였다. 2. FE - 불필요 코드 제거, 최종 배포버젼 세팅하기 미비된 기능들이 있어 먼저 해결해야 하여 리팩토링 진행 x. 3. 발표자료 준비 [x] 팀 노션 페이지에 발표 문서 생성 [x] 서비스 발표 문서 기본 뼈대 잡기 [x] 개인 기술 발표 문서 기본 뼈대 잡기 [ ] 발표 영상 흐름에 따라 영상 내용 생각해보..

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 배포..