다음과 같이 input이 주어졌을 때,같은 알파벳으로 이루어진 단어끼리 묶어주세요.Input: ["eat", "tea", "tan", "ate", "nat", "bat"],Output:[
["ate","eat","tea"],
["nat","tan"],
["bat"]
]
output에서 순서는 상관없습니다.
Let‘s understand the steps with following inputs:
"cat", "dog", "tac", "god", "act"1) Create two arrays index[] & words[].
Copy all given words to words[]…
양수 N을 이진법으로 바꿨을 때, 연속으로 이어지는 0의 갯수가 가장 큰 값을 return해 주세요.- 이어지는 0은 1과 1사이에 있는 것을 의미합니다.
- 1과 1사이에 있는 0을 binary gap 이라고 하겠습니다.input: 9
output: 2
설명: 9의 이진수는 1001 입니다. 1과 1사이에 있는 0은 2 이므로, 2를 returninput: 529
output…
What I learned from Cloning Myrealtrip.com
눈 깜짝할 사이에 2차 프로젝트 팀이 구성됐고 1주일이 지났다. 원래 여행 갈때마다 자주 애용하던 마이리얼트립을 클로닝하게 되서 기대 반 걱정 반이 공존했다.
팀명 : 무즐림(무조건 즐기는자세로 …
이번 시간에는 그동안 배운 명령어들을 간단하게 복습하고 넘어가 보도록 하겠다.
npm init react-app .터미널에서 원하는 디렉토리에 들어가서 npm init react-app .를 입력하면 현재 디렉토리에 리액트 프로젝트를 생성한다.
npm start (npm run start)터미널에서 npm run start를 입력하면 개발 모드 서버가 실행된다.
ctrl + c서버가 실행 중인 터미널에서 ctrl + c를 입력하면 서버가 종료된다.
npm run build터미널에서 npm run build를 입력하면 빌드를 시작한다.
npx serve build터미널에서 npx serve build를 입력하면 serve 프로그램을 다운 받고 build 폴더에서 서버가 실행된다.
State는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 한다.
State라는 단어는 한국어로 ‘상태’라는 뜻이 있다. 리액트에서의 state도 그 의미가 다르지 않다.
상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것이다.
리액트에서 state를 만들고, state를 바꾸기 위해서는 일단 u …
Props에는 children이라는 조금 특별한 property(prop, 프롭)가 있다.
JSX 문법으로 component를 작성할 때 component를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다.
Button.js
function Button({ children }) {
return <button>{children}</button>;
}export default Button;
App.js
import Button from './Button';
import Dice from './Dice';function App() {
return (
<div>
<div>
<Button>던지기</Button>
<Button>처음부터</Button>
</div>
<Dice color="red" num={2} />
</div>
);
}export default App;
그래서 JSX 문법으로 component를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하고, 화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수가 있다.
참고로 이 children을 활용하면 단순히 텍스트만 작성하는 걸 넘어서 component 안에 component를 작성할 수도 있고, component 안에 복잡한 태그들을 더 작성할 수도 있으니깐 이 값을 어떻게 활용하면 좋을지 다시 한번 고민해 보면 좋을 것 같다!
JSX 문법에서 component를 작성할 때 component에도 속성을 지정할 수 있다. React에서 이렇게 component에 지정한 속성들을 Props라고 부른다.
Props는 Properties의 약자이다. Component에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 …
Starting from Oct, we started our first cloning team project! My team will be working on LUSH Korea homepage.
JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.
import ReactDOM from 'react-dom';const element = <h1>안녕 리액트!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById …
