분류 전체보기

[MariaDB] IntelliJ에서 Gradle 프로젝트 생성하고 MariaDB 연결하기

🔌 IntelliJ에서 Gradle 프로젝트 생성 다음 그림과 같이 Web application과 Gradle을 이용하도록 새로운 프로젝트를 생성한다. 🔌 IntelliJ에서 MariaDB 연결 1. 상단 메뉴바의 View → Tool Windows → Database를 선택한다. 오른쪽 메뉴바의 [Database]를 클릭해도 된다. 2. [+]를 눌러 MariaDB를 선택한다. 3. 선택한 데이터베이스 관련 정보를 입력한다. 'Test Connetcion'을 이용해서 데이터베이스와 연결이 이루어지는지 확인하고 [OK] 버튼을 선택한다. 4. 현재 시간 테스트 데이터베이스 연동 설정이 완료되면 SQL을 실행할 수 있는 창이 하나 생성된다. 이 창을 이용해서 SQL을 작성하고 실행할 수 있다. 데이터베이스..

[MariaDB] 윈도우10 MariaDB 설치하기

MariaDB는 MySQL과 동일한 소스 코드를 기반으로 개발한 오픈소스 관계형 데이터베이스 관리 시스템(RDBMS)이다. 📙 MariaDB 설치하기 1. MariaDB 사이트 접속 Download MariaDB Server - MariaDB.org REST API Release Schedule Reporting Bugs … Continue reading "Download MariaDB Server" mariadb.org 2. 다운로드 원하는 버전을 선택하고 다운로드 버튼을 누른다. 3. msi파일 실행 Next 버튼을 눌러 진행하고 아래 화면이 나오면 root 계정의 패스워드를 설정해 준다. root 계정은 MariaDB에서 가장 중요한 계정이므로 이때 설정해 준 패스워드를 분실하지 않도록 주의해야 한..

[React.js] Props / State / 생명주기

Props Props(Properties의 줄임말)는 컴포넌트에 전달하는 속성과 같은 것으로, 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다. 컴포넌트는 전달받은 Props에 따라 표시하는 스타일과 내용을 변경한다. Props 학습 준비 먼저 이전 포스팅에서 계속 작업하던 폴더에 ColoredMessage라는 이름으로 컴포넌트를 만들고, 아래 코드를 작성해 준다. 🔽 ColoredMessage.js export const ColoredMessage = () => { const contentStyle = { color : "red", fontSize : "20px" }; return 안녕하세요! }; 🔽 ColoredMessage 임포트 import { ColoredMessage } fr..

[React.js] 이벤트와 스타일

리액트에서 이벤트를 실행하는 방법과 스타일을 적용하는 방법을 배워보자.😊 이벤트 취급 방법 리액트에서는 이벤트 등을 캐멀 케이스로 작성한다. 💙 캐멀 케이스 표기법 onclick ❌ onClick ⭕ onchange ❌ onChange ⭕ 그리고 JSX에 작성되어 있는 HTML과 같은 태그 안(return 이후 등)에서는 { }로 감싸서 자바스크립트를 작성한다. 이를 바탕으로 버튼을 클릭했을 때 alert가 실행되는 기능을 구현하면 다음과 같다. 🔽 alert 기능 구현 // App.js export const App = () => { // 버튼 클릭 시 실행되는 함수 정의 const onClickButton = () => { alert(); }; return ( Hello! 안녕하세요! 버튼 ); };..

[React.js] JSX 표기법 / 컴포넌트 사용 방법

JSX 표기법 리액트는 JSX 표기법을 사용한다. JSX는 영어로 다음과 같은 의미를 갖고 있다. A syntax extension jo JavaScript. 문장을 그대로 해석해 보면 자바스크립트의 확장 문법이라는 뜻이다. 그럼 문법을 어떻게 확장한 것일까? JSX는 JavaSciprt와 XML/HTML을 합친 것이라고 보면 된다. JSX의 X는 extension의 X로 볼 수도 있지만 실제로는 JavaScript and XML의 앞 글자를 따서 JSX라고 부르는 것이다. 먼저 리액트 프로젝트를 만든 뒤 src 폴더 안에 있는 파일을 모두 삭제하고, index.js를 새로 만든다. index.js에 리액트 기반을 작성하면서 JSX에 관해 알아보자. 먼저 react-dom 라이브러리에서 ReactDom이..

