개발일기

0. 먼저 Express 웹서버를 띄울 곳에 폴더를 만든다. mkdir express-server-tutorial cd express-server-tutorial 1. 패키지 매니저를 통한 express 설치 npm install express -d 2. express.js 파일을 생성한 후, 방금 설치한 express 모듈을 require를 통해 불러온다. const express = require('express'); const app = express(); require는 import와 같은 역할을 한다. require가 사용하기 어색하여(?) import 를 쓰고자 한다면 babel을 설치한 후, 추가적인 설정을 한 후, 사용하면 된다. import express from 'express'; //..

Javascript의 변수 선언 방법은 var, let, const가 있다. 변수의 선언 방식 var test1 = "변수1"; let test2 = "변수2"; const test3 = "변수3"; var var test1 = "테스트변수1"; console.log(test1); // 테스트변수1 var test1 = "다른 테스트변수1"; console.log(test1); // 다른 테스트변수1 var는 같은 변수명으로 변수를 한 번 더 선언하게 되면 에러없이 다른 변수값이 출력된다. 보기에는 편해보일지라도, 나중에 자바스크립트 소스 코드의 양이 많아지게 되면 변수의 값이 의도치 않은 곳에서 변수값이 바뀌거나, 적절한 곳에 변수를 사용했을 때, 다른 값이 나온느 등의 문제점이 발생할 수 있다. le..

컴포넌트란? 컴포넌트란, 기능별로 부분부분 잘게 나눠놓은 조각을 뜻한다. 리액트는 컴포넌트 기반의 라이브러리다. 하나의 프로젝트를 구성할 때, 여러개의 컴포넌트들로 화면을 구성한다. 로그인화면을 구성할 때, 아이디 입력칸, 비밀번호 입력칸, 로그인 버튼, 회원가입 버튼 등의 요소가 필요하다. 이러한 각각의 요소가 컴포넌트로써, 여러개의 컴포넌트를 결합하여 하나의 화면을 구성한다. 구성방법 아이디, 비밀번호 입력칸 const AuthBlock = () => ( return ( ); ); export default AuthBlock; 로그인버튼 const AuthButton = () => { return ( ); }; export default AuthButton; 아이디, 비밀번호 입력 컴포넌트와 로그인버..

0. JSX란? JSX란 JavaScript eXtension의 줄임말로써 HTML태그 (div, h1, h2 등)들을 자바스크립트 소스코드 안에 사용하는 것을 뜻한다. JSX로 작성된 코드들은 빌드될 때, Babel이 자바스크립트 코드로 변환시켜준다. 1. 장점 XML형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다. createElement등의 태그들을 만드는 문법을 사용하지 않고 직접 태그들을 선언하기에 코드의 양이 감소한다 2. 특징 및 유의점 리액트와 궁합이 잘맞기에 함께 사용하는 것이 권장된다. 변수 선언 또는 출력시, {}로 변수를 감싸줘야한다. class와 for속성 대신, className, htmlFor라는 속성으로 이름이 바뀐다. 처럼 태그가 닫혀있지 않는 경우에는 오류가 ..

0. 쿼리 빌더란? 개념 : 데이터베이스의 쿼리를 직접입력하는 것보다 간단한 방법으로 데이터베이스 안에 있는 내용을 조작할 수 있다. 장점 : 복잡한 쿼리문을 간단하게 작성할 수 있다. SQL구문이 아닌 메서드를 활용하여 작성하는 것이기 때문에 입문 난이도가 낮다. 단점 : JOIN 등의 복잡한 쿼리문을 작성할 때, 활용하기 어렵다. SQL 프로시저를 활용하는 상황일 때, ORM을 활용하기 어렵다. -- 기본 활용법 -- DB::table('table_name') $modelName:: table의 파라미터로 테이블명을 입력하여 사용하는 방법과 아랫줄처럼 생성된 모델객체를 활용하여 테이블을 사용할 수 있다. 모델 객체를 활용하기 위해서는 모델을 따로 생성해줘야 한다. 1. Select DB::table(..

지난 포스팅에 이어 블레이드 템플릿의 조건문에 대해 알아보겠다. 1. @if 대부분의 언어들과 조건을 지정하는 방법이 동일하다. @if 뒤에 조건을 지정한 후, 조건에 부합할 때 실행할 명령어들을 다음 줄에 서술하면 된다. 2. @elseif if 조건을 충족시키지 못했을 경우, 그에 대한 대안적인 조건을 지정하는 것이다. 예를 들어 number라는 변수의 값이 1이 아닌 3일 경우, if조건을 충족하지 못한다. 그렇기 때문에 다음 조건문은 elseif로 이동하여 조건검사를 진행하게 된다. 3. @else @if와 @elseif 조건이 모두 일치하지 않은 경우, 실행되는 부분이다. 하지만 그 전에 선언되었던 if와 elseif 중에 충족하는 것이 있으면 else를 실행시키지 않는다. 4. @endif @..

지난 포스팅에 이어 블레이드 템플릿의 반복문에 대해 알아보겠다. 1. @for 템플릿엔진이 아닌 프로그래밍언어를 통해 for문을 사용할 때는 이런 식으로, 초기 변수값과 증감값, 반복범위를 지정해준 후, 한 번 실행될 때 마다 실행될 코드를 작성하는 방식으로 반복문을 작성한다. 블레이드 템플릿에서도 for 반복문을 사용하는 방식은 이와 비슷하다. @for($i=0; $i < 10; $i++) good @endfor 아마 이미 눈치를 챘을 것이다. 명령어 앞에 @만 붙이면 된다는 것을 말이다. 하지만 중요한 것은 @endfor도 붙여줘야 한다는 것이다. 다른 언어의 for문과 다른점으로는 {} 중괄호가 붙어있지 않다는 것이다. 중괄호는 여러줄을 반복할 때, 반복문의 시작과 끝을 명시해주는 것이지만 블레이드..

지난번 포스팅은 라라벨 프레임워크 관련하여 포스팅을 다루었다. 요번 포스팅에는 라라벨 프레임워크에서 제공해주는 템플릿 엔진인 블레이드 템플릿에 대해 포스팅하고자 한다. 리액트, 뷰 등의 화면쪽을 담당하는 다른 언어를 사용해도 되지만, 자체적으로 제공되는 템플릿엔진을 사용하는 이유는 화면 코드안에서 php코드를 활용할 수 있다는 장점이 존재하기 때문이다. 0. 파일 생성법 기존 php파일은 index.php와 같이 파일명을 지정한 후 생성하게 된다. 하지만 블레이드 템플릿은 index.blade.php라는 형식으로 지정을 하게 된다. 기존 php파일에서 blade라는 문자가 추가된다. 1. @section과 @yield 블레이드 템플릿은 레이아웃을 나눌 수 있다. 레이아웃을 나눠 여러개의 컴포넌트로 구성하..