Youngble_개발스토리

문제 해결 패턴 중 Frequency Counter 패턴(빈도카운터)과 Multiple Pointers 패턴(다중포인터)을 공부하였다. 빈도카운터 정확한 공식적인 이름이 있는게 아니지만 문제 해결할때 많이 등장하고 Colt Steele은 이를 frequencty counter 라고 정의하여 사용하기 때문에 이렇게 외우기로 했다. Frequency Counter Pattern, 빈도 카운터 패턴 빈도카운터패턴은 애너그램 anagram과 같은 문제나, 두 배열이나 문자 string값을 비교하여 배열의 값들이 다른 한쪽의 배열의 제곱인지 체크하는 등에서 사용하는데 자바스크립트 객체의 속성접근을 이용하여 있는지 확인후 없다면 +1 있다면 있는 값의 +1 해주는 식으로 만들고 비교할때 하나씩 지우는 방식이다. 말..

STEP 1. 디자인 시스템이란 무엇인가? 2. 왜 디자인 시스템을 사용하게 되었나? TL;DR 디자인 시스템은 일관성과 통일된 디자인 컴포넌트 집합체이다. 디자인 시스템은 오직 디자이너를 위한게 아니다. 조직 전체 구성원을 대상으로 '제품을 만드는 방법'을 다룬다. 개발자로써 리액트 컴포넌트 atom design으로 최대한 재사용성을 위해 확고한 디자인 시스템 및 운영이 필요하다. 나는 사실 디자인 시스템이 디자이너를 위한 하나의 에셋처럼 모아놓고 쓰는거라고 생각했고 주니어 개발자로써는 '아 저런식의 일관된 브랜딩된 디자인을 쓰고 무슨 색과 폰트를 쓰는구나'로 그저 참고용으로 생각했다. 실질적으로 와닿지도 않았고 여러 디자이너와의 협업을 했다고 하더라도 짧은 기간내에 이뤄졌기때문에 디자인 시스템을 확립..

회사 입사한지 어느덧 4개월이 다되가는 시점에서 내가 가진 역량을 실무에 응용하고 경험해보고 다른사람이 만든 코드의 스타일을 보고 이해하며 프로젝트를 진행해본거같다. 앞으로 프로젝트를 빌드업하며 고도화해야 할건 많지만 서비스 프로젝트에 쌓여있는 새로운 기획들과 리뉴얼들로 과연 프로젝트의 원하는 기간에 맞춰 기능과 서비스를 만들면서도 새로 접목해보고 사용하는 여유가 있을까 싶기도하다. 접목하더라도 깊게 생각해보고 고심해서 만들시간은 있을까도 싶다. 리팩토링을 하건 써보지않았지만 미래를 봤을때 협업을 위해서도, 기능속도의 향상을 위해서도 필수적이다라고 생각하는 기술스택들을 접목해볼 수 있는 스케쥴이 될까도 싶다. 지금까지는 프론트엔드로써 현재 배운것을 응용+접목하고 새로운 스택에 포커싱을 7할정도 투자하고 ..

커스텀 훅이란 ? 말그대로 개발자의 입맛에 맞게 커스텀하여 만든 훅이다. 리액트 내장함수의 useState, useReducer, useEffect 등 use로 리액트훅처럼 사용할 수 있게 개발자가 커스텀하여 만들어 사용하는 것이다. 커스텀 훅은 정규함수(regular function)과 달리 재사용가능한 함수(Re-usable functions)에 상태(state)를 설정하는 로직을 아웃소싱 할 수 있다. 쉽게 풀어 말하면 정규함수(regular function)과 달리 커스텀 훅은 다른 커스텀훅을 포함한 리액트 훅을 사용할 수 있다. 왜냐하면 기존 정규함수에서 리액트 hook을 쓸수없도록 되어있는데 커스텀 훅에서는 사용 가능하기 때문이다. 따라서 useState, UseReducer, useEffec..

간절하지 않다면 역경을 이겨내지못하고 포기하게 되는데 역경은 우리를 몰아내기위해서가 아닌 얼마나 간절히 원하는지 깨달을수있는 기회를 준다는 말이 참 와닿았다. 인생에 걸쳐서 사람들은 많은 역경과 고난이 있고 나 또한 여러번 있었던거 같다. 여러번의 역경이 왔을때 나는 얼마나 절박하고 간절했냐에 따라 결과가 달랐던거 같다. 같은 역경속에서도 그저 버티고 흘러흘러 살아왔던 역경과 내가 정말 간절히 원했기에 버티고 앞으로 나갔을때는 달르다. 그만두라고 할때 나의 간절함이 역경보다 컸기에 역경을 딛고 정상에서 뒤돌아보면 소중한 경험이 되고, 간절함이 없어 버티다 그만둘때 뒤돌아보면 후회가 남는거같다. 지금 또한 마찬가지라고 생각한다. 예전보다 나은 삶과 상황이지만 나의 간절함과 초심을 잃는다면 언제나 무너져버릴..

