☺️ vw와 vh란? CSS 작업을 할 때, 주로 사용하는 단위는 픽셀(px)이다. 하지만, px는 고정 단위이고 이를 대신해 유동 단위인 %를 사용하면 조금 더 유연한 코드를 만들 수 있다. 예를 들어, width: 50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS이다. %말고도 유연한 값을 가지는 단위들 중 vw, vh를 알아보자. v, 뷰포트를 기준으로 하다. 이들의 풀네임은 Viewport Width / Viewport Height 이다. 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위이다. 뷰포트는 ‘보여지는 영역’이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라 할 수 있다. 1vw = 뷰포트 너비의 1%로 계산된다. 그렇..

const name = person && person.name;​ JavaScript에서 optional chaining은 프로퍼티나 메소드를 참조할 때 발생할 수 있는 에러를 방지하기 위한 문법입니다. 이전에는 다음과 같은 방식으로 프로퍼티를 참조했습니다. const name = person && person.name; 위와 같은 코드는 person이 null이나 undefined일 경우, name 변수는 undefined가 되어 프로그램이 중단될 수 있습니다. 이 문제를 해결하기 위해 optional chaining 연산자(?.)가 등장하였습니다. optional chaining을 사용하면 다음과 같은 코드로 에러를 방지할 수 있습니다. const name = person?.name; 위 코드에서 p..

useRef란 뭘까요? React는 사용자 인터페이스를 만드는 데 필요한 많은 기능을 제공합니다. 그 중 하나가 useRef입니다. useRef는 React Hook 함수 중 하나로, DOM 노드나 다른 React 요소에 대한 참조를 만들기 위해 사용됩니다. React를 처음 시작하는 사람들은 이 개념이 어려울 수 있지만, 간단한 예제를 통해 이해해 보도록 하겠습니다. 예제를 위해, 다음과 같은 코드를 작성합니다. import React, { useRef } from 'react'; function TextInput() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( Focus..

React Hook Form은 간편하고 유연한 방식으로 React 애플리케이션에서 폼을 다룰 수 있는 라이브러리입니다. 이를 사용하면 복잡한 폼 로직을 작성하는데 드는 시간과 노력을 줄일 수 있습니다. 이번 글에서는 React Hook Form의 사용법과 예시를 소개하겠습니다.  React Hook Form 사용법 React Hook Form은 useForm이라는 Hook 함수를 제공합니다. 이 Hook 함수를 사용하여 폼을 관리하고, 입력값의 유효성 검사와 전송 처리를 수행할 수 있습니다. 아래는 React Hook Form을 사용하여 간단한 폼을 만드는 예시입니다. import React from 'react';import { useForm } from 'react-hook-form';function..

콜백 함수(Callback Function)는 함수를 매개변수로 받아들여 다른 함수 내에서 실행되는 함수입니다. 이는 JavaScript에서 비동기 프로그래밍을 가능하게 하는 핵심적인 개념 중 하나입니다. 예를 들어, JavaScript에서 setTimeout() 함수는 일정 시간이 지난 후에 함수를 실행합니다. 이 함수는 첫 번째 매개변수로 실행할 함수를 받고, 두 번째 매개변수로 지연 시간(밀리초)을 받습니다. 이때, 첫 번째 매개변수로 전달하는 함수는 콜백 함수입니다. setTimeout(() => { console.log('Hello, world!'); }, 1000); 위 예제에서는 setTimeout() 함수가 1초(1000밀리초) 후에 실행되고, 첫 번째 매개변수로 전달된 함수가 실행됩니다...

DOM이란 무엇일까요? DOM (Document Object Model)은 HTML, XML 및 XHTML 문서를 나타내는 표준 프로그래밍 인터페이스입니다. 이를 사용하여 웹 페이지의 모든 콘텐츠, 구조 및 스타일을 변경하고 조작할 수 있습니다. DOM은 문서를 노드 (node)로 나눕니다. 각 노드는 객체로 표현되며, 문서의 요소, 속성, 텍스트 노드, 주석 등을 포함합니다. 이러한 노드들은 계층 구조로 구성되어 있으며, 부모 노드와 자식 노드 간의 관계를 가집니다. DOM API는 다양한 방법으로 문서의 노드를 선택하고 조작할 수 있습니다. 이를 통해 특정 요소의 콘텐츠를 변경하거나 스타일을 조정할 수 있습니다. DOM API는 또한 이벤트 처리, 애니메이션 및 AJAX와 같은 고급 기술에 사용됩니다..

Flexbox란? Flexbox는 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있는 정말 정말 유연한 녀석입니다. CSS의 꽃이라고 불리는 Flexbox 녀석을 오늘 자세하게 뜯어보겠습니다. ex) 박스가 커지면 박스 속의 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 메워야 하는지 박스가 작아지면 박스 속의 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지 위의 두 가지를 자유롭게 정의할 수 있고 너무너무 쉽게 이 모든 것들을 가능하게 해주는 것이 바로 “Flexbox”입니다. flexbox만 잘 이해하셔도 웹사이트의 layout을 아주 쉽게 구성할 수 있습니다. 너무나 쉽고 간단한 flexbox… 저와 같이 오늘 부숴버리도록 해보겠습니다. 예전에는 position, floa..

웹사이트를 만들 때, 가장 중요한 것은 무엇일까요? ⇒ 우리가 이전 시간에 정의했던 박스들을 원하는 위치에 원하는 사이즈로 배치할 수 있는 것이 가장 중요합니다. 이것을 하기 위해서는 CSS에서 가장 기본이 되는 display와 position에 대해서 아는 것이 중요합니다. 이것이 사실 간단해 보여서 쉬워 보일 수 있지만, 현업에서는 박스 위에 박스가 올려져 있는 stacking이 많은 상태에서 display와 position을 잘 이해하지 못하면 금방 무너져 내릴 수 있습니다. (라고 현업에 계신 분이 말함.) display와 position은 끝낸다는 마음으로 정리를 시작해 보겠습니다. display 오늘은 실습을 통해서 진행해 보겠습니다. (같이 실습을 하고 싶다면 jsbin.com에서 하실 수 ..

Selectors란? html에 어떤 tag들을 고를 것인지에 대한 규정하는 문법입니다. * : 모든 태그에 적용 Tag : 해당 태그만 적용 #id : 해당 id만 적용 .class : 해당 class만 적용 : :태그 옆에 state 작성 가능 [] : 태그 옆에 attribute 작성 가능 다음과 같은 형식으로 작성하면 끝! CSS 문법은 어려운 것이 없습니다 :) /*selector { property: value; }*/ * { color: green; } li { color: pink; } .red { width: 100px; height: 100px; background: yellow; } button:hover { color: red; background: beige; } a[href^="..