전체 글

해당 글 184건

책 2023.05~

2년 전

깔끔한 노션에서 보세요 독서 리스트 📚 요즘 독서 리스트에 누가 책만 넣나요. 책, 기사, 팟캐스트, 동영상 등을 한눈에 볼 수 있도록 대시보드를 만들었습니다. 각 미디어 유형은 유형 속성에 따라 다른 보기로 볼 수 있어요. ✂️ 2bro-bucketlist.notion.site 공감은 지능이다 더보기 혼자서 할 수 있는게 많아지며 (예. 원시 시대 부족생활에 비해) 우리는 혼자가 편해졌다. 형편이 어려운 친구를 부자집에서 입양하였을 때 지능이 높아졌다. 지능은 타고나기도 하지만 변화 할 수 있다. 변화할 수 없다고 생각하는것과 할 수 있다고 믿는것에 의존한다. 우리는 더 이상 힘든 일이 필요하지 않지만 운동을 통해 건강한 삶을 사는게 현명하다는 것을 알고 있다. 사람들은 쉽게 세계를 내부인과 외부인으로..

life

함수형 자바스크립트 1

2년 전

개요 이전에 함수형 프로그래밍에 대한 얕은 이해 만 갖고 있고 Closure, Currying, Compose 을 포함해서 함수형 패러다임에 개념에 대해 더 깊이 알고자 합니다. 또한 함수형 패러다임에서 Ramda.js 와 RxJS 를 어떻게 활용하는지 궁금증을 해결하고자 합니다. 사내 도서관에서 "FUNCTIONAL JAVASCRIPT 함수형 프로그래밍 모던 웹 개발에 충실한 실전 함수형 프로그래밍 안내서"라는 책을 찾았고, 이 책을 통해 함수형 프로그래밍에 대한 내용을 학습하고 정리하여 공유하고자 합니다 포스트 계획 포스트 계획: "FUNCTIONAL JAVASCRIPT 함수형 프로그래밍 모던 웹 개발에 충실한 실전 함수형 프로그래밍 안내서" 도서 내용을 학습하고 개념적인 내용을 정리하여 첫 번째 ..

software engineering/javascript

페이스북 문화 소개 그리고 QA

2년 전

페이스북 문화 소개 및 성장 발표자: 이은창 Facebook 8년 → Sendbird [Head of Engineering] https://www.youtube.com/watch?v=rFh21zGLqfw&feature=youtu.be&ab_channel=EO이오 영상 TL;DR 은 아래 접은글, 하지만 보시는걸 추천합니다 더보기 - 할 수 있는것 이상을 하기 위해서 설치고 깨져보자 - 성장을 계속 optimize 하는 방법은 해보지 않았던 경험에 자신을 밀어넣으면서 성장하는 것 - 부트캠프 8~10주 다양한 태스크를 진행하며 엔지니어는 팀 쇼핑을하고 매니저들은 엔지니어를 찾는 과정이 있었다. - 어디가 막혔는지 파악하고 동료/Public Forum 에 공유하는것은 중요한 Skill Set이자 성장하는데 ..

company/culture

React 18 매력적인 기능

2년 전

소개 메이저 버전 업데이트는 조심스러워야하고 불편하게 느껴지는게 사실이지만 가장 매력적으로 느껴졌던 React 18 특징들을 소개해보겠습니다. 조금 긴 배경 React 는 JavaScript 로 만들어진 언어입니다. 그리고 자바스크립트는 아시다시피 아래 모든 과정을 단일 프로세스(싱글 쓰레드)로 진행하죠. React 또한 컴포넌트를 업데이트 할 때 메인 쓰레드 위에서 모든 프로세스가 끝날때까지 하나의 블록을 업데이트 하는 동기식으로 작동합니다. 사용자 이벤트 또한 메인 쓰레드에서 발생 하므로 변경 사항이 생겨 업데이트가 발생한다면 현재 실행중인 렌더링이 끝날 때 까지 입력 이벤트와 같은 이벤트가 발생하더라도 처리할 수 없습니다. 메인 쓰레드를 차단하는게 문제라면 웹 워커를 사용해서 다른 쓰레드 내부에서 ..

software engineering/frontend

반드시 알아야할 캐시(Cache) 체계

2년 전

