Torch for new way

tic-tac-toe 게임을 만들 때는 html 문서에 style element를 넣고 그 안에 스타일링 관련 코드를 작성함으로써 생성되는 element들을 스타일링할 수 있었다. 그런데 이 방식 외에도 외부 CSS 파일을 import하거나, jsx 파일에서 스타일링 관련 코드를 작성해 입히는 방법도 사용할 수 있어야 한다. 지난번에 구축한 개발 환경을 다시 사용해 이번엔 몇 가지 element를 생성하고, 이를 스타일링하는 법에 대해 알아보자. 1. 외부 CSS 파일 import하기 우선 src 폴더 안에 assets 폴더를 하나 더 생성하고 style1.css, style2.css 2개의 css 파일을 만들자. 안에는 각각 다음과 같이 작성한다. /* practice/src/assets/style1...

Webpack에 대해 알아보자. 파일, 코드의 양이 많아지면서 개발자들은 코드들을 분리해 (모듈화) 다른 파일에 나누고, import, require 등을 통해 다른 파일의 데이터를 가져오는 식으로 작업을 능률화해왔다. 이를 한 단계 더 발전시킨 것이 webpack이다. webpack은 이런 파편화된 데이터들을 통합하는 것을 도와준다. 이는 기본적으로 nodeJS 환경에서 돌아가기 때문에 npm을 이용해 간단하게 설치할 수 있다. 일단 간단한 js 파일을 만들고 react, webpack을 어떤 식으로 사용할 수 있는지에 대해 간단한 예제를 들어 알아보자. 작업을 진행할 폴더를 하나 만든다. (여기서는 practice라고 명명) npm init -y npm i react react-dom npm i -D..

지금까지 한 걸 중간 정리하는 느낌으로 리액트 공식 사이트 자습서에 나온 tictactoe 게임을 만들어보자. 단계별로 이게 뭘 하는건지, 어떤 원리가 사용되었는지, 데이터의 흐름은 어떻게 되는지에 주의하면서 따라가면 될 것 같다. 전체 컴포넌트는 3가지 레벨으로 나눌 수 있는데, 컴포넌트 안에 게임판인 , 그 안에 각각의 정사각형을 이루는 컴포넌트가 있다. 우선 html을 셋업해주자. hello가 잘 나오는지 확인되었으면 컴포넌트의 내부 값 hello를 로 바꿔주고 Board 컴포넌트를 다음과 같이 작성한다. 이렇게 컴포넌트를 넣고 불러오면 3x3 의 게임판이 만들어진 것이다. 이 는 다시 3x3 등분 이 될 예정인데, 이는 함수를 하나 선언해 그 함수를 호출하는 방식으로 이루어진다. 다음과 같이 Bo..

CSS로 스타일링을 진행할 때, 일괄적으로 모든 요소들을 동일하게 스타일링하는 경우보다 우리가 원하는 특정 요소만 선택해서 그 요소만을 스타일링 하고 싶은 경우가 많을 것이다. 이 때, css에게 어떤 요소를 스타일링하고 싶은지 구체적으로 특정해주고 싶을 때 사용하는 것이 바로 선택자(selector)이다. 이 장에서는 class 선택자, ID 선택자, 유사 class 등 특정 요소를 선택해 스타일링하는 방법을 알아볼 것이다. 5.1 Set up 다음과 같이 html, css를 생성해주자. CSS selector CSS 선택자는 개별 html 요소들을 선택할 수 있게 만들어준다. 이 선택자는 웹 페이지의 어떤 box도 선택할 수 있게 해준다는 점에 매우 유용하다. 시간이 되면 Interneting Is ..

React에서 데이터가 변하면 렌더링도 바뀌어야한다. 그런데 데이터는 객체로 전달이 된다. 이 객체의 변화를 컴퓨터가 인식하도록 할 수 있어야 렌더링을 바꿀 수 있는데, 이 글에서는 이에 대해 몇 가지 예시를 들어 공부해보도록 한다. 다음과 같이 html을 작성해보자. 안에 component를 넣고 그 안에 button element을 넣었다. button element에는 click시 발동하는 알람을 세팅해두었다. 그런데 이 html을 브라우저에서 열어보면 클릭을 안했는데도 불러오자마자 알람이 뜨는 것을 알 수 있다. 이는 브라우저가 html을 그리는 과정에서 함수가 실행되기 때문이다. 이를 해결하려면 새 함수를 만들어서 해당하는 함수를 감싸버리는 방법이 있다. 함수를 선언만 된 상태로 바꿔준다고 생각..

지난 번에 이어서 Class Component 에 대해 계속 알아보자. 우선 다시 한 번 Class Component를 이용해 html element를 생성해보자. 1. Class component를 이용한 html element 생성 React.createElement의 인자는 순서대로 '생성할 element', '그 element의 attribute', 'element의 value' 이다. 이 html을 브라우저로 열어보면 hello라는 텍스트를 가지고 지정한 value, name, class를 가진 div가 생성되었음을 볼 수 있다. 가독성을 위해 다음과 같이 변수를 선언해 React.createElement를 밖으로 빼주자. 이제 input element를 방금 만든 div안에 넣어서 생성해주는 ..

CSS box model이란 인터넷 웹 사이트가 어떻게 렌더링 될 것인지를 결정하는 규칙의 집합이라고 볼 수 있다. 여기서부터 좀 본격적인 페이지의 layout을 배운다. CSS는 HTML 문서의 각 element들을 각각 다른 성질을 가진 box로 취급해 페이지 어디에 나타날 것인지를 결정한다. Ch 03까지는 단순히 하나 뒤에 하나, 하나 뒤에 하나를 쭉 늘어놓는 방식이었지만 이젠 그러지 말고 정말 우리가 접속하는 웹 페이지처럼 그럴싸한 모양이 나도록 웹 페이지를 구성해보자. 이제 padding, border block, line 등 CSS Box model의 기본적인 개념부터 공부해보자. 4-1 Set up 다음과 같이 html 문서를 작성해보자. Headings (h1, h2... h6) 는 bl..

1. intro React에 대해 알아보자. react는 기본적으로 SPA, single page app을 구현하기 위해 사용하는 프레임워크이다. 기존 프론트앤드 개발을 훨씬 쉽게 만들어 주는데 그 의의가 있다. 기존까지 배워왔던 js는 데이터가 변할 때마다 렌더링을 변형해야 했다. 이 때 데이터의 변화에 대응해 어떤 변화를 (사용자에게 보이는) 줄지를 생각하는 과정이 필요했는데, facebook의 개발자들은 그냥 기존 뷰를 제거하고 처음부터 새로 렌더링 하는 방식을 선택했다. 이를 최적화해 최대한의 성능을 뽑아낼 수 있도록 한 것이 react이다. 1. react react를 이용해 간단한 버튼을 만들어보자. 우선 head 부분에 react에 대한 script를 추가해주고 코드를 작성한다. (axios..

이제 게시판 관련된 기능들을 구현해보자. 게시판에 꼭 필요한 페이지는 글 리스트, 글 보기, 글 쓰기, 글 수정 페이지 4개 정도가 있는데, 각각의 라우터와 미들웨어를 작성해준다. 지난 번 user의 라우터를 분리한 것과 동일한 방법으로 작성해주면 된다. 1. 라우터, html 작성 /* front/routes/index.js */ const express = require('express') const router = express.Router() const userRouter = require('./user/index.js') const boardRouter = require('./board/index.js') // 추가 router.use('/user', userRouter) router.use('..

