상상의 시작프론트엔드 개발자로 커리어를 바꾼 지 2년이 되어간다.지금 나는 프로젝트 외주를 받아 프론트엔드 개발을 하고 있으며, 취업을 위한 준비와 공부를 하고 있다.마음 한 구석엔 이런 생각이 따라다닌다.“내가 잘하고 있는 걸까?”“지금의 이 일을 선택하길 잘한 걸까?”이 물음에서 시작해 10년 뒤 나의 모습을 상상해 보았다.지금까지 내가 해온 모든 경험을 바탕으로 말이다.미리 얘기하자면, 이 방법을 나와 같은 고민을 가진 분들에게 적극 추천한다!상상은 곧 내가 되고 싶은 나의 모습이기 때문에, 막연하게만 생각했던 목표를 구체화하고 마음을 다잡는 시간이 되었다.1. 기능을 넘어 경험을 설계하는 개발자10년 전에는 UI 하나하나를 구현하는 데 집중했지만, 지금의 나는 사용자의 흐름 전체를 고려하는 개발..

자바스크립트 모듈과 패키지 매니저: Yarn, Pnpm, Npm 무엇이 다를까?JS 개발을 하다 보면 수많은 외부 모듈을 사용하게 된다. 대표적인 두 개의 모듈 시스템을 비교하면 다음과 같다.모듈 방식주요 환경문법 예시동작 방식CommonJS (CJS)Node.jsconst fs = require('fs')동기적 로딩:코드를 실행하면서 바로 모듈을 읽음(require 호출 시 파일 읽기)ES Module (ESM)브라우저, 최신 Node.jsimport fs from 'fs'정적 분석 기반 로딩:실행 전 import 경로를 미리 분석해서 모듈을 불러옴(트리 쉐이킹 가능) 외부 모듈을 사용하는 방식은 점차 ESM으로 바뀌고 있지만 모든 모듈은 결국 node_modules 폴더에 설치된다.따라서 어느 패키지..

자바스크립트 모듈 시스템의 역사현재 메인으로 진행하고 있는 프로젝트에서 사용하고 있는 패키지매니저를 두고 이런 질문을 받았다,왜 yarn을 사용하시나요? 다른 패키지 매니저와 차이점은 알고 있나요? 패키지매니저를 비교하면서 자바스크립트의 모듈이라는 개념에 대해 자세하게 다뤄보았다.You Don't Know JS Yet(YDKJSY) 책이 도움이 되었다. 처음 자바스크립트를 배울 땐 import, export가 자연스럽게 느껴졌지만 이는 자바스크립트가 발전되어 온 역사의 결과물이었고..수년간 발전을 거듭해온 결과 지금 이렇게 편리하게 사용할 수 있던 거였다! 자바스크립트(JS)라는 언어는 태생부터 모듈이라는 개념이 없었다.원래 웹페이지에 작은 기능을 붙이는 정도로만 쓰였기 때문에, 여러 파일로 나눠서 개발..

안녕하세요! 오늘은 React와 TypeScript를 활용하여 간단한 투두(To-Do) 앱을 개발한 경험을 공유하고자 합니다. 이 앱은 기본적인 투두 리스트 기능을 제공하며, 사용자가 할 일을 추가하고, 체크하고, 삭제하고, 완료 여부에 따라 필터링 할 수 있는 기능을 포함하고 있습니다. 그럼 시작해보겠습니다!투두 앱 개발 개요투두 앱은 사용자가 할 일을 관리할 수 있도록 도와주는 유용한 도구입니다. React의 동작 원리를 이해하기 위해 언급되는 프로젝트이기도 하죠. 저 또한 이번에 React의 동작 원리를 이해하기 위해 투두 앱을 개발하게 되었습니다.처음 React를 접했을 때 만든 투두 앱과 시간이 흘러 지금 다시 만드는 투두 앱은 어떨까 기대가 되고 감회가 새로웠습니다. 이번 프로젝트에서는 Rea..

나는 지금 React, TypeScript로 웹 페이지를 개발하고 있어.프론트앤드 개발자라면 이 기술을 정말 많이 사용하고 있을거야. 그러다 문득 내가 지금 사용하는 기술을 '왜' 사용하는건지 그 이유가 궁금해졌어.이를 이해하려면 (살짝 진부하지만) 웹 개발의 역사를 알아야 돼. 내가 사용자(User)의 입장이 되어볼게.크롬 브라우저를 열었다, 주소창에 URL을 입력했어. (www.naver.com)네이버 홈 화면이 열렸어! 마치 해당 페이지로 이동한 것처럼 말이야. 사실은 실제로 해당 페이지로 이동한 게 아니라 내가 요청한 주소에 대한 응답을 받은거야.이러한 일련의 과정을 브라우저가 렌더링(Rendering) 한다고 표현해. 브라우저는 사용자가 요청한 URL에 대한 HTTP 요청을 서버에 보내고, 서버..

