기록하는 블로그

20년 8월에 데이터를 분석하는 팀으로 이직하게 되었다. 기존에도 프론트엔드를 주로 개발해왔기 때문에 데이터를 시각화 하는 부분은 익숙하다 생각했고, 평소와 같이 개발하고 있었다. 확실히 환경이 달라지니 들려오는 여러 연관 기술들이 들려오기 시작했고, 한번 정리해보려고 했다. 책을 다 읽고난 이후에 드는 생각은 이직하기 이전에도 난 이러한 것들을 해왔었고, 여러가지 선택지중 하나를 전부인것마냥 개발하고 있었다는걸 깨달았다. 데이터를 다루고 분석함에 있어 전반적인 얘기를 하고 있고, 다양한 선택지와 방법을 제시해주고 있어서 재미있게 읽었다. 다만 생소한 용어들과 너무 넓은 범위를 다루고 있어 빠르게 읽히진 않았다. 엄청 깊이있는 내용을 다루지 않는다. 딱 입문하기 좋은 책이였던것같다. 추천받길 잘한것같다ㅎ

2020년은 코로나가 지.배.했던 한 해였다... 회고록 쓰려고 했을 때 "아~ 올해 뭐했지... 한 게 없는 것 같은데..."라는 생각밖에 나지 않았다. 그렇지만 막상 쓰기 시작하니까 그래도 은근히 뭔가 했네~ 싶다. 어느덧 6년차가 되어버렸다... 처음 취업하고 10년차가 되었을 때 어떤 모습을 하고 있을까 생각도 해보았지만 상상 1도 안되었었다. 그런데 벌써 그 절반을 마쳤다. 앞으로 5년만 더 있으면 10년차를 찍는다. 그만큼의 실력을 쌓았고, 업적을 쌓았는지 모르겠다. 개인적인 공간에 목표를 적어두고 회고하면서 중간중간 체크를 해보아야겠다. 두 번째 이직... 머기업으로! 처음에 스타트업을 거쳐 중소기업에 다니다가 마침내 대기업까지 왔다. 확실히 지원서를 제출하면서 느꼈지만 대기업이라 그런지 체..

