맥북에 MySQL 설치하기 내 맥북 정보 2019년도에 산 15인치 맥북 프로 인텔 CPU이다. MySQL 설치 홈페이지 접속 https://dev.mysql.com/downloads/ MySQL Community Server 클릭 애플 CPU면 제일 첫 번째꺼를 다운하면 된다. 인텔 CPU는 Select OS Version에서 macOS 12 (x86, 64-bit)를 선택 후 제일 첫 번째 파일을 다운하면 된다. finder에서 다운한 파일을 더블클릭 - 상자 모양이 또 새로운 창으로 나오면 상자 모양도 더블클릭하면 된다. 팝업 창이 뜨면 '허용' 계속 - 계속 - 동의 - 설치 - 지문인식 비밀번호 유형 선택 비밀번호 입력 - Finish - 지문인식 MySQL 설치 확인 시스템 환경 설정 맥북 좌..
코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Props Props는 State와 더불어 React의 대표적인 기능 중 하나이다. Props는 컴포넌트에게 데이터를 전달하는 기본적이고 효율적인 기능이다. Props는 Properties의 줄임말이다. //import './App.css'; import MyHeader from './MyHeader'; import React from 'react'; import Counter from './Counter'; function App() { const number = 5; return ( ); } export default App; 위의 코드를 보면 Counte..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Node.js 설치하기 Google에 Node.js 검색 최상단 Node.js 선택 두 가지 버전을 다운받을 수 있는데 LTS가 붙은 버전은 기업에서 사용해도 될만큼 안정화되었고 신뢰도가 높은 버전이고 오른쪽의 현재 버전은 현재 버전으로 최신 기능들을 이용할 수 있으나 안정성과 신뢰성이 좀 떨어진다. 그러니 LTS 버전으로 다운 하단의 다운로드가 완료되면 클릭한다. 다운은 크게 어려운 게 없다. 체크 박스가 나오면 다 체크하면 된다. 경로도 기본으로 놔두면 된다. Next....!! 완료 설치가 잘 됐는지 확인해보자. cmd 실행 node -v npm -v 이..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. Node.js 어? 우리가 배우려는 건 React.js인데 왜 Node.js가 나오나요? 바로 React.js가 Javascript의 라이브러리이기 때문이다. 오 그건 알겠어요. 근데 Javascript랑 Node.js랑 무슨 연관이 있는데요? 자, 전에 자바스크립트로 작성된 코드는 브라우저에 있는 자바스크립트 엔진을 이용하여 실행한다고 했었다. 우리가 아는 브라우저만 해도 크롬, Edge, Safari 등이 있는데 이 각 브라우저마다 자바스크립트 엔진이 상이하다. Safari - Nitro Firefox - Spider Monkey Chrome - V8 Ed..
C 언어의 정의 C 언어는 프로그래밍 언어이다. 프로그래밍 언어 : 인간과 컴퓨터의 대화에서 사용되는 의사소통 수단 컴퓨터는 0과 1로 구성된 기계어만 이해할 수 있고, 인간은 인간의 언어를 사용한다. 이 두 개체 간의 원활한 의사소통을 돕는 수단이 바로 프로그래밍 언어이다. 인간이 컴파일러에게 프로그래밍 언어를 사용하여 프로그램을 작성한 파일을 보내면, 컴파일러는 컴퓨터가 이해할 수 있도록 프로그래밍 언어를 기계어로 변환하는 역할을 수행한다. 어셈블러는 컴파일러와 컴퓨터 사이에 존재하는데, 컴파일러가 번역한 기계어에 가까운 어셈블리 코드를 기계어(0, 1의 바이너리 코드)로 변환하는 작업을 한다. 즉 2차 번역인 셈이다. C 언어와 같이 인간이 이해하기 쉬운 언어(나는 왜 어렵지?)에 가까울수록 고급 ..
React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다. API API에 대한 정의는 구글에 검색하면 위키백과에 잘 나와있다. 여기로 굳이 내용을 가져오지 않는 이유는 그걸 봐도 와닿지가 않아 이해가 불가능하기 때문이다. API를 좀 더 쉽고, 와닿게 설명하기 위해 레스토랑을 차렸다. 손님이 레스토랑에 방문해 음식을 먹으려면 총 4단계가 필요하다. 주문 주방장이 재료를 찾는다. 찾은 재료로 요리한다. 서빙한다. 이 네가지 과정이 웹사이트에서 어떠한 정보를 가져오는 방식과 유사한 방식이다. 위의 것과 웹사이트 동작 방식을 약간 섞어서 얘기해보자면, 클라이언트(손님)이 서버(주방장)에게 Request(주문)한다. - 데..
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(..