브라우저 렌더링 과정사용자가 주소창에 URL을 입력한 후 웹 페이지에 화면이 나타나기까지.. 사용자가 URL에 주소를 입력하면, 브라우저는 URL에 대한 요청을 서버에 보내고, 서버는 HTML 파일로 응답한다.브라우저를 구성하는 HTML은 텍스트 파일이므로 브라우저를 제어하는 언어인 자바스크립트가 이해할 수 있어야 한다. 서버로부터 받은 HTML 문서를 파싱(Pasring) 과정을 거쳐 DOM을 생성한다.DOM(Document Object Model)은 HTML 요소들을 트리 구조로 표현한 것이다. (=HTML 문서의 구조) 파싱 중에 외부 리소스(CSS, JS)를 만나면 중단하고 다음과 같은 과정을 진행한다.- CSS 파일을 CSSOM 트리로 변환한 후 DOM 트리와 결합하여 렌더 트리를 생성한다.- ..

컴퓨터의 동작 방식으로 보는 자바스크립트 코드 실행 과정컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.컴퓨터는 메모리에서 메모리 셀, 즉 1바이트 단위로 데이터를 저장하거나 읽어들인다.각 셀은 고유의 메모리 주소를 가지며, 메모리에 저장되는 데이터는 모두 2진수로 저장된다. (컴퓨터는 데이터 타입에 상관없이 모두 2진수로 처리한다) 10+20 코드가 있으면, 10과 20은 메모리 주소에 저장되고 CPU가 이 값을 읽어들여 연산한다.연산 결과 또한 메모리 주소에 저장된다. 값을 재사용하고 싶어도 메모리 공간에 직접 접근할 수 없다. 이때 변수라는 메커니즘을 사용한다.변수는 메모리 공간을 식별하기 위해 붙인 이름이다. 값의 위치를 가리킨다. 식별자는 변수가 될 수도 있고 함수, 클래스..

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션인데, 이때 요구되는 게 문제 해결 능력이다.문제 해결 방안을 고민할 때 컴퓨팅 사고, 즉 컴퓨터 관점에서 문제를 바라보는 시각이 필요하다.핵심은 해결 과제를 작은 단위로 분해, 패턴화해서 추출하고, 평가 가능하도록 프로그래밍 내 모든 개념을 정의해야 한다. 내가 자바스크립트라는 언어를 사용해 명령하면, 컴파일러(인터프리터)가 해당 코드를 기계어로 번역하여 컴퓨터에 전달한다.작성된 코드는 해결 방안의 구체적 구현물이므로 문제가 해결(요구사항이 실현)되어야 의미가 있다. 자바스크립트는 본래 브라우저에서 동작하는 언어였다.점차 기술의 발전과 함께 여러 개의 브라우저가 생겨났고, 이로 인해 크로스 브라우징(브라우저에 따라 웹페이지가 정상적으로 동작하지..

문득 다른 사람들은 무슨 이유로, 어떤 목적을 갖고 F-lab을 신청하는지 궁금해졌다.나와 비슷한 상황에 놓여져 있다면 조금이나마 도움이 될 수 있도록 앞으로 꾸준히 회고록을 적어보려 한다!F-lab을 신청하게 된 이유멘토링을 시작하기 전 나의 상황을 정리해보자면 다음과 같다.- 개발을 한 지 햇수로 2년이 되어가고, 현재 프로젝트 외주를 받아 프론트앤드 개발을 하고 있지만 잘 정리된 내용이 없다.- 취업을 위한 관문(ex. 이력서, 면접)을 잘 넘길수 있을지 자신이 없다.- 개발 용어들이 정리되지 않은 채 머릿속을 떠다니는 것 같다. 객관적인 실력 점검과 실무자의 경험 어린 조언이 필요한 시점이라고 생각했다.특히 1:1로 멘토가 매칭되어 구체적으로 부족한 점이 무엇이고, 어떻게 보완하면 좋을지 피드백 ..

공지사항 기능을 개발하면서 맞닥뜨린 문제, 데이터 필터링 로직을 어디에서 처리해야 하는가? 방법은 두 가지,1. 서버에서 전체 데이터를 불러오고 클라이언트에서 필터링 한다.2. 필터 조건을 파라미터로 설정하여 서버에서 필터링 된 데이터를 요청한다.사실 이전까지는 2번 방식, 서버에서 필터링 로직을 처리해 개발을 하고 있었다. 이유는 다음과 같다. 1. 필요한 데이터만 가져오기 때문에 초기 로딩 속도가 빠르다.2. 데이터가 많아지더라도 서버와 DB에서 최적화된 방식으로 데이터를 처리하므로 성능이 안정적이다. 3. 실시간으로 변경된 데이터도 반영할 수 있다. (데이터 동기화) 만약 프론트에서 데이터를 필터링하면 클라이언트가 보유한 데이터와 서버의 데이터가 불일치할 수 있다. 4. 권한 관리가 용이하다. 필..