본문 바로가기

분류 전체보기56

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.
Vue 2 ) 무한스크롤 페이징 구현하기 vue-infinite-loading 웹sns서비스를 구현하면서 타임라인과 팔로워,팔로잉 목록을 표시할 때 무한스크롤페이징을 구현하려 했습니다. 아래는 팔로잉 리스트를 불러오는 코드 소스코드 template code 더 이상 목록이 없습니다. script code data:{ page:0 // 페이지 초기값 지정 } methods:{ infiniteHandler($state) { axios({ method: 'get', url: `${SERVER_URL}/profile/${userpk}/memfollowings`+"?page=" + (this.page), headers: this.getToken, }).then(res => { setTimeout(() => { // 로딩스피너를 위해 1초의 지연시간을 설정했다. if(res.data.leng.. 2022. 1. 18.
express ) Router 라우팅이란 ? 처리 로직을 따로 관리해 사용자가 접속한 URL 과 method 에 따라 해당 록직을 실행하는 것입니다. 라우팅 등록 먼저 express 를 설치합니다. npm install -s express express 에서는 라우팅을 직관적으로 표현합니다. const express = require('express'); let app = express(); require 를 이용해 express 를 가져옵니다. 그 다음 express 로 만들 서버를 세팅하기 위해 app 변수를 만듭니다. app 변수에는 우리가 필요한 각종 서버의 라우팅, 미들웨어, 에러 처리 로직을 설정합니다. const http = require('http'); http 서버를 만들기 때문에 http 모듈을 가져옵니다. app... 2022. 1. 17.
node.js ) package.json 파헤치기 npm 과 package.json npm 은 Node Package Manager 의 약자로, node 로 생성한 패키지/프로젝트를 관리하는 도구입니다. 그리고 이러한 패키지/프로젝트 정보를 가지고 있는 것이 package.json 파일입니다. npm 과 package.json 은 독립된 존재로 보는 것이 아니라 연관 지어 생각해야 합니다. package.json 생성 npm 을 이용해 package.json 을 생성할 수 있습니다. $ npm init package.json 구조 예시) package.json { "name" : "test", "version" : "1.0.0", "description" : "test package.", "main" : "test.js", "scripts" : { "t.. 2022. 1. 16.
node.js ) 웹서버 기초 (2) - GET, POST, 정적/동적 파일제공 GET, POST, 정적 / 동적 파일 제공 클라이언트 요청에 따라 다양하게 처리해보는 방법과 fs 모듈을 이용해 이미지, html 과 같은 파일을 전송하는 방법에 대해 알아보겠습니다. 사용자의 요청에 따라 처리할 때 다음의 두 가지가 가장 중요합니다. URL methods URL 로 어떤 method 로 요청했는지만 파악하고 해당 요청에 맞추어 코드를 실행하여 응답하면 됩니다. GET 요청 처리 요청 객체에서 method 가 GET 이 맞는지 검사 후 GET 요청을 처리할 수 있습니다. 요청 객체에서 확인한 URL 과 method 를 이용해 조건 분기를 해줍니다. const http = require("http"); http.createServer((req, res) => { let { url, hea.. 2022. 1. 16.
반응형