본문 바로가기

모두 보기

 (96)
문법 2020. 9. 8. 19:46 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 문과 표현식의 차이는? const a = 2*3 // ----- (1) const b = a // ----- (2) b // ----- (3) 문은 '문장'이며 표현식은 '어구'와 일맥상통한다.(연산자는 '구두점') 모든 표현식은 단일한 특정 값으로 계산된다. (1)의 우항, (2)의 우항, (3) 모두 표현식이며, const가 빠진 (1), (2)는 할당 표현식이라고도 부른다. (1), (2)는 const 변수를 선언하는 선언문이다. (3)은 표현식이기도 하지만 그 자체가 문이 되기도 하여 표현식 문이라고 한다. 모든 문은 완료값을 가진다. 콘솔..
강제변환 2020. 8. 23. 13:58 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 추상 연산 1.1 자신의 프로토타입에 toString()이 있는 경우(1)와, 일반 객체처럼 Object.prototype.toString() 메소드를 호출하는 경우(2)의 차이점은? (1) 내장 원시 값은 정해져 있는 방법대로 문자열화되어 반환한다. (2) 내부 [[Class]]를 반환한다. 정확히는 ToPrimitive 과정을 거친 결과값이 반환되어 "[object Object]"가 반환된다. 1.2 JSON.stringify 함수의 각 인자에 대한 설명과 문자열화하는 규칙에 대해 설명하시오. JSON.stringify(value, functi..
[리액트] 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만개 이상이 되고, 일정 개수만큼 추가로 로드해와도 렌더링 속도가 느려 화면에 요소가 그려지는 것이 지연되는 문제였다. 그래서 데이터를 로드한 것이 완료되었어도 잠시 빈 공간..
타입, 값 그리고 네이티브 2020. 8. 4. 00:03 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 타입 1.1 자바스크립트의 내장 타입 7가지 - null - boolean - object - string - number - symbol - undefined [참고] object를 제외한 나머지 6가지 값은 자바스크립트의 기본 타입임 1.2 type of null의 결과는? "object" 1.3 typeof function() {} === "function"의 의미는? [ECMA 표준 명세서] 4.3.31 function member of the Object type that may be invoked as a subroutine 서브루틴(한..
[리액트] 스크롤 위치 복원, 무한 스크롤 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"..

티스토리툴바