🧸이번에는 리액트 컴포넌트를 만들 때 사용하게 되는 문법인 JSX에 대해서 알아보겠다. 🧸 JSX란? JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하게 되는 문법이다. 얼핏보기에는 HTML처럼 생겼지만, 사실은 자바스크립트이다. 어떻게 자바스크립트가 되냐면, 바벨이라는 도구를 통해서 XML 형태의 코드가 자바스크립트로 변환이 된다. babeljs.io 를 들어가서 확인할 수 있다. 다음과 같이 babel에서는 왼쪽의 코드(JSX)를 저렇게 바꾸어준다는 것이다. 매번 createElement라는 것을 써서 호출하기엔 너무 어려우니까 JSX 문법을 통해 쉽게 작성하고, 바벨이 이를 변환해준다. 🧸 JSX의 규칙 JSX에도 규칙이 있다. 그 규칙에 대해서 알아보겠다. JSX에서 return 뒤에 사용..

🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다. src 폴더에 hello.js라는 파일을 만든다. import React from "react"; 그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다. 🍨 컴포넌트 만들어보기 컴포넌트를 만드는 방법에는 2가지가 있다. 1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기 클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다. import React from "react"; function Hello(){ return 안녕하세요; } export default Hello; 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러..

리액트를 개발하기 위한 작업환경 준비에 대해 알아보겠습니다. 1. node.js node.js란 브라우저환경이 아닌 곳에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임을 말함 우리가 리액트 프로젝트를 만들면 webpack, babel같은 도구를 사용해야 하는데 그러한 도구들이 node.js 기반으로 만들어졌기 때문에 node.js를 설치해야 함 2. yarn 자바스크립트 package들을 관리(manage)해주는 도구 node.js를 설치하면 npm이 딸려나오는데 npm으로도 할 수 있긴 함 yarn도 npm이랑 비슷한 도구인데 npm보다 빠른 속도로 다운로드받을 수 있게 해준다. npm에 익숙하거나 yarn을 설치하기 싫다면 yarn은 생략해도 되지만 한 번도 사용해보지 않았다면 사용해보..

[백준] 3053. 택시 기하학 문제 19세기 독일 수학자 헤르만 민코프스키는 비유클리드 기하학 중 택시 기하학을 고안했다. 택시 기하학에서 두 점 T1(x1,y1), T2(x2,y2) 사이의 거리는 다음과 같이 구할 수 있다. D(T1,T2) = |x1-x2| + |y1-y2| 두 점 사이의 거리를 제외한 나머지 정의는 유클리드 기하학에서의 정의와 같다. 따라서 택시 기하학에서 원의 정의는 유클리드 기하학에서 원의 정의와 같다. 원: 평면 상의 어떤 점에서 거리가 일정한 점들의 집합 반지름 R이 주어졌을 때, 유클리드 기하학에서 원의 넓이와, 택시 기하학에서 원의 넓이를 구하는 프로그램을 작성하시오. 입력 첫째 줄에 반지름 R이 주어진다. R은 10,000보다 작거나 같은 자연수이다. 출력 첫째 줄에는..

[백준] 3009. 네번째 점 시간 제한 메모리 제한 제출 정답 맞은 사람 정답 비율 1 초 128 MB 16242 11630 10570 73.311% 문제 세 점이 주어졌을 때, 축에 평행한 직사각형을 만들기 위해서 필요한 네 번째 점을 찾는 프로그램을 작성하시오. 입력 세 점의 좌표가 한 줄에 하나씩 주어진다. 좌표는 1보다 크거나 같고, 1000보다 작거나 같은 정수이다. 출력 직사각형의 네 번째 점의 좌표를 출력한다. 예제 입력 1 30 20 10 10 10 20 예제 출력 1 30 10 내가 작성한 코드 (자바스크립트) let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split("\n"); let array..

[백준] 1085. 직사각형에서 탈출 문제 한수는 지금 (x, y)에 있다. 직사각형의 왼쪽 아래 꼭짓점은 (0, 0)에 있고, 오른쪽 위 꼭짓점은 (w, h)에 있다. 직사각형의 경계선까지 가는 거리의 최솟값을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 x, y, w, h가 주어진다. 출력 첫째 줄에 문제의 정답을 출력한다. 제한 1 ≤ w, h ≤ 1,000 1 ≤ x ≤ w-1 1 ≤ y ≤ h-1 x, y, w, h는 정수 예제 입력 1 6 2 10 3 예제 출력 1 1 내가 작성한 코드 (자바스크립트) let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split(" "); const x = Number(i..