회사에서 개발하던 중 선택된 상품의 배열에서 각 상품의 store_key와 quantity를 추출해서 결제페이지로 넘겨주는 로직을 개발하고 있었다. 추출하려는 값우선 장바구니 상품들중 선택한 상품을 id로 필터하고 map으로 store_key키만 추출한 다음 ...

재작년 10월경에 Jekyll에서 gastby로 블로그 이전을 했었다. 그런데 올해 다시 gastby에서 velog로 이전을 했다.

프론트엔드 개발자로 일한지 7개월정도가 되었다. 퍼블리셔로 오래 지내면서 git은 거의 사용해 본 적이 없었고 (아주 간단하게 사용) 사용하더라도 git GUI인 소스트리를 사용해 git 명령어를 거의 모르는 상태였다고 봐도 무방했다.물론 개발자로 이직 준비하면서...

인생에서 제일 길었던 한해가 지나갔다. 2022년. 다사다난했던 한해. 많은 일들이 있었던 만큼 매우 긴 한해였다.프론트엔드 개발자가 되겠다고 연초부터 면접을 보러 다녔었는데 아주 오래전 이야기가 된것 같은 느낌.. 길고도 험난했던 해인만큼 2022년 회고록을 쓰며..

어느날 사수가 갑작스럽게 보내준 링크. (Next.js 13 신버전 발표회 요약 (웹개발자 비상!!)) 나는 프론트엔드 웹개발자로 React를 사용하고 있고 우리회사는 production에서 많이 사용되고 편리한 Next.js를 사용중이다.사실 사수가 저 링크를 ...

회사의 새로운 프로젝트에서 React query와 함께 Recoil을 써보고 싶다는 생각이 들었다.우리 회사는 전역적으로 관리할 상태들이 많지 않아 쉽게사용할 수 있는 Context API를 사용하고 있다. 나는 React를 공부할때 Redux를 사용해봤기 때문에...

커머스 인하우스 신입 프론트엔드 개발자로 취업한지 2달정도 되었다. 현재 회사는 3개의 사이트를 가지고 있는데 1개만 자체솔루션이고 2개는 쇼핑몰 웹 솔루션을 사용하고 있다. 일반 솔루션을 사용하면 개발에 한정적이고 재고를 정확하게 관리하기 힘들기 때문에 하반기에...

주소창에 URL을 입력하면,DNS 서버 검색 브라우저는 DNS(Domain Name System)를 운영하는 서버를 통해 서버의 실제 주소인 IP 주소를 요청한다. 매핑되는 IP 주소가 있다면 사용자가 입력한 URL 정보와 함께 전달한다.브라우저는 IP 주소를 이용..

Redux의 미들웨어 라이브러리 중 한 개로 Redux-thunk, Redux-toolkit 등 다양한 라이브러리가 존재하지만 Redux-saga를 사용하는 기업이 많다. Redux-saga는 다른 라이브러리에 비해 더 복잡한 비동기 처리를 할 수 있다는 장점이 있다.

리액트 16.8 이전 버전에서는 function 컴포넌트에서는 상태(state)를 관리할 수가 없었다. 16.8 버전에서 Hooks 라는 기능이 도입되면서 function 컴포넌트에서도 상태를 관리할 수 있게 되었다. function 컴포넌트의 Hooks를 사용하면..

리액트를 사용하면서 virtual dom(VDOM)과 관련된 글을 많이 보게 되었다.virtual dom, 직역하면' 가상의 dom'이란 뜻인데 의미만으론 정확한 개념을 알수가 없었다.VDOM엔 대해 알기위해서 팔요한 선행지식에 대해 알아보자 Virtual DOM을..

async/await는 ES8에서 채택되었으며 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기처럼 동작하도록 구현할 수 있다. 프로미스를 기반으로 동작하며 프로미스의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 ...

자바스크립트는 싱글 스레드로 한번에 한개의 작업만을 다룰 수 있는 동기식 언어이다.  \*싱글 스레드 : 하나의 프로그램에서 하나의 코드만 실행할 수 있다는 뜻이다. 하나의 작업이 끝나야 다음 작업을 시작할 수 있다.런타임이란 프로그래밍 언어가 구동되는 환경을 말한다.

자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 비동기에서 사용되던 콜백 패턴은 계속되는 콜백으로 인해 콜백 지옥(Callback Hell)에 빠질 확률이 높다. 콜백 지옥에 빠지면 코드의 가독성이 떨어지고 비동기 처리 중 발생한 ...

scroll 이벤트를 사용하면 스크롤을 올리거나 내리는 짧은 시간동안 많은 이벤트가 발생한다. 복잡한 작업의 scroll 이벤트를 처리한다면 빈번하게 실행되는 이벤트 때문에 성능이 저하되고 렉이 걸릴 확률이 높아진다.이처럼 짧은 시간 간격으로 연속해서 발생하는...

웹의 데이터를 클라이언트에 저장할 수 있는 자료구조다.HTML5에서는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어있다.key:value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다.

주제와 본문을 빈줄로 분리하기주제는 50자로 제한하기주제의 첫 글자는 대문자로 쓰기주제에 마침표를 넣지 않기주제는 명령으로 작성하기본문은 72자에 줄바꿈하기how 보단 what과 why를 설명하기꼬리말은 "type: - 이슈 번호는 쉼표(,)로 ...

2달동안의 구직활동을 마치고, 마침내 신입 프론트엔드 개발자로 합격했다. 그동안 내가 많은 개발자분들의 블로그를 통해 도움을 받은 것 처럼, 내 글이 프론트엔드 개발자로 취업을 희망하는 신입개발자들에게 도움이 되길 바라는 마음으로 글을 썼다.1월부터 신입 프론트엔드..

최근 면접을 보면서 나의 코딩 스타일에 대해 생각하게 되었다. 나는 많은 인강을 보면서 react를 독학한 케이스인데 아무래도 인강 강사님의 코드 스타일을 따라가게 되었고 무의식적으로 그렇게 코딩을 했었다.면접관님이 코딩스타일은 다 다르지만 내가 사용한 코딩스타일...

애널리틱스 내 블로그에서 가장 조회수가 높은 포스팅은 react 모달 포스팅이다. (\[react] 모달 팝업창 만들기) 전에 만들었던 Modal은 트랜지션이 적용되지 않았었다. 최근 프로젝트를 만들면서 트랜지션이 적용된 Modal을 만들어야 했었기에 트랜지션이...