기존에 React를 배울때 공식 홈페이지의 3번쨰 특징에 한번 배우고 여러곳에서 사용할 수 있다는 문구가 있었다. 그리고 문서를 읽으면서 여렵풋이 React는 Web 플랫폼에서만 사용하는것이 아닌 모바일도 지원하고 더 나아가 데스크탑 애플리케이션도 지원하려는 꿈이 있다는걸 느낄 수 있다. 특히 처음 react를 하면 React-dom을 import하여 개발하게 되는데, 이는 React로 만든 컴포넌트들을 DOM으로 표현하고, 웹으로 보여주겠다는것을 의미한다. 그렇다면 react-dom이 아닌 다른 무언가를 사용해서 출력하면 다른 플랫폼에서도 동작하는건가? 라는 생각을 가지고 넘겼던 기억이 난다. 그리고 React Native가 나왔다. 이제 React로 모바일을 개발할 수 있다. (사실 나온지 꽤 되었..

드디어 마지막 You don't know JS 2권의 마지막인 부록이다. 정리에 앞서 목차를 정리하자면 다음과 같다. ES6 Class asynquence 라이브러리 고급 비동기 패턴 asynquence 라이브러리 와 고급 비동기 패턴의 경우 asynquence 라이브러리의 설명 정도인데, 이 라이브러리가 현재 많이 쓰이는지 잘 모르겠고, 개인적으로 필요해졌을때 보아도 늦지 않을거라고 생각한다. 커뮤니티 자체가 죽은건 아니지만 활발하게 이루어지고 있진 않았고, 최근엔 많은 대안들이 있으므로 선택적인 내용인듯 하다. 따라서 나는 따로 정리하지 않는다. 한번 보고싶으신 분들은 아래 링크를 확인하면 좋을것같다. https://github.com/getify/asynquence APPENDIX A: ES6. C..

목표 FRP의 정의 이벤트의 정의와 이벤트가 문제를 야기하는 경우 FRP의 목표 → 우리가 해결하려는 문제의 정의 FRP의 장점 FRP 시스템의 작동 원리 FRP의 바탕이 되는 사고방식 FRP는 표준적인 프로그래밍 언어에 간단한 라이브러리 형태로 제공되며 관찰자 패턴에서 널리 사용하는 리스너를 대신한다. FRP를 사용하면 코드가 깔끔하고, 명확하며, 튼튼해지고 관리도 쉬워진다. ⇒ 코드가 간단해진다. FRP는 우리가 기존에 하던 방식과는 다른 방식으로 문제를 해결한다. FRP는 함수형 프로그래밍의 아이디어를 기초로 하지만 FP를 몰라도 문제없다. ⇒ 즉, 함수형 프로그래밍과 FRP는 별개다?? 흠... 듣기를 멈추고 반응을 시작하자! 1.1 프로젝트, 복잡도의 벽에 부딪치다 큰 프로젝트는 어느 순간 이..

최근 Javascript를 공부하면서, 개발하면서 종종 들렸던 키워드중 함수형 이라는 단어와 반응형 이라는 단어이다. 이 둘이 세트인건지, 따로따로 인건지, 합쳐졌을때 다른 의미를 갖게 되는건지 알 수 없었다. 객체지향 프로그래밍에 익숙해서 그런지 함수형 프로그래밍을 보았을때 왜 그렇게 해야되는지? 어떤 장점이 있는지 사실 잘 알지 못한다. 어려풋이 이런거 아닐까? 하는 정도이다. 그러던중 함수형과 반응형이 같이 나와있는 이 책을 발견하게 되었고, 이번기회에 함수형 반응형 프로그래밍에 대해 알아보려고 한다. 목적은 함수형과 반응형 프로그래밍에 대해서 알기를 원하는데, 함수형 반응형이라는게 하나의 다른 용어이면 어쩌지 하는 생각도 조금 든다. 알아두어서 나쁠것은 없으니 한번 알아보도록 하자.

a++와 ++a 사이에 어떤것이 성능이 좋을것인가? 학부생때도 뭐가 더 좋은지 많이 고민해보았고, 써져있는 글마다 달랐다. 결론적으로 의미가 없다는걸 알게되었다. 저 둘이 성능차이가 있으면 얼마나 있을꺼고, 내 서비스에 얼마나 큰 영향을 줄수 있을까... 책에서도 그러한 미시적 성능 튜닝에 초점을 두고있진 않았다. 6.1 벤치마킹 일반적으로 많이 사용하는 성능 측정 코드이다. var start = (new Date()).getTime(); // TODO: 테스트할 작업 var end = (new Date()).getTime(); console.log(end - start); 위와같은 방법으론 정확한 성능을 알아낼 수 없다. 문제점은 다음과 같다. getTime의 최소값인 밀리세컨 이하의 값은 측정 불가 ..

비동기 패턴 덕분에 성능 좋은 코드를 작성할 수 있었다. 하지만 근본적으로 단일 이벤트 루프 스레드에 묶여있기 때문에 한계가 있다. 이러한 문제를 극복하기 위한 3가지를 알아보았다. 1. 웹 워커 비동기 이벤트를 이용하여 스레드간에 메시지를 교환하며 자바스크립트 파일을 개별 스레드 단위로 실행하게 해준다. 메인 UI 스레드의 응답성을 높이면서도 소요 시간이 길거나 자원을 집중적으로 소모하는 작업을 다른 스레드로 분산하는 장점을 가진다. 2. SIMD CPU 수준의 병렬 수학 연산을 대량 데이터의 수치 연산 같은 고성능 병렬 데이터 연산에 특화된 JS API로 연결하는 기법이다. 3. asm.js GC나 강제변환 등 최적화 하기 어려운 영역을 피해서 자바스크립트 엔진이 이런 부류의 코드를 자동으로 인식하여..

이번장에선 외부 데이터를 어떻게 fetching하는지 살펴본다. 이번 장에서는 이번 장에선 아래와 같은 내용을 살펴본다. Next.js 의 pre-rendering 피쳐를 살펴본다. pre-rendering의 두가지를 살펴본다. Static Generation Server-side Rendering 데이터 유무에 따른 static Generation방식을 살펴본다 [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) 와 사용법에 대해 알아본다. [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#get..

이번엔 Css 스타일을 입혀보도록 하자 Next.js has built-in support for CSS and Sass. For the purposes of this course we will use CSS. Next.js는 CSS와 Sass가 내장되어있다. 이번엔 css를 사용해볼 예정이다. 어떻게 Next.js가 이미지나 메타데이터와 같은 정적 assets을 다루는지 알아본다. 목표 이번장에선 아래와 같은 내용을 배울것이다. 어떻게 정적 파일을 Next.js에 추가하는지 어떻게 각 페이지별안에 내용을 커스텀 하는지 어떻게 CSS 모듈을 사용하여 React Component를 재사용 하는지 어떻게 global CSS를 적용하는지 몇가지 Next.js에서의 스타일링 팁 좀더 자세한 내용을 보고싶다면 C..