React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. async async는 function 키워드 앞에 선언한다. async function helloAsync() { return 'hello Async'; } function 앞에 async를 붙이면 해당 함수의 return 값은 항상 Promise 객체를 반환하게 된다. 위의 함수의 경우는 return값이 Promise가 아니지만 놀랍게도 async를 붙여주면 이행 상태의 Promise(resolved promise)로 값을 감싸 반환된다. async function helloAsync() { return 'hello Async'; } console.log(..

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Promise 동기와 비동기에 대해 포스팅했을 때 마지막에 콜백 지옥(callback hell)을 잠깐 얘기했었다. Promise에 대해 알아보기 전에 먼저 비동기 작업이 가질 수 있는 3가지 상태에 대해 알아보자. 비동기 작업이 가질 수 있는 3가지 상태 Pending 현재 비동기 작업이 진행중이거나, 현재 이 작업이 시작할 수 없는 문제가 발생했음을 의미한다. Fulfilled 이행 또는 성공 상태로 이 비동기 작업이 우리가 의도한대로 정상적으로 완료된 상태를 의미한다. Rejected 거부 또는 실패 상태로 비동기 작업이 모종의 이유(서버 비응답, 시간 ..

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. 동기&비동기 동기와 비동기 파트는 자바스크립트의 실행방식과 매우 연관이 깊다. 자바스크립트 엔진이 동작하는 원리까지 파악해보자. function taskA() { console.log("TASK A"); } function taskB() { console.log("TASK B"); } function taskC() { console.log("TASK C"); } taskA(); taskB(); taskC(); 세 개의 함수가 작성되어 있고, task A B C 순서대로 함수를 호출한다. 그럼 콘솔에는 당연히 호출한 순서대로 출력됐을 것이다. 자바스크립트는 단일..

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. spread 연산자 객체를 다루는 또 다른 방법이다. 맛있는 쿠키를 만들어보자. const cookie = { base : "cookie", madeIn : "korea" }; const chocohipCookie = { base : "cookie", madeIn : "korea", toping : "chocochip" }; const blueberryCookie = { base : "cookie", madeIn : "korea", toping : "blueberry" }; const strawberryCookie = { base : "cookie", made..

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..

데이터베이스 시스템의 개요 사전적으로 데이터베이스는 '데이터의 집합'을 뜻한다. 데이터베이스로 인해 데이터 관리 및 사용으로 업무를 자동화하는 프로그램은 기업의 비용을 최소화하고 의사결정에 필요한 시간을 단축할 수 있다. 데이터베이스 관리 시스템(DBMS : Database Managemnet System)은 한 조직의 연관된 데이터의 집합을 다수의 사용자가 공용으로 사용하기 위해 통합 저장하는 소프트웨어 패키지이다. DBMS와 함께 사용자에게 서비스 형태로 제공되는 애플리케이션이 포함된 일체의 시스템을 데이터베이스 시스템이라 한다. 데이터베이스 관리 시스템의 목적 1960년대부터 데이터를 처리 및 분석하여 사용하였다. 당시 컴퓨터에서 데이터를 기록 및 관리하기 위해 사용할 수 있었던 유일한 수단은 운영..

김영한님의 강의를 이제 들어볼까 하면서 스프링부트를 실행했는데 에러가 발생했다. 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(..

운영체제의 개요 운영체제의 역할 운영체제? 컴퓨터의 하드웨어 자원을 관리 컴퓨터 프로그램이 동작하기 위한 서비스를 제공하는 시스템 소프트웨어 컴퓨터 시스템의 운영 운영체제는 컴퓨터 시스템의 자원을 제어 및 관리하여 컴퓨터 시스템을 효율적으로 운영하는 역할 시스템 자원 하드웨어 자원 : CPU, 메모리, 키보드, 마우스, 네트워크 카드 등 소프트웨어 자원 : 프로그램, 데이터 등 즉, 응용 프로그램들의 실행을 위해 자원들이 적절히 활용되도록 제어하고 관리하는 역할 사용자 지원 사용자가 편리하게 컴퓨터를 사용할 수 있도록 지원 → GUI(Graphical User Interface) 인터페이스 제공 등 사용자가 내린 명령을 해석하여 실행, 사용자와 하드웨어 사이의 매개체 역할 컴퓨터 시스템과 운영체제 옛날 ..

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가 출력된다. 그럼 ..

코딩테스트 연습 - 음양 더하기 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 re programmers.co.kr 문제 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록solution 함수를 완성해주세요. 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 ..

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..