일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- backtracking
- 프로그래밍
- 메타버스
- 동적 계획법
- 백준
- __proto__ 접근자 프로퍼티
- python
- 알고리즘
- 자바스크립트
- 한글이 두 번 입력됨
- 2522
- float: right
- css
- 비동기
- dp
- 동기
- 한글 입력 시 이벤트 두 번 발생
- 함수 객체의 프로퍼티
- 파이썬
- 9610
- 최소공배수
- 백트래킹
- 낙관적 업데이트
- 유클리드 호제법
- 백준 9610번 파이썬 문제 풀이
- C++
- 시간
- javascript
- Tanstack Query
- prototype 프로퍼티
- Today
- Total
목록Front-End (27)
염딩코
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'; functio..
콜백 함수(Callback Function)는 함수를 매개변수로 받아들여 다른 함수 내에서 실행되는 함수입니다. 이는 JavaScript에서 비동기 프로그래밍을 가능하게 하는 핵심적인 개념 중 하나입니다. 예를 들어, JavaScript에서 setTimeout() 함수는 일정 시간이 지난 후에 함수를 실행합니다. 이 함수는 첫 번째 매개변수로 실행할 함수를 받고, 두 번째 매개변수로 지연 시간(밀리초)을 받습니다. 이때, 첫 번째 매개변수로 전달하는 함수는 콜백 함수입니다. setTimeout(() => { console.log('Hello, world!'); }, 1000); 위 예제에서는 setTimeout() 함수가 1초(1000밀리초) 후에 실행되고, 첫 번째 매개변수로 전달된 함수가 실행됩니다...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dzzG2l/btrZBEDb9Jh/HerDwjLppWrQFil0SpeSrK/img.gif)
DOM이란 무엇일까요? DOM (Document Object Model)은 HTML, XML 및 XHTML 문서를 나타내는 표준 프로그래밍 인터페이스입니다. 이를 사용하여 웹 페이지의 모든 콘텐츠, 구조 및 스타일을 변경하고 조작할 수 있습니다. DOM은 문서를 노드 (node)로 나눕니다. 각 노드는 객체로 표현되며, 문서의 요소, 속성, 텍스트 노드, 주석 등을 포함합니다. 이러한 노드들은 계층 구조로 구성되어 있으며, 부모 노드와 자식 노드 간의 관계를 가집니다. DOM API는 다양한 방법으로 문서의 노드를 선택하고 조작할 수 있습니다. 이를 통해 특정 요소의 콘텐츠를 변경하거나 스타일을 조정할 수 있습니다. DOM API는 또한 이벤트 처리, 애니메이션 및 AJAX와 같은 고급 기술에 사용됩니다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cqNSlF/btrZsGOSTLJ/WrLqukWTon3v6pbkANKoWk/img.png)
Flexbox란? Flexbox는 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있는 정말 정말 유연한 녀석입니다. CSS의 꽃이라고 불리는 Flexbox 녀석을 오늘 자세하게 뜯어보겠습니다. ex) 박스가 커지면 박스 속의 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 메워야 하는지 박스가 작아지면 박스 속의 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지 위의 두 가지를 자유롭게 정의할 수 있고 너무너무 쉽게 이 모든 것들을 가능하게 해주는 것이 바로 “Flexbox”입니다. flexbox만 잘 이해하셔도 웹사이트의 layout을 아주 쉽게 구성할 수 있습니다. 너무나 쉽고 간단한 flexbox… 저와 같이 오늘 부숴버리도록 해보겠습니다. 예전에는 position, floa..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bZARqC/btrZbpmftLM/OBc5MBOlIRvOOkGdzWOfVk/img.jpg)
웹사이트를 만들 때, 가장 중요한 것은 무엇일까요? ⇒ 우리가 이전 시간에 정의했던 박스들을 원하는 위치에 원하는 사이즈로 배치할 수 있는 것이 가장 중요합니다. 이것을 하기 위해서는 CSS에서 가장 기본이 되는 display와 position에 대해서 아는 것이 중요합니다. 이것이 사실 간단해 보여서 쉬워 보일 수 있지만, 현업에서는 박스 위에 박스가 올려져 있는 stacking이 많은 상태에서 display와 position을 잘 이해하지 못하면 금방 무너져 내릴 수 있습니다. (라고 현업에 계신 분이 말함.) display와 position은 끝낸다는 마음으로 정리를 시작해 보겠습니다. display 오늘은 실습을 통해서 진행해 보겠습니다. (같이 실습을 하고 싶다면 jsbin.com에서 하실 수 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Nc82s/btrYRUPl5v2/dTS7rubXRxGv3APKMixUxK/img.png)
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^="..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nkdpR/btrY2otRpIa/pUHEqy5DJEzRVC1RwMYCH1/img.png)
CSS란? Cascading Style Sheet의 약자입니다. Style Sheet은 스타일을 잘 정리한 문서 한 장을 의미합니다. Cascading은 작은 폭포, 연속화 등등 연속해서 떨어지는 느낌을 준다고 생각하면 됩니다. Cascading은 세부적으로 정의된 것이 있다면 그것을 사용하고 정의된 것이 없다면 기본으로 정의된 다음 것으로 넘어가는 것을 얘기합니다. 웹 사이트를 스타일링할 때, 총 크게 3가지로 나뉩니다. Author style 우리가 작성하는 style sheet(.css 파일) User style 사용자의 취향에 맞게 스타일링의 변경하는 것(ex. 다크모드) Browser 브라우저 상에서 기본적으로 지정된 스타일 Cascading은 우리가 지정한 스타일(Author style)이 최..