분류 전체보기

Importing and Exporting Components

React에서 UI를 컴포넌트로 나누어서 사용했을 때의 가장 큰 장점은 재사용성이다. 그리고 한 컴포넌트는 다른 컴포넌트와의 중첩을 통해 만들 수 있다. 따라서 헷갈리지 않고, 깔끔하게 유지하기 위해 컴포넌트를 분할하고, 그 과정에서 각각의 컴포넌트는 다른 파일로 관리할 수 있다. 이렇게 다른 파일로 관리하게 될 때 한 컴포넌트에서 다른 컴포넌트를 사용하기 위해 그 컴포넌트를 가져와야 하고, 또 그 파일에선 해당 컴포넌트를 내보내야 다른 파일에서 가져올 수 있게 된다. 컴포넌트 내보내기 및 가져오기 컴포넌트를 넣을 새 JS 파일을 만든다. 해당 파일에서 컴포넌트 함수를 내보낸다. 컴포넌트를 사용할 파일로 해당 컴포넌트를 가져온다. 동일한 파일에서 여러 컴포넌트 내보내기 및 가져오기 지금까지는 export..

Your First Component

컴포넌트 정의 1단계: 컴포넌트 내보내기 표준 JavaScript 구문에서 export default 키워드로 현재 파일에 존재하는 컴포넌트를 내보낼 수 있다. 내보내게 되면 다른 파일에서 이 컴포넌트를 import 해와서 사용할 수 있다. 2단계: 함수 정의 컴포넌트도 결국 React에서 화면에 렌더링하기 위한 함수이다. 따라서 함수를 정의해주면 된다. 이 때 주의할 점은 React 컴포넌트 또한 일반 JavaScript 함수라고 말했지만, 이름은 무조건 대문자로 시작해야 한다. 그렇지 않으면 일반 HTML 태그로 인식하기 때문에 작동하지 않는다. 3단계: 마크업 추가 만약 img 태그를 반환한다고 하면 다음과 같이 작성할 수 있다. HTML 처럼 보이지만 JavaScript이다. (JSX) retur..

Describing the UI

UI 설명 React는 UI 렌더링을 위한 JavaScript 라이브러리이다. React를 사용하면 재사용 가능하고 중첩 가능한 구성 요소로 결합할 수 있다. JSX로 마크업 작성하기 일단 JSX에 대해 알아볼 필요가 있다. JSX는 HTML과 비슷하게 생겼지만, JavaScript를 확장한 문법이다. const name = 'Minjun Kim'; const element = Hello, {name} 위와 같이 HTML 태그로 이루어진 element 자체를 변수로 선언하여 할당할 수 있다. JSX의 중괄호 안에는 모든 JavaScript 표현식이 들어갈 수 있다. 따라서, 예를 들어 어떤 태그에 속성을 동적으로 추가하고 싶을 경우 JSX를 활용할 수 있다. 또 JSX를 활용함으로써 많은 속성을 넣게 되..

LeetCode / Graph / 417번 / Pacific Atlantic Water Flow / JS

Pacific Atlantic Water Flow - LeetCode Can you solve this real interview question? Pacific Atlantic Water Flow - There is an m x n rectangular island that borders both the Pacific Ocean and Atlantic Ocean. The Pacific Ocean touches the island's left and top edges, and the Atlantic Ocean touches leetcode.com 각 칸에 있는 숫자는 그 땅의 높이라고 생각하면 된다. 따라서 그 칸에 있는 물은 현재 있는 칸의 높이보다 작거나 같..

LeetCode / Graph / 994번 / Rotting Oranges / JS

Rotting Oranges - LeetCode Can you solve this real interview question? Rotting Oranges - You are given an m x n grid where each cell can have one of three values: * 0 representing an empty cell, * 1 representing a fresh orange, or * 2 representing a rotten orange. Every minute, any leetcode.com m * n의 격자판이 주어지는데 다음과 같은 각 셀은 3가지 상태중 하나를 가진다 0: 빈 셀 1: 신선한 오렌지가 있는 셀 2: 썩은 오렌..

LeetCode / Binary Search Tree / 173번 / Binary Search Tree Iterator / JS

Binary Search Tree Iterator - LeetCode Can you solve this real interview question? Binary Search Tree Iterator - Implement the BSTIterator class that represents an iterator over the in-order traversal [https://en.wikipedia.org/wiki/Tree_traversal#In-order_(LNR)] of a binary search tree (BST): * leetcode.com 이진 탐색 트리를 전위순회를 하였을 때, 다음 노드를 반환하는 next()와 다음 노드가 존재하는지 반환하는 hasN..