UUNG's Devlog

리액트를 처음부터 다시 공부하면서 create-react-app 없이 바닥부터 바벨과 웹팩 설정을 하면서 생긴 오류에 대해서 포스팅해보겠다. 시행착오의 과정이 궁금하지 않은 분들은 밑의 를 확인해주세요! 바벨을 실행하는 여러가지 방법 중 웹팩에서 babel-loader로 실행하는데 생긴 오류이다. 오류는 다음과 같은데, JSX의 태그 문법이 변환이 되지 않아 에러가 나는 상황이다. 구글링을 했을 때 여러 해결방법을 타고 타서 돌아돌아 해결했는데 이 부분을 정리해고자 한다. 에러를 자세히 읽었을때 @babel/preset-react를 설치했음에도 불구하고 저 라이브러리를 npm이 제대로 찾지 못해서 생기는 이슈 같았다. 해결 방법을 찾아보니 1).babelrc 생성 2)babel.config.js 생성 3..

http 모듈로 서버 만들기 node는 서버가 아니다 -> js 실행기일 뿐, 서버 실행 코드를 작동시켜줄 뿐. 서버와 클라이언트는 요청과 응답을 http 프로토콜(규약)에 맞게 주고받음 코드가 바뀌면 서버는 재시작 되어야 함 (지켜보고 있다가 특정 조건에 재시작하게끔 실행코드를 짜둘 수는 있다) 1. http 요청에 응답하는 노드 서버 createServer 로 요청 이벤트에 대기 콜백함수로 객체로 정보를 받음 ->req: 요청에 관한 정보, res: 응답에 관한 정보 res 객체의 메서드 res.writeHead: (Network Response Headers)응답에 대한 정보를 기록-> (첫번째 인수)http 상태코드, (두번째 인수)응답에 대한 정보로 이루어짐 res.write: 클라이언트로 보낼..

파일 시스템 접근하기 노드에서 fs모듈을 사용하면 파일 시스템에 접근할 수 있다. 즉, 메서드들을 이용해 파일과 폴더의 생성, 삭제, 읽고 쓰는 것을 가능하게 하는 것이다. fs 모듈을 사용하는 순서는 다음과 같다. fs 모듈을 불러온다 파일 경로를 지정한다(node를 실행하는 콘솔 기준으로) readFile 메서드의 결과물은 버퍼이므로 텍스트로 읽어오고 싶으면 toString()을 이용해야 한다. 코드로 확인해보도록 하자! const fs = require('fs'); fs.readFile('./readme.txt', (err, data) => { //노드 모듈에서 콜백 함수 인자가 대부분 에러, 데이터 순이다 if (err) { throw err; } console.log..

async & await 가장 최근에 나온 비동기 처리 패턴 문법으로, callback 함수와 Promise의 단점을 보완해주는 것이 특징인 async / await 문법을 살펴보도록 하겠다. async & await 기본 문법 async function 함수명() { await 비동기(); } 비동기로 실행할 함수 앞에 async 예약어를 붙인다. 함수 내부 로직 중 비동기 처리 코드 앞에 await 을 붙인다. 이때, 이 비동기 처리 로직은 Promise 객체 를 반환한다. (일반적으로 axios와 같은 api 호출 함수이다) 예외 처리 Promise 에서 .catch를 사용했던 것처럼 try catch문을 사용한다. catch로 코드를 실행하다가 발생한 네트워크 오류, 타입 오류 등등과 같은 에러들..

JS 엔진은 동시에 여러가지를 처리할 수 없다. 이에 순서대로 코드를 실행하는 것이 아닌(동기적 실행), 코드의 실행 완료를 기다리지 않고 다음 코드를 먼저 실행하는(비동기적 실행) 것이 가능하도록 한 JS의 설계들을 살펴보도록 하겠다. Callback 함수 첫번째로 JS에서 callback 함수로 비동기적 실행이 가능하다. (콜백함수가 꼭 비동기적으로만 쓰이는 것은 아니다) callback 함수는 다른 함수의 매개변수로 넘겨진 함수를 의미하고, 어떤 이벤트가 발생한 후 이 콜백 함수가 다시 호출되며 실행된다. 함수 안에서 실행되는 함수이기 때문에 보통 익명함수로 작성된다. // 간단한 callback 함수 예시 function printNumber(num){ num(); //callback 함수 } p..

새로 만든 레포에 파일을 푸쉬하려고 하니까 에러가 생겼다. 첫번째 "Updates were rejected because the tip of your current branch is behind" 힌트를 보고, 깃허브 레포를 생성하면서 README.md 파일을 추가해서 에러가 생긴 것 같다는 생각이 들었다. pull을 해보고 push를 하자. pull 을 해도 merge 가 refuse 된다. 문제 원인과 해결방법을 구글링 해보니, 깃허브 레파지토리를 생성할 때, README.md 파일을 생성했기 때문에 발생한 문제가 맞았다. 데이터 유실과 같은 문제가 있을 수 있는 부분 때문에 git에서 처리하지 않도록 에러가 발생하는 것이라 한다. 레포에 처음으로 push 하는거라, 손상될만한 파일들이 없어서 강제로..

관계형 데이터베이스와 서버(with JS) 관계형 데이터베이스란? 관계형 데이터베이스란 key와 value의 간단한 관계를 테이블 형식으로 나타낸 데이터베이스이다. 하나의 데이터베이스 안에는 여러 개의 테이블이 존재한다. 이때의 데이터와 데이터, 혹은 테이블 간의 관계를 표현해주는 것이 관계형 데이터베이스의 특징이다. 관계형 데이터베이스의 구조 tuple(혹은 record라고도 함): 테이블의 행, 데이터 한 건 cardinality: tuple의 개수 attribute: 속성 degree: attribute의 개수 domain: 해당 attribute가 가질 수 있는 값의 집합 Schema(스키마) 데이터베이스의 구조와 제약조건에 관해 전반적인 명세를 기술한 것이다. 간단하게 말하면 데이터베이스 설계도..

웹에서 클라이언트와 서버가 통신할 때에 가장 중요한 것이 보안이라 해도 지나치지 않다. 보안을 위해 웹에서 거치는 인증 절차와 방식을 이번 시간에 알아보도록 하겠다. HTTP의 약점 지난 시간에 다뤘던 HTTP의 특징을 다시 살펴보자. Connectless와 Stateless 가 대표적인 큰 특징인데, 이러한 특징들로 인해 서버는 클라이언트의 이전 상태를 알 수 없다. 이 말은 곧, 데이터가 유지되지 않는다는 것이다. 데이터가 유지되지 않는다는 것은, 우리가 웹사이트에 로그인을 해도 페이지를 새로고침하면 로그인 상태가 유지되지 않고, 쇼핑몰 사이트에서 장바구니에 상품을 담아도 유지되지 않는다는 것이다. 이렇게 우리는 데이터가 유지되어야 하는 상황들이 몹시 많기 때문에, Cookie와 Session을 이용..