신입개발자

인프런 회사 견학 후기

Table of contents 후기 질문과 답변 1. 후기 소중한 분께서 만들어주신 소중한 기회로 인프런 회사 견학을 해볼 수 있는 기회가 생겼고, 함께 열심히 부트캠프를 진행했던 인원들과 인프랩 사무실을 견학하였습니다. 인프랩 사무실 소개, 인프런과 랠릿 프론트엔드 파트 업무와 서비스에 대한 소개, 신입 개발자의 온보딩 과정, 사전에 준비해간 취업준비를 갓 시작하는 신입 프론트엔드 개발자가 가장 궁금해할 만한 여러 질문들에 대해 인프런과 랠릿 프론트엔드 파트의 여러 팀원분들, 그리고 CTO이신 향로님께서 긴 시간 자세하게 답변을 해주셨습니다. 다소 많은 인원이 한꺼번에 방문드려 업무에 너무 차질을 드리진 않았을까 죄송스러웠지만, ”우리는 성장 기회의 평등함을 추구합니다.” 라는 인프런의 모토에 걸맞게..

포트폴리오 앱 성능최적화 작업기 1편

0. Intro 기존에는 Three.js를 사용해서 외부 소스의 gltf 모델링 파일을 컴포넌트로 변환하여 웹에서 3d를 구현했었다. 하지만 이번에 꼭 사용해보고 싶은 게 있어 3d 모델링 툴인 Spline을 사용해서 구현한 3d 모델링 파일을 코드로 export 하여 포트폴리오 앱에서 받아와 사용했다. 이 과정에서 모델링 파일을 받아오는 방식이 빌드 파일 내에 저장된 걸 사용하는 게 아니라 네트워크를 사용해서 받아오게끔 되어있어, 모바일에서는 정상적인 열람이 힘들 정도의 심각한 성능 저하가 발생하였다. 구글 라이트하우스를 돌려보면 데스크탑 환경에서 해당 3d 파일을 불러오는 코드만 삭제해도 퍼포먼스 점수가 28점에서 64점이 될 정도이다. 이를 해결하려면 모델링 파일 자체를 더 적은 폴리곤을 사용하거나..

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

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로 보여져야 함 수정중 제출 전에 입력값으로 미리보기 이미지 변경, 텍스트도 새..