코딩 일지

목차 - props - - 기본 세팅 props Props는 컴포넌트의 속성값이다. 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다. 예시 코드 html 엘리먼트

목차 - 리액트란? - 라이브러리, 프레임워크 차이 - 리액트 특징 - 컴포넌트(Component)란? - 리액트 환경 기본 세팅 - 리액트 React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 라이브러리와 프레임 워크의 차이 라이브러리: 폴더 구조가 없는 모듈 프레임워크: 폴더 구조가 있는 모듈 React의 특징 1. Data Flow 2. Component 기반 구조 3. Virtual Dom 4. Props and State 5. JSX 이번 글에서는 Component에 대해서만 가볍게 알아볼 것이다. Component란? Component는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 ..

웹 개발시, 자바스크립트로 외부 서버의 경로로 ajax요청(axios, fetch 등) 날리면 에러가 나면서 요청이 실패한다. (front 서버 도메인과 back 서버 도메인이 다른 경우) 웹 브라우저 콘솔에 아래와 같은 에러가 찍힌다. 필자는 크롬을 사용하기 때문에, 크롬을 예시로 들겠음. No Access-Control-Allow-Origin header is present on the requested resource. Origin ‘[요청한 도메인] is therefore not allowed access. 외부로 요청이 안 되는 것은 자바스크립트 엔진 표준 스펙에 동일 출처 정책(same-origin policy)이라는 보안 규칙이 있기 때문이다. Same Origin Policy [동일 출처 ..

목차 - 자동로그인이 가능해지는 과정 - JWT 토큰 생성 코드 1. jwt.js 파일 - 토큰생성 2. server.js파일 - 서버 연결 및 토큰으로 로그인 3. auth.js 파일 - 사용자 인증 - JWT 만료 자동로그인이 가능해지는 과정 사용자 회원가입 시, 아이디와 비밀번호, 주소, 번호 등 여러 정보가 생성된다. 이 때 사용자의 비밀번호를 암호화 해서 Database에 저장한다. 나머지 정보도 같이 DB에 저장된다. 사용자가 로그인 시, 아이디와 비밀번호 입력한다. 사용자가 입력한 비밀번호를 암호화 한 후, DB의 암호화된 비밀번호와 비교한다. 일치하면 로그인 성공, 일치하지 않으면 로그인 실패. 로그인에 성공한다면 access_token을 사용자 컴퓨터(클라이언트)에 전송(f12 애플리케이..

목차 -Primary key -not null -auto_increment Primary key란? 데이터베이스 테이블의 설계 (데이터베이스)를 고유하게 식별하는 키 레코드를 유일(unique)하게 식별할수 있는 컬럼이다.(주민번호, 제품고유번호, 사용자id 등 서로 다른 값을 가져야 하는것이 주요키로 사용된다.) PrimaryKey는 하나의 테이블에 저장된 모든 레코드가 서로 다른 값을 갖는 칼럼이다. 테이블은 PrimaryKey와 함께 ForeignKey를 가질수있다. 관계(RELATION)를 통해 테이블간의 정보를 연결할 수 있다. 하나의 테이블 정보는 다른 테이블의 정보를 구별하는데 쓰일수 있다. ForeignKey를 만들경우에는 하나의 테이블에서 또다른 테이블로 모든 PrimaryKey를 복사해..

목차 - DBMS를 사용하는 이유? - cmd에서 mysql 실행시키기 - DB 생성하기(지정하기) - 테이블 생성하기 - 많이 쓰는 데이터 타입 정리 - Record 입력하기 - 테이블 데이터 UPDATE(수정) , DELETE(삭제) 하기 - 오름차순, 내림차순 정렬 - DATETIME vs TIMESTAMP DBMS를 사용하는 이유? 데이터를 하드디스크에 저장하기 위해서이다. 이 경우, 웹서버와 DB server는 서로 통신해야한다. 여기서 Web server ? (express 라이브러리로 만들어진 서버, node로 연결하는 서버) cmd에서 mysql 실행시키기 mysql -u[로그인 할 사용자 id] -p[password] DB 생성하기(지정하기) mysql이 가동되면, create datab..

목차 - 쿠키(Cookie)란? - 세션(Session)이란? - 쿠키와 세션의 차이 - 미들웨어란? - 라우팅이란? 쿠키란? HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. 쿠키 특징 이름, 값, 만료일(저장기간), 경로 정보로 구성되어 있다. 클라이언트에 총 300개의 쿠키를 저장할 수 있다. 하나의 도메인 당 20개의 쿠키를 가질 수 있다. 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다. 쿠키의 동작 순서 클라이언트가 페이지를 요청한다. (사용자가 웹사이트에 접근) 웹 서..

쿠키 https://bitkunst.tistory.com/entry/Nodejs-express-5-%EC%BF%A0%ED%82%A4cookie Node.js - express (5) 쿠키(cookie) 이번 포스팅에서는 쿠키(cookie)의 개념에 대해 알아보고자 한다. 쿠키란? 쿠키 구현 방식 쿠키 속성 쿠키(cookie)란 HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 bitkunst.tistory.com 오늘 로그인 페이지 만든 과정 아래의 순서대로 전개하겠다. 1. 메인 페이지에서 로그인버튼을 클릭하면, 아이디, 패스워드를 입력하는 로그인 페이지로 이동 2. 아이디, 패스워드를 입력하고 로그인 버튼을 눌러 제출을 하면, 1) "아이디" 님 환영..

send : 텍스트 자체로 응답을 준다.(돌려주는 행위) render : 파일을 가져다가 응답을 준다. 가장 먼저, npm install express nunjucks 해주는 것 잊지말기. 자바스크립트 코드 (HTML 코드는 자바스크립트 코드 끝나고 바로 작성하였다.) const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views',{ express:app, }) express 와 nunjucks를 외부파일에서 끌어와서 변수에 저장해준다. express 와 nunjucks를 세팅해준다. Node.js..

promise는 비동기 처리를 위해 있는 객체이다. 여기서 동기처리, 비동기처리란? 예를 들어, 집안일을 한다고 가정해보자. 동기식 : 세탁기를 돌리고, 빨래가 종료되면 그제서야 바닥에 청소기를 돌린다. 비동기식 : 세탁기를 돌려놓고, 빨래가 돌아가는 동안, 바닥 청소하고 설거지하다가 세탁기가 종료되면 세탁물을 꺼낸다. 즉, 비동기는 코드의 효율성을 극대화 할 수 있는 처리방식이다! 아래의 코드를 보자. setTimeout은 대표적인 비동기식 함수이다!! (일단, 구동은 하는데 백그라운드에 대기만 시켜놓고 작업이 끝나면 실행을 해준다.) const pr = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('hello promise'); },1000)..