해당 면접 답변용 정리 카테고리의 글들은 내용 전체적인 포스팅이 아니라 면접에서 질문을 받았을 때 대답해야할 것들만 정리해둔 것으로 해당 내용을 공부하고 이해한 것들을 바탕으로 답변용으로 정리해둔 것이다. 내용을 자세히 알고 싶다면 다른 정리해둔 글을 보는게 더 효과적일 것이다. 변수와 식별자란 각각 무엇인가요? - 변수(variable)란 데이터를 할당하고 참조하기 위해 사용되는 이름이 붙은 메모리 공간 - 식별자(identifier)란 변수, 함수, 객체 등을 식별하기 위한 이름으로 사용되는 단어 ⭐️ 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 변수 선언이란 무엇을 의미하나요? 주로 3가지 키워드(var, let, const)를 사용하여 변수의 유효 범위(scope)와 생존 기간(lifeti..
포트폴리오 제작 중에 브라우저의 화면 너비를 구해서 너비에 따라 화면구성을 달리해줘야 했다. 그래서 window의 resize 이벤트를 사용하기로 하였다. 하지만 이대로 사용하였을 때 브라우저 창 resizing마다 콜백 코드가 계속해서 실행되었다. resizing마다 콜백 코드를 계속해서 실행해줘야할 수도 있지만 저는 resizing마다 실행할 필요가 없기 때문에 매우 비효율적이라 생각하였다. 그렇게해서 찾아보게 된 개념이 디바운싱과 쓰로틀링이다. 디바운싱, 쓰로틀링 두개 다 웹에서 발생하는 이벤트를 제어하는 방법이라고 한다. 디바운싱(Debouncing) - 연속으로 호출되는 함수들 중에 마지막에 호출되는 함수만 실행되도록 하는 것 쓰로틀링(Throttling) - 마지막 함수가 호출된 후 일정 시간..
부트캠프 수료 후 이력서와 더불어 포트폴리오를 작성해야하는데 노션과 웹형식 중에 고민을 하다가 다른 라이브러리들도 사용해보자 생각이 들어 웹사이트 형식으로 만들어보기로 했다. Portfolio 프로젝트 기간 : 2023 - 08 - 10 ~ 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발인원 : 1인 사용 주요스택, 라이브러리 React TypeScript Tailwindcss framer-motion emailjs react-scroll react-modal 먼저, 타입스크립트를 사용하는 것은 거의 필수로 생각을 했었고, 애니메이션은 한번도 써보지 못했던 framer-motion을 사용하여 더 적은 코드를 작성하는 간단한 선언적 구문을 통해 애니메이션 코드베이스를 읽고 유지 관리를 쉽게 하..
메인프로젝트가 끝나고 리팩토링과 함께 자바스크립트DeepDive 책을 다시 정독하면서 쉬엄쉬엄 뭔가를 만들어보고 싶은 마음에 뭔가 무겁지않고 새로운걸 만들어보려하다가 만들어보게 되었습니다. Lofi-App 프로젝트 기간 : 2023 - 07 - 27 ~ 2023 - 08 - 09 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발인원 : 1인 프로젝트 구상 계기 뭔가 흔하다면 흔한? 음악관련 웹앱을 만들어본적이 없었습니다. 한번쯤 만들어보고싶었던 상황에서 요즘 코드치면서 많이 들었던 lofi음악에 관하여 만들어보고싶다는 생각이 들어서 만들어보게 되었습니다. 사용 주요스택 React TypeScript Mui Redux-toolkit sass react-timer-hook react-player ..
다사다난 했던 메인프로젝트 회고를 해보자 무비팝 프로젝트 기간 : 2023-06-28 ~ 2023-07- 24 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발 방법론 : Agile Scrum - 깃허브 이슈들을 이용하여 작성 개발 인원 : 무비팝 주요화면 : 프로젝트 구상 계기 무비팝은 처음 아이디어 회의시간을 가질때 팀원 중에 한분이 영화보는것을 매우 좋아하여 영화에 관한 프로젝트를 해보고싶다고 먼저 말씀을 해주셨고, 그 과정에서 영화를 리뷰하고 다른사람들이 그 리뷰를 보고 해당 영화를 혼자 시청하거나 같이 시청하기위해 팟을 모집하는 등의 서비스 뿐만 아니라 영화장르의 선택을 통해 맞춤추천 등의 서비스를 기획하게 되었습니다. 주요기술 스택 (클라이언트) React Styled-Compone..
6/22 오늘은 백엔드팀에서 준 api를 받아서 원래 사용하고 있었던 express 로컬 대신 aws를 통해 배포된 api를 가지고 데이터 패칭을 해볼 수 있었다. 하지만 그 과정이 쉽지않았다. 일단 먼저 cors를 하기위해서 프록시 설정을 해주어야 했는데 프록시를 써볼일이 잘 없었던터라 여기저기 구글링해보고 gpt의 힘을 빌릴수밖에 없었다. 하지만 프록시를 우리 프론트엔드팀이 제대로 잘못쓰고 있었다... ❌ 에러 발생과정 서버에서 데이터를 가져오기 위해서 axios 라이브러리로 서버와 통신 -> CORS 에러발생 CORS 에러를 처리하기 위해서 vite빌드도구의 프록시 설정법은 vite.config.js파일에서 프록시를 설정해주었다. vite.config.js 파일에 서버와 통신을 하는 모든 api주소..
6/19 전에 했던 초기세팅을 기반으로 코딩을 시작했다. 프론트엔드팀은 백엔드팀이 api와 서버를 구축해서 우리에게 넘겨주기전까지는 UI를 먼저 완성시켜서 백엔드팀이 api주소를 넘겨주면 우리는 데이터패칭을 해와서 띄워주면 되는식으로 먼저 만들어보기로했다. 제가 맡은 파트는 질문의 답변 추가, 수정, 삭제 , 답변에 대한 댓글 추가, 수정, 삭제 댓글에 엄지손가락표시로 추천을 누르면 올라가거나 내려가는 추천기능을 담당했다. 그렇게 질문상세페이지에서 컴포넌트들을 나누고 질문 상세페이지에 답변컴포넌트를 만드록있던 중 문득 든생각이 페이지들에 공통으로 들어가는 헤더, 사이드, 푸터를 나누지않았다. 그렇게 3개를 3명이서 각각 한개씩 맡아서 그 부분을 먼저 만들었다. 답변컴포넌트를 만들때 UI를 만드는데에서는 ..
오늘은 깃 레포 초기설정부터 시작했다. 깃 레포 초기설정을 해야하는데 그거부터 문제가 시작되었다. client, server 폴더를 나눠서 진행해야해서 하는데 폴더나누는거부터 문제가 시작되었다. client랑 server를 만들어야하는데 시작하자마자 바로 문제가 되었다. vite로 리액트를 설치하는데 vite project를 설정해줘야해서 client폴더 속에 project폴더가 생기게 되는 것이다. 바로 아차싶어서 client를 지우고 브랜치를 새로 파서 vite로 project폴더로 client라는 이름으로 생성해주었다. 그렇게 client 폴더를 생성해주고, 초기 설정을 해주었다. Prettier, ESlint 설정도 해주었다. 아니나 다를까 Prettier에서 바로 에러가 생겼다. module.e..
