희락코딩

Express Express는 Node.js를 빠르고 간결하게 사용하기 위해 만들어진 웹 프레임워크입니다! 많이 사용하고 있는 프레임워크이니 꼭 알고 넘어 갑시다!@ Express 설치 $ npm install express https://expressjs.com/ko/starter/installing.html Express 설치 설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정하십시오. $ mkdir myapp $ cd myapp npm init 명령을 이용하여 애플 expressjs.com Express 사용 1 2 3 4 5 6 7 8 9 10 // express 기본 구조 const express = require..

#1. CORS (Cross - Origin Resoure Sharing)가 나오게 된 배경 예전에 웹사이트를 만든다고 하면 상당수가 아래와 같은 구조였습니다. 유저가 웹 브라우저 주소창에 주소값을 입력 하면 해당하는 서버로 요청을 보내게 됩니다. 그러면 서버에서는 응답을 할 때 HTML페이지를 반환합니다. 즉 하나의 서버에서 비즈니스 로직과 HTML페이지 빌드를 같이 하는게 일반적이였습니다. 이걸 다시 말하면 같은 도메인에서 일어나게 된거죠 하지만 이러한 구조는 CSRF나 XSS 공격을 받기 일수 였습니다. 즉 개인정보 유출, 피싱 사이트와 같이 보안상 악의적인 행동으로 인해서 도메인이 다르면 요청을 주고 받을수 없도록 웹브라우저에서 기본 정책을 시행하게 됩니다. 하지만 시간이 지나 웹사이트에서 할 수..

개발 공부 50일차 2021-05-24 (HTTP 네트워크 실습, 포스트맨 api활용) 오늘 http에 대해서 다시 한번 학습을 하였고 브라우저가 어떤식으로 요청하고 응답하는지 어느정도 원리와 개념을 파악하게 되었다! 또 한 포스트맨을 활용하여 실제 서버를 get을 통해 데이터를 받아 오고 post를 통해 텍스트를 추가 생성하는 작업까지 하였다!! 특히 무료로 api를 제공해주는 날씨 사이트에 들어가서 데이터를 받아올때 키와 벨류값을 통해 내가 원하는 자료도 따로 받아 올 수 있어서 신기했다. 포스트맨은 실제로 어떤 api를 활용해서 만들때 유용하게 쓰인다고 하는데 빨리 그날이 왔으면 좋겠다!!! 내일 부터는 리엑트 상태 끌어올리기와 훅에 대해 학습한다! 비동기 프로그래밍 만큼 어려운 개념이라고 생각한다..

후.... 1주일 동안 꾸준히 1시간씩 투자해서 부트스트랩을 공부하였는데 오늘 이걸 활용해보고자 합니다! 부트스트랩과 여태 배웠던 react 의 개념들을 활용해서 나만의 디자인 컬랙션 웹사이트를 만들어 보았습니다!! 엄청 잘한것은 아니지만... react 복습차원에서 엄청 의미있는 시간이라고 생각합니다!!! 그럼 결과물 부터 감상해봅시다!!! #1. 레이아웃은 어떻게 했나 ? 부트스트랩을 활용해서 navbar와 jumbotron 이두가지를 활용했고 레이아웃은 부트스트랩 레이아웃 규격에 맞춰서 진행 하였습니다! // 부트스트랩 설치하기 npm install react-bootstrap bootstrap https://react-bootstrap.netlify.app/ React-Bootstrap The m..

HTTP(Hyper Text Transfer Protocol) HTTP란 상호 간에 정의한 규칙을 의미하며 기기 간에 데이터를 주고 받기 위해 정의된 통신 프로토콜 입니다. 브라우저와 서버간에 데이터를 주고 받기 위해 사용하고 있습니다. 하이퍼텍스는 웹사이트에서 이용되어지는 링크들만 애기하는 것이 아니라 모든 리소스(문서, 이미지 파일등)을 포함합니다. 또 한 브라우저 위에서 동작하고 있는 웹사이트나 웹 APP 같은 Cilent들이 Server와 통신을 주고 받을수 있습니다. 이러한 비슷한 방법으로는 AJAX가 있습니다. AJAX도 http를 이용해서 서버에서 데이터를 받아 옵니다. http의 특징 1. Client의 요청이 있을 때만 서버가 응답하는 단방향 통신 입니다. 2. 서버가 요구하는 API에 ..

1편과 2편에서 비동기 프로그래밍에 대해서 학습하였습니다!!! 이번에 학습한 비동기 프로그래밍은 프론트개발자라면 꼭 알아야할 필수 개념이기에 3편으로 나눠 정리를 하였습니다!!! 이번 블로깅은 비동기와 async/await에 대해 간단한 정리와 fetch에 대해 정리를 해보고자 합니다! Let's get it~! # 비동기 처리 비동기란 코드의 연산이 끝날 때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말합니다! 가장 흔한 사례는 어떠한 서버에서 데이터를 요청할 때 받아오기 까지 시간이 걸리지만 나머지 코드는 실행한 코드를 기다려 주지 않고 나머지 코드를 먼저 실행시켜줍니다. 이를 비동기 처리라고 합니다. 1 2 3 4 5 6 7 8 9 console.log("1"); setTimeo..

1편에 이어서 Promise Chaining , Promise all, /async/await에 대해 학습해 봅시다!!! # Promise Chaining Promise의 특징중 하나인 Chaining은 여러 개의 프로미스를 연결하여 사용할 수 있습니다! 후속 메서드 then()을 호출하고 나면 새로운 프로미스 객체가 반환됩니다. 여기서 중요한 포인트는 Chaining을 할때 then() 메서드를 통해서 값을 바로 전달 하여 연결할수가 있고 혹은, return을 통해 Promise를 전달해서 사용 할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //Promise chaining const testPromise = new Promise(function(resol..

# 동기와 비동기 동기식 처리 모델 동기식 프로그래밍은 직렬적으로 일을 처리합니다. 즉 순차적으로 실행 되며 도중에 어떤 작업이 수행 중이면 다음에 일처리해야 될 일들은 대기상태가 됩니다. 비동기식 처리 모델 비동기식 프로그래밍은 병렬적으로 일을 처리합니다. 일처리가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 일들을 실행합니다. 코드로 알아보는 동기와 비동기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 console.log(`1`); setTimeout(() => console.log(`2`), 1000); console.log(`3`); // Synchronous(동기식) callback function printImmediately(print) { print();..