전체 글

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 라이프 사이클은 페이지 렌더링 전 준비과정에서 시작하여 페이지가 사라질 때 끝이 나게 된다. 리액트 프로젝트에서 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하는지, 또는 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 하는지를 알아야 불필요한 업데이트를 방지할 수가 있다. 리액트의 클래스 컴포넌트는 컴포넌트 라이프사이클 메서드가 있어서 이를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 이번 포스팅에서는 컴포넌트 라이프사이클에 대해서 다뤄보도록 한다. 라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 하기 전에 실행이 되며, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행이 된..

이번 포스팅에서는 자바스크립트의 네이티브 객체들에 대해 알아보고자 한다. 네이티브 객체는 특정 환경(브라우저 등의 클라이언트 프로그램, 또는 Node.js 등의 런타임)에 종속되지 않은, ECMAScript 명세의 내장 객체를 말한다. 우리가 많이 사용하는 네이티브들은 다음과 같다. 짐작이 가는 사람들도 있겠지만, 네이티브 객체는 사실상 내장 함수이다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 네이티브는 생성자처럼 사용할 수 있지만 실제로 생성되는 결과물은 예상과 다른 경우가 많다. // 자바처럼 String() 생성자와 비슷하게 보일 수도 있겠다. var a = new String("H..

C++ 공부를 시작했다. 김포프님의 POCU 아카데미로 C++ 수업을 수강하고 있으며, 해당 진도에 맞춰서 학습한 내용을 블로그 포스팅으로 정리해 볼까 한다. C++을 공부하는 목적은 프로그래머로서 언매니지드 언어를 하나 정도는 잘 쓸 줄 알아야 한다는 책임감(?)과 이 공부를 통해 컴퓨터 구조나 프로그래밍 언어를 컴퓨터가 어떻게 이해하는지, OOP 개념 등에 대해서도 전반적으로 공부를 해 보기 위함이다. 오늘은 그 첫 번째 순서로 입출력에 대한 내용을 다뤄본다. 처음이라 그리 어려운 내용은 아니다. 출력(Output) C++로 Hello World를 출력하는 코드는 다음과 같다. cout > 을 통해서 입력을 한다. 여기서 cout은 출력 스트림, cin은 입력 스트림이다. 출력 부분에서 알아야 할 개..

지난 네 번의 포스팅에서 마음가짐 이력서 작성 코딩테스트 및 사전 과제 기술 인터뷰 이렇게 주제를 가지고 나의 이번 2020년 상반기 웹 프론트엔드 개발자로서의 취업 준비과정을 적어보았다. 사실 이번 포스팅에서 쓸 말은 그렇게 많지는 않다. 이미 기술 인터뷰까지 통과하는 관문 자체가 무척 힘들고 길었을 것이기 때문이다. 여러분이 정말정말 운이 좋게도 두 군데 이상의 회사에서 오퍼를 받으면 아마 많은 고민이 될 것이다. 나의 경우 두 군데에서 최종 오퍼를 받았고 그 이후로 진행 중이었던 채용 절차는 전부 중단하였다. 되게 많은 고민을 했었는데, 서로 다른 장점을 가지고 있었기 때문이다. 그래서 나는 다음과 같은 방법을 사용했다. 내가 생각하는 회사를 볼 때 중요하다고 생각하는 기준들(ex. 연봉, 복지, ..

리액트는 기본적으로 가상 DOM(Virtual DOM)을 사용하기 때문에 DOM 조작으로 인한 브라우저 렌더링 과정 리소스를 최소화한다는 장점을 가지고 사용한다. 따라서 가능하면 리액트에서 DOM을 직접 건드리는 일은 지양해야 한다. 하지만 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 생기게 된다. 이럴 때 사용하는 개념이 ref(reference의 줄임말)이다. 우리가 일반적으로 어떤 컴포넌트에서 조작이 일어날 때 DOM을 변화시키는 경우 state를 사용한다. 함수형 컴포넌트에서는 useState를 사용할 수 있다. 하지만 state만 가지고 해결할 수 없는 경우도 존재한다. 예를 들면 특정 DOM 노드에 접근하여 포커스, 미디어 재생 등을 제어하거나 사이즈를 얻어올 때 스크롤 박스 조작하기..

요즘에 실무에서 프론트엔드 개발을 하기 시작하면서, 과거에 혼자서 프로젝트를 할 때와 다른 점들이 몇 가지가 보이기 시작했다. 그 중에 하나가 디자인 패턴인데, 아직도 나는 디자인 패턴을 왜 써야 하고 또 잘 쓰려면 어떻게 써야 하는지에 대해서 잘 모른다. 그래서 주말에 조금씩 디자인 패턴을 공부해 보기로 했다. 교재는 이고 디자인 패턴 관련된 책 중에서 오랫동안 많은 사람들한테 읽혀진 책 중 하나이다. 책의 내용을 정리하면서, 최근에 추가되거나 수정된 내용들을 적절하게 업데이트 하는 식으로 공부 및 포스팅을 작성해 보려고 한다. 개발자들은 혼자서 프로젝트를 하는 경우보다 여럿이 함께 하는 경우가 훨씬 더 많다. 그리고 혼자 하더라도 그 사람이 처음부터 끝까지 프로젝트를 책임지고 한다는 보장은 없다. 그..

오랜만에 해커톤에 참여했다. 작년 8월 중국 해커톤 대회 이후로 거의 11개월 만이다. 그 사이에 개인적으로 많은 일이 있었다. 소프트웨어 마에스트로를 하고 동시에 스타트업에서 인턴을 하고 인턴이 끝나자마자 토스에 입사를 했다. Scraping Developer로 짧게 일하다가 갑작스럽게 퇴직을 하고 다시 취준을 하고, 그러다가 지금 새로운 회사에서 Web Frontend Developer로 입사해서 일을 하고 있다. 개발자들 중에 안 바쁜 사람이 어딨겠냐만 ㅋㅋ 정신없이 살다보니 (취준은 취준대로, 회사는 회사대로) 해커톤이나 사이드 프로젝트를 제대로 하기가 쉽지 않았다. 사이드 프로젝트에 대한 열망은 항상 있었다. 무언가를 만드는 것이 좋아서 프로그래밍을 시작했고, 시각적인 인터랙션이 좋아서 웹 프론..

오늘 살펴볼 문제는 백준 1202번 문제이다. https://www.acmicpc.net/problem/1202 1202번: 보석 도둑 문제 세계적인 도둑 상덕이는 보석점을 털기로 결심했다. 상덕이가 털 보석점에는 보석이 총 N개 있다. 각 보석은 무게 Mi와 가격 Vi를 가지고 있다. 상덕이는 가방을 K개 가지고 있고, 각 가방에 � www.acmicpc.net 이 문제는 전형적인 그리디 알고리즘 문제이다. 각각의 주머니에 대해서 넣을 수 있는 최대 가격의 보석을 적절하게 넣어주면 풀 수 있는 문제이다. 처음에 내가 했던 접근은 다음과 같다. 보석을 1. 가격이 비싼 순으로 2. 같은 가격이면 무게가 가벼운 순으로 정렬되는 PriortyQueue를 만든다. 그리고 가방을 무게 순으로 오름차순으로 정렬한..