본문 바로가기

분류 전체보기

 (26)
CSR, SSR, SSG… 이젠 진짜 확실히 구분해보자! “이 페이지는 CSR로 구현돼서 SEO가 약해요.”“SSR로 바꾸면 첫 페이지 로딩이 더 빨라질 수도 있어요.”“SSG로 미리 렌더링해서 정적 페이지로 배포해요.”CSR, SSR, SSG가 어떻게 다르고, 언제 어떤 걸 써야 하는지 헷갈리는 경우 많은데오늘 이 글로 한 방에 정리해보자1. CSR (Client Side Rendering)브라우저(클라이언트)에서 JS로 화면을 만드는 방식어떻게 작동하나요?:사용자가 페이지에 접속하면브라우저는 HTML 틀(div#root)만 받고JS 번들을 다운받은 후 그때서야 화면이 보이기 시작함대표 예시:React 앱을 Vite/CRA로 만들었을 때SPA(Single Page Application) 대부분장점빠른 페이지 전환 (앱처럼 동작)백엔드 없이도 작동 가능단점JS..
Next.js에서 useFormState를 활용한 폼 상태 관리 Next.js 13 이후부터 본격적으로 도입된 App Router와 함께, 서버 액션(Server Actions)을 사용하는 방식이 점점 익숙해지고 있습니다. 그 과정에서 자주 마주치게 되는 훅이 하나 있는데요, 바로 useFormState입니다.이번 글에서는 useFormState가 어떤 역할을 하는지, 그리고 어떻게 사용하면 좋을지 정리해보려고 합니다.기존 방식 vs 서버 액션 기반 폼 처리기존 React 방식에서 폼 처리는 주로 클라이언트에서 useState를 써서 입력 값을 관리하고,onSubmit에서 API 요청을 보내는 방식이 일반적이었습니다. 하지만 서버 액션을 쓰게 되면 폼의 전송과 처리를 서버 측에서 바로 할 수 있기 때문에 구조 자체가 달라집니다.여기서 useFormState는 폼 전송..
[NextJS 15] 이미지 최적화 const Image from "next/image" 1) nextjs 는 기본적으로 lazy loading 을 지원한다.정적 이미지는 lazy loading이 필요 없으므로 priority 속성 추가해주면 좋다 2) 사이즈는 width, height 속성으로 지정할 수 있지만 그것보단 sizes 속성을 사용하거나Image에 fill 속성 추가한 후 이미지를 감싼 부모요소에 relative 속성을 추가하는 게 좋다. 3) 이미지 미리보기 띄우기 (로드되기 전 블러처리) src="/images/example.jpg" alt="예시 이미지" width={600} height={400} placeholder="blur" blurDataURL="/images/example-blur.jpg"/>
[체크박스 커스텀] 리액트로 상태관리 하지않고 기본 Input을 이미지로 설정하기 (전역설정해두면 아주 편리함) 리액트에서 state로 체크박스 상태를 관리하기도 하는데,아래와 같은 방식을 사용해서 전역 스타일시트에 추가만해주면모든 페이지에서 input들이 자동으로 커스텀되어 나온다.  /* 기본 체크박스 숨기기 */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 13px; height: 13px; margin: 0; cursor: pointer; background-image: url("/static/img/unchecked.png"); background-s..
[웹디자인개발기능사 실기] 프론트엔드개발자가 웹디기능사 실기 본 후기 2025년도 개정 후 실기 시험 본 따끈따근한 후기 정말 가벼운 마음으로 공부를 시작했던 것 같다.공부라 하기엔.. 유튜브에 웹디자인기능사 실기 검색해서 누워서 유형별 문제풀이 시청했던 게 다다. 내가 좀 불안했던 점은, 포토샵 관련이었는데 검색해봐도 로고 포토샵하는 방법이나 이미지 최적화 등 뭐 어쩌란 건지 정보가 별로 없었고포토샵을 제외한 퍼블리싱 영상이 대다수였다. 실제로 시험장에 갔을 때, 포토샵은 아예 사용하지 않았다. 나는 기본적으로 퍼블리싱을 할 수 있는 상태였기 때문에 유형별로 상세하게 보지않았고 어차피 다 응용이라 생각해서 A 유형 하나만 보고 갔고 실제로 시험볼 땐 다른 유형이 나왔다. 슬라이드가 우측에, 사이드메뉴가 좌측에 위치하는 레이아웃이었다.김치이야기라는 주제로 퍼블리싱을 진행했..
[웹디자인개발기능사 필기] 후기 앉아서 공부한 시간은 너무 적어서 계산할 수 없다누워서 영상만 본 게 다인데유튜브에 웹디자인기능사 필기 검색 후 문제풀이 위주로 보고 가니까 무리없이 합격할 수 있었다. 원래 자격증 시험 명칭은 웹디자인기능사 였는데 내가 실기 접수한 시점 쯤에 웹디자인"개발"기능사로 변경됐다.나는 프론트엔드개발자이지만, 해당 자격증이 개발과 무관한 자격증이라고 생각하지는 않았었는데이유는 html, css, js 를 필기에서 다루기도 하고 실기는 퍼블리싱이 다이기 때문이다.근데 마침 명칭이 바꼈길래 잘 바꼈다고 생각했다. 필기 시험장에서 필기구는 따로 챙겨가지 않았고, 필요가 없다신분증만 들고 가면 된다. 이번에 본 정보처리기사필기에서는 신분증과 함께 볼펜도 챙겼다.벌써 가물가물하지만 정처기 필기 때는 시험장에서 주는 빈..
코딩테스트 알고리즘 종류 1. 정렬 (Sorting)버블 정렬: 인접한 두 개를 비교하며 정렬하는 방식 (비효율적)선택 정렬: 가장 작은(혹은 큰) 값을 선택해 앞으로 보내는 방식삽입 정렬: 이미 정렬된 부분에 새로운 데이터를 삽입하는 방식퀵 정렬: 피벗(pivot)을 기준으로 작은 값과 큰 값을 나누며 정렬병합 정렬: 데이터를 반으로 쪼개 정렬한 후 합치는 방식💡 코딩테스트에서는 보통 sorted()나 sort()를 활용하면 됨2. 탐색 (Search)선형 탐색 (Linear Search): 데이터를 하나씩 확인하는 방식 (O(N))이진 탐색 (Binary Search): 정렬된 배열에서 중간값을 기준으로 찾는 방식 (O(logN))DFS (깊이 우선 탐색): 한 방향으로 계속 탐색하다가 더 이상 갈 곳이 없으면 되돌아옴 (..
[CSS] 단위요소 (px, %, em, rem, vw, vh, vmin, vmax) 1. px(픽셀):픽셀은 화면에서 고정된 크기를 의미하며, 화면 크기나 해상도와 관계없이 항상 동일한 크기로 표시됩니다.예시: 픽셀로 크기 설정이 코드는 100px × 100px 크기의 박스를 생성합니다. 화면의 크기나 해상도와 상관없이 이 박스는 항상 동일한 크기를 유지합니다.2. % (퍼센트):퍼센트는 부모 요소의 크기에 상대적인 값을 나타냅니다. 부모 요소의 크기가 변하면, 자식 요소의 크기도 함께 변합니다.예시: 부모 요소 크기의 50% 여기서 부모 요소는 400px 너비를 가지므로, 자식 요소의 너비는 50%인 200px로 설정됩니다. 만약 부모 요소의 크기를 변경하면, 자식 요소의 크기도 자동으로 변경됩니다.3. em:em 단위는 글꼴 크기를 기준으로 상대적인 크..

티스토리툴바