본문 바로가기

분류 전체보기70

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.
Web ) HTTP 응답에 따른 상태 코드 HTTP 상태 코드 모든 HTTP 응답 코드는 5개의 종류로 구분됩니다. 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의합니다. 그러나 마지막 두 자리는 클래스나 분류 역할을 하지 않습니다. 첫 자리에 대한 5가지의 분류는 다음과 같습니다. 1xx (정보) 요청을 받았으며 프로세스를 계속합니다. 2xx (성공) 요청을 성공적으로 받았으며 확인했고 수용했습니다. 3xx (리다이렉션) 요청 완료를 위해 추가 작업 조치가 필요합니다. 4xx (클라이언트 오류) 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.. 5xx (서버 오류) 서버가 명백히 유효한 요청에 대해 충족한 응답에 실패했습니다.. 아래에서 2xx, 3xx, 4xx, 5xx 의 응답코드를 찾아볼 수 있습니다. 2xx (성공) 이 클래스의 .. 2022. 1. 15.
Node.js ) 웹서버 기초 (1) - http 모듈, 요청 객체, 응답객체 해당 글의 코드는 Postman을 이용해 테스트를 진행합니다. Web Server 호출하기 http 모듈을 이용 // 모듈을 사용하기 위한 준비 const http = require("http"); // 요청을 받아와 응답하는 부분 // 첫 번째 인자로 사용자가 요청할 때 처리하는 콜백함수를 받는다. http.createServer((req, res) => { res.writeHead(200); // 응답코드를 200으로 설정 res.end("hello world"); // 요청을 끝냄 }) .listen(3000, () => { console.log("server on : 3000 port"); }); 콜백함수는 2개의 인자를 받는데 첫 번째가 요청 객체, 두 번째가 응답 객체입니다. listen 은 .. 2022. 1. 15.
Vue 3 ) 반응형 api 를 이용해보자 반응형 기초 아래 글을 읽고 오시면 이해가 더욱 편합니다. 반응성과 관련된 APIs ref, refs 란?? 반응형 상태 선언하기 JavaScript 객체에서 반응형 상태를 생성하기 위해, reactive method 를 사용할 수 있습니다. import { reactive } from 'vue' // 반응형 상태 const state = reactive({ count: 0 })reactive 는 Vue 2 버전에서의 Vue.observable() API 와 동일한 것으로, RxJS 의 observables 과 혼동을 피하기 위해 이름을 바꿨습니다. 여기서 반환된 상태는 반응형 객체입니다. 반응형 변환은 "deep" - 전달된 객체의 모든 중첩된 속성 (property) 에 영향을 미친다는.. 2022. 1. 14.
JavaScript ) 배열 기초 배열 function get_members(){ return ['durant','lebron','leonard']; } members = get_members(); // members.length는 배열에 담긴 값의 숫자를 알려준다. for(let i=0; i 2022. 1. 14.
반응형

티스토리툴바