FrontEnd

브라우저 저장소(Web Storage)란 웹 브라우저에서 데이터를 저장하는 데 사용되는 매커니즘이다.이를 통해 웹 어플리케이션은 클라이언트 측에서 데이터를 저장하고, 검색할 수 있게 되어 사용자 경험을 개선하는 역할을 한다.기존에는 쿠키(Cookie)를 통해 데이터를

자바스크립트는 싱글스레드 언어지만 동시에 여러 작업을 수행하는 것처럼 보인다는 말을 처음 들었을 때 대체 무슨 소리인지 감이 잡히지 않았다. JS의 동작 과정을 살펴보면서 다시 한 번 이해해보고자 한다.동작과정(동작과정을 아주 간략히 요약하면 위의 이미지와 같다.)

웹개발을 개발하면서 로그인 처리하면 꼭 한 번은 들어봤을 JWT. 이전 프로젝트도 팀원이 JWT 방식으로 로그인을 구현했다는데 명확히 개념을 짚고 넘어가지 못해, 이참에 정리해본다. (오늘도 정리할 것을 정말 아주 대단히 간략히 요약하면 위와 같다.) JWT는 Jso

구글창에 웹 프로토콜을 검색하면 HTTP에 대한 얘기가 주루룩 나온다. 그래서 생긴 의문! 웹 프로토콜 === HTTP일까? 정답은 아니다. 어떤 관계인지 한 번 살펴보자! 먼저, Protocol을 사전에 검색해보면 통신 규약 이라는 뜻을 가진다는 것을 알 수 있

Intro 구글창에 웹 프로토콜을 검색하면 HTTP에 대한 얘기가 주루룩 나온다. 그래서 생긴 의문! 웹 프로토콜 === HTTP일까? 정답은 아니다. 어떤 관계인지 한 번 살펴보자! 웹 프로토콜? 먼저, Protocol을 사전에 검색해보면 통신 규약 이라는

Intro React를 사용해 개발을 하다보면, 필연적으로 React Hooks를 마주하게 된다. useState, useEffect부터 시작해서 useRef, useMemo 등등... 그 중에서도 useRef가 특히 완전히 이해가 잘 안 됐었기에 useRef부터 정

이번에는 최적화 고민을 한 번이라도 해봤다면 들어봤을 uesMemo와 useCallback을 정리해볼까 한다. 찾아보다 배운 게 (참고 링크), 내가 진행했던 프로젝트들에서는 그렇게 큰 연산이 없었고, 주로 useState를 실행할 때 상관 없는 component가 리

Intro 코드를 갖다 쓰기만 해서는 도무지 이해가 안 가는 JavaScript의 비동기 처리를 알아보자! 관성처럼 .then()과 .catch()를 작성하던 과거의 나를 반성한다... 동기, 비동기에 대해서는 잘 정리된 글들이 있으니 참고해보면 좋을 것! > 동기

DOM이란 Document Object Model (문서객체모델)의 약어이다. 웹 페이지는 일종의 문서(document)로 웹 페이지를 수정하거나 생성하는데 사용되는 모든 속성, 메서드, 이벤트 들은 objects로 구성된다. 이 DOM을 통해 JavaScript와

Javascript를 배운 지 오래 되지 않았기에, 현재 ES6+ 문법을 활용해 코딩을 하고 있는데, 구글링을 하다보면 심심찮게 var 등 ES5 문법으로 사용된 것들을 볼 수 있다. 어디까지가 ES5이고 어디까지가 ES6인지 간략하게 정리해본다. ES는 ESMASc

강아지를 무한대로 즐길 수 있게 무한 스크롤을 구현해보자. 페이지네이션으로 2페이지, 3페이지 이렇게 넘어갈 수 있음에도 굳이 무한 스크롤을 쓰는 이유는 뭘까? 클릭 하나도 결국 수고로움이기에 그런 것들을 줄이기 위한 고민으로 나오지 않았을까 싶다. 물론 모든 웹사이

NEXT토스에 지원해서 과제 전형을 치루는데, 채점을 하기 위한 테스트 코드가 작성되어 있었다. 테스트 코드 말로만 들어봤지 실제로 작성된 코드를 본 것은 처음이라 신기했고, 이참에 간단하게라도 직접 짜보자! 싶더라. (시험은 시원하게 말아 먹었다. 😥) 프론

