개발자

이번 포스팅에서는 자바스크립트의 스코프에 대해서 기본적인 개념을 알아 보려고 한다. 변수의 값은 어디에 저장되는지, 그리고 필요할 때 변수를 어떻게 찾아서 써야 하는지는 프로그래밍에서 중요한 요소이다. 따라서 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 규칙이 필요하다. 이러한 규칙을 스코프(scope)라고 한다. 자바스크립트를 일반적으로 '동적' 또는 '인터프리터' 언어로 분류하지만 자바스크립트는 사실 '컴파일러' 언어이다. 물론 자바스크립트가 전통적인 많은 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산 시스템에서 이용할 수 있는 것은 아니다. 하지만 자바스크립트 엔진은 전통적인 컴파일러 언어에서 컴파일러가 하는 일의 상당 부분을 우리가 아는 것보다 더 멋있게(?) 처리한..

지난번에 웹팩에 대한 기본적인 내용을 포스팅했고, 이번에서는 웹팩을 좀 더 개발 및 배포하는 과정에서 효율적으로 쓰기 위한 기능들을 정리해 보려고 한다. 참고로 이 내용은 인프런에서 라는 김정환님의 강의를 듣고 정리한 것들을 기반으로 작성한다. 웹팩 개발 서버 (webpack dev server) 우리가 기존에 클라이언트 작업을 하고 나면 그 파일을 브라우저에 직접 로딩해서 결과물을 확인했다. 만약에 인터넷에 웹사이트로 배포를 하기 위해서는 해당 파일을 서버에서 읽고 요청한 클라이언트에 제공해야 한다. 이러한 운영 환경(production)과 개발 환경(development)을 유사하게 가져가게 되면 배포 시에 잠재적으로 생길 수 있는 문제들을 미리 찾을 수 있다는 장점이 있다. 또한 ajax 방식의 a..

이번 포스팅에서는 React Hook에 대해서 개념을 정리해 보려고 한다. 리액트 훅은 v16.8에 새로 도입되었으며 함수형 컴포넌트에서 기존에 라이프사이클 메서드가 없어서 사용할 수 없었던 기능들을 사용할 수 있게 만들어 주었다. 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 먼저 컴포넌트에서 상태관련 로직을 사용할 때 레이어 변화 없이 재사용할 수 있게하기 위함이 첫번째 목적이다. 기존에는 여러가지 레이어로 둘러 쌓여있어서 구조가 복잡했기 때문이다. 두 번째 목적은 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 때문이다. 그 외에도 클래스 기반 컴포넌트를 지양하고자 하는 목적 등도 있다. 그러면 지금부터 자주 사용하는 리액트..

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

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

코딩 테스트나 사전 과제 전형에 통과하고 나면, 그 다음으로 기술 인터뷰를 보게 된다. 나 같은 경우 온사이트 기술 인터뷰와 스크리닝 화상(또는 전화) 인터뷰 두 가지 형태로 보았던 것 같다. 요즘에는 코로나 바이러스 때문에 기술 인터뷰를 화상으로 보는 회사들도 있다. 스크리닝 인터뷰 스크리닝 인터뷰는 보통 온사이트 기술 인터뷰 보기 전에 지원자의 실력을 체크하는 용도로 30분~1시간 정도로 가볍게 진행한다. 뭔가 과제를 주는 경우보다는 이력서를 기반으로 질문을 하거나, 지원 분야에 관련된 기본적인 직무 지식을 물어본다. 나 같은 경우 웹 프론트엔드 분야로 지원을 했었는데, HTML, CSS, JS, 브라우저 및 웹 전반, FE 관련 라이브러리 등등에 대해서 물어보았던 것 같다. 간혹, 자료구조, 알고리..

서류를 통과하면 그 다음에 주어지는 전형은 보통 코딩테스트나 사전과제, 서면 질문지 등이 있었다. 때로은 이러한 절차 전에 스크리닝 인터뷰를 하는 경우도 있었다. 인터뷰는 다음 포스팅에서 다룰 예정이고 이번 포스팅에서는 코딩 테스트와 사전 과제에 대해서 이야기를 해 보려고 한다. 코딩 테스트 코딩 테스트는 일반적으로 가장 자신 있는 언어를 사용하여 알고리즘 문제를 푸는 경우가 제일 많다. 때로는 언어를 지정해 주는 경우도 있다. 웹 프론트엔드의 경우 자바스크립트로 지정해주는 식으로 말이다. 그리고 간혹 알고리즘이 아닌, Vanilla JS나 React를 사용하여 특정 기능을 구현하는 코딩테스트를 본 적도 있었다. 이 경우는 코딩 테스트와 과제 전형을 섞어놓은 느낌을 받았다. ㅋㅋ 나의 경우 어디 가서 알..

이전 포스팅 - 자바스크립트 프로미스(Promise) 이전 포스팅에서 콜백을 통해 비동기 흐름을 어떻게 제어할 수 있을지에 대한 방법들을 이야기 했고, 프로미스를 통해 믿음성/조합성을 살피면서 제어의 역전을 되역전하는 방법을 살펴보았다. 그리고 이번 포스팅에서는 비동기 흐름 제어를 순차적/동기적으로 어떻게 나타낼 수 있을지에 대한 방법을 고민해 본다. 기존 ES5까지는 자바스크립트에서 함수가 실행되기 시작하면 완료될 때 까지 계속 실행되며 도중에 다른 코드가 끼어들어 실행되는 법은 없다고 개발자들은 생각했었다. 하지만 ES6부터 이러한 완전-실행 법칙을 따르지 않는 새로운 종류의 함수, 제너레이터가 등장하였다. 여기서 bar()는 x++와 console.log() 사이에서 실행된다. 하지만 만약 bar(..