개요 캐싱은 모던 컴퓨팅에서 시스템 성능을 향상 시키고 응답 시간을 단축하는데 아주 일반적인 기술입니다. Frontend 부터 Backend 까지 캐싱은 다양한 어플리케이션과 시스템의 효율성을 향상 시키는데 중요한 역할을 합니다. 일반적인 아키텍쳐는 여러 캐싱 레이어를 갖는데, 각 레이어는 특정 어플리케이션의 상황에 맞게 다양한 캐싱 전략과 메커니즘을 갖습니다. 컴퓨터 하드웨어 레벨 전형적인 시스템 아키텍처를 살펴보기 전, 컴퓨터 자체 캐싱에 대해 살펴 보겠습니다. 컴퓨터 하드웨어를 보면 가장 일반적으로 L1, L2, L3 캐시가 있습니다. L1 캐시(#KBs)는 가장 작고 빠른 캐시로, 일반적으로 CPU 칩 안에 내장되어 있습니다. 자주 액세스하는 데이터와 명령을 저장하므로 CPU가 느린 메모리에서 가..

software engineering/computer science

TL;DR shadow DOM

2년 전

개요 웹 컴포넌트의 중요한 측면은 캡슐화입니다. 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터의 분리하여 각기 다른 부분들이 충돌하지 않게 하고, 코드가 깔끔하게 유지될 수 있게 합니다. Shadow DOM API는 캡슐화의 핵심 파트이며, 숨겨진 분리된 DOM을 요소에 부착하는 방법을 제공합니다. 핵심 Shadow DOM은 숨겨진 DOM 트리가 통상적인 DOM 트리에 속한 요소에 부착될 수 있게 합니다. 이 shadow DOM 트리는 shadow root로부터 시작되어 원하는 모든 요소의 안에 부착될 수 있으며, 그 방법은 일반 DOM과 같습니다. 알아야 할 shadow DOM 용어가 있습니다. Shadow host: shadow DOM이 부착되는 통상적인 DOM 노드. ..

software engineering/frontend

React Server Component (RSC)

2년 전

지난 use() 훅에 관한 포스트에서 나왔던 주제인 React Server Component, Client Component, Shared Component 에 관해 다뤄보겠습니다. 요약 2020년 12월 21일, React 팀에서 React Server Components 를 공개했습니다. React Server Component 는 클라이언트 사이드의 풍부한 인터렉티비와 전통적인 서버사이드 렌더링의 성능적 이점을 결합하여 다음과 같은 효과를 기대할 수 있습니다. 서버에서만 실행되어 번들 크기에 전혀 영향을 주지 않습니다. 클라이언트에서 다운로드 되지 않아 번들 크기가 줄어 시작 시간 개선에 도움이 됩니다. 데이터베이스, 파일 시스템, 마이크로 서비스 등 서버측 데이터 소스에 엑세스 할 수 있습니다...

software engineering/frontend

취준 & 이직 Retrospective

2년 전

이번 이직은 꽤 긴 시간을 소비하며 하고 싶었던 공부와 방향성을 확실하게 잡을 수 있었던 아주 좋은 경험이었다. 코딩테스트, 과제, 면접을 진행하며 기업별로 원하는 인재상도 달랐고 문화도 달랐지만 기본적인 CS 지식 그리고 내 분야에 대한 자신감과 성장가능성은 기업 규모에 상관없이 요구되었던 거 같다. 그리고 그 과정 속에서 새로운 지식 또한 굉장히 많이 얻게 된 거 같다. 갑작스럽게 회사 상황이 좋지 않아 회사 M&A 이후 몇 달 뒤 사업 종료 결정이 되어 당황했지만 6개월 간 실업급여와 위로금을 받은덕에 이런 시간을 가질 수 있었다. 많은 기업에 지원하며 탈락의 고배도 마셨지만 최종 오퍼나 임원 면접까지 도달하며 내가 회사를 선택함에 있어서 가장 중요하게 생각했던 점은 '내가 회사를 즐겁게 다닐 수..

company

React - Use() Hook

2년 전

본 글은 RFC 의 번역입니다. Jotai 개발자의 블로그를 보다가 궁금하여 자세하게 찾아보기 위해 작성했습니다. 비동기 처리의 기본 예 예: 서버 구성 요소에서의 await // This example was adapted from the original Server Components RFC: // https://github.com/reactjs/rfcs/pull/188 async function Note({id, isEditing}) { const note = await db.posts.get(id); return ( {note.title} {note.body} {isEditing ? : null} ); } 이는 서버의 비동기 데이터에 액세스하는 데 권장되는 방법입니다. 아래의 React의 클라이언..

software engineering/frontend

React- 어떤 상태 관리 라이브러리를 사용할까?

2년 전

Jotai 탄생 배경 React Context - useState와 useContext 조합에서 re-render 문제를 해결하기 위해 등장했습니다. Provider Hell (Root Component가 너무 많은 Contex Provider를 갖는 경우) 동적 추가/삭제 (하위 트리들을 다시 리마운트 해야하는 단점이 생김)으로 일반적으로 Top-Down 문제를 해결하기 위해 memoziation 을 보통 활용하여 re-render를 방지하는 selecter function을 사용합니다. Jotai는 Recoil로 부터 영감 받아 atomic model 기반의 bottom-up 방식의 접근을 사용합니다. atom을 결합한 상태를 만들고 atom dependency 에 기반하여 render를 최적화함으로..

software engineering/frontend