전체 글 (40) 썸네일형 리스트형 FSD 아키텍처 경험기.. 1. FSD 아키텍처란?FSD 기능 분할 설계(Feature Sliced Design)이란 말 그대로 기능을 중점으로 해서 분할하여 설계합니다.우리가 자주 쓰는 고전 아키텍처 같은 경우와 사용 이유가 비슷하다고 생각이 드는데둘의 차이점은 기능을 분할하긴 하는데 어느 파일에 배치하냐 이 차이라고 생각하고 있습니다. 먼저 고전 아키텍처 같은 경우로 예를 들면 내가 만약 댓글 컴포넌트를 만든다라고 가정했을 때댓글에 쓰이는 UI를 한 번에 그려서 component라는 폴더 안에 집어넣을 것입니다. 또, FSD로 예시를 들어보기 전에 알면 좋은 부분을 설명해 보겠습니다. FSD의 가장 큰 차이점이라고 생각하는 파일이 entities, widgets, views 이렇게 3개가 있는데앞서 말한 순서대로 점점 커진다고.. 2024년 회고 안녕하세요 프론트엔드 개발자가 되고픈 김재균입니다. 그동안의 글들은 거의 기술 트렌드, 기술적 지식, 트러블 슈팅, 나의 프로젝트를 중심으로 다뤄왔던 것 같은데 이번 글은 저의 1년간의 성장과 경험을 주로 다루는 글입니다. 회고가 처음이다 보니 부족한 모습을 보여도 양해 부탁드립니다. 프로젝트 부분우선 2024년의 프로젝트 부분에서 저는 꽤 많은 성장을 이루었다고 보고 있습니다. 처음으로 체계적으로 진행하고 성장의 발판이 되었던 GSM-Networking (학교 동문 커뮤니케이션 서비스)로 발돋움을 거쳐친구들끼리 재미로 진행했지만 가장 많은 성장을 거둔 GSM-GOGO (학교 체육대회 서비스), 저를 더욱 탄탄하게 해 주었던 Hello-gsm (학교 입학 지원 서비스)까지 이렇게 3개의 프로젝트를 진행하.. 우리가 이제까지 몰랐던 Next.js 속 숨겨진 DPR 이미지 로딩과 화질의 최적화는 웹의 성능을 높이는데 있어서 큰 역할을 합니다.특히, 다양한 디바이스와 해상도에서 선명한 이미지를 제공하려면Rendered Size - 렌더링 크기, Intrinsic Size - 실제 크기, DPR - Device Pixel Ratio의 개념을 이해해야합니다.1. 브라우저의 Image 방식Rendered Size vs Intrinsic SizeRendered Size?Rendered Size는 브라우저가 실제로 이미지를 화면에 표시하는 크기입니다.이 크기는 개발자가 직접 코드를 입력해서 화면에 보여주는 크기이고, css의 width, height라고 생각하시면 됩니다.위 사진에서는 Rendered Size는 246 X 81 입니다.Instrinsic Size?Instrin.. Vite의 동작방식 1. Vite?Vite는 Vue 창시자가 만든 나온 지는 약 2년이 조금 넘은 빌드 도구이고, 네이티브 js 모듈인 ES Module을 기반으로 한 데브 서버입니다. 어느 날 Vite를 그냥 쓰면서 한 가지 궁금증이 들었는데 왜 사람들이 Vite가 빠르다고 할까 라는 궁금증이 생겼습니다. 근데 왜 사람들이 Vite가 빠르다고 생각하고 또 실제로 그렇게 되냐면 먼저, Webpack과 같은 모듈 번들러가 나왔던 이유는 JS의 모듈화와 깊은 관계가 있습니다.아까 언급했던 ES Module은 ECMAScript Modules의 줄임말로 이 ES Module이 등장하기 전까지는 JS에서 모듈화는 존재하지 않았습니다. 그래서 require.js나 IIFE를 사용하지 않으면 모듈화가 불가능했다고 합니다.근데 이런식.. SSE가 뭘까? 이번에 소프트웨이브를 학교에서 나가게 되면서 snort 기술을 사용하게 되었습니다.그래서, 실시간으로 서버에서 내려주는 로그들을 보여주기 위해서 SSE 라는 기술을 공부하게 되었는데 그 과정을 공유하려 합니다!1. SSE?SSE란 Server-Sent-Event의 약자로 서버에서 클라이언트로 실시간 이벤트를 전달하는 웹 기술입니다. HTTP 특징인 비연결성은 연결한 적이 있어도 연결을 끊어버린다는 것입니다.이와 같은 문제점을 해결하기 위해서 Polling, Long Polling, WebSocket, SSE 라는 기술이 있는데 먼저, SSE는 굉장히 특이한 형식을 가지는데 서버에서 클라이언트측으로 요청을 보내는 단방향 통신이라는 것 입니다.즉, 클라이언트의 요청없이도 서버에서 업데이트를 스트리밍 할 수 .. shadcn/ui를 한번 알아보자 최근 프론트엔드 생태계에는 UI 컴포넌트를 빠르고 효율적으로 관리할 수 있는 라이브러리에 대한 관심이 증가하고 있습니다.그러다보니 프론트엔드를 하시는 분들은 Headless UI, Radix UI를 들어보셨을 것이라고 생각합니다.특히, 확장성과 커스터마이징의 필요성이 높아지면서 shadcn/ui와 같은 새로운 접근 방식의 UI 시스템이 주목 받고 있습니다. 1. shadcn/ui란?shadcn/ui란 vercel 안에 있는 shadcn이 만든 UI 입니다.또, Radix ui와 Tailwind css를 기반으로 하는 Component Collection입니다. 이 shadcn/ui가 관심을 받은 이유 중 하나가 바로 이 Component Collection이라고 합니다. 그 이유는 Component Li.. Solid JS를 지금부터 배워야하는 이유 1. Solid JSSolid JS란 2021년에 정식으로 출시한 프론트엔드 라이브러리로, 특징으로는 JSX 문법을 사용한다는 것이 가장 큰 특징입니다. 벌써부터 CloudFlare, Netilfy가 주목하고 사용하고 있어서 한 번쯤은 관심을 가져봐도 좋은 라이브러리라고 생각합니다. 저번 블로그에 나왔듯이 Svelte와 같이 Virtual DOM을 사용하지 않는 라이브러리 중 하나입니다.2. 상태 관리React를 사용하는 유저라면 useState 문법은 한 번쯤은 들어본 대표적인 hook 중 하나 일 것입니다. 근데 여기에서는 조금은 다른 문법을 보여주는데 바로 createSignal()이라는 문법을 사용합니다 한 가지 에시로 import { createSignal } from "solid-js";fun.. Virtual DOM은 좋은점만 있을까? 저희가 주로 사용하는 React, Next는 Virtual DOM이라는 가상의 DOM을 사용하여 실제 DOM과 비교해 변경사항을 더욱 효율적으로 비교해서 사용합니다. 근데 이 Virtual DOM이 어떤 식으로 작동하길래 실제 DOM을 조작하는 것보다 가상 DOM을 이용하는 것이 성능적으로 좋다고 하는지 알아야 할 필요가 있습니다. 1. Virtual DOM글을 들어가기에 앞서, 먼저 virtual DOM의 개념에 대해서 먼저 짚고 넘어가겠습니다. Javascript의 모던한 방식의 DOM을 조작하는 방식은 상당히 무거운 동작방식입니다.DOM을 풀어서 작성해보면 Document Object Model인데 이 말 뜻대로 브라우저가 화면을 그리는데 필요한 정보가 들어가 있습니다.저희가 사용하는 html이 그.. 이전 1 2 3 4 5 다음
