React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 비 구조화 할당(=구조 분해 할당) 배열과 객체에서 원하는 값을 더 빠르고 쉽게 가져올 수 있는 방법이다. 한 배열이 있을 때 그 배열의 값을 모두 출력하고 싶을 땐 어떻게 하는 게 좋을까? let arr =["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); // one two three 위와 같은 방법도 쓸 수야 있겠지만 배열의 요소가 많을 수록 입력해야 할 코드량이 많아진다. let arr =["one", "tw..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 조건문 업그레이드 기존에 사용하던 조건문을 배열 내장 함수를 이용해 조금 더 간략하고 멋지게 써보자. 일단 기존에 사용하던 방식대로 조건문을 작성해보자. // 주어진 음식이 한식인지 아닌지 판별 function isKoreanFood(food) { if(food === '불고기' || food === '비빔밥' || food === '떡볶이') { return true; } return false; }; const food1 = isKoreanFood("불고기"); console.log(food1); // true const food2 = isKoreanFoo..
김영한님의 강의를 이제 들어볼까 하면서 스프링부트를 실행했는데 에러가 발생했다. org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'servletComponentRegisteringPostProcessor': Unexpected exception during bean creation; nested exception is java.lang.NoClassDefFoundError: javax/servlet/annotation/WebServlet at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 단락 회로 평가 논리 연산자를 알고 계신가요? true && true : true false || true : true !true : false 이렇게 세 가지의 연산자 &&(and), ||(or), !(not)를 논리 연산자라고 한다. 논리 연산자는 왼쪽에서부터 오른쪽 순서로 연산을 수행하는데 바로 이 점을 이용해서 단락 회로 평가를 사용?할 수 있다. console.log(false && true); // false console.log(true || false); // true console.log(!true); // false 위의 코드 중에서 우리가 ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 삼항 연산자 우리가 보통 분기처리를분기 처리를 할 때에는 if문을 사용해서 if와 else 이렇게 혹은 else if까지 사용하면서 분기 처리를 한다. 삼항 연산자는 if와 else 처리를 좀 더 간편하게 사용할 수 있게 해 준다. 삼항 연산자는 세 개의 피연산자를 가져 삼항 연산자라고 불린다. 만약 숫자가 양수인지 음수인지 판별하려는 코드를 if문으로 작성하면 아래와 같다. let num = 4; if(num >= 0) { console.log("양수"); } else { console.log("음수"); } 위의 코드에서는 양수가 출력된다. 그럼 이 if와..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Truthy와 Falsy 자바스크립트에서는 참 같은 값(Truthy)과 거짓 같은 값(Falsy)이 존재한다. 참이면 참이지 참 같은 값은 뭘까? true와 false를 담을 수 있는 boolean 타입 말고도 다른 데이터 타입에서 true와 false를 반환할 수 있다. let a = ""; if(a) { console.log("true"); } else { console.log("false"); } 위의 코드에서 어떤 값이 출력될까? 자바스크립트에서는 빈 문자열을 false로 인식해 else문에 있는 명령문을 실행한다. 따라서 false가 출력된다. 그럼 ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 배열의 내장함수 배열의 내장함수를 사용하면 더 깔끔하고 간결하게 코드를 작성할 수 있다. forEach // 기존 for문으로 배열을 순회하는 방식 const arr = [1, 2, 3, 4]; for(let i = 0; i console.log(elm)); // 화살표 함수 이용 /* 1 2 3 4 */ arr.forEach((elm) => console.log(e..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 함수(function) 함수는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다. 이러한 함수는 함수를 정의하고, 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. 자바스크립트에서는 함수도 하나의 데이터 타입이다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 행위도 가능하다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수 있다. 두 개의 직사각형 넓이를 구하는 코드를 만들어보자. let width1 = 10; let height1 = 20; let area1 = width1 * height1; cons..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 자바스크립트란? 자바스크립트는 HTML과 CSS로 만들어진 정적인 웹페이지를 동적으로 변경해주는 언어이다. 자바스크립트를 많이 사용할까? 2021년도 영어권 기준으로 당당하게 1위를 차지했다. 자바스크립트가 실행되는 곳 자바스크립트 엔진 중 V8이란 엔진은 구글에서 만들었으며 오픈소스이고, C++로 제작되었다. 이 엔진을 Runtime이라고 하는데 엔진이 없는 환경에서는 자바스크립트를 실행할 수 없다. 자바스크립트 엔진을 내장한 웹 브라우저는 Safari, Firefox, Chrome, Edge, Opera 등이 있다. Hello World - 자바스크립트 엔..
