코딩섬 코딩섬

SQL(Structured Query Language) SQL은 데이터를 보다 쉽게 검색하고 추가, 삭제, 수정 같은 조작을 할 수 있도록 고안된 컴퓨터 언어이다. 또한 관계형 데이터베이스에서 데이터를 조작하고 쿼리하는 표준 수단이다. DML(Data Manipulation Language / 데이터 조작어) 데이터를 조작하기 위해 사용한다. INSERT, UPDATE, DELETE, SELECT 등이 여기에 해당한다. DDL(Data Definition Language / 데이터 정의어) 데이터베이스의 스키마를 정의 하거나 조작하기 위해 사용한다. CREATE, DROP, ALTER 등이 여기에 해당한다. DCL(Data Control Language / 데이터 제어어) 데이터를 제어하는 언어이다. 권..

input 태그의 상태 관리 리액테에서 사용자가 입력을 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보겠습니다. 우리는 components 폴더 하위에 InputSample.js를 만들도록 하겠습니다. 그 다음 우리는 렌더링을 해주기 위해서 App 컴포넌트에 추가해주도록 합니다. 렌더링 한 결과를 보면 위와 같이 렌더링이 된 것을 확인할 수 있습니다. input에 입력하는 값이 하단에 나타나게 하고 input에 입력하는 값이 하단에 나타나게 하고 초기화 버튼을 누르면 input의 값이 비워지도록 구현해보도록 하겠습니다. 이번에도 useStae를 사용하여 onChange라는 이벤트를 사용하여 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데 e.target은 이벤트가 발생한 DOM인 in..

useState 우리가 리액트 컴포넌트를 만들 때 정적인 부분만을 만들었습니다. 즉 동적인 부분이 없다는건 값이 바뀌는 일이 없다와 의미가 같습니다. 우리가 이번에 만들 컴포넌트는 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때 useState를 사용하여 이 값을 바꾸게 되고 이것이 바로 리액트의 Hooks 중 하나입니다. 우리는 useState를 알아보기 위하여 components 폴더 하위에 Counter.js를 만들어봅니다. 코드를 보면 알 수 있듯이 +1 버튼을 누르면 값이 증가하고 -1을 누르면 값이 내려갑니다. 이것을 App.js에 추가하고 확인해보도록 하겠습니다. 우리가 의도한대로 잘 뜨는 것을 확인할 수 있습니다. 이벤트 설정 이제 우리는 Counter 컴포넌트에서 버튼이 클릭..

조건부 렌더링 조건부 렌더링이란 특정 조건에 따라 다른 결과물을 랜더링 하는 것을 의미합니다. 예를 들어 App.js에서 Hello.js를 사용할 때 isSpecial이라는 props를 설정하면 Hello.js에 isSpecial의 값이 true라면 굵은 글씨의 True가 나오고 false라면 굵은 글씨의 false가 나오게 됩니다. 조건부 렌더링은 삼항 연산자를 사용하면 그 값에 따라서 다른 방식으로 의도할 수 있습니다. * 참고로 JSX에서 null, false, undefiend를 렌더링하게 되면 아무것도 나타나지 않게 됩니다. 굳이 삼항 연산자를 사용하지 않고 둘 다 만족해야만 &&를 사용하여 처리하면 더욱 간편해집니다. {isSpecial && True } props 값 설정을 생략할 경우 위의..

props props는 properties의 줄임말로 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용합니다. props의 사용법 위와 같은 코드가 있다고 할 때 우리는 name이라는 값을 Hello 컴포넌트에서 사용을 하고 싶을 때는 아래와 같이 사용합니다. App.js에서 Hello.js에 props에 값을 담아 name이라는 key와 "react"라는 value를 보내는 것입니다. 우리는 Hello.js에서 props를 파라미터로 받아오기 때문에 그냥 key로 해당하는 값을 받아올 수 있습니다. 그러면 여러개의 props를 보낼 때는 어떻게 해야 할까요? 안녕하세요 {props.name} 하나씩 불러와서 사용하면 됩니다. 자바스크립트의 객체는 Key로 그 값을 꺼내는 것과 같은 방..

JSX JSX는 리액트에서 생김새를 정의할 때 사용하는 문법입니다. 얼핏보면 HTML 같지만 실제로는 JavaScript입니다. 리액트 컴포넌트에서 XML 형태로 코드를 작성하면 바벨이 JSX를 JavaScript로 변환해줍니다. * 바벨은 자바스크립트의 문법을 확장해주는 도구입니다. 최신 문법을 구형 브라우저에서도 실행할 수 있도록 해줍니다. JSX가 JavaScript로 제대로 변환이 되려면 지켜주어야 하는 몇가지 규칙이 있습니다. 1. 꼭 닫혀야 하는 태그 태그는 꼭 닫혀야 합니다. 만약 라면 당연히 에러가 발생할 것입니다. 하지만 알아야 할 것이 HTML을 보면 또는 등 열고 닫는 것이 하나로 되는 태그가 있지만 리액트는 XML 방식이기 때문에 열면 무조건 닫아야 합니다. * 열고 닫히는 태그 즉..

Hello.js 생성 프로젝트에서 src 폴더 하위에 components라는 폴더를 만든 후 아래의 코드를 작성합니다. 리액트 컴포넌트를 만들 땐 "import React from 'react';를 통해 리액트를 불러와주어야 합니다. 리액트는 컴포넌트는 함수형태로 작성 할 수도 있고 클래스 형태로도 작성할 수 도 있습니다. 리액트 컴포넌트는 XML 형식의 값을 반환해줄 수 있습니다. 이를 JSX라고 부릅니다. 코드의 최하단을 보면 "export default hello;"라는 코드가 있고 hello라는 명의 컴포넌트를 내보내겠다는 의미입니다. 이export를 하게되면 다른 컴포넌트에서 불러와서 사용할 수 있습니다. 갖고와서 사용해보겠습니다. 우리는 React에서 화면이 되는 App.js에서 불러오겠습니다..

Node.js Webpack과 Babel과 같은 도구들이 자바스크립트 런타임인 Node.js 기반으로 만들어져 있기 때문에 해당 도구들을 사용하기 위하여 Node.js를 설치합니다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Yarn Yarn은 조금 개선된 버전의 npm이라고 생각할 수 있습니다. npm은 Node.js를 설치하게 될 때 같이 딸려오게 되는 패키지 매니저 도구인데 프로젝트에서 사용하는 라이브러리를 설치하고, 해당 라이브러리 버전 관리를 해줍니다. 우리가 Yarn을 사용하는 이유는 앞서 말한 것처럼 더 나은 속도, 더 나은 캐싱 ..