일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 메타버스
- 비동기
- prototype 프로퍼티
- 2522
- 한글 입력 시 이벤트 두 번 발생
- python
- 유클리드 호제법
- css
- 낙관적 업데이트
- javascript
- 프로그래밍
- 9610
- 시간
- 최소공배수
- dp
- 파이썬
- 백준 9610번 파이썬 문제 풀이
- 자바스크립트
- __proto__ 접근자 프로퍼티
- Tanstack Query
- 백준
- backtracking
- float: right
- 한글이 두 번 입력됨
- 알고리즘
- 동기
- 함수 객체의 프로퍼티
- 백트래킹
- 동적 계획법
- C++
- Today
- Total
목록분류 전체보기 (105)
염딩코
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)이 최..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xYIyF/btrYycokeBQ/nIV5LfsMBnYYk9ud9mm3PK/img.gif)
모든 경우의 수를 전부 고려하는 알고리즘. 백트래킹(backtracking)이란? : 해를 찾는 도중 해가 아니어서 막히면, 되돌아가서 다시 해를 찾아가는 기법을 말합니다. 최적화 문제와 결정 문제를 푸는 방법이 됩니다. 상태공간을 트리로 나타낼 수 있을 때 적합한 방식입니다. 일종의 트리 탐색 알고리즘이라고 봐도 됩니다. 방식에 따라서 * 깊이우선탐색(Depth First Search, DFS) * 너비우선탐색(Breadth First Search, BFS) * 최선 우선 탐색(Best First Search/Heuristic Search) (그냥 뇌없이 짤 수 있다는 것이 장점입니다.) DFS와 Backtracking * DFS(깊이 우선 탐색) : DFS는 가능한 모든 경로(후보)를 탐색합니다. 따..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/tozlz/btrYChWomW7/WB8L8sjCR75ZxjQdcbFlP1/img.gif)
알고리즘의 시간복잡도 우리는 살면서 어떤 목적지로 이동할 때 대부분 최단거리를 찾아서 이동을 합니다. 프로그래밍에서도 시간복잡도가 가장 낮은 알고리즘을 채택하여 실행시간을 단축하려고 노력합니다. 시간 복잡도는 알고리즘의 수행 시간을 나타내는 측정 방법입니다. 특정 입력 크기에 대한 알고리즘의 수행 시간을 분석하여, 알고리즘의 효율성을 판단하는 데 사용됩니다. 보통 "O(n)" 표기법을 사용하여 표시하며, n은 입력 크기를 나타냅니다. 예를 들어, O(1) - 상수 시간 복잡성: 입력 크기에 관계없이 항상 동일한 시간이 걸리는 알고리즘입니다. (예: 인덱스를 사용하여 배열에서 요소 검색) O(n) - 선형 시간 복잡성: 입력 크기에 따라 실행 시간이 선형으로 증가하는 알고리즘입니다. (예: 배열의 선형 검..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cv522w/btrWbtfrjSU/xRFMjnE4uB7KRMyNki3hXk/img.gif)
구현이란? 구현이란 말 그대로 문제를 파악하고 소스코드로 바꾸는 과정입니다. 사실 어떤 문제를 풀든 생각한 것을 소스코드로 바꾸는 과정은 필수입니다. 그렇기 때문에 구현 문제 유형은 모든 범위 코딩 테스트 유형을 포함하고 있는 개념입니다. [문제] 다음과 같이 문자열을 선언했다고 하고 아래의 문제를 풀어보겠습니다. Q1. 앞에서부터 3개의 문자열을 출력하라. Q2. 해당 문자열을 거꾸로 해서 출력하라. Q3. 해당 문자열 끝에 "Yeom"이란 문자열을 추가하라. 라고 하면 다음과 같이 코드를 구현할 것입니다. [풀이 1] 위의 코드에서는 크게 어려운 점이 없습니다. [풀이 2] 풀이 2와 풀이 1의 차이는 함수의 사용 여부입니다. 범위가 크거나 복잡한 문제였다면 풀이 2의 소스코드처럼 함수를 사용하는 것..