OWEN

지난 8월 중순, 부산에서 열린 정션 아시아 2022 해커톤을 다녀왔다. 개인적으로 오프라인 해커톤을 3년만에 다녀왔는데, 너무 즐겁고 인상적이었다. 비록 코로나가 아직 완전히 종식된 것은 아니지만.. 이런 행사가 앞으로도 자주자주 생기길 바라는 마음을 담아서 해커톤 후기를 작성해 본다. 서막 때는 2022년 6월 말, 페이스북을 보다가 우연하게 정션 아시아를 한다는 광고를 처음 보게 되었던 것 같다. 대회를 나가고 싶었고 사전에 팀을 꾸려서 나가고 싶어서 보자마자 페북, 링크드인, 슬랙 채널 등등에 팀을 구한다는 글을 바로 올렸다 감사하게도 내가 참여하고 있는 글또 커뮤니티 분들이 빠르게 응답을 주셨고, 넥스터즈라는 IT 연합 동아리 분도 연락을 주셔서 다섯 명 팀 빌딩은 완료되었다. 나는 이런 팀빌딩..

오늘은 로지텍 버티컬 마우스 LIFT에 대한 내돈내산 후기를 적어보려 한다. 회사에서 트랙패드를 쓰고 있었는데, 집에서 재택 근무를 할 일이 많고 매번 트랙패드를 들고 왔다갔다 하기가 힘들어서 집에서 쓸 마우스를 하나 구매하기로 마음을 먹었다. 로지텍 마우스는 이전에 MX Anywhere 2S 를 처음 써봤는데 너무 좋았고 그래서 고민을 많이 하지 않고 로지텍에서 다시 구매를 하기로 했다. 그리고 일반 마우스는 오래 썼을 때 손목이 아프고 손가락도 무리가 가는 것 같아서 버티컬 마우스를 알아보기 시작했다. 가장 먼저 본 모델은 MX Vertical 모델이었다. 정가 기준 129,000원이고 벌크 모델은 9만원 대로도 구매를 할 수 있는 제품이다. 그리고 원래는 버티컬 마우스 라인업이 이 모델만 있는 줄 ..

December/01/2021 (8.75) It is responsible for government -> It is the responsibility of the government Responsible - the quality of a person Responsibility - thing Disposable income: income remaining after deduction of taxes and social security charges, available to be spent or saved as one wishes. With the advent of the pandemic, the economy has taken a hard hit. Employment rates have dropped a..

Next.js 프레임워크는 Data Fetching 시에 SSR(Server-side Rendering), SSG(Static-site Generation), 그리고 Dynamic Routing 등의 세 가지 방법을 제공한다. 각각의 방법에 대해서 하나씩 깊게 알아보고 언제 어떻게 써야 하는지 사용법을 공부해 보고자 한다. SSR(Server-side Rendering) 만약 어떤 페이지에서 getServerSideProps 함수를 호출하면, Next.js는 getServerSideProps에서 데이터를 반환받을 때 마다 이 페이지를 pre-rendering 할 것 이다. export async function getServerSideProps(context) { return { props: {}, //..

내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원은 일반적으로 HTML 문서이지만, 다른 형태의 파일(e. g. 이미지, PDF 등)일 수도 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (e.g. 북마크, 주소 표시줄 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠 표시. 예를 들..

오늘은 많은 분들이 사용은 하지만 헷갈리기 쉬운 useCallback과 useMemo에 대해서 이야기를 해볼까 합니다. 실제로 웹 프론트엔드 개발자 면접 질문에서 신입/경력 구분없이 단골로 나오는 인터뷰 주제 중 하나이기도 해요. 먼저 React 공식 문서에는 useCallback과 useMemo가 다음과 같이 설명이 나와 있어요. useCallback : Returns a memoized callback. 메모이제이션된 콜백을 반환한다. useMemo : Returns a memoized value. 메모이제이션된 값을 반환한다. 이 문장만 읽어서는 이해가 쉽지가 않습니다. 조금 더 살펴보도록 하겠습니다. useCallback과 useMemo 둘 다 공통적으로 가지고 있는 속성은 메모이제이션(Memoi..

동시성 프로그래밍에서 여러 프로세스 사이의 협조가 필요한데, 프로세스 사이에 타이밍 동기화, 데이터 업데이트 등을 협조적으로 수행하는 처리를 동기 처리(synchronous processing)라 부른다. 3.1 레이스 컨디션 레이스 컨디션(race condition)은 경합 상태라고 불리며, 여러 프로세스가 동시에 공유하는 자원에 접근함에 따라 일어나는 예상치 않은 이상이나 상태를 의미한다. 동시성 프로그래밍에서는 이 레이스 컨디션을 일으키지 않고 올바르게 프로그래밍을 하는 것이 중요한 문제이다. 예를 들어 공유 메모리 상에 있는 변수를 여러 프로세스가 증가시킨다고 가정하자. 이 때 메모리에 읽기와 쓰기를 동시에 수행할 수는 없고, 각각 다른 타이밍에 수행한다고 가정한다. 아래 그림은 프로세스 A, B..

이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..