프론트엔드

웹 프론트엔드 개발자라면 어떤 회사에서, 어떤 프로젝트를 맡아서 개발을 하든지 누구나 궁금해 할 수 있고 누구나 물어볼 만 한 질문들을 골라서 이에 대한 나의 나름대로 최선의 대답을 정리해 보는 포스팅을 연재해 보려고 한다.(반응이 좋으면 계속 연재해 볼 생각) 현업에 계신 많은 웹 프론트엔드 개발자들 그리고 새로운 꿈을 찾아 취업을 준비하는 학생 및 예비 개발자 분들에게 조금이나마 도움이 되기를 바라는 마음으로 글을 작성해 본다. 아직 2년차 웹 프론트엔드 개발자라 잘못된 지식을 알고 있거나, 깊이가 부족할 수 있는데 이러한 부분에 대해서는 날카로운 피드백을 해 주시면 정말 감사할 것 같다. JavaScript 엔진은 어떻게 동작하나요? 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인..

이번 포스팅에서는 최근에 페이스북에서 발표한 React 18 알파 버전에 대해서 바뀐 점들을 분석해보고 리액트 팀이 어느 방향으로 리액트를 만들어 나가는지 동향을 분석해 보려고 한다. 2021년 6월 8일 리액트 팀은 리액트 18 버전의 주요 변경 사항들을 발표했다. 리액트 18을 다음 메이저 버전으로 가져갈 것이며 리액트 커뮤니티에서의 다양한 의견들을 수용하여 리액트 18의 주요 기능들로 가져간다고 한다. 그리고 여러 사람들로부터 피드백을 듣기 위해 리액트 18 알파 버전을 발표했다. 리액트 18은 다음과 같은 개선사항들이 포함될 예정이다. 즉시 사용 가능한 개선(out-of-the-box improvement) automatic batching (적은 렌더링을 위함) suspense를 위한 SSR 지..

데동여지도(dedongyeo) 프로젝트에 대해 설명하는 글을 파트 별로 작성해 보고자 한다. 데동여지도는 2021년 넥스터즈 18기에 만들어진 팀(팀이름: Oh!When?, 우리 언제 만나? 라는 의미)에서 시작했으며, 커플들의 데이트 코스를 기록하고 저장하는 웹/앱 어플리케이션이다. 주요 기능으로는 지도에서 커플들이 방문한 스팟 조회 및 커스텀 스팟 생성, 스티커 찍기, 코스 만들기, 코스 저장하기 등이 있다. 첫 번째 포스팅에서는 웹 프론트엔드 파트의 기술 스택 및 아키텍처를 설명하려고 한다. 기술 스택 웹 프론트엔드에서는 다음과 같은 언어 및 라이브러리, 프레임워크를 사용하였다. TypeScript 4.1 Next 10.x React 17.x Apollo Client GraphQL MapboxGL ..

오늘은 패스트캠퍼스에서 최근에 수강했던 김태곤님의 강의를 듣고 학습했던 내용을 정리해 보려고 한다. 시작하기에 앞서서 이 강의는 패캠에서 어떠한 대가도 제공받지 않고 직접 수강하고 내용을 정리하는 것임을 밝힌다. 정리는 강의 목차 순서대로 정리했다. 1. 정체되지 않는 프론트엔드 개발자의 일하는 방식 프레임워크를 위주로 공부하다 보면.. 따라가기 급급해진다. 내부적인 원리를 이해하지 못하면 남는 것이 없다. React, Vue는 컴포넌트 기반 개발이라는 공통점 ⇒ 이를 잘 알고 있으면 새로운 기술도 어렵지 않게 배울 수 있다. Homebrew → 패키지 매니저 for Mac VirtualBox → IE 환경 테스트 Frontend Developer : 어플리케이션이 사용자와 맞닿은 접점을 책임지는 사람 ..

