본문 바로가기

분류 전체보기215

JavaScript의 모듈 시스템에 대하여 오늘은 자바스크립트의 모듈 시스템에 대해 알아보겠습니다. 자바스크립트에서 어떻게 모듈 시스템이 생기고, 지금의 모습으로 발전해왔는지에 대한 내용을 배경 설명과 함께 작성해보도록 하겠습니다. 최초의 자바스크립트 최초의 자바스크립트에는 모듈 시스템이 없었습니다. 지난 글이었던 웹 표준에 대한 고찰에서 이야기 했던 내용처럼, 원래 HTML은 단순히 HyperText라고 부르는 정보를 전달하기 위한 문서였습니다. 자바스크립트는 이 HTML에 붙어 약간의 상호작용을 더해주는 한정된 역할만을 갖고 있었습니다. 다시 말하면, 그 당시의 자바스크립트 코드는 모듈 시스템을 구성할 필요가 없는 규모의 프로젝트였다는 의미입니다. 하지만 시간이 흘러 자바스크립트는 점점 더 많은 일을 할 수 있게 되었습니다. 단순한 정보 전달.. 2023. 3. 4.
Yarn PnP가 Typescript를 인식하지 못할때 Cannot find module 'react' or its corresponding type declarations. Yarn berry 버전, 그 중에서도 PnP를 사용해 본 적이 있다면 한 번 쯤은 VSCode가 Typescript를 인식하지 못하는 오류를 겪어본 경험이 있으실겁니다. 보통 프로젝트를 처음 시작할때 가장 많이 발생하고, 이미 진행중인 프로젝트의 구조를 변경하다가 발생하기도 하는 오류입니다. Yarn의 공식 문서에서도 이 문제에 대한 해결 방안을 따로 섹션을 만들어 놓을 정도로 잘 알려진 오류이긴 하지만 막상 겪어보면 상당히 당황스럽습니다. 여기에서 안내하는 방법을 따르면 대부분의 문제는 해결됩니다. 저도 이 방법으로 매 번 효과를 보았었는데, 프로젝트 중간에 구조를 변경했던 이번 경.. 2023. 2. 25.
git에 파일을 추가할 수 없을때 (fatal: adding files failed) 문제 상황 사이드 프로젝트를 진행하다가, git에 파일이 추가되지 않는 현상을 발견했습니다. error: 'backend/' does not have a commit checked out fatal: adding files failed 해당 오류는 폴더 내부에 또 다른 .git 폴더가 존재하기 때문에 발생하는 오류인데, 새롭게 추가한 backend/ 폴더 내부에 .git 폴더가 생성되어 있어서 추가되지 않았습니다. 해결 방법은 단순히 문제가 생긴 디렉토리에 있는 .git 폴더를 지우면 됩니다. 사실 프로젝트 파일을 직접 하나하나 구성한다면 맞닥뜨릴 일이 없는 오류이지만, create-react-app 이나 이번에 제가 사용한 @nestjs/cli의 nest new project 처럼 초기 구성을 대신 해.. 2023. 2. 19.
웹 표준에 대한 고찰 먼저 이 글을 쓰기 시작하면서, 웹 표준을 Frontend 카테고리에 넣는게 맞는지에 대한 의문이 들었습니다. 웹 표준은 직군에 상관없이 웹 서비스를 개발하고 운영하는 입장에서 응당 공부하고 지켜야 할 부분이지만, 이번에 다룰 내용은 굳이 나누자면 프론트의 입장에서 지켜야 할 원칙들을 위주로 작성할 예정이기에 우선 프론트 카테고리에 두고 시작하였습니다. 웹 표준이란 무엇일까 HTML, CSS, Javascript 등 프론트엔드 기술에 익숙하지 않은 동아리원들을 대상으로 스터디를 진행하며 리뷰를 하고 있었는데, 한 분이 제출하신 코드 중 현재는 사용되지 않는 라는 코드에 대해 "웹 표준" 을 근거로 들며 다른 방식을 권장한다는 코멘트를 남긴적이 있었습니다. 문득 생각이 들었습니다. 웹 표준이란 정확히 무엇.. 2023. 2. 15.
Nest.js에서 로컬 DB 연결하기 사이드 프로젝트로 진행중인 조리복 프로젝트의 본격적인 백엔드 구현이 시작되었습니다. 백엔드에 대한 경험이 없다보니 전체적인 그림을 그릴 능력이 부족해서, 하나씩 직접 부딪혀보면서 진행하고 있습니다. 순서가 이상하고 뒤엉켜도 삽질하는 과정이겠거니 하고 읽어주시면 감사하겠습니다. 지난 시간까지는 CRUD 생성기로 기본적인 틀을 가져오고, 실제 프로젝트에서 사용할 몇 가지 진입점만 함께 구현해놓았었습니다. 오늘의 목표는 로컬 DB에 연결시켜서 정상적으로 서버가 작동하는지 확인하는 것입니다. 로컬 DB 만들기 DB로는 MySQL을 사용하기로 하였습니다. 무료로 사용할 수 있는 MySQL Workbench가 있어서 사용하기로 하고, 사전 설정을 완료했습니다. 원래대로라면 로컬 서버를 세팅하고 연결하는 과정을 거쳐.. 2023. 2. 5.
Github pages를 이용해 정적 페이지 배포하기 이 글은 "TCP 웹 프론트 스터디" 의 안내를 위해 작성되었습니다. github는 각각의 레포지토리마다 github pages를 통해 정적 페이지를 배포할 수 있는 기능을 지원하고 있습니다. 이번 포스팅에서는 별도의 라이브러리 없이 간단히 정적 페이지를 배포하는 방법을 알아보겠습니다. 정적 페이지 준비하기 "TCP 웹 프론트 스터디원"은 이미 준비되어 있는 상태이니 지금 과정은 건너뛰어도 괜찮습니다. 배포를 진행하기 전, 먼저 배포할 정적 페이지가 준비되어 있어야 합니다. 정적 페이지란 저장된 그대로 사용자에게 내용을 표시하는 말합니다. 흔히 많이 사용하는 리액트를 예시로 들면, 단순히 개발 단계에서 실행시켜 보는 경우에는 우리가 원하는 정적 페이지라고 하기 어렵습니다. 정확히는 정적 페이지를 서빙하고.. 2023. 2. 3.