Web Programming

단순히 for(let i =0;i<n;i++)를 대체하고 싶은 경우

[...new Array(n)].forEach((v,index)=>console.log(index)); //0 1 2 3 4

0 ~ n-1 까지의 수가 필요한 경우(map등을 사용해야 하는 경우)

Array.from(Array(n).keys()).map(v=>v) // 0 1 2 3 4

m ~ n -1 까지의 배열(m=5, n=10)

Array.from(Array(n - m).keys()).map(v=>v+m).map(v=>v); // 5 6 7 8 9


물론 더 좋은 방법이 있을 수도 있다.

크롬 개발자 도구를 다크 테마로 사용하는 방법은 간단하다.

먼저, 크롬 개발자 도구에서, 점 세 개가 세로로 나열된 버튼을 누르고, settings를 누른다.

아니면, 개발자 도구에서 F1키를 눌러 접근 가능하다.


Preferences 탭에 Appearance 제일 맨 위에 Theme : Light가 있을 것이다.

이제 Light를 Dark로 바꾸면 다크 테마가 적용된다.


이번에 만든 함수는 checkRequest라는 함수이다.

이 함수는 예를들면 POST요청이 들어왔을 때, sessionkey에 접근해서 데이터를 불러와야한다면, 사용자의 요청에 session key가 있는지 검사를 해야한다. 근데 이러한 요청 인자가 한 두개가 아니라면, if문이 너무 길어지게 된다. 그래서 만든 함수가 아래와 같은 함수이다.

위의 함수에서 data는 Object.keys(req.body)이고, keys는 접근해야하는 key값의 목록이다.


위의 예시를 이용해 함수를 호출한다 하면, checkRequest(Object.keys(req.body), ['session', 'key'])이다. 


위의 함수의 원리를 살펴보자면, 먼저, data 안에 keys의 값을 하나씩 뽑은 값이 있는지 확인하고 이를 반환하여 배열로 만든다. 두번째로는 이 배열에 false 값, 즉 요구하는 값들이 없는 경우가 하나라도 있으면 true를 반환하게 된다.


왜 true를 반환하냐면 if문으로 true경우 잘못된 데이터를 인식하게 하면 되기 때문이다. !을 굳이 붙일 필요가 없다!




'Web Programming > Typescript' 카테고리의 다른 글

checkRequest- 요청이 올바른지 검사하는 함수  (0) 2019.02.10

예를 들어 아래와 같은 코드가 있을 때,

<html>

<body>

<div class="container">

<article style="width:100px;height:100px;background-color:#000">

</article>

</div>

<body>

</html>

article을 중앙에 배치하기 위해 flex를 사용한다면, .container의 스타일을 다음과 같이 설정할 것이다.

.container{ display:flex; justify-content:center; align-items:center; }

그러나 이는 실패한다.

가로로는 정렬이 되었지만, 세로로는 위에 붙어있다. 세로로도 중앙 정렬을 해야 한다.

그렇다면 어떻게 하면 article을 한가운데에 배치할 수 있을까?

한줄만 추가해주면 된다.

.container{ display:flex; justify-content:center; align-items:center; height:100vh }

vh는 viewport height의 약자이다.

이제 .container는 사용자가 보이는 화면 전체를 높이로 갖는다.


'Web Programming > 디자인' 카테고리의 다른 글

CSS) 한가운데 div 배치하기(가로세로중앙정렬)  (0) 2019.02.08
CSS에서의 vh와 vw  (0) 2018.09.26

1. generate 커맨드로 dist 파일 생성

2. firebase-tools 설치(npm install firebase-tools -g)

3. firebase login으로 구글 로그인

4. firebase deploy

5. 이때, firebase.json의 hosting을 'dist'로 바꿔주면, dist폴더의 내용이 업로드 된다.

WebStorm 미세 팁

2019.01.22 18:45

