분류 전체보기

LeetCode / Dynamic Programming / 322번 / Coin Change / JS

Coin Change - LeetCode Can you solve this real interview question? Coin Change - You are given an integer array coins representing coins of different denominations and an integer amount representing a total amount of money. Return the fewest number of coins that you need to make leetcode.com 주어진 amount의 값을 만들기 위해 coins 배열에 담겨있는 coin의 동전을 최소 몇 개 써야하는지 반환하는 문제이다. 만약 coins의 ..

LeetCode / Dynamic Programming / 198번 / House Robber / JS

House Robber - LeetCode Can you solve this real interview question? House Robber - You are a professional robber planning to rob houses along a street. Each house has a certain amount of money stashed, the only constraint stopping you from robbing each of them is that adjacent ho leetcode.com 도둑이 연속해서 인접한 두 집을 연속해서 도둑질하면 경찰에게 걸린다. 따라서 인접한 두 집을 연속해서 도둑질 하지 않는다고 할 때 가장 많이 도..

LeetCode / Graph / 210번 / Course Schedule II / JS

Course Schedule II - LeetCode Can you solve this real interview question? Course Schedule II - There are a total of numCourses courses you have to take, labeled from 0 to numCourses - 1. You are given an array prerequisites where prerequisites[i] = [ai, bi] indicates that you must take leetcode.com 총 들어야할 강의의 수인 numCourses와 선행 강의의 쌍인 prerequisites가 주어진다. 예를 들어 numCourses ..

Passing Props to a Component

React 컴포넌트들은 props를 사용하여 서로 통신한다. 부모 컴포넌트가 props로 자식 컴포넌트에게 정보를 전달할 수 있다. 컴포넌트에 props 전달 다음과 같은 코드에서는 부모 컴포넌트인 Profile이 자식 컴포넌트인 Avatar에게 props를 전달하지 않는다. export default function Profile() { return ( ); } 만약 Avatar에게 부모 컴포넌트인 Profile의 어떤 정보를 넘겨주고 싶다면 다음과 같이 전달해줄 수 있다. 1단계: 자식 컴포넌트에 props 전달 export default function Profile() { return ( ); } Avatar에게 person이라는 prop으로 객체와 size라는 prop으로 100을 전달해주었다...

JavaScript in JSX with Curly Braces

마크업 내에서 동적 속성을 참조하고 싶을 수 있다. 예를 들어 어떤 태그의 속성에 JavaScript 변수의 값을 넣고 싶을 수도 있다. 그럴 때 중괄호를 사용하면 된다. 따옴표로 문자열 전달 JSX에 문자열 속성을 전달하려면 작은따옴표나 큰따옴표로 묶어야 한다. HTML 삽입 미리보기할 수 없는 소스 위의 img 태그에서 src와 alt는 문자열로 전달이 된다. 하지만 문자열들을 따로 변수로 저장한 뒤에 긴 문자열 대신 변수로 삽입하고 싶다면 중괄호를 이용해서 아래와 같이 하면 된다. HTML 삽입 미리보기할 수 없는 소스 "double curlies" 사용: JSX의 CSS 및 기타 객체 문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에서 객체를 전달할 수도 있다. JavaScript..

Writing Markup with JSX

JSX는 JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 JavaScript 확장 구문이다. JSX: JavaScript에 마크업 넣기 웹은 HTML, CSS, JavaScript를 기반으로 구축된다. 그래서 우리는 배울 때 각자의 역할을 HTML은 콘텐츠, CSS는 디자인, 로직은 JavaScript로 분리해서 작성하였다. 하지만 웹이 점점 반응형, 상호작용을 중요시 하게 됨으로써 JavaScript가 HTML을 담당해가기 시작했다. 이것이 React에서 렌더링 요소와 마크업이 같은 위치, 즉 컴포넌트에 함께 존재하는 이유이다. 위의 왼쪽 예시처럼 동적으로 조건 판단을 요하는 요소가 있다면 JSX를 이용해 동적으로 렌더링이 가능하다. 또한 오른쪽 예시처럼 이벤트 리스너를 JS..