본문 바로가기

Today I Learn

 (60)
[리액트] Compound Component 활용하기 2020. 9. 27. 21:28 DEV 커뮤니티에서 React Component Patterns에 관한 글에서 Compound 컴포넌트 패턴을 소개하는 글을 읽고 실무에 적용해보았다. 글에서 소개하는 Compound Component에 대해 간단하게 설명하자면 내부 state를 공유하며 서로 상호작용하는 컴포넌트들을 내부 static 컴포넌트로 두어 사용자에게 내부 로직은 추상화하고, 이외의 로직 작성을 독립적으로 작성할 수 있게 해주는 패턴이다. "Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the backg..
[리액트] useAsync Hook with Suspense 2020. 8. 22. 01:41 요즘 게을러져서 글을 쓸 의욕이 사라진 거 같다...(반성ㅠㅠ) 요즘 코로나 때문에 계속 재택근무를 하고 있어서 집에 있지만 있는거 같지 않다ㅠ 퇴근하고 나서도 매번 계속 프로젝트 고민하고 있으니 더욱 여유가 없는 기분이다 (구차한 변명이다) you don't know js 시리즈도 다시 읽으면서 정리하고 싶었는데 힘내야지 2주 전인가 팀 동료분께서 생각해내신 아이디어와 프로토타입을 들은 적이 있다. 현 프로젝트에서는 mobx local store에 비동기 함수가 함께 있는 부분으로 인해 코드가 엄청 길어졌다. 물론 잘못된 것도 아니고 모든 로직이 State와 함께 있어서 가독성면에서 좋았던 점도 있다. 팀원분이 생각해내신 아이디어는 비동기함수가 쓰이는 컴포넌트에 마치 동기함수를 호출하듯이 비동기 함수를..
브라우저 동작 원리와 VSync 2020. 8. 18. 12:08 (출처) The Anatomy of a Frame 본 포스팅은 사내 기술 교육 '브라우저 동작 원리' 강의 영상을 수강 후 정리한 글입니다. 1. 브라우저 동작 원리 (Chrome DevTool 기반) * 중간중간 음영 색상이 들어간 표시는 위의 그림에서 마킹된 색상처럼 크롬 개발자 도구에서 확인할 수 있는 과정을 말한다. 1.1 HTML, CSS 파싱 위의 개발자도구 화면에서 Parse HTML에 해당하는 부분이다. - HTML 파싱하는 이유? : DOM 을 생성하여 엘리먼트를 가공 및 관리하는 표준을 구성하기 위해 - DOM 트리를 만드는 이유 : 자바스크립트 등에 의해 동적으로 변하는 엘리먼트를 쉽게 수정하고 관리하기 위해 파싱하는 과정 바이트 => 문자열 => tokenizing(태깅) => no..
[리액트] react-virtualized을 활용한 무한 스크롤 구현 2020. 8. 6. 22:18 이전에 리액트 무한 스크롤 라이브러리를 하나 뜯어보고 간소화한 버전으로 구현해보았다. 바로 이 글이다. [리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅� coffeeandcakeandnewjeong.tistory.com 그런데 회사에서 무한 스크롤과 관련하여 이슈가 나온 것이 있었는데 무한스크롤되는 요소가 극단적으로 10만개 이상이 되고, 일정 개수만큼 추가로 로드해와도 렌더링 속도가 느려 화면에 요소가 그려지는 것이 지연되는 문제였다. 그래서 데이터를 로드한 것이 완료되었어도 잠시 빈 공간..
[리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 2020. 7. 25. 22:54 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅되어 페이지 전환 후 뒤로가기 등을 통해 이전 페이지로 돌아왔을 때 스크롤을 복원하는 기능 [이슈] 스크롤 복원 시 스크롤이 움직이는게 눈에 보임, 혹시나 싶어서 사내 프로젝트에서도 같은 기능을 테스트해보았는데 크롬 브라우저 웹뷰로 테스트, 디버깅 시에는 느끼지 못함 [기억하기] "0" || 0 은 "0"이 truthy한 값이기 때문에 "0"이다. 따라서 if (!val) {} 과 같은 falsy한 값일 시 실행하는 조건문에서 의도한대로 동작하지 않을 수 있습니다. 0일 시 string인지 number..
macOS iTerm2 zsh 설정하기 2020. 7. 23. 19:45 인프라 글이 아닌거 같지만 그렇다고 프론트엔드 글도 아닌... 회사에서 새로 받은 개인 장비에 iterm2와 zsh를 세팅한 과정을 기록하는 글이다. iTerm2부터 zsh 기본 세팅 과정은 여기를 많이 참고하였다. 1. iTerm2 설치 먼저 iTerm2 설치링크에서 iTerm2를 설치한다. 2. zsh 설치 이제 zsh를 설치한다. brew를 사용하면 한번에 설치할 수 있다. brew install zsh oh-my-zsh는 zsh를 더욱 쉽게 사용할 수 있게 미리 설정해주기 때문에 추천한다. 아래는 oh-my-zsh를 curl로 설치하는 명령어이다. curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh 3..
7. RxJS와 NgRx (2) 2020. 7. 18. 17:27 1. NgRx 동작 원리 NgRx는 리액트의 redux처럼 Reactive한 앵귤러 어플리케이션에서 상태관리를 위한 라이브러리입니다. redux의 flux 패턴을 이해하고 있다면 NgRx도 그 영향을 받았기 때문에 단방향으로 데이터가 흐르고 있다는 걸을 알 수 있습니다. flux 패턴은 여기에서 정확히 확인할 수 있습니다. flux 패턴은 MVC 패턴의 양방향 데이터 바인딩에서 앱 규모가 커짐에 따라 데이터 흐름을 추적하기 어려워지고 불필요한 업데이트가 발생할 수 있는 어려움을 해결하기 위해 중앙에 스토어를 두고 데이터를 액션에 의해서만 변경할 수 있는 순수 함수인 리듀서를 두어 데이터를 단방향으로 관리합니다. NgRx도 이러한 흐름을 그대로 적용하고 있기 때문에 flux 패턴을 먼저 이해한다면 큰 어려..
[리액트] mobx-react-lite로 todoList 작성하기 2020. 7. 15. 19:41 오랜만에 리액트! 리덕스만 써보다가 mobx-react-lite 상태관리 라이브러리의 예제 코드를 작성해보았다. mobX란 리액티브 프로그래밍 기반으로 리액트에서 상태관리를 가능하게 해주는 라이브러리로 앵귤러를 미리 해서 그런가 크게 어렵게 느껴지진 않았다. 참고했던 링크들 MobX를 React Hooks (TypeScript) 와 함께 사용하는방법 heros-mobx-react-lite example React에서 Mobx 경험기 (Redux와 비교기) mobx-react v6 마이그레이션하기 MobX 내부 살펴보기 mobx-react-lite 짧막 정리 이번주부터 살펴보기 시작해서 아직 내부 로직까지 완벽하게 이해하진 못했지만 mobx-react-lite가 뭔지에 대해 지금까지 이해한 바는 다음과 같..
6. RxJs와 NgRx (1) 2020. 7. 8. 17:42 글쓴이는 리액티브X 공식 홈페이지와 RxJs 홈페이지를 많이 참고하였습니다. 1. Observable 옵저버블은 ES7 스펙으로 제안된 비동기 데이터 처리 표준으로 어떻게 동작하고 이점이 무엇인지 공부하였습니다. 일반적으로 동기적인 프로그래밍은 개발자가 작성한 코드가 한줄한줄 차례대로 실행되기를 기대하지만, 비동기 프로그래밍은 원하는 순간에 작성된 순서와 상관없이 실행하거나 보류됩니다. 비동기로 호출되는 이벤트를 옵저버블에 정의할 수 있으며 하나의 옵저버블에 다수의 비동기 이벤트로 이루어진 연속된 흐름(데이터 스트림)을 정의할 수도 있습니다. 즉 옵저버블 내부에 데이터를 처리하는 매커니즘이 있고, 옵저버블이 이벤트를 발생시키면 이 옵저버블을 관찰하고 있는 옵저버가 해당 이벤트를 감지하고 데이터를 받아 연..
5. 서비스와 의존성 주입 (2) 2020. 7. 4. 23:06 1. 싱글톤 서비스 4장 실습에서 MenuModule과 CartModule에 SharedModule을 각각 임포트하면 각각 다른 모듈 인젝터에 인스턴스가 생성되어 데이터가 공유되지 않는다는 것을 확인하였습니다. 주문 리스트 정보를 관리하는 OrderService는 어플리케이션에서 단 하나만 존재해야 합니다. 즉 데이터 통신을 전역에서 수행하도록 변경해야 합니다. 이렇게 전역에서 단 하나의 인스턴스만 생성되어 관리되는 인스턴스가 싱글톤 서비스입니다. 싱글톤 서비스를 만드는 방법은 간단합니다. 서비스를 루트 모듈에만 프로바이딩하면 싱글톤 서비스가 됩니다. 공식문서의 싱글톤 서비스에서 서비스를 루트 모듈에 프로바이딩하는 방법으로 세 가지를 소개합니다. @Injectable({ providedIn: "root"..
4. 서비스와 의존성 주입 (1) 2020. 6. 30. 22:52 0. 서비스 서비스란 어플리케이션에서 공통으로 사용하는 데이터나 기능을 묶어 정의한 단위입니다. 가령 여러 컴포넌트에서 공통으로 쓰이는 데이터는 서비스로 정의하여 접근할 수 있도록 한다면 모듈화와 코드의 재사용성이 높아질 것입니다. 일반적으로 뷰 컴포넌트에서는 뷰와 관련한 로직만을 남기고 그외의 서버와 관련한 로직 등은 서비스에 정의하는 것이 좋습니다. 서비스는 의존성 주입이 가능한 클래스로 @Injectable 데코레이터 하단에 클래스를 정의하면 이 클래스는 곧 의존성 주입이 가능한 클래스입을 명시하는 것입니다. @Injectable() export class MyService {} 앵귤러는 서비스 인스턴스를 의존성 주입을 사용하여 생성하는데 그 이유는 여기에서 찾을 수 있었습니다. 1. 의존성 주입을..
3. Modules 2020. 6. 26. 19:15 1. @NgModule 앵귤러에서 모듈은 자바스크립트의 모듈과는 다른 의미로 쓰입니다. 먼저, 자바스크립트의 모듈은 단일 파일에서 모든 멤버 클래스를 정의하지만 @NgModule은 declarations이라는 속성에서 선언 가능한 클래스*들의 리스트를 가지고 있습니다. 선언가능한 클래스*: 앵귤러에서는 컴포넌트, 디렉티브, 파이프, 서비스가 이에 해당합니다. 또한 @NgModule은 import문에 선언된 모듈과 자신의 선언가능한 클래스들만을 export할 수 있으며 그 외의 클래스는 불가능합니다. 공식문서에서 자세히 설명하고 있는 것처럼 앵귤러는 컴파일러에게 @NgModule의 메타데이터로 컴포넌트가 컴파일되는 시점의 컨텍스트를 제공합니다. 컴파일러는 해당 컨텍스트(작업 흐름)에 따라 컴포넌트를 컴파일..

티스토리툴바