지난 포스팅에 이어서 반응형 스트림의 중첩 옵저버블 처리 및 비동기 스트림에 대해 다루어 보려고 한다. 중첩 옵저버블 처리 우리는 지난 포스팅에서 스트림의 출력을 동시에 하나로 결합하는 방법을 배웠다. 조합하는 방법에 따라 옵저버블 자체에서 다른 옵저버블을 방출하기도 한다. 아래와 같은 상황을 중첩 옵저버블 구조라고 한다. 중첩 옵저버블은 특정 동작 때문에 결과를 소스 옵저버블로 반환해야 하는 후속 비동기 작업을 유발하거나 시작하는 경우에 유용하다. 지금까지는 스칼라 값을 반환하는 함수를 주로 매핑하였으나, 중첩 옵저버블은 매핑된 함수가 다른 옵저버블에 매핑된 옵저버블 또는 옵저버블의 옵저버블을 반환하는 상황을 나타낼 때 사용한다. 이러한 상황은 함수형 프로그래밍에서 빈번하게 발생하는데, 그 이유는 ma..

최근에 많은 서비스들이 모바일 앱 내에서 웹뷰(WebView)로 개발이 되고 있다. 아마 개발자가 아닌 이상 지금 보고 있는 모바일 앱 내의 페이지가 네이티브 앱(Android/iOS)인지 웹뷰, 즉 브라우저 형태인지를 구분하는 건 사실 쉽지가 않다. 실력있는 웹 프론트엔드 개발자라면 네이티브 앱과 정말 거의 비슷하게 감쪽같을 정도로 웹뷰로 페이지를 만들 수가 있기 때문이다. 이러한 개발을 돕는 오픈소스도 점점 더 다양하게 많이 나오고 있는 추세이다. 하지만 주니어 웹 프론트엔드 개발자들에게는 네이티브와 같은 웹뷰를 작업하는 것이 결코 쉽지만은 않다. 따라서 점점 많은 웹 프론트엔드 개발자들이 웹뷰를 개발해야 할 필요가 늘어났고, 필자 역시 마찬가지다. 사실 웹 프론트엔드 개발자로 입사하기 전에는 웹뷰를..

이번 포스팅에서는 지금까지 배웠던 RxJS 옵저버블의 기본기를 바탕으로 중첩된 옵저버블 또는 스트림 안의 스트림과 이들의 비동기 제어를 하기 위한 기능을 살펴보려고 한다. 앞선 포스팅에서 옵저버블이 시간에 따른 이벤트 시퀀스라는 개념을 다졌고, 이 옵저버블은 이벤트가 전달되고 변형되는 오케스트레이터로 생각할 수가 있다. 지금까지는 옵저버블 시퀀스를 대부분 독립적으로 처리하는 방법을 이야기 했으며, 이벤트가 언제 방출되든 상관없이 배열과 같은 방식으로 옵저버블의 모든 이벤트에 연산자를 적용하였다. 그리고 combineLatest()와 같은 RxJS 연산자를 사용하면 한 스트림에서 이벤트가 전파되어 다른 곳에서 반응을 일으킬 수 있기 때문에 RxJS와 반응형 패러다임이 빛을 발함을 알 수가 있었다. 이번 포..

해당 포스팅은 프로그래밍 인사이트에서 출판한 (이브 포셀로, 알렉스 뱅크스 저)을 바탕으로 작성한 글임을 먼저 밝힙니다. 이번 포스팅에서는 클라이언트에서 GraphQL을 사용하는 방법에 대한 내용을 포스팅 해보려고 한다. 예를 들어 cURL을 사용한다고 했을 때 다음과 같은 값들을 요청 보낼 때 사용할 수 있다. 쿼리 : {totalPhotos, totalUsers} GraphQL 엔드포인트 : http://localhost:4000/graphql 콘텐츠 타입 : Content-Type: application/json 이렇게 요청을 보내면 JSON 형태로 다음과 같은 형태의 결과를 받을 수 있다. cURL이 아닌 다른 HTTP 요청 수단도 물론 사용할 수 있다. 브라우저에서 동작하는 간단한 클라이언트를 ..