sopt6 아이스크림 어떤 맛 좋아하세요? 엄마는 외계인? 사빠딸? 녹차? 민트초코😍? 딸기? 망고? 블루베리? 레몬? 복숭아? 라즈베리? 피스타치오? 호두? 아몬드 봉봉? 쿠키 앤 크림? 그 중에서 하나를 고르자면... 엄나는 외계인?사빠딸?녹차?민트초코?딸기?망고?블루베리?레몬?복숭아?라즈베리?피스타치오?호두?아몬드 봉봉?쿠키 앤 크림? 저는 Vanilla-extract를 고르겠습니다.https://vanilla-extract.style/ vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.Zero-runtime Stylesheets-in-TypeScript.vanilla-extract.style 이번 합동 세미나에서 Vanilla-extract를 사용하기로 해서 공부 겸 작성해 볼 생각입니다. Vanilla-Extract란?Vanilla-extract는 TypeScript를 전처리기로 사용해 빌드 시점에 정적 CSS 파일을 생성하는 제로 런타임 스타일링 라이브러리입.. 2025. 5. 12. useReducer에 대해 잘 이해하고 넘어가셨나요? 확실한가요? 진짜? 아니면 한번 들어와 보실래요?? 잠깐 보고가요 이런 눈빛으로 들어오셨겠죠??네.잘 들어오셨어요.더보기useReducer 설명 갑니다. useReducer란???컴포넌트 내부에 새로운 State를 생성하는 React Hook으로 만든 useState는 useReducer로 대처 가능합니다. useState vs useReduceruseReducer를 이용하면 useState와는 달리 상태를 관리하는 코드들을 컴포넌트 외부로 분리할 수 있다는 핵심적인 차이가 있습니다.React 컴포넌트의 가장 메인 역할은 UI를 렌더링 하는건데 useState를 사용하여 스테이트를 관리하는 코드가 너무 많아지게 되면 코드들이 훨씬 더 복잡하고 길어지게 됩니다. 따라서 App컴포넌트가 렌더링하는 UI요소가 무엇인지 한눈에 파악하기 어렵습니다. 그래서 가독성이 떨어지게 .. 2025. 5. 2. CSR vs SSR 정확히 집고 넘어가자 CSR(Client-Side Rendering) vs SSR(Server-Side Rendering)사람들은 최근 웹 개발에서 "CSR과 SSR의 차이"는 꼭 알고 넘어가야 할 핵심 주제라고 말합니다.Web 2차 세미나에서 팟장님이 설명해주신 CSR, SSR에 대해 개인적으로 조금 더 정리하고 확장해서 설명해보고자 합니다. CSR ?CSR ( Client-Side Rendering ) : 브라우저에서 html을 실시간으로 만드는 방식입니다.즉, HTML, CSS, JavaScript 파일을 받아온 후 브라우저에서 자바스크립트가 동작하면서 화면을 그리는 방식입니다.말 그대로 "클라이언트(브라우저)가 렌더링을 담당" 하는 구조입니다. 장점- 부드러운 화면 전환 ( 페이지를 새로고침 없이 자연스럽게 이동 가능.. 2025. 4. 14. [Javascript] this 이것 뭐에요? 자바스크립트 this 정복하기 1주차 세션에선 웹개발의 기본중에 기본! 순정! HTML, CSS, JAVASCRIPT 개념에 대해서 배워봤는데요. 이 세션과 연관지어 같이 더 풀어볼 수 있는 소재를 찾아보다가,, javascript에서 종종 쓰이는 this에 대해 정리해보려고 합니당~ 다른 언어에서도 this를 쓰는데 각자 돌아가는 작동 방식도 조금씩 달라서, javascript 내에선 어떻게 사용하고 어떤 개념이 있는지 알아보도록 합시다. 그럼 출~바알 🚀 동적 바인딩호출과 동시에 this가 결정됩니다. 특히 기본적으로 함수는 동적으로 this가 바인딩됩니다! 우선 기본 this는 뭘 가리키고 있을까요?? 한번 콘솔로 확인해보시져(1)console.log(this)그냥 아무것도 없는 상태에서 전역적으로 이래버리면 이 this 키.. 2025. 4. 11. JS에서 Truthy와 Falsy 그리고 단락평가 안녕하세요! AT SOPT YB 36기 장정훈입니다.저는 오늘 Js의 Truthy와 Falsy 그리고 단락평가에 대해 말해보고자 합니다.자바스크립트의 if (value) 같은 조건문에서 value의 값이 숫자나 문자열이 들어가도 잘 작동합니다.🤔🤔🤔왜 그럴까요? 이는 자바스크립트가 내부적으로 값을 논리형(Boolean)으로 바꿔 판단하기 때문입니다.그리고 이때 기준이 되는게 바로 Truthy와 Falsy입니다. Truthy? Falsy?Falsy?Falsy한 값이란 불리언 자료형의 거짓(false)은 아니지만 거짓과 같은 의미로 쓰이며, 조건식에서 거짓(false)으로 평가합니다.let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = Na.. 2025. 4. 11. HTML/CSS로 구현하는 반응형 웹의 기본 구조 반응형 웹 과제 정리 작성자: 36기 YB 웹파트 최서희 😀 HTML/CSS 과제로 개인 블로그 만들기를 진행하며 모바일에서도 잘 보이는 반응형 웹 구조를 직접 구현했습니다. 요구사항이었던 반응형 레이아웃을 공부하며 기초 개념부터 실습 예제까지 정리해 공유합니다. 🔍 반응형 웹 디자인이란? 기기 화면 크기에 따라 콘텐츠 배치와 스타일이 자동으로 조정되는 웹 구조입니다. 하나의 코드로 데스크탑·태블릿·모바일에 대응할 수 있어 관리 효율성과 사용자 경험이 좋아집니다. 🧩 핵심 구성 요소 3가지 1️⃣ 유동적인 레이아웃 (Fluid Layout) .. 2025. 4. 11. 이전 1 다음
