조금 늦은.. FE개발자의 2022 회고

인사말마지막 작성일인 2108 월 이후 거진 1년 반만에 글을 쓰게 되었습니다 이직후 정신없이 달려오다 이번 회고를 기점으로 다시 블로그를 시작해보려고 합니다 또한 이번 회고글 ...

재택근무를 경험하며 느낀점들..

들어가기 전에코로나가 심각해진 시점인 202002 월 중순부터 현재 이 글을 쓰는 시점인 202108 월까지 약 1년하고 6개월의 시간동안 코로나의 심각성 정도에 따라전면재택 주...

react-router v6에서는 어떤것들이 변했을까??

reactrouter v6에서 바뀐점 알아보기reactrouter 는 react 에서 브라우저 라우팅을 관리하기 위해 사용하는 라이브러리로 react 를 통한 작업시 밥과 김...

React 에서 배열컴포넌트 사용시 key 에 배열의 index는 가급적 사용하지 말자.!!

React 에서의 keykey는 React가 어떤 항목을 변경 추가 또는 삭제할지 식별하는 것을 도와줍니다 key는 엘리먼트 or 컴포넌트에 안정적인 고유성을 부여하기 위해 배열...

react의 새로운 상태관리 라이브러리 recoil 에 대해 알아보기 - atom, selector

recoil 새로운 react 상태관리 라이브러리recoil은 2020년 5월 React EU 컨퍼런스에서 발표된 React 의 새로운 전역상태 관리 라이브러리 이며 다음과 같...

webpack5 에서는 어떤것들이 변경되었을까?? (webpack5 변경점 살펴보기)

이번에는 20년 10월에 드디어 릴리즈를 거친 webpack5의 몇가지 변경점에 대해 알아보려 합니다 이글에서는 모든 변화에 대해서는 다루지 않고 일부에 대하여 다루고 있습니다 기...

es2021(es12) 에서 추가된 것 살펴보기

이번에는 새로 추가된 es2021 es12에서 적용된 기능들에 대해 몇가지를 살펴보려 합니다 해당 기능들은 전부 크롬 v8 엔진에는 적용되어서 바로 사용하실 수 있습니다 이번에 알...

자바스크립트에서 비동기 네트워크 호출 취소하기 (AbortController, axios cancellation)

비동기 통신 취소 하기프론트 영역에서 비동기 통신은 보통 성공 or 실패를 반환하게 됩니다 물론 비즈니스 로직을 통해서 네트워크를 무시하고 취소상태로 할수는 있으나 실제 네트워크...

redux-toolkit 을 사용해 redux 작성 하기 (createAction, createReducer, createSlice, createAsyncThunk)

reduxtoolkitreduxtoolkit 은 redux 에서 공식적으로 지원하는 redux 개발 도구 입니다 reduxtoolkit은 기존 redux를 사용할때 다음과 같은 ...

vue 3 에서 vuex4.0 를 체험해보기.. 어떻게 변했을까?

개요이번에는 vue 3x 알파버전을 체험하면서 vuex 4버전의 알파버전이 나와 앞으로 변경될 vuex 가 어떤지 체험하며 변경점을 살펴보려 합니다이번에 사용된 코드는 다음 gi...

vue composition api 살펴보기

개요vue 의 3x 버전 릴리즈가 코앞에 다가오고 있습니다 이번에는 vue 3x 버전의 큰 변화점중 한개인 compositionapi 에 대해 알아도록 하겠습니다 composit...

React - class컴포넌트와 function 컴포넌트의 차이점에 대해 알아보자.

개요훅이 도입되며 function component의 사용은 상태가 없는 컴포넌트에 주로 사용되었으나 훅이 나오며 function component 에도 상태가 추가되고 이제 새...

React 에서 useSelector 최적화 하는 3가지 방법.

useSelector란?useSelector 는 리덕스의 상태값을 조회하기 위한 hook 함수로 이전의 connect 를 통해 상태값을 조회하는 것보다 훨씬 간결하게 작성하고 코...

styled-components로 다크모드(darkMode) 만들기

이번 포스팅에서는 styledcomponents 를 사용하여 간편하고 코드의 변화량이 거의 없이 다음과 같이 darkMode를 추가하는 작업을 진행하도록 하겠습니다 ThemePro...

babel-plugin-styled-components 을 사용해 styled-components 의 디버그를 편하게 하기

styledcomponents란?styledcomponents 는 기존의 css scss 와 같이 외부 스타일 파일이 필요없이 js 파일 안에서 스타일까지 한번에 작성이 가능한...

react + redux-saga + typescript 를 통한 프로젝트 구성과 컴포넌트 작성 가이드.

개요이번에 react reduxsaga typeScript 의 조합으로 프로젝트 의 구성 및 컴포넌트 작성 규칙을 작성하며 개인적으로 생각하는 깔금한 프로젝트 구성과 컴포넌트...

vue watch 속성에서 Object와 같이 중첩된 값의 변경을 감지하자

watch vue 에서 watch속성은 값이 변경될때 이에 대한 부수 효과 비동기 통신을 통한 재호출 변경된 값에 대한 DOM조작 등등 을 처리할대 유용하게 사용되는 속성입니다...

pwa - push 이벤트 구현하기

PWA Push Notification?Javascript로 를 통해 웹과 모바일에 푸쉬 메세지를 발송하는 PWA 기능입니다 즉 브라우저에서 네이티브와 마찬가지로 사용자에...

FC Conf 2019 후기

FeConf 2019를 참석하여작년에는 실패하였으나 이번년도는 경쟁을 뚫고 드디어 참석하게 된 Feconf 이번 컨퍼런스를 통해 개인적으로도 궁금해하고 고민했던 영역에 대해 해결...

vh로 전체화면 적용시 모바일 브라우저 urlBar 리사이징 문제 해결하기.

vh 단위 vh는 뷰포트의 높이값에 해당하는 값으로 해당 브라우저의 높이값이 1000px 이라면 1vh 는 10px 의 단위로 사용할 수 있습니다 즉 전체화면으로 구성시 100v...