1. Error 항목 Unhandled Runtime Error Error: Multiple children were passed to with href of / but only one child is supported https://nextjs.org/docs/messages/link-multiple-children Open your browser's console to view the Component stack trace. 1. 원인 ❓ {post.name} 위와 같이 하나의 Link컴포넌트 안에 두 개 이상의 컴포넌트 혹은 태그를 넣을 시 발생 1. ✅ 해결 {post.name} Link태그를 따로 분리 2. Error 항목 Warning: Function components cannot be g..
Props ❓ Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 ✔ Props 특징 자식 컴포넌트에서 데이터를 변경 할 수 없습니다. ( 컴포넌트 내부의 속성이라고 봐도 무방 합니다 ) 이미 HTML 를 사용하면서 태그에 대한 속성을 알고 사용하고 있습니다. ( id, class, onClick 등 ) Hello world! React에서는 이 속성 개념에 데이터를 전달하는 느낌으로 추가 확장 const Text = ({text}) => { return {text} } const App = () => { return } 결과, 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여 Hello world! 라는 문자열이 출력 됩니다. State ..
다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다. Import & Export 임포트(Import)와 익스포트(Export)는 자바스크립트의 코드를 모듈화 할 수 있는 기능 기본 문법 export 변수, 함수 다른 파일에서 가져다 쓸 변수나 함수의 앞에 export 라는 키워드를 붙입니다. 익스포트된 파일은 임포트로 불러와 사용할 수 있습니다. import { 불러올 변수 또는 함수 이름 } from '파일 경로'; 예제 math.js export let pi = 3.14; export function sum(a, b) { return a + b; } app.js import { pi } from './math.js'; console.log(pi); // 3.14 i..
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어 할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다. BOM window Global Context(전역 공간)이자 브라우저 창을 나타내는 객체 navigator 브라우저와 운영체제 대한 정보 screen 사용자 환경의 디스플레이(모니터) 정보를 가지는 객체 location 현재 URL 에 대한 정보, 브라우저에서 사용자가 요청하는 URL history 현재 브라우저가 접근했던 URL history document 현재 문서에 대한 정보 참고 http://www.tcpschool.com/javascript/js_bom_window https://..
XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 넓은 의미 웹 브라우저가 HTML 페이지를 인식하는 방식 좁은 의미 Document 객체와 관련된 객체의 집합 DOM 안에는 우리가 정의한 요소들이 Tree 형태로 구성되어 있습니다. 이것을 이용하여 JS로 웹페이지를 제어할 수 있습니다. HTML의 , 그리고 의 안에 각각의 tag 들을 요소(element)라고 부르고, JS에서는 문서 객체라고 부릅니다. DOM을 이용하면 HTML 태그를 추가, 수정,삭제 등 할 수 있습니다. DOM Tree 정리 브라우저가 HTML 파일을 읽을 때 브라우저가 이해할 수 있는, 메모리에 보관할 수 있는 objec..
동등연산자(==)는 피연산자들의 값만 비교합니다. 즉, == 연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등하지 비교한다. 일치연산자(===)는 피연산자들의 값과 타입을 모두 비교합니다. 즉, === 연산자는 타입 변환을 하지 않고 두 값이 같은 타입이 아닌 경우 ===는 false를 반환한다. 예시 console.log('01' == 1) // true, 문자열 '01'이 숫자 1로 변환된 후 비교 진행 console.log(true == 1) // true, true 는 1, false 는 0으로 변환된 후 비교 console.log(false == 0) // true console.log(0 === false) // false null이나 undefined와 비교 변수에 값이 null ..
ECMAScript5 부터 도입된 기능으로 기존에 무시되던 에러들로 하여금 에러를 발생 시킵니다. 사용하는 이유 자바 스크립트는 기존 기능을 변경하지 않으면서 새로운 기능을 추가해왔기 때문에 호환성 문제가 없었습니다. 하지만 ES5부터 새로운 기능이 추가되고 기존 기능의 일부가 변경 되었습니다. 그에 따라 기존 기능이 변경되어 호환성에 문제가 생기게 되었고, 이를 방지하기 위한 것이 엄격 모드(strict mode) 입니다. 사용하는 방법 "use strict"; // 이 코드는 모던한 방식으로 실행됩니다. ... 최상단에 선언 합니다. 위에 처럼 사용하면 파일 전체에 적용이되고, 원하는 함수 스코프에만 적용이 가능 합니다. 참고 MDN, use strict https://ko.javascript.inf..
async/await 를 사용하면 비동기 코드를 작성할 때 비교적 쉽고 명확하게 코드를 작성할 수 있습니다. promise 사용 하기 전 (문제점) function fetchUser(){ // 데이터를 받아오는데 10초 정도 걸린다고 가정 return 'hyunho'; } const user = fetchUser() console.log(user) 위에처럼 시간이 걸리는 코드를 비동기적으로 처리를 하지 않으면, 자바스크립트 엔진은 동기적으로 코드를 수행하기 때문에, 즉 한줄 한줄씩 한줄이 끝나야 그 다음 줄로 넘어 갑니다. fetchUser() 함수가 선언된 곳으로 가서 함수의 코드 블록을 실행하는데 데이터를 받아오는데 10초가 걸리니까 10초동안 머무르고 있고, 그리고 나서야 'hyunho' 가 리턴이..
