열이의 개발블로그

타입스크립트의 함수에 대해서 알아봅시다. ✅ Call Signatures 함수 위에 마우스를 올렸을 때 보게 되는 것 type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 함수의 타입을 만들어두고 함수를 구현하기 전에 함수가 어떻게 작동하는지 서술해둘 수 있는 것을 call signatures라고 합니다. ✅ Overloading 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생시킴 type Add = { (a: number, b: number): number (a: number, b: string): number } const add: Add = (a, b) => { if (typeof..

https://www.acmicpc.net/problem/2295 2295번: 세 수의 합 우리가 x번째 수, y번째 수, z번째 수를 더해서 k번째 수를 만들었다라고 하자. 위의 예제에서 2+3+5=10의 경우는 x, y, z, k가 차례로 1, 2, 3, 4가 되며, 최적해의 경우는 2, 3, 4, 5가 된다. k번째 수가 최 www.acmicpc.net 문제 분석 중복이 가능한 세 수를 골라 집합에 있는 수를 만들면 된다. N이 1000까지 가능하기 때문에 삼중 for문을 사용하여 세 수를 각각 골라 계산한다면 시간복잡도가 O(N**3)이 될 것이다. 큰 시간복잡도를 가지므로 다른 방법을 생각해보자. 우선 탐색을 위한 하나의 수(k번째 수)를 정한다. 이 수는 세가지 수의 합을 의미하는 수이다. 그..

create-react-app을 통해 프로젝트를 생성하고 useState를 작성하면 자동으로 react에 있는 useState를 import 해줍니다. import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => { setValue((prev) => prev + 1); }; return ( {counter} click me ); } export default App; counter를 만들고 버튼을 클릭하면 counter가 증가하는 로직을 작성해봅시다. function App() { const [counter, setValue] = useState(0); const..

React를 사용하면서 컴포넌트에 CSS를 적용하는 방법에 대해 단계별로 알아봅시다. ✅ 전역으로 CSS 설정 /* styles.css */ button { color: white; background-color: tomato; } src 폴더 안에 styles.css라는 파일을 생성한 뒤 button 태그의 스타일을 지정해줍시다. // index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import "./styles.css"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ..

쉽게 React 프로젝트를 만들기 위해서는 create-react-app을 사용하여 많은 스크립트들과 많은 사전설정들을 미리 설정할 수 있도록 하는 것이 좋습니다. ✅ create-react-app 설치 node.js를 설치한 뒤 터미널에서 create-react-app을 통해 프로젝트를 생성합니다. $ npx create-react-app 프로젝트명 ✏️ npm과 npx의 차이 npm은 node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다. 프로젝트의 패키지를 설치할 때 npm install을 실행함으로써 package.json 파일에 있는 패키지들을 지정할 수 있다는 것을 의미합니다. 또한, 버전 관리를 지원하여 패키지의 버전을 명시해 원하는 버전을 설치하도록 할 수 있습니다. npx는 n..

✅ Props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 수 있게 해주는 방법 ✏️ Props가 필요한 이유 예제를 통해서 알아봅시다. function SaveBtn() { return ( Save Changes ); } function ConfirmBtn() { return ( Confirm ); } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); 위의 코드는 SaveBtn 컴포넌트와 ConfirmBtn 컴포넌트가 존재하는 코드입니다. 두 개의 컴포넌트는 각각 버튼을 나타내고 다른 점이라고는 버튼 안에 있는 텍스트의 내용 뿐입니다. 이런 버튼들이 필요할 때마다 ..

✅ Select 태그 값에 따라 변하는 컴포넌트 웹을 개발하다보면 select 태그 값에 따라 변하는 내용을 만들어야 할 때가 있습니다. React에서는 변하는 내용을 컴포넌트화하여 select 값에 따라 다른 컴포넌트를 렌더링하는 방식을 사용합니다. 먼저 가장 Root 컴포넌트인 App에서 select 태그를 만들어봅시다. function App() { const [index, setIndex] = React.useState("xx"); const onSelect = (event) => { setIndex(event.target.value); }; console.log("render w/ ", index); return ( Super Converter Select your units Minutes & ..

✅ 타입스크립트의 타입 체커(Type Checker)와 소통하는 방법 let a = "hello" let b: boolean = false; let c: number[] = [] a는 string이라고 추론할 수 있도록 하는 방법입니다. b는 boolean이라고 명시적으로 알려주는 방법입니다. c는 숫자만 들어갈 수 있는 array라고 명시적으로 선언하는 방법입니다. const player: object = { name: "nico", }; player.name; 객체의 경우도 object라고 명시적으로 선언할 수 있지만 이 때는 오류가 발생합니다. object라는 타입에 name이라는 속성이 없기 때문입니다. const player: { name: string } = { name: "nico" }; p..

✅ Web Storage란? Web Storage는 HTML5부터 제공하는 기능입니다. 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹 브라우저에 저장할 수 있도록 제공하는 쿠키와 비슷한 기능입니다. 키와 값의 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회합니다. 영구적으로 저장하는 Local Storage와 임시적으로 저장하는 Session Storage를 따로 가지고 있어 데이터의 지속성을 구분하여 선택적으로 사용할 수 있습니다. Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됩니다. A 도메인에서 저장한 데이터는 B 도메인에서 조회할 수 없습니다. ✏️ 쿠키와 Web Storage의 비교 쿠키는 HTTP Request에 암호화되지 않은 상태로 사..

✅ HTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜 환경은 "Connectionless, Stateless"한 특성을 가지기 때문에 서버는 클라이언트가 누구인지 매 번 확인해야 합니다. 이 특성을 보완하기 위해서 쿠키와 세션을 사용합니다. ✏️ Connectionless(비연결성) 클라이언트가 요청을 보낸 후 응답을 받으면 연결을 끊어버리는 특징 HTTP는 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 response를 보내고 접속을 끊는 특성이 있습니다. Header에 keep-alive라는 값을 줘서 커넥션을 재활용하는데 HTTP1.1에서는 이것을 디폴트로 사용합니다. HTTP가 TCP 위에 구현되었기 때문에 (TCP는 연결지향, UDP는 비연결지향) 네트워크 관점..