코딩 일지

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..

기본 세팅 코드

기본 설정 세팅 코드 구현 css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; padding:..

기본세팅

목차 - 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 애플리케이..