일단 react.memo, useMemo, useCallback를 설명하기 앞서 왜 쓰게 되는지, 써야하는 이유가 무엇인지부터 설명 할려고한다. 리랜더링(re-rendering), 재평가(re-evaluate), 재실행(re-run/re-execute) 먼저 리액트의 특성 중하나가 가상돔(Virltual DOM)인데 이는 변화된 state, props 등의 Jsx에서 이전상태와 현재 상태를 비교하여 변한부분만 업데이트 시킨다는 것은 알 것이다. 그말은 state가 변하지 않는다면 해당 컴포넌트의 태그들은 업데이트가 되지 않는다는 것인데 가상돔의 업데이트와 리랜더링과 재평가, 재실행은 같은 맥락이 아니다. 업데이트가 안된다고해서 리렌더링, 재평가, 재실행이 안되는게 아니다. 예를들어 App.js 에서 Ap..

현재 서비스 프로젝트 마이택스에서 더 환급으로 마이그레이션 완료 후, QA와 고객 피드백이 있는지 보면서 추가적인 작업중 Sourcemap 난독화 와 소스맵 원본코드 제거를 거친후, AWS CloudFront를 통한 운영 사이트를 업데이트를 빠르게 적용을 해야하기때문에 기존 CDN (Content Delivery Network)에서 Local Edge가 아닌 Origin을 업데이트를위해 cache 삭제 및 재 업데이트할 수 있는 Invalidate에 대해서 알아보았다. 설정 자체는 어렵지 않지만 AWS 사이트로 가서 회사 계정으로 들어가서 설정을 바꿔주거나 하는 권한이 없기때문에 팀원으로써는 CTO님에게 전달받은 github actions의 secret 값을 사용하여, 배포후에 Invalidate하게 만..

Sourcemap은 creact-react-app으로 프로젝트를 빌드시 다음과 같이 build 폴더에 static으로 생성되는데 .css.map이나 .js.map의 형식으로 되어있는경우 배포시 기본적으로 webpack으로 번들링된 파일과 대응되는 sourcemap이 생성된다. 아래처럼 브라우저에서 원본 소스처럼 볼수있다 Sourcemap(소스맵) 사용 이유 Sourcemap는 주목적은 디버깅이다. 배포 후에 에러나 버그가 발생했을시 만약 원본 소스를 볼수없다면 어디서 에러가 났는지 디버깅하기 매우 까다롭다 하지만 소스맵을 통해 원본 소스 체크하여 어디부분인지 확인할 수 있다. 이러한 편의성을 제공하는 것이 소스맵 이다. Sourcemap(소스맵)을 제거해야 하는 이유 이러한 편의성이 있는 반면에 다른사람..

contextAPI는 왜 쓰는가? 위의 그림을 예시로 최상위 컴포넌트 App을 중심으로 하위 컴포넌트들의 트리구조를 확인할 수있는데, 리액트를 사용하면 state관리하면서 해당 컴포넌트에서도 사용을위해 props로 하위 컴포넌트에 state를 전달해주게 되는데 이렇게되면 위의 사진처럼 Login이라는 state를 LoginForm 컴포넌트에서 사용하고 setState로 변화시켜 이 state는 Shop, Cart 컴포넌트에도 영향을 미치는데 전달할수있는 connection이 없다. 또한 Product컴포넌트에서 Add to Cart 라는 장바구니 기능역시 Cart라는 컴포넌트에 영향을 주게 되지만 서로 연결점이없기 때문에 이를 최상위 컴포넌트인 App 컴포넌트에서 state를 생성하여 전달해줘야하는데 이..

요새 블로그 관리는 너무 안했다. 휴가라고 제주도도 놀러가고 코로나도 걸리고 골프도 해보겠다고 골프 레슨과 연습을 퇴근후에 하고있는 개발자.. 할건 항상 많은데 그래도 오랜기간 하고싶었던거나 쉬면서 일하는 생활을 하고싶어서 요근래는 조금 많이 쉰거같다. 레거시 작업이후에 새로운 리뉴얼 과정에서 이미 기존에 쓰던 ui/ux 삭제/변경이 있고 api 변경도 생기고 뭔가 이제 추가작업도 있지만 삭제와 변경 작업이 생기다보니 재활용에 대해서 많이 생각하게 되는거 같다. 업무 시간상 많은 시간을 투자해서 예전 처음에 배울때처럼 element 컴포넌트 하나하나 만들어서 쓰고있진 않지만, 작업하다보면 중복되는 컴포넌트나 페이지가 생기기 마련이라 그럴때는 범용성으로 다시 컴포넌트 Props나 state, 비즈니스로직을..