본문 바로가기

전체 글116

번들링, Tree Shaking과 Enum 안녕하세요 웹 임지성입니다.이번 성능 최적화 스터디에서 번들링과 Tree Shaking에 대한 내용이 잠깐 등장했는데, 세미나 Typescript 강의자료에도 Enum에 대한 소개와 함께 트리쉐이킹 얘기가 나오더라고요.이번 아티클에서는 두 내용을 연결지어, 번들링과 Tree Shaking, Enum과 성능 최적화에 대해 알아보겠습니다!1. 번들링이 뭐야? - 번들과 정적 파일번들: 웹 브라우저에 제공되도록 최적화된 정적 파일정적 파일: 서버에서 특별한 처리 없이 그대로 클라이언트에게 전달되는 파일, 즉 브라우저가 바로 해석 가능한 파일 - 번들링‘브라우저’에서 효율적으로 다룰 수 있도록 최적화된 정적 파일을 만드는 과정브라우저 입장에서 중복되거나 불필요한 파일을 정리함중복되거나 불필요한 파일을 정리한다는.. 2025. 5. 9.
에러 처리의 필요성과 종류 안녕하세요. 웹 YB 윤소은입니다! 이제 과제에서 API 연동도 하고, 합동 세미나도 진행하면서 에러 처리에 대해 다시 정리해 보고 싶어서 '에러 처리의 필요성과 종류'를 주제로 선정하게 되었습니다.사실 에러가 발생하지 않도록 코드를 작성하는 건 거의 불가능합니다.. 그렇기에 에러는 언제 어디에서나 발생할 수 있습니다. 따라서 에러 발생을 막는 것도 중요하지만, 에러가 발생했을 때도 프로그램이 제대로 동작할 수 있도록 에러 처리를 명확하게 해주는 것이 중요합니다. Q. 왜 에러 처리가 필요한가? 자바스크립트 프로그램을 실행하는 중, 예기치 않은 문제가 발생할 수 있습니다. 에러가 발생하면 프로그램이 강제 종료될 수 있고, 사용자는 "무슨 일이 일어난 건지" 알 수 없습니다. 또, 디버깅이 어렵고 사용자 .. 2025. 5. 9.
App Router 🧠App Router의 기본 개념App Router는 트리(Tree) 구조로 라우팅 및 컴포넌트 계층을 시각화한다.app/ 디렉토리가 루트(Root)그 하위에 있는 폴더들(dashboard, blog, [slug] 등)이 세그먼트(segment)세그먼트는 또 다른 하위 세그먼트를 가질 수 있으며, 이를 통해 서브트리(subtree)를 형성한다.더 이상 하위 폴더가 없는 말단 세그먼트는 잎(leaf) 노드이다.여기에 주로 page.tsx가 위치한다. DomainURL 경로(Path): 도메인 다음에 오는 URL의 일부 (세그먼트로 구성)URL 세그먼트(Segment): 슬래시로 구분된 URL 경로의 일부폴더와 파일Next.js는 파일 시스템 기반 라우터를 사용한다.폴더(Folders): 라우트를 정의하며.. 2025. 5. 8.
[2주차] - Routing (Page Router) 오늘은 Next.js의 Routing 방식, 그 중에서도 Page Router에 대해서 살펴볼 것이다. 물론 Next.js의 13버전부터는 App Router라는 새로운 패러다임이 등장해 App 방식을 많이 사용하기는 하지만, 아직까지 기존의 프로젝트는 Page 방식을 사용하는 경우도 많기 때문에 Page Router를 아예 몰라도 된다고 생각하지는 않는다. 또한 새롭게 라우팅 방식이 등장했다는 것은 기존의 불편했던 점을 개선하거나 기존의 기술과 비교되는 장단점을 가지고 있다는 것이다. 따라서 Page Router에 대해 살펴보고 새롭게 등장한 App Router와의 차이점을 간단히 비교하며 글을 마무리하려고 한다. 물론 최신 방식을 사용하기 위해서는 App Router를 사용하는 것을 공식문서에서도.. 2025. 5. 4.
tailwind-css / emotion-css / vanilla-extract 안녕하세요, Web OB 이윤지 입니다.이번 3주차 과제에서 팟장님께서 한 번도 사용해보지 않은 css 사용을 권장하신다 하여...진짜 말만 듣고 한 번도 사용해 보지 않은 tailwind-css를 사용해보았습니다. 호기롭게 시작했지만 시작함과 동시에 emotion으로 갈아탈까 고민을 한 이천번 정도 한 것 같다.왜?https://tailwindcss.com/docs/installation/using-vite Installing with Vite - InstallationIntegrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.tailwindcss.com초기세팅이 공식문서에 나온 것과 완전히 동일하다고.. 2025. 5. 3.
Tailwind CSS 4.0 설정 문제 해결하기: PostCSS 플러그인 오류부터 Vite 설정까지 안녕하세요 웹 YB 신지수입니다 !이번 3주차 과제에서 Tailwind CSS를 사용하려 했지만, 버전 4.0에서 발생한 PostCSS 플러그인 오류로 인해 어려움을 겪었습니다. 이 글에서는 이 문제의 원인과 해결 방법을 공유하려고 합니다 🤓 먼저 Tailwind CSS가 무엇인지, 그리고 어떤 장점이 있는지 간단히 소개한 후 문제 해결 과정을 설명하겠습니다 ! 🎨 Tailwind CSSTailwind CSS란 ?Tailwind CSS는 유틸리티 기반 CSS 프레임워크로, 미리 정의된 클래스들을 HTML 요소에 직접 적용하여 스타일링하는 방식입니다. 기존의 Bootstrap이나 Foundation과 같은 프레임워크가 미리 디자인된 컴포넌트를 제공하는 것과 달리, Tailwind는 작은 단위의 유틸리티.. 2025. 5. 2.

티스토리툴바