Til

22.10.25 TIL

1. Done 1.1 타입스크립트 타입스크립트는 코드에 에러가 있더라도 컴파일은 진행된다. function add(n1: number, n2: number) { return n1 + n2; } const num1 = '5'; // Argument of type 'string' is not assignable to parameter of type 'number' const num2 = 2.2; const result = add(num1, num2); console.log(result); // 매개변수에 지정한 타입과 전달인자의 타입이 일치하지 않음. // 하지만 에러가 나도 컴파일은 진행됨. 타입스크립트의 주요 원시 타입은 모두 소문자로 시작한다 number, string ,boolean, ….etc Re..

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 {..

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