profile
Dev FE 기록, 행동, 회고 유후~ 💜

[Refactor] HI-FI 프로젝트

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

3일 전
·
0개의 댓글

[NEXT.js] : SSG와 SSR, pre-rendering방식

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

2021년 9월 16일
·
0개의 댓글

TIL & TID 09/WEEK 3-4 (추석🌕ㅣ다)

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

2021년 9월 15일
·
0개의 댓글
post-thumbnail

[NEXT.js] : basic

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

2021년 9월 14일
·
0개의 댓글

ContextAPI 알아보기

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

2021년 9월 13일
·
0개의 댓글

Redux 겉핥기😛

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

2021년 9월 13일
·
0개의 댓글

Redux는 왜 쓰는거야

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

2021년 9월 13일
·
0개의 댓글

리액트 컴포넌트: NPM 패키지 배포하기

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

2021년 9월 11일
·
1개의 댓글

[Refactoring] IssueTracker _상수관리하기

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

2021년 9월 10일
·
0개의 댓글

[Refactoring] ShoppingHow - DOM 조작 최소화

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

2021년 9월 10일
·
0개의 댓글
post-thumbnail

리팩터링🔨

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

2021년 9월 10일
·
0개의 댓글

로그인 토큰 저장과 사용자 정보 관리에 대한 생각

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

2021년 9월 7일
·
0개의 댓글

불변데이터를 만들기위한 배경지식

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

2021년 8월 23일
·
0개의 댓글

2021-08

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

2021년 8월 21일
·
0개의 댓글

변수선언 var, let, const 특징 모두 정리합니다💠

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

2021년 8월 19일
·
0개의 댓글

실행컨텍스트와 관련키워드 파악

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

2021년 8월 19일
·
0개의 댓글
post-thumbnail

2021/08 Week3 TIL ->TID 로 변경 : ]

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

2021년 8월 16일
·
0개의 댓글
post-thumbnail

브라우저에 화면이 나타기까지! _ 브라우저 동작원리

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

2021년 8월 14일
·
0개의 댓글
post-thumbnail

자바스크립트에는 이벤트루프가 없다

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

2021년 8월 14일
·
0개의 댓글

2021/08 Week2 TIL

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

2021년 8월 9일
·
0개의 댓글