Homile

📗 오늘 한 일 면접준비 TypeScript를 사용하는 이유 React를 사용하는 이유 SPA란? 스터디하자 팀원분들이 올린 파일 구조에 맞춰 업로드 확인 폴더 구조 병합 components 폴더 한 화면에 담기는 컴포넌트끼리 한 폴더로 만들기 두 화면에 담기는 공용 컴포넌트는 UI 폴더에 넣기 11월 5일 알고리즘 테스트 준비 알고리즘 문제풀이 및 분석 SQL 문법 정리 오랜만에 작성해보는 SQL이지만 조금 해보니 Select, group by 등등 문법을 사용하는데 어려움이 없었다.

📗 오늘 한 일 면접준비 나만의 포트플리오 사이트 마이그레이션 https://cho-min-woo.notion.site/39d7d74c547245d1a8044069124452a1 스터디하자 회의 시간: 22. 11.03(목) 오후 (23:00 ~ 24:30) 장소: 스터디하자 게더타운 목적: 스터디하자 마이그레이션 초기세팅 마이그레이션 초기세팅 eslint prettier tsconfig.json index.js → index.tsx ts는 랜더링 되지 않는 react 파일 tsx는 jsx문법을 사용하여 화면에 랜더링 되는 파일 [22. 11. 11까지 해야할 것] 폴더 구조 변경 js → tsx, ts로 변경 다음주 금요일?까지 이게 안된다면 왜 안됐는지? 너무 어려웠다. 타입을 설정을 다시 해야하기 ..

📗 오늘 한 일 프로그래머스 0단계 풀이 모스부호 (1) 2차원으로 만들기 팩토리얼 k의 개수 가까운 수 실수: 가장 가까운 수가 여러 개일 경우 더 작은 수를 반환해야 했는데 하지 않음 해결: 입력된 배열을 정렬한 후 정답을 찾음 나만의 포트폴리오 사이트 마이그레이션 navbar css 작업 한 화면에서 컴포넌트로 스크롤 이동하기 React 특정 DOM으로 스크롤 이동시키기 면접준비 코드스테이츠 동기분이 받으신 실제 질문 목록 공부 자기소개 크로스 브라우징 시멘틱 요소 프로젝트 관련 (스택을 사용한 이유 및 사람들이 쓰는 이유) CSS 관련 질문 키프레임 가상 선택자 자식 선택자 블록 인블록 스터디 활동 질문 코드스테이츠에서 어떻게 공부했는지? 잦은 수정을 요청 받으면 어떻게 대응할 것인가? 큐와 스택

📗 오늘 한 일 알고리즘 [level2]다음 큰 숫자 문제 풀이 완료 [level2]피보나치 수 문제 풀이 완료 나만의 포트폴리오 사이트 마이그레이션 Styled-components 설치 # 스타일드 컴포넌트 라이브러리 npm i --save-dev @types/styled-components # 스타일 리셋 라이브러리 npm i styled-reset 참고자료 Styled Components & TypeScript [ REACT ] reset css 하는 방법 + npm으로 설치 GlobalStyle 지정 theme 파일 생성 Navbar 수정 이미지 src 에러 No overload matches this call. Overload 1 of 2, 스타일드 컴포넌트 사용시 img 태그로 작성해야하는 것..

📗 오늘 한 일 오전 국민취업지원제도 상담 이력서 자기소개서 백엔드 → 프론트엔드로 전향한 이유 작성 블로그를 왜 하는지 작성 최신순으로 정렬 포트폴리오 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를 사용하여 작업할 예정이기 때문에 학습해봐야겠다. 📝 중요한 내용 코딩테스트 준비 문제가 쉬울 것이라는 자만..

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