전체 글

최근에 웹 프론트엔드 개발자로 취업을 준비하는 개발자 지망생 분들을 멘토링을 하면서 여러가지 질문들을 받는데, 그 중에서 나도 고민을 하고 답변을 해준 질문들이 있었던 것 같아 그러한 질문들도 조금씩 블로그에서 다루어 보려고 한다. 이번 주제는 리액트에서의 상태관리를 어떤 방식으로 하는 것이 소위 best practice인가에 대한 질문을 받았고 이에 대한 내 생각을 정리해 보려고 한다. 어디까지나 이 글이 정답은 절.대. 아니며 자유로운 의견은 댓글로 남겨주면 감사할 것 같다. 질문 : 리액트에서 상태관리는 어떻게 해야 하나요? 상태관리 라이브러리는 꼭 써야 하나요? 쓰게 된다면 어떤 것을 써야 하나요? 이 이야기를 하려면 먼저 Flux 패턴에 대해서 이야기를 할 수 밖에 없을 것 같다. Flux 패턴..

오픈소스 컨트리뷰션 아카데미를 계속해서 진행하고 있다. 조금 늦은 감이 있지만.. 초반에 했었던 학습 중 이더리움에 대한 기본 과제 심화편 공부한 내용을 정리해 보려고 한다. 1. ECDSA가 무엇인지 또 어떻게 동작하는지 간단하게 설명하세요. 타원곡선 디지털서명 알고리즘(ECDSA, Elliptic Curve Digital Signiture Algorithm)은 타원곡선암호를 전자서명에 접목시킨 알고리즘이다. 일반적인 인증 시스템에서 보안 키의 보호가 점점 어려워짐에 따라 보완하기 위해 만들어졌으며 이 방식에서는 발신자에 의한 서명 시 사용되는 개인 키와 수신자가 발신자의 서명을 사용하는 공개키 한 쌍을 갖는다. 블록체인 네트워크에서 트랜잭션을 주고받을 때 수신자가 인증자의 공개 키로 메시지가 진짜인지..

오랜만에 백준 문제를 풀었다. Brute Force 부터 유형별로 차근차근 풀어보려 한다. 이 문제는 찐 Brute Force 문제이다. Brute Force는 하나하나 직접 다 해보는 방법을 말한다. 일반적으로 이 방법은 시간과 공간을 초과하기 때문에 만능은 아니지만.. 구현 방법이 떠오르지 않을 때는 가장 먼저 시도해 보면 좋은 방법이기도 하다. 이 문제는 5개의 테트로미노를 뒤집고 돌려서 종이에 놓았을 때 차지하는 4칸의 합을 가능한 경우 모두 구해준 뒤 가장 큰 값을 출력하면 된다. 테트로미노는 5개이지만 실제로 우리가 고려해야 하는 테트로미노는 다음과 같이 총 19개가 된다. 그리고 이 19개 각각에 대해 해당 종이(M*N)를 전부 돌면서 발생할 수 있는 모든 경우를 다 탐색해 주어야 한다. 이..

화 : [Javascript] 비동기, Promise, async, await 확실하게 이해하기 [Javascript] 비동기, Promise, async, await 확실하게 이해하기 – Under The Pencil 개요 본 글은 자바스크립트에서 Promise 에 대한 개념을 잡기 위해 작성한 글입니다. 자바스크립트의 기본 문법을 먼저 알아야 이 글을 조금 더 수월하게 보실 수 있습니다. 필자는 Node.js 기반에서 elvanov.com 수 : Apollo Client는 Redux와 무엇이 다른가 목 : 리액트의 Hooks 완벽 정복하기 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고..

회사에서 업무를 하면서 공부해야 하는 것들이 계속해서 생겨난다. 그러한 주제들을 중심으로 글을 읽었다. 월 : 변경에 유연한 컴포넌트 변경에 유연한 컴포넌트 이번 포스트에서는 변경에 유연하게 대응할 수 있는 컴포넌트에 대해 이야기해보려고 한다 TL;DR 컴포넌트는 데이터를 중심으로 추상화한다. 일반적인 인터페이스로 컴포넌트를 디자인한다. 변 jbee.io 화 : node_modules로부터 우리를 구원해 줄 Yarn Berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech 수 : MVVM 패턴 MVVM 패턴 나의 첫 디자인 패..

브라우저가 어떻게 웹 페이지를 사용자에게 보여주는 지 그 과정을 자세하게 아는 것은 프론트엔드 개발자에게 꼭 필요한 지식이라고 생각한다. 따라서 면접 때 충분히 물어볼 수 있고, 면접 때 설사 물어보지 않더라도, 실무에서 트러블 슈팅을 할 때 알고 있어야 하는 내용이라고 생각을 해서 나름대로 정리를 해 보려고 한다. 먼저 아래의 그림을 보자. W3에서 말하는 사용자 액션이 발생하고(ex. https://www.google.com 을 브라우저 url에 입력한다) 브라우저가 이를 감지해서 웹 페이지를 아래의 그림 순서대로 로드한다. 여기에서 노란색 부분은 웹 페이지에서 벗어난 후 문서를 읽어들이기 전을 의미하고, 파란색 부분은 자바스크립트 이벤트는 없고 전부 네트워크 레벨에서 일어나는 일이다. 첫 번째 일어..

이 기간에는 백신 휴가도 있고, 추석 연휴도 있었어서 2주치를 몰아서 적어 보았다. 월(9/13) : 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩 여행 경험을 돕는 웹사이트 가꾸기 medium.com 목(9/16) : 네이티브 앱 → 리액트 네이티브 앱 전환 그리고 1년 후 리액트 네이티브 앱 전환 그리고 1년 후 - 리디주식회사 RIDI Corporation 2020년 2월, 애니메이션 스트리밍 서비스 라프텔에서는 기존에 Android 와 iOS 각각 따로 구현되어 있던 애플리케이션을 리액트 네이티브 를 통해 개발을 통합하여 할 수 있도록 리빌드를 했습니다. ridicorp.com 금(9/17) : Monol..

W37 내가 매일 읽었던 글들을 정리한다. 월 : 프론트엔드 테스트의 모든 것 프론트엔드 테스트의 모든 것 저와 같은 사람이라면 개발 워크플로우에서 테스트를 자동화하여 원치 않는 사이드 이펙트를 줄이고 애플리케이션의 품질을 향상하는 것이 중요하다고 생각하겠죠 medium.com 화 : 엔터프라이즈 프론트엔드 애플리케이션 아키텍쳐 엔터프라이즈 프론트엔드 애플리케이션 아키텍쳐 소프트웨어의 수명과 복잡도는 대개 비례 관계입니다. 아무리 정교하고 아름답게 코드를 작성해도, 시간이 지날수록 코드베이스는 복잡해지기 마련입니다. 그래서 우리는 이런 문제들을 마법 medium.com 수 : LINE에서 하루 만에 정적 웹 페이지 개발해서 배포하는 방법 LINE에서 하루 만에 정적 웹 페이지 개발해서 배포하는 방법 - ..