전체 글109 Webpack을 사용하는 이유 안녕하세요. 오늘은 Webpack을 사용하는 이유에 대해 말해보고자 합니다. 현재 프론트엔드 개발에 있어서 널리 퍼진 방식은 하나의 html 파일에 많은 JS파일들을 불러오는 방식을 택하고 있습니다. 프로젝트의 크기가 커지면서 모듈화의 중요성이 커졌기 떄문이죠. 그래서 import와 파일의 갯수는 많아지게 됩니다. 여기서 생기는 문제점이 있습니다. 각각의 파일들에 대한 HTTP 요청이 많다는 것입니다. 물론 각 파일의 용량이 크지는 않습니다. 하지만 모든 HTTP 요청은 어느정도의 기본 시간이 걸립니다. 파일 다운로드에 걸리는 기본 시간이 존재한다는 것입니다. 위 사진은 Webpack을 적용하지 않은 현재 저의 프로젝트의 네트워크 탭입니다. 각 파일의 크기는 그리 크지 않지만 여러 개의 파일로 나뉘어 있.. 2024. 3. 20. 화면을 이동할 때 Link, useNavigate 무엇을 사용해야 할까? 안녕하세요. 오늘 저는 프로젝트를 하다가 Link와 useNavigate 중 어느 것을 사용할지, 어떤 차이가 있는지 궁금해서 정리해 본 내용을 공유합니다. React에서는 페이지를 이동하기 위해 Link, useNavigate 둘 중 하나를 사용할 수 있습니다. Link 태그는 Route에서 path를 지정한 후 to 속성에 해당 path를 설정하기만 해주면 됩니다. 그렇게 하면 그냥 클릭하면 해당 페이지로 이동할 수 있게 해주죠. 회원가입 그리고 useNavigate는 마찬가지로 이 훅을 사용하면 다른 페이지로 이동시켜줍니다. 그렇다면 useNavigate는 Link와 무엇이 다를까요? Link는 클릭만 하면 이동한다는 특징이 있습니다. 그에 반해 useNavigate는 페이지 이동 시 추가 로직이 .. 2024. 3. 19. CSR은 트럭, SSR은 소형차 내가 이해한 CSR(Client-Side-Rendering), SSR(Server-Side-Redering)를 한마디로 요약해보자면 CSR은 트럭, SSR은 소형차 이다. CSR과 SSR은 상황에 따라 무엇을 사용할지 결정해야 한다. 만약 우리가 이사를 한다고 가정해보자. 이런 경우는 트럭이 알맞을 것이다. 트럭은 한번에 모든 짐을 가져오기 용이하지만 처음 가져올 때 시간이 걸릴것이다. 하지만 한 번 가져오면 물건을 찾을 때 그 안에서 찾으면 되기 때문에 가져오기만 하면 그 안에서 물건을 빨리 얻을 수 있을 것이다. 이번엔 만약 우리가 마트에 간다고 가정해보자. 이런 경우는 소형차가 알맞을 것이다. 소형차는 내가 필요한 물품만 그때그때 가져오기 용이하지만 갑자기 더 필요한 물품이 생기는 상황이 자주 나오.. 2024. 3. 16. CSS Module 나는 가운데 정렬을 하지 않았는데? 오늘 내가 겪은 문제상황을 소개해본다. 들어가기 전에 먼저 CSS Module에 관해 간단히 설명하려고 한다. CSS Module은 CSS in CSS 로써 css파일을 따로 관리하고 태그에 class를 지정해서 CSS를 적용하는 방식을 사용한다. 예를들어 header 태그에 bgc = red를 적용하고 싶다면 header태그에 myheader라는 클래스를 지정해 준 후 CSS파일에서 해당 스타일을 적용해주면 된다. I AM HEADER .myheader { background-color: red; } 이러한 CSS Module의 장점은 각 파일마다 로컬로 클래스를 지정해줘서 관리가 편하다는 장점이 있다. 그래서 다른 파일에 myheader라는 클래스명을 다시 써도 영향을 주지 않는다. 여기서 나의 문제.. 2024. 3. 15. yarn berry로 프로젝트 세팅하기(vite, React, TS) yarn berry로 프로젝트 세팅하기(vite, React, TS) 일단 npm은 node.js를 설치하면 자동으로 설치가 되는데 yarn은 npm을 통해서 따로 설치를 해줘야 한다. 1 . 내 컴퓨터에 yarn 설치 npm install -g yarn 설치 한 다음에 잘 설치되었나 확인해보자 yarn --version 이 명령어를 치고 설치가 되었으면 버전이 나올 것이다. 만약 자기가 이미 yarn으로 세팅된 프로젝트를 실행하고 싶다면 맨 아래로 스크롤 해서 번외3 으로 가시길 바랍니다! 2 . 프로젝트 생성 yarn create vite [프로젝트 명] --template react-ts 이 명령어를 치면 react+ts기반 기본 프로젝트가 생성이 될 것이다. 그 다음에 만든 프로젝트로 이동해준다... 2024. 3. 7. 모던 JS 딥다이브 스터디 회고 스터디 종강 1월 7일부터 시작한 모던 자바스크립트 딥다이브 스터디가 끝났다. 레포지토리 주소 : https://github.com/joonsun1006/Modern-JS-Deep-Dive 직접 스터디원을 모으고, 규칙도 정하며 스터디를 주도적으로 진행한 것이 처음이었는데 잘 진행되었다고 생각한다. 걱정했던 점은 7~8주 라는 짧은 기간동안 방대한 분량의 책을 소화할 수 있을까 라는 점이었는데 핵심 개념을 제대로 공부하기 위해 기본 문법과 같은 부분은 제외하여 진행했다. 처음 1회차에 스터디를 진행할 때는 각자 공부한 내용을 발표하는 형식으로 해봤는데 모든 인원이 효율적이지 못함을 느껴 스터디장(?) 으로써 효과적인 스터디 진행방식을 고민을 했다. 고민끝에 퀴즈 형식으로 바꿨는데 반응들이 좋았고 나 또한.. 2024. 3. 3. 이전 1 2 3 4 ··· 19 다음
