4전 4전

리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은 부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다. 이를 "bubbles", "propagates"라고 합니다. | 예시 import React from 'react'; import './style.css'; export default function App() { return ( { console.log('1'); }} > console.log('2')}>children ); } 이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고, 자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다. 그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고, 자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩..

리액트에는 useState, useEffect 같은 내장되어 있는 훅 들이 있고, 이러한 훅들을 사용하여 나만의 로직을 만드는 경우가 자주 있습니다. 이럴 때 반복되는 로직들은 custom hooks로 만들어서 재사용 쉽게 만들면 좋은데 한번 간단한 예시를 통해 만들어 보겠습니다. | 예시 공식 문서에 따르면 커스텀 훅을 만들 때는 앞에 use라는 키워드를 붙여서 만들라고 해서 저도 use키워드를 붙여서 만들어 보겠습니다. 1. useInput input이 바뀔 때 입력값들을 useState를 통해 state로 저장하고 그 값을 input value로 보여주는 코드를 일반적으로 작성하려면 import { useState } from "react"; import { useInput } from "./hoo..

이번에 Node.js에 Nest.js라는 프레임워크로 간단한 백엔드 api를 만들어 보려고 합니다. | 시작 1. 설치 npm i -g @nestjs/cli nest new project-name 먼저 이런 식으로 nest 프로젝트 폴더를 하나 만들어 보겠습니다. 그다음 예시로 user에 관한 api를 만들기 위해 터미널에 nest g co nset g s nest g mo 이런 식으로 입력한 다음 각각 name을 users로 하면 자동으로 users폴더와 하위 파일들이 아래처럼 잘 만들어집니다. 여기에서 spec이라고 쓰여있는 파일들은 테스트를 위한 파일들입니다. 현재 다룰 내용이 아니기 때문에 일단 삭제를 해주겠습니다. 2. app.module.ts app.module.ts에서는 UsersModule..

타입스크립트에서 타입의 범위를 좁혀서 코드가 좀 더 정확하게 동작할 수 있도록 만드는 거를 Narrowing이라고 합니다. | Narrowing 예를 들어 타입스크립트에서는 아래와 같은 함수는 에러가 발생하게 돼있습니다. function 함수(x :string | number){ return x + 1; } 이 함수에서 x가 타입이 하나로 정해진 것이 아니고 string | number라는 union타입이라 그럽니다. 이럴 때 타입을 하나로 narrowing 해주면 에러를 해결할 수 있습니다. 간단하게 조건문을 활용하여 narrowing 해줄 수 있습니다. function 함수(){ if(typeof x === 'number'){ return x + 1; // x가 number타입일경우 } else if..

타입스크립트에서 함수에 타입지정을 해서 사용할 수 있습니다. | 타입지정 먼저 아래처럼 간단한 함수가 있다고 해보겠습니다. function 함수(x){ return x * 5; } 함수(2) // 10 이런 함수에는 파라미터와 리턴 값에 타입 지정을 해줄 수 있는데 아래 코드처럼 타입을 지정해 주면 됩니다. function 함수(x :number) :number{ return x * 5; } 함수(2) // 10 이때 파라미터 타입 지정은 파라미터 옆에 적으면 되고, 리턴값의 타입 지정은 함수명() 오른쪽에 적으면 됩니다. 또한 함수를 만들 때 리턴값이 없는 함수를 만들 수 있는데 이럴 때 void라는 타입을 사용할 수 있습니다. // 리턴값이 없을 때 void타입 function 함수(x :number..

타입스크립트는 변수를 만들 때 타입을 지정해 줄 수 있습니다. | string, number, boolean 타입을 지정하고 싶으면 변수명: 타입 이런 식으로 지정하면 됩니다. let 문자 :string = '안녕'; let 숫자 :number = 25; let 진실 :boolean = true; | array, object array나 object 자료에도 타입을 지정할 수 있는데 먼저 array의 타입 지정은 아래처럼 하면 되고 let arr1 :string[] = ['안', '녕']; let arr2 :number[] = [1, 2]; object자료형의 타입을 지정하려면 아래처럼 하면 됩니다. let obj1 :{ name :string, age :number } = { name : 'Lee', ..

Process 컴퓨터에서 실행 중인 프로그램의 인스턴스를 나타내는 개념이다. 각 프로세스는 운영체제에 의해 관리되며 독립된 실행 환경을 가지고 있다. 프로세스는 연산의 단위라 말할 수 있고, 연산이 연속적으로 진행되며 흐름(Context, flow)을 생성한다. 보통 프로세스 수준에서 기본적으로 1개의 흐름이 있다. 보통 하나의 프로세스에는 하나의 주요 흐름이 있고, 이를 메인 스레드라고 한다. 프로세스의 연산은 운영체제에 의해 관리되고, CPU나 RAM메모리의 할당을 받는다. 할당된 RAM은 가상 메모리 (Virtual Memory)이다. 흐름이 N개가 되면 이 N개는 동시에 각자 작동 ← Multi-threading 하나의 프로세스 내부에 여러 개의 스레드가 존재하는 경우, 이 스레드들은 동일한 프로..

자바스크립트로 프로젝트를 하다가 외부에서 배열 데이터를 가져와서 출력하는 코드를 작성한 적이 있는데 화면에 출력될 때 순서가 보장되지 않는 문제가 발생하였습니다. 발생한 문제의 예시를 한번 들어보겠습니다. 예시로 사용하기 위해 무료 open API로 숫자에 대한 흥미로운 지식을 알려주는 Numbers API라는 걸 사용해 보겠습니다. http://numbersapi.com/ Numbers API NumbersAPI An API for interesting facts about numbers Bring meaning to your metrics and stories to your dates An API for interesting facts about numbers Bring your metrics and..