웹스톰에서 유용하게 쓸 수 있는 몇 가지 기능을 소개한다.

package.json에서 의존성의 버전 관리

웹스톰 2018.3부터 버전 자동 완성을 지원한다.
예를 들면, "axios": ""에서, Ctrl+Space를 누르면 latest 버전이나 next등이 뜬다.
기존의 버전을 특정 버전으로 바꾸려고 할 때도 유용하다.
프로젝트에서 어떤 의존성의 버전이 "2.6.3"이고 최신 버전이 "2.8.3"인데, "2.6.x"에서 최신 버전으로 고치고 싶다면 아래와 같이 하면 된다.
"xxxx":"^2.6."에서 '.'뒤에서 Ctrl+Space를 누르면 2.6.으로 시작하는 버전이 자동으로 뜬다.

Local History

이전의 코드를 보고 싶을 때에는 Ctrl+Z를 누르는 것이 아니라, VCS > Local History를 들어가면 된다.
현재 코드와 이전 코드를 비교할 수 있고, >>을 통해 이전 코드를 현재코드에 넣을 수 있다.

HTTP Client

REST API를 개발 할 때 매우 편리하다. Tools > HTTP Client탭에 들어가면 된다.
또한 이제 파일로도 관리할 수 있고, Response을 파일로 저장해주기도 한다.


Nuxt.js는 vue-router를 내장하고 있고, 매우 간편한 방식으로 라우팅을 할 수 있다.

예를 들면 아래와 같은 URL 구조를 Nuxt.js에서 구현하는 방법은 간단하다.

예시 URL 구조

  • /article  글 목록
    • /article/:id  글 보기
  • index  메인페이지
  • /user/:name  유저 정보 페이지


Nuxt.js에서 /pages 폴더 구조

  • pages/
    • article/
      • index.vue
      • _id.vue
    • user/
      • _name.vue
    • index.vue
폴더 구조만으로도 라우팅이 가능한 Nuxt.js의 장점이다.
더 자세한 내용은 공식문서에 한국어로 잘 나타나 있다. https://ko.nuxtjs.org/guide/routing/


'Web Programming > Vue.js' 카테고리의 다른 글

Vue.js + Nuxt.js로 동적 URL 페이지 만들기  (0) 2018.12.27

아래의 isEmptyArray 함수는 빈 배열이거나, Array가 아니면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

JavaScript

TypeScript

Jquery를 사용하지 않는 순수한 자바스크립트 코드입니다.

원리

array.reduce에서 기본 인자 값을 빈 배열을 넣어줍니다.
그 다음 누적 배열에 현재 값이 있으면 누적 배열을 반환하고, 없으면 합쳐서 반환합니다.
이때, 거꾸로 출력 됩니다. (예: [deduplicate([1, 2, 3, 1, 2, 3]) //  [3, 2, 1])
원래대로 출력하려면 .reverse()함수를 사용하세요.
또한 ES6 이상에서만 사용 가능한 함수입니다.

TypeScript

function deduplicate(array: Array<any>): Array<any> {
return array.reduce((temp, now) => temp.includes(now) ? temp : [now, ...temp], []);
}


mysql 모듈에서 pool을 사용한 다음 release를 하지 않아도 된다.

이슈(https://github.com/mysqljs/mysql/issues/1202)를 참고하면, 

yes. pool.query() is shortcut for pool.getConnection() + connection.query() + connection.release() - see https://github.com/felixge/node-mysql/blob/master/lib/Pool.js#L194-L207

아래와 같이 답변이 있다.

pool.query()는 getConnection()과 query, 커넥션 release가 포함되어있다는 내용이다.

'Web Programming > Node.js' 카테고리의 다른 글

mysql에서 pool query 후 release 하기  (0) 2018.12.04
Express.js IP 구하기  (0) 2018.07.03
간단한 express서버 만들기  (0) 2017.08.15

+ Recent posts

티스토리 툴바