당근마켓, 토스, 우아한형제들... 등 주로 모바일 어플리케이션 기반으로 서비스를 제공하는 회사들의 채용 공고를 보면 web frontend 개발자를 채용하고 있다는 걸 알 수 있다. 채용 공고를 보다 생긴 궁금증들을 조합하고 조합해 간단하게 정리해두고자 한다.(▲

냅다 프로젝트로 던져서 자바스크립트보다 뷰를 먼저 사용했고 또 기초도 없이 리액트로 코딩해오길 수개월... 이렇게 뭣도 모를 수 없다 싶어, 모던 자바스크립트로 다시 차근차근 공부를 해보고 있다. 그리고 책에서 발견한 안 그래도 궁금했던 그 녀석. MDN에서 뭐만

요즘은 원티드 프리온보딩 프로그램에 등록해 간만에 열몇시간씩 컴퓨터 앞에 붙어있는 생활을 하고 있다. 다양한 세션을 통해 많은 것을 배울 수 있었는데 가장 좋았던 건 S3를 통해 배포하는 걸 드디어 배웠다는 거다!그럼에도 왜 netlify 사용법을 가져왔느냐 하면, 훨

본 포스팅은 React 공식 사이트의thinking-in-react와 choosing-the-state-structure 파트를 기반으로 작성되었습니다.state는 일반 JavaScript 객체이며 react에게 리렌더링을 요청하는 하나의 트리거이기도 하다. 이 sta

본 포스팅은 React 공식 사이트의 effect로 동기화 하기와이펙트가 필요하지 않은 경우 파트를 기반으로 일부 재구성 및 작성되었습니다. effect란 렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것으로, 특정 이벤트가 아닌 렌더링에 의해 직접 발생한다. us

프론트엔드 면접 단골 질문 중 하나! "클로저란 무엇인가요?"제대로 답변하기 위해 내용을 배워보고 마지막에 답변화 해서 정리해보자! 먼저 MDN에 정리된 내용을 보자면, 클로저는 함수와 그 함수가 선언된 렉시컬 환경(lexical environment) 사이의 관계를

지난번 다뤘던 클로저의 개념을 다시 짚어보자.외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라고 부른다.제일 궁금했던 부분은 이거였다.왜 굳이 함수를 이중으로 만들어

타입스크립트는 분명 많은 오류를 방지하는 데 도움을 준다. 하지만 때로는 강한 고통을 겪게 되기도 하는데... 일을 시작한 이후 기능 추가나 유지보수 등을 수행하다 보니 새로운 게 참 많다. 그리고 그 중 생각보다 타입스크립트의 도움을 많이 받기도 하는데 (대충 여

뭐라고 has를 이제 어디서나 쓸 수 있다고!?

최근 회사에서 스토리북 도입의 필요성에 대한 이야기가 나와 공부할 겸 찾아봤는데..! 튜토리얼만 따라하는데 엥 에러가!? 알고보니 한국어 버전은...

한글 입력시 api 호출이 두 번 되길래 엥 이거 왜이래! 하고 서치하다보니 죄다 keyup이었어서 keydown에 관해서도 정리하기로 결심. 가보자고~ 일단 문제

스토리북을 적용하는 과정에서 느낀 점을 간략히 정리했습니다. 여느 서비스가 그렇듯, 코드는 쪼개지기 마련이며 재활용을 위한 공통 컴포넌트가 생기기 마련이다.하지만 이제 3달을 겨우 넘긴 신입 사원의 입장에서,그렇게 구성된 어떠한 코드나 컴포넌트가 어디서 온 건지 별도의

근 10일의 여정을 마무리하는 기념으로 신입의 삽질을 정리해보자!

api 응답을 주고 받을 때, 어떤 상황에서는 쿼리 파라미터에 데이터를 넣어 보내고 어떤 상황에서는 바디에 넣어 보내는데 정확히 “어떤” 상황일 때 달라지는지 알아보자.먼저, HTTP 요청에서 사용되는 주요 파라미터는Header, Path Parameter, Query