무딘붓의 코딩기록

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 리액트 소개 메타에서 개발한 오픈 소스 자바스크립트 라이브러리 SPA (Single Page Application)을 전제로 한다 웹 앱을 만드는 라이브러리 React, Angular, Vue 중 가장 사용자가 많다. 리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것 사용자 정의 태그 부품으로 사용된다 남들에게 공유할 수 있고, 남들의 부품을 사용할 수 있음 거대한 리액트 부품 공유망으로 들어가는 것은 큰 가능성을 열어준다 리액트를 만드는 2가지 방법 클래스(class) 문법 사용 → 이전 강의 참고 함수(function) 문법 사용 :..

링크를 나타내기 위한 방법으로는 이렇게 파란색에 밑줄을 그어 표현하는 것이 가장 일반적이지만, 때로는 디자인을 위해 다른 방법으로 링크를 표현해야하는 경우가 있습니다. 그중에서 링크 뒤에 특정한 기호나 아이콘을 달아서 링크를 표현해 보겠습니다. 한번만 사용할거면 그냥 태그 안에 기호까지 포함해서 링크로 만들어 주면 되지만, 여러번 사용하는 경우 매우 번거로우므로 CSS로 특정 class의 링크 뒤에 기호가 들어가도록 구현하는 방법을 알아보겠습니다. :after 셀렉터(선택자) :after는 가상 클래스(pseudo-class) 셀렉터중 하나로, 지정된 요소 뒷부분에 내용을 넣을 때 사용하는 셀렉터입니다. 사용방법은 다음과 같습니다. a:after { content: '↗️'; } 위와 같이 CSS를 완성..

세션(Session)이란? 간단히 말하면 쿠키보다 더 안전하게 데이터를 저장하는 방식이다. 쿠키는 브라우저에 저장되는 반면 세션은 데이터를 웹 서버에 저장한다. 세션은 각 클라이언트에 부여한 고유 Session ID로 클라이언트를 구분해 해당 클라이언트에 맞는 서비스를 제공한다. express-session 설치와 실행 예시 npm install express-session npm을 이용하여 설치해주면 express에서 세션 기능을 간단하게 사용할 수 있게 된다. var express = require('express') var parseurl = require('parseurl') var session = require('express-session') var app = express() app.use..

쿠키란? 간단히 요약하면, 웹 서버가 브라우저에게 지시하여 사용자 로컬 컴퓨터에 저장하는 4K 이하의 작은 데이터이다. 쿠키는 HTTP가 무상태 프로토콜(바로 이전 요청과 현재 요청이 연결되어 있음을 기억하지 않는 통신)이라는 약점을 보완하기 위해 도입하였으며, name=value 형태로 저장된다. 쿠키 생성 var http = require('http'); var cookie = require('cookie'); http.createServer(function(request,response){ // 쿠키 생성 response.writeHead(200, { 'Set-Cookie':['yummy_cookie=choco','tasty_cookie=strrawberry'] }); response.end('co..

미들웨어(Middleware)란? Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, Express 애플리케이션은 기본적으로 일련의 미들웨어 함수 호출입니다. 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다. 미들웨어 함수는 다음과 같은 태스크를 수행할 수 있습니다. 모든 코드를 실행. 요청 및 응답 오브젝트에 대한 변경을 실행. 요청-응답 주기를 종료. 스택 내의 그 다음 미들웨어 함수를 호출. express 공식 홈페이지의 설명인데, 간단히 요약하면 요청(request)과..

Express란? Express는 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 이다.(공식 홈페이지 설명) 그럼 프레임워크(framework)란 무엇인가? 프레임워크는 라이브러리를 포함하는 상위 개념으로, 무언가를 구현하기 위해 여러 라이브러리가 합쳐진 형태이다. 따라서, 웹 프레임워크는 '웹 서버'를 구현하기 위한 목적으로 만들어진 프레임워크다. 프레임워크와 라이브러리의 차이점은, 라이브러리는 사용자가 (도서관에서 책을 빌리듯이) 필요할때 불러서 사용한다. 하지만 프레임워크는 그 기능이 필요하면 사용자가 정해진 규칙(frame)에 맞춰서 일해야(work) 한다. 요약하자면, Express란 NodeJS를 사용하여 쉽게 웹 서버를 구성할 수 있게 만드는 프레임워크이다. Express 설치 ..

생활코딩 Node.js - MySQL 강의를 듣고 공부한 내용을 정리한 게시글입니다. mysql 모듈 설치 npm install -S mysql -S는 --save로 바꿔 써도 된다. 이것은 package.json의 "dependencies" 부분에 설치된 모듈을 기록한다. 다만, npm 5버전 이후부터는 -S 없이 npm install만 적어도 "dependencies"에 추가가 된다. mysql 모듈 사용법 var mysql = require('mysql2'); // mysql 모듈을 불러온다. // createConnection 메소드의 인자로 전달되는 객체에 자신의 데이터베이스 정보(유저명과 패스워드 등)를 입력 var connection = mysql.createConnection({ host ..

패키지 매니저(패키지 관리자, package manager) 패키지 매니저는 패키지의 설치, 업그레이드, 구성, 제거 과정을 자동화하는 소프트웨어 도구들의 모임이다.여기서 패키지란, 라이브러리나 실행 파일을 포함하는 개념으로, 자바스크립트에서는 수많은 모듈로 구성되어있다. 모듈에 대해서는 아래 글을 참고하자.https://sirius7.tistory.com/43 [Node.js] 3. 모듈 만들기, 불러오기 (export, require)모듈이란? Node.js으로 앱을 개발하기 위해서는 모듈 시스템을 사용한다. 이때, 모듈이란 ‘미리 만들어둔 함수들의 집합’이라고 할 수 있다. Node.js에서의 모듈은 2가지(코어 모듈, 파일 모듈)sirius7.tistory.com Node.js의 패키지 매니저로는..

CRUD CRUD란 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 의 약자로, 사용자 인터페이스가 갖추어야 할 기능을 말한다. Node.js로 CRUD 구현 아래 소스코드는 생활코딩 강의 WEB2 - Node.js (링크) 에서 사용한 것에서 디자인을 수정한 것이다. var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); var path = require('path'); var template = { HTML:function(title, list, body, control){ return ` Node.js 게시판 구현 글 목록 $..

POST GET과 POST는 네트워크의 전송 방식이다. GET은 어떠한 데이터를 전달해주는 방식이라면, POST는 데이터의 값을 변경하는 방식이다. POST방식으로 데이터 보내기 [HTML] 먼저 입력값을 받아서 데이터를 보내기 위한 HTML 폼을 만들어보자 form에서 데이터를 보내는 방식으로 post를 사용하기 위해 method="post"를 작성한다. POST방식으로 전송된 데이터 받기 [Node.js] var http = require('http'); var url = require('url'); var app = http.createServer(function (request, response) { var _url = request.url; var pathname = url.parse(_url,..