[React.js] React 란? / 리액트 개발 시작하기

React (리액트) 란? 리액트(React, React.js 또는 ReactJS)는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다. 💬 라이브러리 : 자주 사용되는 기능을 정리해 모아 놓은 것 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트의 특징 1. Component-Based (컴포넌트 기반) 리액트는 컴포넌트 기반의 UI 라이브러리이다. 컴포넌트란 독립적으로 존재할 수 있는 UI요소, 페이지에서 화면을 이루고 있는 구성 요소를 의미..

[JavaScript] Truthy & Falsy / 단락회로 평가

Truthy & Falsy Trutyh(참 같은 값)는 boolean에서 true로 평가되는 값 Falsy(거짓 같은 값)는 boolean에서 false로 평가되는 값 Falsy값 이외의 모든 값들은 모두 true로 평가되는 Trutyh값이기 때문에, Falsy을 알아두자! Truthy true {} (빈 객체) [] (빈 배열) function () {} (빈 함수) Falsy false undefined null 0 -0 NaN '' (빈 문자열) 위에 명시된 값들을 제외한 모든 값들은 Truthy이다. 단락회로 평가 논리곱(&&), 논리합(||) 연산자는 왼쪽부터 오른쪽으로 평가를 진행하는데, 표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. 이를 '단락회로 평가..

[Node.js] 윈도우10 Node.js 설치하기

Node.js 란? Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. Node.js는 JavaScript의 런타임이면서 런타임 환경이다. 다시 설명하면 JavaScript 프로그램이 실행되고 있는 동안의 동작이 런타임이고 JavaScirpt가 실행되는 동안 환경이 런타임 환경이다. 오해받는 경우가 많지만, Node.js는 Web 서버도 아니며 Web 프레임워크도 아니다. JavaScript 실행환경일 뿐이다. Windows에 Python을 설치하면 python.exe가 생기는 것처럼, Node.js를 설치하면 node.exe가 생긴다. Python 코드를 실행하는 애플리케이션인 것처럼 node.exe는 JavaScript 코드를 실행할 애플리케이션(즉, JavaScri..

[JavaScript] 함수 정의

자바스크립트에서 함수를 생성하는 방법은 3가지가 있다. 이들 방식은 모두 같은 함수를 생성하지만, 각각의 방식에 따라 함수 동작이 미묘하게 차이가 난다. - 함수 선언식 (function statement) - 함수 표현식 (function expression) - Function() 생성자 함수 각각의 방식에 대해 알아보기 전에 함수 선언문과 함수 표현식에서 함수를 생성하는 함수 리터럴의 개념을 먼저 살펴보자. 함수 리터럴 (익명 함수) 자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 때문에 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼, 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다. 함수 리터럴은 크게 네 부분으로 구성된다. function add (x, y) {..

[JavaScript] 연산자

자바스크립트 연산자의 대부분은 다른 언어와 유사하다. 몇 가지 주의해야 할 연산자들에 대해서 간단히 살펴보자. + 연산자 - 더하기 연산 - 문자열 연결 연산 - 두 연산자가 모두 숫자일 경우에만 더하기 연산이 수행되고, 나머지는 문자열 연결 연산이 수행된다. let add1 = 1 + 2; let add2 = "my " + "string"; let add3 = 1 + "string"; let add4 = "string" + 2; console.log(add1); // 3 console.log(add2); // my string console.log(add3); // 1string console.log(add4); // string2 typeof 연산자 - 피연산자의 타입을 문자열 형태로 리턴한다. //..