본문 바로가기

분류 전체보기

 (64)
(React) useState 배열, 객체 업데이트 패턴 정리 useState를 사용해 상태 변수(state)와 상태를 변경하는 함수(setState)를 생성할 때,  원시 타입(primitive type)이 아닌 객체나 배열을 사용해야 할 때가 있다.문제는 객체나 배열은 원시 타입과 다르게 참조에 의해 할당되거나 복사되므로, React가 객체 변경을 감지할 수 없다는 것이다. 객체는 메모리 주소를 가지므로 내용이 변경되어도 참조 값은 변하지 않기 때문이다.따라서 useState로 객체를 업데이트할 때는 스프레드 연산자(...)를 사용해 새로운 객체를 만들어 반환해야 한다. 이번 포스팅에서는 useState로 객체를 업데이트할 때 사용할 수 있는 패턴을 정리하고자 한다.   1. 배열/객체에 새로운 요소를 추가해야 할 때배열/객체를 상태 변수(state)로 만들고,..
(React) useState 기본 사용법 정리, 주의할 점 리액트는 다양한 내장 함수인 훅(hook)을 제공하며, useState도 그중 하나이다.useState는 리액트에게 특정 상태(state)가 변경될 때 컴포넌트를 다시 렌더링 해달라고 요청하기 위해 사용된다.상태가 없다면 리액트는 어떤 변화를 기준으로 렌더링해야 할지 모르기에, 상태를 통해 이러한 변화를 리액트에게 알려주는 것이다.   기본 사용 방법useState는 크게 다음 과정을 거쳐 사용할 수 있다.useState import 하기useState()함수로 state(상태변수)와 setState(상태 변수 변경 함수) 생성하기state(상태변수)가 변경돼야 하는 부분에 setState(상태 변수 변경 함수)를 사용해 상태변수 변경하기import { useState } from 'react'; //u..
(백준/구름) 자바스크립트로 입력 출력 받기, 백준/구름 세팅하기, 입력 유형별 코드 정리 프로그래머스와 달리 백준과 구름은 node.js로 입력과 출력을 직접 구현해야 하기에, 처음 시작할 때 다소 복잡하고 어렵게 느껴질 수 있다.  따라서 이번 포스팅에서는 입력 유형별로 기본 세팅 코드를 정리하려고 한다. 여기서 사용된 코드는 구름의 기본 코드를 기반으로 작성되었다.    1. 입력이 한 줄이고 띄어쓰기로 구분되어 있을 때const readline = require('readline');(async () => { let rl = readline.createInterface({ input: process.stdin }); const input = []; for await (const line of rl) { input.push(...line.split(" ").map(x=>..
(CSS) 자식 컨테이너에게 padding/margin을 주고도 스크롤이 생기지 않게 하는 방법 화면을 100%로 구성하는 와중에 자식 컨테이너에게 padding 혹은 margin을 주고 싶은 경우가 있다.  하지만 이런 경우, 아래와 같이 코드를 작성하면 스크롤이 생겨버린다.  먼저 아래 html, css를 적용하면 스크롤이 생기는 것을 확인할 수 있다.  .parents{ width: 100vw; height: 100vh;}.child{ width: 100%; height: 100%; margin: 10px; border: 2px solid black;}   부모 컨테이너에게 padding 을 주는 경우기본 css를 리셋한 뒤, box-sizing: border-box;를 사용한다. 기본 브라우저 스타일로 마진과 패딩이 주어지기에 이를 모두 0으로 리셋하거나 reset.c..
(React) vite를 이용한 리액트 세팅 방법 이번 포스팅에서는 리액트로 프로젝트를 세팅하는 방법을 정리하고자 한다.  이번 포스팅에서는 Vite로 리액트 프로젝트를 시작하는 방법을 설명한다. Vite는 설정이 간단하고 확장이 쉽다는 장점이 있다.    1. node js 설치하기npm을 사용하기 위해 먼저 node js를 설치해야 한다.  npm은 노드 패키지를 관리하는 툴로 node js를 설치하면 자동으로 설치된다.    2. 프로젝트 폴더 생성 & 터미널 오픈프로젝트를 생성하고 싶은 폴더를 새로 생성하고, visual studio code를 열어 해당 폴더를 오픈한다.    3. 리액트 프로젝트 생성제일 먼저 Vite를 이용해 리액트 프로젝트를 생성해야 한다.  아래 명령어에서 .은 현재 디렉토리를 의미하며, --template react는 ..
(Typescript) 타입스크립트, 타입 선언 방법 정리 1편 타입스크립트에서는 타입을 선언할 수 있는 방법이 다양하다. 워낙 다양하다 보니 타입을 선언하는 방법이 헷갈리기에 해당 포스팅으로 정리하고자 한다.   기본 타입 정의자바스크립트의 선언문과 비슷하지만, : 옆에 타입을 선언한다. 타입스크립트는 옆에 할당되는 값을 보고 자동으로 타입을 추론할 수 있기에 붙이지 않아도 된다, 다만 배열에 타입을 선언할 때, 빈 배열인 경우 타입을 추론할 수 없으므로 기본 타입 정의를 해 주면 좋다. let name : string = "Lemu";let age : number = "27";//배열let fruit : string[] = ["apple", "banana"];let num : number[] = [];   타입 별칭 (Type alies)위에 기본 타입 선언처럼 ..
(CSS) 무한하게 흐르는 텍스트 바 만들기, animation 바 내부에 텍스트를 무한하게 흐르는 효과를 내고 싶다면 key frame을 사용하면 된다.  1.  HTML 세팅컨테이너 역할을 할 div를 만들고, 그 안에 p태그로 흐를 텍스트를 준비한다. 이때 텍스트는 어느정도 길게 만들어야 애니메이션을 적용할때 끊이지 않고, 무한으로 흐르는 것처럼 보인다. SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE TRABLE ✦ WELCOME TO SPACE TRABLE WEB ✦ SPACE ..
(Algorithm) 알고리즘, 문제해결 패턴, 빈도 수 세기 패턴, Frequency Counter 이번 포스팅은 문제 해결 패턴 중 빈도수 세기 패턴에 대해서 포스팅하고자 한다. 해당 패턴은 특정 값의 빈도수를 체크할 때 유용하다. 객체나 세트를 이용해, 중복되는 값을 세며, O(N)의 시간복잡도를 갖는다. 예시 문제 1두개의 숫자가 주어졌을 때, 두 숫자의 자릿수가 같은 빈도수를 갖는지 확인하는 함수 sameNumFrequency를 만들어라. [예시 입출력]sameNumFrequency(12, 21) //truesameNumFrequency(45512, 25541) //truesameNumFrequency(1123, 2311) //truesameNumFrequency(13, 2311) //falsesameNumFrequency(42, 12) //falsesameNumFrequency(2, 22) /..

티스토리툴바