profile
어제보다 성장해 나가고 싶은 개발자
post-thumbnail

위코드 프론트엔드 취업 후기

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

2022년 5월 20일
·
0개의 댓글
post-thumbnail

Semantic Versioning?

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

2022년 5월 6일
·
0개의 댓글
post-thumbnail

[React] 순서를 보장해서 데이터 렌더링 시키기

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

2022년 3월 5일
·
0개의 댓글
post-thumbnail

[Project-MyJejuStay-React] kakao map api 여러개 마커와 커스텀오버레이

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

2022년 2월 27일
·
3개의 댓글
post-thumbnail

[Project-MyJejuStay-React] url에 필터링 조건 붙이기

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

2022년 2월 19일
·
0개의 댓글
post-thumbnail

[React] checkbox 체크된 값만 queryParameter로 보내기

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

2022년 2월 19일
·
0개의 댓글
post-thumbnail

[React] react-slick 라이브러리 styled-components로 커스터마이징 하기

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

2022년 2월 19일
·
0개의 댓글
post-thumbnail

[회고] 1차 프로젝트가 끝나고...

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

2022년 2월 12일
·
2개의 댓글
post-thumbnail

[React] react-router-dom v6에서 Route로 props 보내기

route 에서 props 받기

2022년 2월 12일
·
0개의 댓글
post-thumbnail

[PROJECT-JULABO-React] setState

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

2022년 2월 12일
·
0개의 댓글
post-thumbnail

[React] mock data 활용하기

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

2022년 2월 5일
·
0개의 댓글
post-thumbnail

[React] 동적 라우팅

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

2022년 2월 5일
·
0개의 댓글
post-thumbnail

[React] Link & useNavigate

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

2022년 2월 3일
·
0개의 댓글
post-thumbnail

[Network] REST란? REST API란? RESTful이란?

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

2022년 1월 30일
·
0개의 댓글
post-thumbnail

[PROJECT-JULABO-React] Uncaught TypeError: Cannot read properties of undefined (reading '0')

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

2022년 1월 29일
·
0개의 댓글
post-thumbnail

[PROJECT-JULABO-JavaScript] e.currentTarget

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

2022년 1월 29일
·
0개의 댓글
post-thumbnail

[React] 리뷰 - 조건부 렌더링

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

2022년 1월 20일
·
0개의 댓글
post-thumbnail

브라우저 저장소

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

2022년 1월 19일
·
0개의 댓글
post-thumbnail

[JavaScript] 이벤트 위임

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

2022년 1월 17일
·
0개의 댓글
post-thumbnail

[React] useState

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

2022년 1월 15일
·
0개의 댓글