루체

이 글은 성공과 실패를 결정하는 1%의 네트워크 원리를 내가 이해하기 쉽게, 번역 말투를 조금 없앤 글이다. 아래 내용은 챕터 1의 스토리 1에 해당한다. 이 과정의 출발점은 브라우저에서 URL을 입력하거나, 네이버 검색창에 검색을 하거나부터 시작이 된다. URL? URL이 무엇일까? Uniform Resource Locator의 줄임말로 일반적으로 브라우저에서 봤을 때 http://로 시작을 한다. http는 일종의 프로토콜로 개념은 아래에서 설명을 할 것이고, 프로토콜에 대해 간단하게 알아보자. 프로토콜은 어떤 상대와 통신을 할 때 이 통신을 어떻게 진행할지 규칙을 정한 것을 프로토콜이라 한다. 정말 쉽게 예를 들어서 설명을 해보자면 편의점에서 물건을 살 때, 살 물건을 캐셔에게 가져다 주면 캐셔가 ..

비구조화 할당이란? 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언 해줄 수 있는 것. 또한 함수의 파라미터에도 비구조화 할당을 할 수 있다. const test = { a : 1, b : 2 }; const {a , b} = test; console.log(a); // 1 console.log(b); // 2 ////////////// const object = { a : 1, b : 2 }; function print({a , b}) { console.log(a); console.log(b); } print(object) 함수에 전달을 할 때 object에 b값이 주어지지 않는다면 출력을 할 때 undefined가 나타나게 된다. 이런 상황에서 b 값에 기본 값을 주고 싶다면 c++에서 기..

HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷 이벤트 사용 시 주의사항 1. 이벤트 이름은 camelCase로 작성 2. 이벤트에는 함수 형태의 값을 전달. 3. DOM 요소에만 이벤트 설정 가능 div, button, input, from, span 등 DOM 요소에는 이벤트 설정 가능, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 하지만 전달 받은 props를 컴포넌트 배우 DOM 이벤트에 설정 가능 import React, {useState} from 'react'; function EventPractice () { const [text, setText] = useState(''); const onChange = (e) =>{ setText(e.target.value) ..

아무래도 책이 좀 예전꺼라 그런지 코드는 변경을 해야겠다.. 1. 파일 이름 마음대로 .js 하나 만든다. 초기 코드 import React from 'react'; function MyComponent () { return ( 나의 컴포넌트 ) } export default MyComponent 2. App.js에 MyComponent 사용하기 import React from 'react'; import Hello from './Hello'; import MyComponent from './MyComponent'; import Wrapper from './Wrapper'; function App() { return ( ); } export default App; 3. props도 사용해보기 //MyCo..

컴포넌트의 Props 개념 props는 properties의 줄임말. 컴포넌트에 값을 전달할 때 사용한다. props 사용법 App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name을 전달해주고 싶다면? //App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; //Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; props는 객체 형태로 전달되며 조회할 때는 props. 으로 조회를 한다 여러 개를 전달 /..