기록

22.10.24 TIL

1. Done 1.1 복습 - 개인프로젝트 firebase admin 코드 분석 1. 인터페이스 /** 인터페이스: 기본 명세를 정의한다. */ interface Config { credential: { privateKey: string; clientEmail: string; projectId: string; }; } 2. 싱글톤 패턴 /** 싱글톤 패턴으로 FirebaseAdmin 인스턴스를 어디서든 불러올 수 있도록 export default. */ export default class FirebaseAdmin { public static instance: FirebaseAdmin; private init = false; public static getInstance(): FirebaseAdmin {..

22.10.21 TIL

Task 기술면접 질문 공부하고 답변 정리, 문서화 1. Done 1.1 기술면접 답변 정리 질문: 스코프에 대해 설명해주세요. 스코프란 식별자의 유효범위를 말합니다. 모든 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효범위가 결정됩니다. 예를들어, 함수의 매개변수는 함수 몸체 내부에서만 참조가 가능하며 함수 몸체 외부에서는 참조가 불가능합니다. 이 경우 매개변수의 스코프, 즉 유효범위는 함수 몸체 내부가 됩니다. 스코프는 크게 전역 스코프(Global Scope), 지역 스코프(Local Scope) 두 종류로 나뉩니다. 변수를 기준으로 설명하자면 전역에서 선언된 변수는 전역이 유효범위인 전역 변수이며, 지역에서 선언된 변수는 지역 스코프의 지역 변수가 됩니다. 지역 스코프의 경우 세부..

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 요소는 하나여야 합..