# js
[React] UseState 활용
User를 State로 만들어 Props로 넘기기 안읽은 메세지 개수 출력하기 위 코드는 안읽은 메세지가 없으면 You're all caught up!을 출력한다. 그리고 메세지가 하나면 You have a unread message을 출력하고 안읽은 메세지가 2개 이상이면 You have 메세지 개수 unread messages를 출력한다.
Typescript (1)
타입, 함수 및 유형 연산자와 관련된 TypeScript 기능에 대한 설명입니다.TypeScript의 부울 유형은 참 또는 거짓일 수 있는 논리 값을 나타냅니다. 예를 들어:변수 isCompleted 및 hasPermission은 부울 유형으로 명시적으로 주석이 지정되
Typescript (2)
열거형(Enums), 타입 별칭, 타입 추론 및 클래스와 같은 각 TypeScript 기능에 대한 설명입니다.TypeScript의 열거형을 사용하면 명명된 상수 값 집합을 정의할 수 있습니다. 열거형은 상호 배타적인 관련 값 집합을 나타내려는 경우에 유용합니다. 다음은
자바스크립트 2048게임
키보드나 마우스에 이벤트를 걸고 위아래좌우로 움직이면서 숫자를 쌓아 2048을 만드는 게임이다. 테이블에 tr,td를 그리고 그에 맞게 data를 맞춰주고, 이벤트 동작에 맞게 숫자를 더해간다. 이벤트 발생 시 랜덤으로 2를 추가해주는 함수를 넣어줬다.up과 down
[TIL] 230531
autofocus를 추가하면 된다.js부분에서 focus()를 사용해보려고 했지만, 스크립트 실행 순서 때문인지 작동이 안되었다.getAttribute("속성")예제: https://developer.mozilla.org/ko/docs/Web/API/HTMLE
로그인 기능을 간편하게, React-hook-form
이전 포스팅에서는 python으로 백엔드를 구축했는데요 이번 포스팅에서는 본격적으로 프론트엔드를 짜보겠습니다.
onchange와 oninput의 차이
• onChage: 폼의 입력 요소에 변경이 생기면 발생한다.• onInput: textarea, input 요소의 값이 변경될 때 발생한다. React 팀은 이 이벤트의 사용을 추천하지 않는다.• onSubmit: 폼 제출 시 발생한다. 흔히 Enter를 눌렀을 때
[JS] 피로도
XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로
[JS] 문자열 밀기
문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고
[JS] 변수
변수란 무엇인가? 왜 필요한가? 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨
호이스팅과 TDZ
변수 : 변수는 하나의 값을 저장하기 위해 확보된 메모리 공간 or 그 공간을 식별하기 위해 붙인 이름식별자 : 변수의 이름 ... => 값이 아닌 메모리 주소를 기억함코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커
Grid - 1
부모요소 속성 display : grid 사용 예시 grid-template-columns : auto auto; grid-template-columns : repeat(2, auto); grid-template-rows : 100px 200px; grid : 100
[TIL] 230530
회원가입 및 key발급설정에서 api 코드를 사용해볼 수 있다. 이미지를 불러올 때에는 https://image.tmdb.org/t/p/<이미지 크기>/<이미지 파일명>으로 해주어야한다.이미지 크기는 임의로 해줘도 되고 이미지 파일명은 poster_
[JS] apply, call
apply, call은 함수를 특정 객체에 연결하고 호출하는 데 사용된다. 이들 메소드의 첫 번째 인자는 함수가 호출될 때 this의 값이 된다.두 메서드의 차이는 인자의 처리 방식에 있다. apply는 두번째 인자에서 함수에 전달될 인자들의 배열을 받고 call은 두
[ 백준 ] 2903 중앙 이동 알고리즘 [ js ]
상근이는 친구들과 함께 SF영화를 찍으려고 한다. 이 영화는 외계 지형이 필요하다. 실제로 우주선을 타고 외계 행성에 가서 촬영을 할 수 없기 때문에, 컴퓨터 그래픽으로 CG처리를 하려고 한다.외계 지형은 중앙 이동 알고리즘을 이용해서 만들려고 한다.알고리즘을 시작하면
[React] UseState
UseState란 State는 컴포넌트가 가질 수 있는 상태이다. 사용하는 이유 간단하고 직관적으로 상태를 관리할 수 있다. 객체나 배열 같은 복잡한 상태를 관리할 수 있다. 자동으로 재렌더링이 된다. 사용법 먼저 useState를 사용하려면 import를 받아야 한다. 그 다음 사용할 변수를 선언해야 한다. 이 형태로 사용된다. 예제 위와 같...
[프로그래머스] 괄호 회전하기
🔴 괄호 회전하기 > 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄
[JS] 자바스크립트
초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.💡 렌더링(Rendering)HTML,
[JS] 프로그래밍
컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이를 위해 먼저 무엇을 실행하고 싶은지 정의할 필요가 있다. 프로그래밍에 앞서 해결해야 할 문제를 명확히 이해한 후 적절한 문제 해결 방안을 정의할 필요가 있다.즉, 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행