위코드 부트캠프를 수료하고 2주째부터 서류를 마구잡이로 넣기 시작했다. 첫 주차에는 이력서를 작성했고, 취업 스터디 팀원들을 모아 면접대비를 하는 시간을 가졌었다. 개인적인 성향이 최대한 준비를 하고 부딪히는 편이었는데 주변사람들이 하나 둘 면접이 잡히는 것을 보고 나

시맨틱 버저닝은 개발하는 소프트웨어의 규모가 커지고, 외부 라이브러리를 많이 사용할수록 생기는 의존성 지옥을 해결하고자 생긴 공통의 버전 명시 규칙과 요구사항을 뜻합니다. 일반적으로 라이브러리를 설치하게 될 경우, 위와 같은 형태를 띄고 있습니다. 하나씩 살펴보도록

npm start를 하고나서 리스트관련 페이지로 이동 시, 렌더링이 이루어지지 않는 현상이 있었습니다. 그 이유는 sessionStorage에 있는 토큰 값을 받아온 이후에 그 토큰값을 바탕으로 백엔드로 요청을 보내야 하는데 토큰값을 가져오기 전에 요청을 보냈기 때문에

kakao 지도 api 검색Web 선택시작하기 클릭카카오 개발자사이트 링크 클릭회원가입 후, 상단 네비게이션 바에서 내 애플리케이션 선택애플리케이션 추가하기 클릭앱이름, 사업자명 입력 후 저장리스트에서 추가된 애플리케이션 선택플랫폼 설정web 선택 후 사이트 도메인 추

필터나 키워드를 통해 검색을 할 경우, url이 조건에 맞게 변하는 것을 구현해보았습니다. 모달창에서 특정 조건을 체크하고 검색버튼을 누르게 될 경우 해당 필터링에 해당하는 데이터를 뿌려주는 것에는 성공을 했지만 url에도 어떤 조건으로 필터링이 들어갔는지 보여주기

url에 해당 필터링에 대한 정보를 표시하기 위해 필터링된 정보를 따로 빼내는 함수를 작성하고 productlist path 뒤쪽에 붙여서 url 이동을 했습니다.

react-slick 라이브러리는 React Carousel을 사용하기 쉽게 라이브러리화 시킨것을 의미합니다.실제로 react만을 이용해 carousel을 만들경우, 하단에 무한 carousel 이나 하단에 dot 등 고려해야 할 것이 많기 때문에 사용법만 안다면 훨씬

기대 반 걱정 반으로 시작했던 1차 프로젝트가 끝이났다. 다음 주면 2차 프로젝트가 시작되기 때문에 소중한 1차 프로젝트의 기억들이 휘발되기 전에 기록을 남긴다. React를 사용한 르라보 클론 코딩 주라보 르라보는 향수 관련 상품이 메인인데 팀원들이 모여 팀명에

route 에서 props 받기

장바구니의 수량을 바꿀 때마다 바뀐 수량을 sessionStorage 에 저장하는 작업을 하던 도중 한 박자 늦게 반영되는 문제가 있었습니다.

실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 만들어 본 샘플 데이터를 말합니다프론트엔드 개발을 진행하려는데 필요한 백엔드 API가 완성이 안되었을 경우이 경우에는 백엔드에서 받아올 데이터 구조와 유사한 mock data를 만들어 데이터에 맞게

동적 라우팅이란 라우트 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 의미합니다. 보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성되는데, 이

리액트에서 화면이동을 위해 사용하는 두 가지 방법과 두 방법의 차이점에 대해 알아보도록 하겠습니다!라이브러리 설치Router.js에서 설정한 path로 이동하는 첫 번째 방법은 Link 컴포넌트를 사용하는 방법입니다.클릭 시 바로 이동하는 로직 구현 시에 사용 용이re

자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미즉, 자원의 표현에 의한 상태 전달자원의 표현자원 : 해당 소프트웨어가 관리하는 모든 것자원의 표현 : 그 자원을 표현하기 위한 이름\-> Ex) DB의 학생 정보가 자원일 때, 'student

배열로 받아온 props에서 인덱스로 접근을 하려고 하니 다음과 같은 에러가 발생했습니다. Uncaught TypeError: Cannot read properties of undefined (reading '0')위와 같은 에러는 배열이 아닌 변수에 인덱스로 접근을

이번에 프로젝트를 진행하면서 알게 된 e.currentTarget 와 e.target의 차이점을 정리해보려고 합니다. MDN 문서 에서는 다음과 같이 e.currentTarget의 정의를 내리고 있습니다.The currentTarget read-only propert

코드리뷰를 받던 중 리액트의 조건부 렌더링을 단편적으로만 이해한 것 같아 정리할 위해 글을 남깁니다.이번에 인스타그램 로그인 페이지를 구현할 당시 input 값이 변경될 때마다 onKeyUp 이벤트를 통해 유효성 검사를 하도록 했습니다.위와 같은 방법은 이메일 inpu

기존의 쿠키에 대한 제약들을 해소하고 조금 더 다양하고 클라이언트에 다양한 기능을 넣고자 HTML5부터 등장하였습니다.쿠키의 제약4kb의 데이터 저장 제한매 HTTP 요청에 포함되어 웹이 느려지게 하는 원인이 될 수 있음같은 쿠키는 도메인 내의 모든 페이지에 같이 전달

이벤트 위임이란 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 의미합니다. querySelectorAll 을 통해 button 태그들을 불러와 forEach를 돌려 각각의 버튼에 이벤트를 달아주었습니다. 이벤트 위임에 대해

리액트의 컴포넌트에서는 동적인 값을 상태(state)라고 부릅니다. 리액트에서는 리렌더링을 위한 조건으로 여러 가지가 있는데 그 중 하나가 상태값 변경입니다. 리액트에서는 useState라는 훅을 통해 컴포넌트에서 상태를 관리할 수 있습니다.const count, se