본문 바로가기

Study60

node.js ) 비동기 패턴 해결 (1) - 콜백함수 콜백함수를 이용한 비동기 패턴 해결 가장 기본적인 방법으로 콜백함수를 이용해 비동기 패턴을 해결할 수 있습니다. test.txt async test 1 async test 2 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(1) console.log(data.toString()); fs.readFile("./test.txt", (err, data) => { console.log(2); console.log(data.toString()); fs.readFile("./test.txt", (err, data) => { console.log(3); console.log(data.toString());.. 2022. 2. 5.
node.js ) 비동기 (asynchronous) 패턴 비동기 (asynchronous) 패턴 비동기 방식이란? 메인 스레드가 존재하고 메인 스레드는 실제 코드를 실행합니다. 메인 스레드는 실행시간이 오래 걸린다고 판단하면 내부에 처리하는 다른 스레드로 해당 작업을 넘기게 됩니다. 하지만 메인 스레드에게 작업을 받은 스레드는 해당 작업이 끝나면 콜백함수를 메인 스레드에게 돌려줍니다. 메인 스레드는 전달받은 콜백함수를 실행하지만 이 콜백함수를 실행할 때는 이미 다른 코드가 처리된 이후입니다. 그리고 또 다른 작업을 스레드에게 전달하게 됩니다. 예시 : fs 를 이용해 파일을 읽고 결과를 출력하는 코드 index.js const fs = require('fs'); fs.readFile('./test.txt', (err, data) => { console.log(.. 2022. 2. 5.
express ) express-generator 프로젝트 생성하기 express-generator 매번 서버를 만들 때마다 라우터, 모델, 뷰, 미들웨어, 에러 미들웨어 등을 만드는 일은 매우 번거롭습니다. 이처럼 반복적으로 수행되는 일은 express-generator 를 이용해 한 번에 만들 수 있습니다. express-generator 를 통해 생성된 프로젝트는 개인의 스타일에 맞춰 수정하는 것도 가능합니다. express-generator 프로젝트 생성 npm 을 이용해 설치가 가능합니다. $ npm install -g express-generator express-generator 가 생성되면 express 명령어를 통해 프로젝트를 생성할 수 있습니다. express [프로젝트명] 위처럼 express 프로젝트가 생성되면 의존성 모듈을 설치하는 방법과 앱을 실.. 2022. 2. 5.
express ) 미들웨어 미들웨어 express ) Router 라우팅이란 ? 처리 로직을 따로 관리해 사용자가 접속한 URL 과 method 에 따라 해당 록직을 실행하는 것입니다. 라우팅 등록 먼저 express 를 설치합니다. npm install -s express express 에서는 라우팅을 직 jongik.tistory.com 앞의 글에서 Router() 를 이용해 모듈 형태로 생성된 라우터를 app.use 로 등록하여 사용했습니다. app.use 가 미들웨어를 등록하는 부분입니다. 또한, app.use(bodyParse()) 를 이용해 클라이언트가 body 에 포함한 데이터를 사용 가능하도록 파싱합니다. app.use 로 등록한 미들웨어는 모든 요청에 대해 동작하게 됩니다. 하지만 사용자 요청을 처리하기 위해 사용.. 2022. 2. 4.
JavaScript ) fetch vs axios fetch vs axios 웹어플리케이션의 기본 업무 중 하나는 HTTP프로토콜을 통해 서버와 통신하는 것이다. 이 작업은 Fetch 또는 axios를 사용하여 쉽게 수행할 수 있다. 사용하기 쉽기 때문에 내장 API 보다 axios를 선호하는 개발자들도 있다. Fetch API는 Axios의 주요기능을 완벽하게 재현할 수 있다. axios 브라우저에서 node.js 또는 XMLHttpRequests의 HTTP 요청을 만드는데 사용되는 JS 라이브러리이다. JS ES6에 기본으로 제공되는 Promise API를 지원한다. XSRF에 대한 클라이언트 측 보호를 활성화한다. 프론트엔드와 백엔드의 통신을 도와준다. 코드 작성법 axios.get('url') // url과 data, headers.. 2022. 1. 29.
ES6 ) 비구조화 할당 비구조화 할당 비구조화 할당이란 ?? 비구조화 할당은 배열, 객체, 반복 가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장입니다. 배열에서의 비구조화 할당 기본적인 사용법 let [a,b] = [1,2]; 이 코드는 변수 a와 b를 선언한 뒤 우변의 배열에서 요소를 하나씩 꺼내어 인덱스 순서대로 a, b 에 대입합니다. 우변의 배열을 분할해 좌변의 변수에 할당하므로 분할 할당이라고도 합니다. 이미 선언된 변수를 비구조화 할당하기 [a,b] = [2*a, 3*b]; // a = 2a, b= 3b 와 같음 [c,d] = [d,c]; // c 값과 d 값을 교환 반드시 우변과 좌변의 개수가 같을 필요는 없습니다. 만약 좌변의 변수 개수가 우변의 값 개수보다 많다면 좌변의 남는 변수에는 undef.. 2022. 1. 28.
JavaScript ) 다차원 배열 생성 JavaScript 에서의 다차원 배열 자바스크립트는 다차원 배열을 정의하는 문법은 존재하지 않습니다. 하지만 배열에 배열을 중첩하면 다차원 배열과 유사한 기능을 구현할 수 있습니다. 2차원 배열의 생성 let x = new Array(3); // 1차원 배열 생성 for(let i=0; i 2022. 1. 27.
Vue 2 ) Vue 에서 fontAwesome Icon 사용하기 Vue 2 + fontawosome cdn 방식을 통해 fontawesome 아이콘을 바로 사용할 수 있지만, 저는 사용할 아이콘이 많지 않았기에 몇 개의 특정 아이콘만 import 해 사용하는 것을 선택했습니다. npm install npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/vue-fontawesome@latest fontawesome 의 아이콘을 사용하기 위해 먼저 설치합니다. fontAweosome Icon 가져오기 main.js import "../fontAwesomeIcon.js" // ... 생략 fontAwesome.js.. 2022. 1. 18.
Vue 2 ) 컴포넌트에 탭기능 적용하기 why? sns 프로필페이지의 하단 화면단을 탭 형식으로 구현하면서 템플릿부분과 백엔드에서 정보를 받아오는 소스코드들이 너무 많아서 컴포넌트를 분리하고 싶었습니다. 단순히 v-if 나 v-show를 쓰면 될 줄 알았는데 게속 안되서 찾아보니 컴포넌트에 탭을 적용하는 방법이 따로 있었네요.. 구조 followPage.vue 라는 상위 컴포넌트에서 followerList.vue , followList.vue 하위 컴포넌트들을 탭 버튼을 통해 렌더링 해줍니다. Code template code follower follow script code export default { components: { followList, followerList }, data() { return { comp: 'follow.. 2022. 1. 18.
반응형