🔨로케이션등록 Refactoring기능은 함수인데 이름이 함수처럼 느껴지지 않는다는 의견동일한 코드의 중복 const { cityName, dongName } = getLocationName(location);로 사용하나의 util함수로 사용하나의 컴

pre-rendering은 JavaScript가 없이도 화면을 작동(렌더링)시킬 수 있음을 이야기한다.페이지 접속 시점 부터 미리 만들어놓은 HTML을 보여 주기 때문에 성능과 SEO측면에서 유리하다.일반 react app은 JavaScript가 있어야 CSS가 작동하

HIFI 팀 회의 (오전 10시 ~ 12시) : 로그인 구현에 대한 논의 \- RefreshToken 건의 \- token을 어디에 저장할지 (쿠키 / 로컬)Next.js 아주살짝😛알고리즘 :LeetCode: 74. Search a 2D MatrixBAEKJOON

webpack bundling & babel transfilingcode spliting : 현재 필요한 페이지 파일과 로직 파일만 로딩해온다. 로딩시간을 단축할 수 있고, 특정 파일에 에러가 있어도 그 외의 파일은 에러와 상관없이 사용 가능하게 된다.prefetchi

📘 React공식문서 참고 context를 사용하기 전에 고려할 것 context의 주 용도: 다양한 레벨의 중첩된 많은 컴포넌트에 데이터를 전달하기 위함 주의할 점 : 재사용이 어려워지므로 꼭 필요할 때만 사용해야 한다. 만약, prop을 넘기는 것을 줄이고

store : redux의 상태값을 갖는 객체 (전체 상태값은 오직 하나, store 객체 1개 뿐이다. readOnly)action : state를 변경시킬 행동 (trigger 역할)reducer : action이 발생했을 때 store에 접근해 상태를 변경시킬 함

- Redux 구성요소 store : redux의 상태값을 갖는 객체 (전체 상태값은 오직 하나, store 객체 1개 뿐이다. readOnly) action : state를 변경시킬 행동 reducer : action이 발생했을 때 상태를 변경시킬 함수 (*순수함수

Babel 설치 npm i @babel/cli npm i @babel/preset-react 배포할 내용 lib에 담기 lib폴더 안에 배포할 내용을 둔다. 나의 경우엔 다른 파일의 내용을 import 해오는 것이 실제론 undefined로 인식되었는데, 아마 배포하

API 객체화 컴포넌트별 관리API를 상수로 관리하였고, 변수명에 API의 내용을 담아 네이밍을 하였다.개발을 하면서 API가 굉장히 많이 늘어났고, 변수명만으로 필요한 API를 찾는데 어려움을 느꼈다. 또한 비슷비슷한 요청에 대해서는 네이밍의 고통을 느끼게 되었다.

최적화 상태를 위한 리펙토링 BEFORE : 매 반복문마다 DOM을 생성하고 삽입하는 로직을 갖고있다. DOM을 직접 수정하기 때문에 매번 렌더링을 새로하기 위한 돔트리생성과 스타일 계산이 발생하고 있을 것이다.AFTER: 템플릿 리터럴을 활용해서 돔에는 마지막에 삽입

chapter01. 예시 리팩터링 시작하기 1단계 before/after :기능과 구현의 분리, 전체적인 코드는 길어졌어도 문맥을 이해하기 위해 확인해야할 코드는 줄어들었다. 함수 이름을 통해 흐름을 쉽게 파악할 수 있었다. chapter06. - 함수선

로그인 성공 시 받아온 토큰을 어디에 저장할까?우선 정해진 답은 없다. 보안의 정도와 서비스 기획 방식에 따라 달라질 것이다.토큰의 저장위치는 쿠키 vs 로컬스토리지/세션 스토리지 두 경우로 나누어 볼 수 있다.: 백엔드 작업 시 처리해야할 방법이다. 백엔드에서 로그인

불변성: 기본형 데이터에 해당한다. 변수의 데이터를 바꾸는 방법은 데이터를 변경하는 것이 아니라, 데이터를 새로 만들어 할당하는 동작을 통해 발생한다. 만들어진 데이터는 가비지컬렉팅을 당하기 전까지 변하지 않고 존재한다.변수영역 : 변경되고자 하는 데이터가 새로 생성되

💚React+Webpack에서 Code Splitting 적용기 읽어보기만 했는데, 웹팩에 대한 이해도가 살짝 올라감 코드 스플리팅을 React.lazy로 사용해보긴 했는데, 여기선 이 LazyLoading을 직접 구현하여 사용한 것 같다. HOC로 표현된 것이

\* let, const에서의 hoisting(x): 정확히는 변수의 선언은 인지되나 값의 초기화, 할당은 되지 않은 상태 (var는 선언, 초기화까지된 상태)var는 hositing이 되면서 undefined라는 값을 반환하였고let, const의 경우 참조에러를 나

실행 컨텍스트 자바스크립트가 실행되고있는 컨텍스트(환경) 실행할 코드에 제공할 환경 정보*들을 모아둔다. 함수를 실행할 때마다(콜스택의 최상단에 코드가 위치할 때) 함수에 대한 새로운 실행 컨텍스트를 생성하여 자신만의 고유한 컨텍스트에서 실행된다. *실행할 코드: 전

🐓 새벽 1시쯤 잠들고 아침 8시에 기상, 운동 다녀옴. 더 일찍 일어나면 좋겠다.👨‍💻 TlD & TIL알고리즘 쉬운 거로 1개 풀었다. (그래도 시간이 오래걸림)쇼핑하우 검토하기... 뭘 해야할지 모르겠고 좀 불안한데 아마 바쁠것을 예상하고 시간이 없다고

화면에 UI를 띄우기 위해 브라우저는 열심히 일을 한다.URL을 입력하고 특정 사이트에 접속하는 순간까지 네트워크 계층에서 많은 일들을 처리한 후, 서버로 부터 보여줄 데이터를 받기 위해 요청을 보내는 것에서 시작한다.브라우저는 서버로 요청(Request)을 보내고,서

지금은 어느정도 이해가 되었지만, 몇달 전엔 이벤트 루프는 어디서 나온 애고, 자바스크립트가 일을 순차적으로 한다는데 왜 이 함수가 마칠 때까지 기다리지 않는거지?의문 투성이였다. 뭐 지금도 완벽히 안다고는 할 수 없지만 그동안 제일 헷갈렸던 고민은 다음과 같았다.자바

리액트에서 좋은 코드란?컴포넌트 분리 \_ 단일책임원칙Import 순서\_propType을 통해 dataType을 유추하기 좋기 때문에 상단에 쓰는 것을 추천한다. 중복배제원칙 정보중복 지양애플리케이션이 필요로하는 가장 최소한의 state를 찾고,이 state를 통해