전체 글

데이터바인딩 js와 Vue의 데이터바인딩 문법 1. javascript의 경우 document.getElementById().innerHTML = 데이터; 자바 스크립트는 위와 같이 넣을 데이터를 우변에 넣고 태그를 가져와서 좌변에 쓴다. 2. vue의 경우 vue는 데이터를 script안에 data안에 넣어준다. 그리고 html부분에 {{}}을 써서 데이터를 가져와서 사용한다. 데이터 바인딩을 하는 이유 정적 데이터가 아닌 이상 데이터는 계속적으로 변경된다. 그래서 데이터를 따로 저장해놓을 경우 수정이 편리해진다. js로 조작이 편리하다. Vue의 실시간 렌더링기능 쓰려면 데이터바인딩이 필요하다. Vue는 data가 변경되면 data와 관련된 HTML에 실시간으로 반영된다. html속성에 데이터바인딩 ..

우연한 글에 vue.js를 시작하게 되었다. 새로운 언어에 대해 배우고 싶고, 다른 언어는 어떻게 사용하는지 궁금하는 차였다. 그래서 vue.js를 검색해보았는데, 코딩애플에 무료강의 몇개가 있어서 듣게 되어 이렇게 글을 작성한다. node.js 설치 node.js는 내가 이전에 react를 사용하고 있어서 사용할 필요는 없지만, 환경이 다를 경우를 대비해 작성한다. node.js 홈페이지에 들어가면 여러가지 버전이 있는데 대표적으로 두개가 있다. 왼쪽은 안정화 버전, 오른쪽은 최신 버전이다. 나는 항상 안정화 버전을 사용해서 이를 설치한다. 이를 설치하는 이유는 npm을 사용하기 위해서인데, npm은 오픈소스 라이브러리를 패키지 형태로 바로 설치해서 사용할 수 있게 해주는 도구이다. 그리고 에디터가 없..

가짜 api 서버는 어떻게 만드는가 궁금할 수 있다. 프론트와 백엔드 개발을 같이 하다보면 처음에는 백엔드가 없는 상태에서 가짜 데이터를 주고 받아야 한다. 그리고 나중에는 실제 api를 연결해서 데이터를 주고받아야 하는데, 이를 두번에 걸쳐 할 필요없이 가짜 api 서버를 만들어 활용하면 된다. 1. 개념 알아보기 우리가 지금 쓸 것은 json-server라는 라이브러리이다. 이는 REST API를 구축해주고, api 테스트를 할 때 편리하다. 그리고 프로덕션에서는 사용하지 않는다. 2. json-server 설치하기 2-1) 라이브러리 설치하기 npm install -g json-server 2-2) db.json 파일 만들기 //db.json { "test": [ { "id": 1, "name": ..

우연히 어떤 글을 보고 swagger로 api docs를 작성할 수 있다는 것을 알게 되었다. 혼자 프로젝트 진행할 때 api가 너무 많아서 노션으로 일일이 작성해서 봤었는데 이 방법이 더 편리할 것 같아 한번 해보고 글로 작성할려고 한다. 1. swagger 설치 이전에 있던 express 프로젝트를 가져와 아래의 모듈을 설치한다. npm install swagger-jsdoc swagger-ui-express --save-dev swagger-ui-express : API 문서 UI 렌더링을 위한 패키지 swagger-jsdoc: Swagger 태그 주석을 추가해 API 문서화를 위한 패키지 개발할 때 보기 위함이기에 —save-dev옵션을 준다. 2. swagger 파일 설정 1) swagger.j..

Joi란 사용자가 입력한 데이터가 유효한지 검사하는 유효성 검사 라이브러리 라고 할 수 있다. 설치 및 사용하기 npm install joi joi를 사용하기 위해서 install해준다. const Joi = require('joi'); 스키마 정의하기 // validate할 schema 정의 const schema = Joi.object().keys({ username: Joi.string().min(3).max(30).required(), birthyear: Joi.number().integer().min(1900).max(2018), }); 유효성 검사를 하려면 db에 정의되어 있는 컬럼들을 가져와서 몇개의 컬럼만 유효성 검사를 할 수 있다. username: 글자이고, 길이가 최소 3글자에서 최대..

sql문을 작성할 때 json형식으로 해서 connection pool을 했었다. 그런데 우연히 knex로 받아오는 것을 보고 괜찮은 방법이여서 더 알고자 정리하고자 한다. 설치하기 npm install knex --save 위의 명령어를 쳐서 knex를 설치해준다. DB정보 생성하기 const knex = require('knex')({ client: 'mysql', connection: { host : HOST_ADDR, user : DB_USER, password : DB_PASSWORD, database : DB_NAME } }) client : 이 매개변수는 필수이며, 라이브러리와 함께 사용할 클라이언트 어댑터를 결정한다. CRUD 작성하기 1) select knex.select('컬럼 이름')..

: Incremental Static regeneration의 request는 page가 re-generate되도록 한다. revalidate 속성은 얼마동안에 한번 regeneration이 일어날지를 설정한다. 공식문서를 보다가 revalidate를 보고 궁금하게 생겨서 정리하게 되었다. revalidate는 말 그대로 재검증한다는 말이다. 개념을 보니 초를 줘서 이 초시간이 지나면 페이지가 업데이트가 된다는 말이었다. 그런데 초마다 업데이트가 된다면 과부하되지 않을까라고 생각했다. 그런데 참고사이트에서 해답을 얻게 되었다. 1) 자동 업데이트되는가? → 화면 요청이 없는 경우에는 rebuild가 되지 않는다. 2) 사용자가 validate초 이상을 페이지에 머물러야 업데이트되는가? → 기준이 buil..

: SWR은 vercel에서 제작한, 데이터를 가져오기 위한 모듈이다.Next.js에서 유독 많이 보이는 개념이라, 정리하고자 한다. 아마도 swr이 서버 사이드 랜더링도 되기 때문인 것 같다.사용import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return failed to load if (isLoading) return loading... return hello {data.name}!}key : 일반적으로 API URL을 말한다.fetcher : key값을 이용해 데이터를 가져오는 함수이다. fetch 혹은 axios를 이용해 ..