사고쳤어요

React에서 props는 컴포넌트 간에 데이터를 전달하는 속성(properties)이다.부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하며, 함수의 매개변수처럼 작동한다. import React from "react";interface MyProps { weather: string;}const MyWeather: React.FC = (props) => { return 오늘의 날씨는 {props.weather}입니다.;};export default MyWeather;타입스크립트에서는 다음과 같이 props를 사용할 수 있다.MyProps라는 인터페이스를 생성한 뒤, MyWeather의 타입인 React.FC에 를 추가하여MyWeather이라는 컴포넌트가 MyProps라는 타입의 props를 필요..

useState()useState()는 리액트에서 컴포넌트의 상태를 관리하기 위해 사용되는 Hook(훅)이다.기본적인 사용법은 다음과 같다.const [state, setState] = useState(initialValue); state: 현재 상태 값setState: 상태를 변경할 수 있는 함수initialValue: 상태의 초기값  타입스크립트에서는 타입을 명시하여 사용할 수 있다.const [state, setState] = useState(initialValue);type: initialValue, state의 타입 useState에서는 일반적인 String, Number 등의 타입뿐만 아니라 객체, 배열 등 또한 사용할 수 있다.interface User { name: string; age..

리액트에서는 기능별로 다른 파일에 컴포넌트를 작성 후, 한 파일에서 합칠 수 있다.만약 한 파일에 모든 컴포넌트를 작성하고 기능을 작성한다면 매우 지저분해지고 유지보수가 힘들 것이다.리액트에서 컴포넌트를 작성하는 방법에는 두 가지가 있다. 클래스형 컴포넌트import { Component } from "react";class ClassCom extends Component { render() { return 클래스형 컴포넌트; }}export default ClassCom;class "클래스명" extends Component주의사항으로 클래스는 Component를 extends해야 하고,render()를 호출한 뒤 그 안에 return문을 작성해야 정상적으로 빌드가 된다. 함수형 컴포넌트fun..

리액트로 프로젝트를 생성하기 위해 기존에 사용하던 명령어는 다음과 같다.npx create-react-app my-app 위 명령을 실행하면 필요한 라이브러리들을 자동으로 설치해준다.또한 폴더 구조와 여러가지 js 파일들도 생성해주어 npm start 명령을 통해 예제 페이지를 확인할 수 있도록 해준다. 그런데 타입스크립트를 사용하기 위해서는 위의 js 파일들이 필요하지 않고, ts파일들이 필요하다.친절하게도, 이런 경우를 위한 프로젝트 명령어가 존재한다.npx create-react-app my-app --template typescript 위 명령어를 통해 프로젝트를 생성하면 아래와 같이 모든 js파일들이 tsx파일로 생성된다! tsxtsx파일은 html 컴포넌트를 사용할 수 있는 ts의 확장된 파일..

let empName: string = "김민제";let empAge: number = 26;let empJob: string = "개발자";function printEmp(empName: string, empAge: number, empJob: string): void { console.log(`이름: ${empName}`); console.log(`나이: ${empAge}`); console.log(`직업: ${empJob}`);}printEmp(empName, empAge, empJob); 직원들의 이름, 나이, 직업이 있을 때 이를 출력하는 함수가 있다.위 코드를 실행하면 이름, 나이, 직업이 잘 출력되지만, 한 가지 문제가 있다.만약 직원들이 수백명이 존재한다면, 직원 정보가 더 많이 존재..

자바스크립트는 변수를 선언할 때 let, const, var 등으로 선언하고 별도로 타입은 지정해주지 않는다.그렇기 때문에 변수들의 타입을 헷갈리기 쉬우며 의도치 않은 버그가 발생할 수 있다.const a = 3;const b = '5';console.log(a*b);// output: 15숫자 타입의 3과 문자열 타입의 5를 곱했지만 에러가 발생하지 않고 15라는 결과가 출력된다.지금은 별 문제가 아니라고 생각할 수 있지만, 큰 규모의 코드에서 이런 일이 발생한다면 원인을 찾기 매우 힘들 것이다. 타입스크립트타입스크립트는 이름에서 알 수 있듯 자바스크립트에 "타입 선언 기능"을 추가한 언어이다.타입스크립트는 자바스크립트를 포함하는 더 넓은 환경을 보유하고 있으며타입스크립트 환경에서 자바스크립트는 동작 ..

절차적 프로그래밍객체 지향 프로그래밍을 알아보기 전에 이전에 사용되었던 절차적 프로그래밍에 대해 알아보자절차적 프로그래밍이란 순차적으로 프로그래밍을 하는 방식이다.순서대로 차곡차곡 쌓아 올리는 건축물과 비슷한 느낌으로 이해할 수 있다.int add(int a, int b);int minus(int a, int b);int multiple(int a, int b);int divide(int a, int b);int main(){ add(1, 2); minus(4, 3); multiple(5, 6); divide(8, 3);} 객체 지향 프로그래밍객체 지향 프로그래밍은 "객체"를 기능 단위로 하는 프로그래밍 방식이다.객체는 메소드(함수), 데이터(변수)가 모두 포함되며 특정 역할을 수행..

링크: https://www.acmicpc.net/problem/17140 문제크기가 3×3인 배열 A가 있다. 배열의 인덱스는 1부터 시작한다. 1초가 지날때마다 배열에 연산이 적용된다.R 연산: 배열 A의 모든 행에 대해서 정렬을 수행한다. 행의 개수 ≥ 열의 개수인 경우에 적용된다.C 연산: 배열 A의 모든 열에 대해서 정렬을 수행한다. 행의 개수 한 행 또는 열에 있는 수를 정렬하려면, 각각의 수가 몇 번 나왔는지 알아야 한다. 그 다음, 수의 등장 횟수가 커지는 순으로, 그러한 것이 여러가지면 수가 커지는 순으로 정렬한다. 그 다음에는 배열 A에 정렬된 결과를 다시 넣어야 한다. 정렬된 결과를 배열에 넣을 때는, 수와 등장 횟수를 모두 넣으며, 순서는 수가 먼저이다.예를 들어, [3, 1, 1]..