진주만두찜

대동여지도 프로젝트는 프론트엔드 1명, 백엔드 2명, 디자이너 1명으로 구성된, 총 4명이 함께 개발한 교내 전공 동아리 관리 프로젝트입니다. (저는 이 프로젝트에서 프론트엔드 개발을 맡았습니다.) 사실 이 대동여지도... 깊은 역사가 있습니다. 대덕소프트웨어마이스터고등학교에 입학하고 전공동아리를 지원하던 당시에도, 이미 대동여지도라는 서비스가 존재했습니다. 그런데 제가 사용해서 지원하려던 바로 그 순간, 서비스가 터져버리는 사고가 발생했습니다. 말 그대로 써보려 했더니 안 되는 상황이었던 거죠. 결국 전공동아리 모집부터 합격 발표까지의 과정은 구글폼으로 진행될 수밖에 없었습니다. 그렇게 시간이 흐른 뒤, 이번에는 제가 직접 대동여지도 메인 프로젝트 개발에 참여하게 되었습니다. 그래서 더더욱 마음가..

과거의 자바스크립트 프로그램은 규모가 그리 크지 않아서 대부분의 스크립트들이 독립적으로 실행되었다. 그런데 지금 프로젝트 내에서 만약 하나의 파일에 스크립트들이 독립적으로 실행된다고 생각하면? 아주 끔찍하다. 현재의 프로젝트들은 대부분 규모가 과거에 비해 매우 커졌기 때문이다. 이렇듯 시간이 지남에 따라 애플리케이션 규모가 점점 커지면서 스크립트 파일들을 나누었고, 그 중 필요한 것들만 가져올 수 있는 모듈 분할에 대한 필요성이 생겼다. 이때문에 모듈 시스템이 탄생했다. 그래서 모듈 시스템이란?모듈 시스템: 플러그인 파일이나 잘게 쪼개져있는 JS 코드 조각들을 재사용하기 위해서 각각의 파일을 등록하고, 등록된 파일을 JS에서 불러와 사용할 수 있게 해주는 시스템 더보기"모듈이란?" 어플리케이션을 구성하..

https://minsu08.tistory.com/15이 블로그는 해당 글에서 이어지는 글입니다.웹 브라우저는 서버로부터 HTML을 받아 여러 단계를 거쳐 화면을 렌더링한다. (이 과정을 이해하면 웹 성능 최적화나 프레임워크의 동작 원리를 이해하는데 큰 도움이 된다.) 흐름HTML 다운로드↓DOM 생성↓CSS 다운로드↓CSSOM 생성↓Render Tree 생성↓Layout 계산↓Paint 이 과정을 Critical Rendering Path라고도 합니다.1. DOM 생성 (DOM Construction)브라우저는 서버로부터 받은 HTML 문서를 파싱(parsing) 하여 DOM Tree를 생성합니다.DOM(Document Object Model)은 HTML 문서를 트리 구조의 객체 형태로 표현한 것입니다..

하이드레이션이 뭐에요?- 어... html 파일에 js를 입히는 것입니다. 필자는 이렇게 면접 떨어지는 답변으로 밖에 설명하지 못해서 이번에는 확실히 알고 가자해서 이 글을 작성하게 되었다. 사실 하이드레이션에 대해 알기 보다 이 개념을 알기 전에 반드시 꼭 알아야 하는 개념들에 대해 알아보기 위한 글이다. hydration을 이해하기 전, 준비운동하이드레이션을 이해하기 전에 먼저 알아야 하는 것은 웹페이지가 화면에 어떻게 그려지는 것인가 이다. React, Next.js에서 말하는 하이드레이션은 갑자기 튀어나온 개념이 아니라, 정적인 html에 자바스크립트가 붙어서 상호작용 가능한 화면이 되는 과정이기 때문에 그 전 단계 개념들을 먼저 잡아두면 훨씬 이해하기 좋을 것이다. 차례HTML, CSS, Jav..

프론트의 아키텍처에 대해 찾아본다면 대표적으로 많이 나오는 게 바로 이 FSD 아키텍처입니다.그래서 이번 블로그에서는 "FSD가 뭐예요?"라는 질문에 답할 수 있을 정도로 간단하면서도 핵심적인 부분을 알 수 있습니다. FSD는 코드를 3단계로 나눕니다.Layer: 큰 분류Slice: 기능/도메인별 분류Segment: 역할별 분류즉, 큰 그룹으로 나누고 → 그 안에서 기능별로 나누고 → 그 기능 안에서 역할별로 나눈다이렇게 이해하면 됩니다.1. Layer가 뭐냐Layer는 프로젝트를 가장 크게 나누는 최상위 구역입니다.예를 들면 이런 것들입니다.apppageswidgetsfeaturesentitiesshared이건 프로젝트를 큰 단위로 구분한 폴더들입니다. 쉽게 말하면 Layer는 “이 코드는 프로젝트에서..