지금까지 만든 라우터들을 분리하고 로그인 여부에 따라 메인 화면이 달라지도록 코드를 살짝 정리해보자. 1. 라우터 분리 지금까지 만든 사용자 관련 라우터들을 server.js 에서 빼서 따로 모아두자. 이렇게 코드들을 모듈화해 분리해두면 나중에 서버를 관리하기 더 편해질 것이다. /* front/server.js */ const express = require('express') const nunjucks = require('nunjucks') const app = express() app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.get('/', (req, res) => { res.render('main.html'..

저번에 했던 회원 가입 기능에 이어 이젠 로그인 기능을 구현해보도록 하자. 1. 사용자가 입력한 아이디, 비밀번호를 프론트에서 백엔드 서버로 보낸다. 2. 백엔드 서버에서 받은 id, pw 를 DB로 보내 일치하는 데이터가 있는지 비교한다. 3.1 일치하는 데이터가 있다면 로그인에 성공한다 4. jwt를 생성, 쿠키화해서 브라우저에 준다. 3.2 일치하는 데이터가 없다면 에러 메시지를 출력한다. 1. intro 다음과 같이 login.html을 작성한다. /* front/views/login.html */ 2. 로그인 기능 구현 2.1 입력한 데이터를 프론트에서 백 엔드 서버로 제출 login.html에서 입력한 정보를 백 엔드 서버로 전송하는 script를 추가해준다. /* front/view/logi..

지금까지 배운 보안(jwt , 쿠키), 비동기 통신 (ajax), DB(mysql, pool) 을 활용해 간단한 회원가입과 로그인, 게시판 기능이 있는 웹 서버를 만들어보자. 1. 우선 DB에 게시글과 회원들의 정보 틀 (db, table)을 만들어 줄 것이고, 2. 사용자가 회원 가입을 하면 아이디가 중복되는지 등을 검사하고, 문제가 없을 경우, 사용자가 입력한 정보를 DB에 추가할 것이다. 3. 가입한 사용자가 로그인을 시도할 경우, 입력한 id, pw와 일치하는 db 내의 정보를 찾고 일치하는 정보가 있다면 로그인에 성공, 그렇지 않으면 실패하게 된다. 4. 로그인에 성공할 경우, jwt를 이용해 암호화를 거친 쿠키를 생성해 주고, 이 후 게시판에 관련된 웹 페이지를 만들어 줄 때 쿠키를 검증 한 ..

파일을 업로드 하는 방법에 대해 알아보자. 우선 하나의 파일을 올리는 것부터 시작해서 비동기적으로 업로드를 진행하는 방법, 파일 여러 개를 올리는 방법을 알아볼 것이다. 0. 배경지식 우선 알고 시작하면 좋은게 있다. 파일의 경로, 확장자 등에 대한 처리를 쉽게 해주는 방법인데, nodejs의 내장 라이브러리 중 path가 있다. 파일을 업로드 하기위해서는 우선 그 파일을 어디 올릴건지, 확장자가 뭔지, 파일명은 뭔지 등을 다 컴퓨터에 인식시켜줄 필요가 있고, 이 인식을 쉽게하도록 도와주는게 path 라이브러리이다. 몇 가지 사용 예시를 알아보자. path.dirname(filePath) : 디렉토리 추출 후 출력 console.log(path.dirname('/home/sila/work/sila.js'..

지금까지 배운 서버와 사용자간의 요청, 응답을 위해서는 한 페이지를 통째로 다시 불러와야 하는 불편함이 있었다. 이를 해결하기 위해 나온 것이 ajax (Asynchronous JavaScript And XML) 이다. ajax는 웹 페이지의 프론트와 백 엔드 요소를 분리한다. 이후 간단한 요청, 응답을 주고받을 일이 생기면 JS를 실행해 서버에 (주로 백 엔드를 담당하는) 요청을 보내고, 응답을 받아와 정해진 형식 (HTML, CSS 설정)대로 렌더링해준다. 이를 코드를 작성해 구현하는 방법은 여러가지가 있지만 여기서는 axios (외부 라이브러리)를 사용하는 방법만을 다룬다. 만약 프론트와 백 엔드를 담당하는 서버가 나뉘어져 있다면 CORS (Cross Origin Resource Sharing)이 ..

1. Intro 지난 글에 이어서 JWT (JSON Web Token)에 대해 알아보자. 지금까지 배운 로그인 방식에는 세션과 쿠키가 있다. 서버는 부담을 줄이기 위해 세션 정보를 쿠키에 담아 브라우저에 전달하고, 브라우저는 이 쿠키를 요청마다 제시함으로써 허용된 사용자라는 것을 증명한다. 그런데 문제는 여기서 쿠키가 조작이 가능하다는 것이다. 이걸 아무나 위조해서 들고다니는 것을 막기 위해 전 글에서 배운 해시가 사용된다. 구체적으로 어떤 식으로 그 일이 일어나는지 직접 코드를 작성하며 알아보자. 2. JWT (JSON Web Token) 2.1 header, payload encoding 이름에서도 대강 짐작할 수 있는 것 처럼 웹에서 사용하는 토큰인데, JSON 형태이다. 이를 메소드를 통해 문자열..