Homile

📗 오늘 한 일 오전 국민취업지원제도 상담 이력서 자기소개서 백엔드 → 프론트엔드로 전향한 이유 작성 블로그를 왜 하는지 작성 최신순으로 정렬 포트폴리오 github 메인에 어떤 사용할 수 있는 기술 스택 작성 메인프로젝트 ANBD(아나바다, 레저용품 공유 사이트) 메인화면 컨텐츠 수정(레저용품 게시글이 나올 수 있도록) 나만의 포트폴리오 사이트 마이그레이션 바닐라 JS → React TS로 변경 알고리즘 스터디 10월 29일 (금) 인프런 탐방 후기 작성

📗 오늘 학습한 내용 프로그래머스 LEVEL.0 4문제 풀이 기술면접, 일반면접 준비 개인 포트폴리오 사이트 (Vanilla JS → React TS로 마이그레이션) 프론트엔드 개발자로 공부를 시작할 때 강의를 보며 구현했던 개인 포트폴리오 사이트를 React에서 TypeScript를 사용하여 마이그레이션을 해봤다. React TS기초 세팅 (CRA) npx create-react-app "프로젝트 이름" --template typescript 📘 추가로 공부할 내용 Next.js Redux Query

📗 오늘 학습한 내용 프로그래머스 LEVEL.0 4문제 풀이 기술면접, 일반면접 준비 Vercel push 한 파일이 제대로 반영되지 않는 현상이 있었다. 처음엔 github Action을 사용해서 배포를 해야하나 했다. 하지만 조금 더 간편하지만 수동적인 방법으로 할 수 있었다. React 파일 자체를 올려서 빌드하고 배포를 하는 과정을 한다면 위와 같은 현상은 발생하지 않는다. 환경변수로 설정된 API Key를 하나하나 지정해주기 번거롭다고 생각했기 때문에 num run build를 한 후 빌드된 파일을 올려 배포하는 것일 선택했던 것이 문제였다. 위의 현상을 해결하기 위해 찾아본 결과 수동으로 재배포를 해주면된다. 아래사진에서 처럼 preview deployments에서 배포할 내역의 옵션을 클릭한..

📗 오늘 학습한 내용 프로그래머스 LEVEL.0 4문제 풀이 기술면접, 일반면접 준비 Vercel vercel을 사용해서 클라이언트 파일을 배포할 때, 보통 react 파일을 배포해서 값을 얻어내지만 그럴 경우 npm run build -> public -> npm install 등을 작성해서 해야하고, 이렇게 배포할 경우 보안상 API키를 담고 있는 env파일은 github에 올리지 않으니 API키가 같이 등록되지 않았다. 위의 방법을 해결하기 위해 num run build를 한 뒤 파일을 github에 업로드하고 build된 파일을 vercel로 지정해서 배포하니 해결됐다. 처음엔 이게 될까? 했지만 시도해봤고 성공해서 뿌듯했다. StudyHaza 프로젝트 리팩토링 로그인 / 회원가입을 할 때 파이어..

📗 오늘 학습한 내용 프로그래머스 LEVEL.1 1문제 풀이 콜라 문제 쉬운 문제였지만 while문의 조건을 잘 못 작성해서 실패를 많이했다. 프로그래머스 LEVEL.2 3문제 풀이 2진 변환 반복하기 올바른 괄호 숫자의 표현 기술면접, 일반면접 준비 TypeScript 학습 tsconfig.json 설정 방법 모듈관련 학습 📘 추가로 공부할 내용 TypeScript Next.js Redux Query server와 client 사이 비동기 로직들을 쉽게 사용할 수 있기 때문에 학습해야한다. STRAPI 이전에 작업했던 프론트엔드 팀 프로젝트를 TS로 리팩토링할 때, 파이어베이스 대신 STRAPI를 사용하여 작업할 예정이기 때문에 학습해봐야겠다. 📝 중요한 내용 코딩테스트 준비 문제가 쉬울 것이라는 자만..

Vite란? 공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. Create React App대신 사용하는 이유 CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있습니다. 위와 같은 단점을 해결하기 위해 Esbuild..

📗 오늘 학습한 내용 프로그래머스 LEVEL.1 1문제 풀이 프로그래머스 LEVEL.2 1문제 풀이 기술면접, 일반면접 준비 TypeScript 강의 React TypeScript 생성 기존 JavaScript로 구성된 React TypeScript로 리팩토링 Vite CRA(Create React App)을 대신해 사용할 수 있는 빌드 도구 📘 추가로 공부할 내용 TypeScript Next.js Redux Query STRAPI 📝 중요한 내용 TypeScript 타입스크립트로 리액트 프로젝트 생성하는 방법 자바스크립트로 구성된 리액트 프로젝트 타입스크립트로 리팩토링 하는 방법

Redux? 상태를 전역적으로 관리하기 위해서 사용되는 상태관리 도구이며, Redux 외에도 MobX, React Context, Recoil 등이 있습니다. 상태관리 도구를 사용하여 Props drilling 이슈를 해결할 수 있습니다. Props drilling? 상태가 존재하는 컴포넌트에서 자식 컴포넌트로 이동을 할 때, 수많은 props를 계속해서 내려야하는 경우를 말하며, 코드의 가독성이 나빠지고 유지보수 또한 힘들어집니다. Action 상태에 어떤 Action(행동)을 취할 것인지 정해놓는 객체입니다. Action이 많아질 경우 ActionTypes 파일을 생성하여 타입을 모아두는 경우도 있습니다. Action 타입을 정의할 때는 모두 대문자로 Snake Case로 작성합니다. // 전달 받을..

📌 개발자는 꾸준함이 생명이라고 생각이들어 하루에 5시간은 무조건 공부를 하는데 쏟기로 했는데 아직까진 잘 지켜지고 있어서 다행이다!!! 앞으로도 꾸준히 개발에 대한 공부를 멈추지 않고 열심히 해야겠다. 📗 오늘 학습한 내용 메인프로젝트 팀 노션 페이지 정리 프로그래머스 LEVEL.0 4문제 풀이 기술면접, 일반면접 준비 TypeScript 강의 조합 타입 (union) 리터럴 타입 타입별칭 📘 추가로 공부할 내용 TypeScript 타입스크립트로 React 웹 만들기 Next.js Redux Query Vite 📝 중요한 내용 TypeScript 조합, 리터럴, 타입별칭 설정 방법

✅ 오늘 한 일 배포링크 : https://d1chxyssw587bm.cloudfront.net/ 발표 자료준비 스택 이미지 및 각종 기획 링크 깃헙 업로드 레저용품 판매점 API가 늦게와서 목데이터를 생성해서 화면에 출력할 수 있게함. 발표 전 주말에 API가 와서 목데이터 -> API로 수정 좋아요(관심목록) 기능 API 연결 Route53 비용 발생 가비아에서 구매한 도메인을 사용하기 위해서 사용했다. 하지만, Route53은 프리티어가 적용되지 않는 범위였다. 몇만회 이상 get요청이 오지 않는다면 1달러씩만 내면된다고 한다. 차후 방안으로는 CloudFlare를 사용하는 방법이 있을 것이다. 채팅 기능 구현 (Stomp 사용) 채팅 기능을 백엔드 측에서 API를 생성하여 크롬 플러그인을 사용해 ..