analogcode의 등록된 링크

 analogcode로 등록된 티스토리 포스트 수는 14건입니다.

웹사이트에 애니메이션 간단하게 주기 - animate.css [내부링크]

이번 포스팅에서는 웹사이트에 애니메이션 효과를 정말 편하게 줄 수 있는 라이브러리를 소개한다. 자바스크립트 코드는 전혀 필요없이 필요한 곳에 class 추가만 해주면 애니메이션이 적용되는 CSS 라이브러리이다. 다양한 애니메이션 효과가 있어서 원하는 것을 골라서 class만 추가해주면 바로 적용이 된다. Animate.css 라이브러리 이름은 animate.css이다. 설치 및 사용법은 아주 간단하므로 문서를 참고하면 된다. 설치 npm 설치 $ npm install animate.css --save 파일 import import 'animate.css' 사용법 적용할 html 요소에 아래와 같이 클래스를 추가하면 끝이다. element 추가로 몇가지 옵션이 있는데 이름만 보면 무엇인지 쉽게 알 수 있을..

Javascript ECMAScript 2016, 2017 추가된 기능 [내부링크]

Javscript의 표준안은 ECMAScript 2015 (ES6) 이후로도 계속 이어져 왔다. 이번 포스팅에서는 ECMAScript 2016, 2017 어떠한 기능이 추가되었는지를 알기쉽게 정리하여 보았으니, 몰라서 못쓰는 기능이 없도록 한번씩 훑어보고 머릿속에 담아두었다가 필요할때 꺼내쓰자. 참고로 ECMAScript2015 까지는 ES6 라고 불렀는데, ECMAScript 2016부터는 줄여서 ES7, ES8 이 아닌 ES2016, ES2017 와 같이 연도를 붙여서 표기한다. 가끔 연도와 버전이 혼동되었는데, 차라리 연도로 통일하는게 더 보기 좋은거 같다. ECMAScript 2016 (ES2016) 지수연산자 (**) // 거득제곱 let x = 2 ** 4; // 2 * 2 * 2 * 2 = ..

AWS ALB(Application Load Balancer) - IP로 웹사이트 접근 막기 [내부링크]

웹사이트를 오픈하고 구글 SEO도 적용하고 시간이 조금 지나서 구글에 검색이 되나 확인해보니까 검색결과에 도메인이 아닌 ip주소로 나오는 걸 보았다. 생각해보니 IP로 접근하면 SSL 인증서 에러가 나지만 웹서버로 접근이 가능하다는 걸 깨닫고 AWS에서 들어가서 수정하였다. 일단 구글 검색결과에 왜 ip 주소로 노출이 되었는지는 모르겠다. 분명히 구글써치콘솔에도 도메인으로 등록을 해놨고 구글 크롤링봇이 IP로 크롤링을 하지는 않을거 같은데 이유는 구글만 알 것 같다. 하지만 중요한건 검색결과가 어쨌든간에 IP로의 접근을 차단하고 싶다는 것이다. ALB (Application Load Balancer) AWS의 ALB를 통해 로드밸런싱을 하고 있다. ALB 설정을 이용하여 웹사이트 IP로 들어오는 요청을 ..

Javascript ES6 (ECMAScript 2015) 에서 추가된 기능 정확히 알자 [내부링크]

ES6은 자바스크립트의 6번째 표준안이다. 아마도 자바스크립트를 가장 모던하게 보이도록 만드는 버전이 아닐까 생각한다. 그동안 무심코 사용했거나 아니면 몰라서 못쓴 문법이 있을 수 있을 것이다. 여기에서 새로운 기능들을 정리하고 간단히 설명해본다. let 블록 scope 변수 선언을 할 수 있다. { var a = 10 let b = 20 } console.log(a) // 10 출력 console.log(b) // 에러발생 ReferenceError: b is not defined var 로 선언한 변수는 블록내부에 선언되더라도 전역적으로 접근 가능하다. 하지만 let 으로 선언하면 블록내부에서만 유효하다. const let 과 같지만 값을 변경할 수 없는 상수로 만든다. const a = 20 a =..

리눅스 ulimit open files 테스트 [내부링크]

리눅스에서 하나의 프로세스에서 열 수 있는 파일 갯수에 제한이 있다. 네트워크 서버를 만들거나 파일을 동시에 많이 열어야 하는 프로그램을 만든다면 max open file 을 확인하고 변경할 수 있는 법을 알아야 한다. ulimit man page의 설명을 요약하면 아래와 같다. 시스템상에 있는 shell 과 shell이 생성한 프로세스들이 사용 가능한 자원을 통제한다. 이 말은 즉 shell은 유저에 의해 생성이 되므로 유저 프로세스들이 사용할 수 있는 자원을 컨트롤 한다는 말이다. 쉽게 말하면 우리가 어떤 프로세스를 실행시키면 이 프로세스가 사용할 수 있는 리소스를 통제한다는 것이다. 한번 쉘에 로그인해서 실행해보자 [user ~]$ ulimit -a real-time non-blocking time..

Nuxt + Express 백엔드 API 서버 통합 [내부링크]

Nuxt 프로젝트와 Express Backend API 서버 통합 Nuxt를 이용하여 프로젝트를 개발하다보면 한번씩 고민을 하게 될 것이다. 프론트엔드 서버 c API 서버 이 2개를 각각의 프로젝트로 만들건지 하나로 통합할 것인지.. 큰프로젝트라면 2개를 나누어서 별도의 서버로 운영할 것이다. 하지만 작은 프로젝트라면 그냥 하나로 통합해서 개발하고 하나의 서버로 배포하고 싶을 것이다. Nuxt + Express API 통합 어떻게 통합을 할 수 있을까? Nuxt 프로젝트에 Express 서버가 들어가면 된다. 방법은 아주 간단하다. 바로 serverMiddleware !! serverMiddleware Nuxt에는 serverMiddleware 라는 것이 존재한다. 문자 그대로 server side..

Nuxt SSR 상황에서 axios 요청에 쿠키 넘기기 [내부링크]

Nuxt를 사용하다보면 서버사이드에서 axio를 요청하면 쿠키를 전달 할 수 없다는 걸 알게 된다. 브라우저에서 받은 쿠키를 프론트서버에서 API서버로도 전달해야 하는데, 이것을 어떻게 쉽게 해결하는지와 서버사이드와 클라이언트사이드의 코드가 같아질 수 있는 방법을 설명한다. Nuxt universal mode Nuxt를 universal 모드로 사용하면 SSR(서버사이드렌더링)을 사용하게 된다. SSR 페이지 최초 접근시에 다음과 같은 단계들은 서버사이드에서 실행된다. nuxtServerInit asyncData fetch middleware 그리고 최초 로딩이 끝나고 이후에 페이지 전환을 할때는 클라이언트 사이드에서 실행된다. 그래서 여기에서 axios를 이용하여 서버로부터 데이터를 받아오는 코드가 있..

InfluxDB [내부링크]

InfluxDB를 사용중에 어느날 데이터를 쓰는 중에 too many open files 에러가 발생하고 있는걸 발견하였다. 여기서 ulimit를 이용하여 서버 설정을 확인 / 변경하고 이것을 영구적으로 설정할 수 있는 방법을 설명한다. InfluxDB 버전 Influx OSS 2.4 - 사용하는 InfluxDB 의 읽기 / 쓰기 요청 건수이다. Write 12,000 건 / 분 Query 900 건 / 분 NodeJS로 만든 프로세스에서 InfluxDB로 데이터를 넣는 중에 꽤 자주 아래와 같은 에러가 발생하였다. unexpected error writing points to database: opening shard previously failed with: [shard 3254] open /mnt/..

InfluxDB 쿼리 개선 [내부링크]

InfluxDB Time Series 데이터의 저장 및 검색에 최적화 되어있는 데이터베이스이다. 많은 수의 거래건과 관련된 데이터를 저장하여 시간 기준으로 분석하기 위해 사용하였다. InfluxDB JOIN 쿼리 InfluxDB에 거래건에 대한 데이터를 저장하고 정해진 시간동안의 거래량과 가격차이에 대한 데이터를 가져오는 쿼리를 작성하였다. 아래와 같은 JOIN이 필요하다. A JOIN B ==> X C JOIN D ==> Y X JOIN Y ==> 최종 결과 1. 느린 쿼리 처음에는 아래와 같이 쿼리를 만들었다. import "join" import "date" // 240분전부터 현재까지의 데이터 범위를 지정 // 문제가 되었던 부분: dataset 변수 dataset = from(bucket:"ma..

Vue Progressive Framework [내부링크]

프로그레시브 프레임워크 (Progressive Framework) Vue는 프로그레시브 프레임워크 라고 한다. 한글로 풀이하면 점진적인 프레임워크이다. 점진적 조금씩 앞으로 나아가는 것. c 그럼 Vue는 무엇을 조금씩 앞으로 나아간다는 것인가?? Vue는 프레임워크이니만큼 프론트엔드 개발에 필요한 많은 기능을 담고 있다. 렌더링, 컴포넌트, 라우팅, 상태관리, 서버사이드 렌더링 등 다양한 기능이 있지만, 우리가 개발하려는 프로젝트에서 이것들을 모두 다 사용할 필요는 없을 수 있다. 아주 간단한 프로젝트를 위해 Vue의 최소기능만 가져다가 사용할 수 있으며, 프로젝트가 조금씩 확장해가면서 Vue의 기능들을 하나씩 적용시켜 나갈 수 있다. 즉, 처음에는 Vue의 최소한의 기능만으로 개발을 시작하고 점진..

Vue 시작하기전 알아야할 핵심 특징 [내부링크]

Vue Vue는 UI를 만들기 위한 자바스크립트 프레임워크이다. Vue를 사용하면 웹사이트 UI를 너무나 편하게 만들 수 있다. Vue를 시작하려면 가장 기본이 되는 핵심 개념을 먼저 알아야 한다. 결국 나중에 배우게 될 Vue의 모든 요소들이 모두 이 개념을 기반으로 이루어져 있다. ️ Component 가장 중요한 특징이라면 컴포넌트 기반의 프로그래밍 모델 방식을 제공한다. 이것은 React와 같은 현대의 대부분의 라이브러리나 프레익워크가 추구하는 방식이다. 그림과 같이 모든 UI를 재사용 가능하도록 하나하나 쪼개서 캡슐화하는 것이다. 이렇게 쪼개진 UI를 어디서든 가져다가 붙이기만 하면 재사용이 너무 쉽고, 코드도 훨씬 간결해질 수 있다. Vue에서는 이렇게 컴포넌트를 하나씩 개발해나가면 된다..

JWT를 활용한 로그인 인증 구현 [내부링크]

JWT 로그인 인증을 구현하기 위해 Session 과 JWT 방식 중에 엄청난 고민을 하다가, 아무래도 DB를 덜 사용하고 MSA에 유리한 JWT 방식을 사용하기로 마음먹었다. 개발 코드: Vue, NuxtJS 1. JWT 인증 최종 구현 모델 JWT에 대한 세부적인 스펙과 관련한 설명은 생략하도록 하겠다. JWT 토큰을 이용해 어떻게 안전하게 인증 시스템을 만들어야 하는지에 초첨을 두었다. c 일단 결론적으로 아래 그림이 내가 구현한 인증 모델이다. 크게 3가지 부분으로 나뉜다. ① 로그인 일단 로그인을 요청하면 사용자 정보를 확인하고 JWT를 사용하여 AccessToken과 RefreshToken을 발급한다. 토큰 만료시간 만료시간을 AccessToken은 짧게, RefreshToken은 길게 잡..

내가 React가 아닌 Vue를 쓰는 이유 [내부링크]

1. Vue / React Vue React Vue와 React는 모두 프론트엔드를 편하게 개발하기 위한 Javascript로 만들어진 도구이다. 이제는 이것들 없이 프론트 개발을 한다는 것은 상상하기도 싫다. 둘다 컨셉은 동일하다. 모든 UI를 스스로 동작하는 컴포넌트 단위로 개발해서 어디든 편하게 가져다 쓸 수 있게하는 것이다. 페이지 단위가 아닌 더 작은 단위의 컴포넌트를 개발하여 재사용성과 코드의 간결함을 유지한다. 모든 개발의 지향점은 코드 중복을 없애고 코드의 단위를 사람이 알기 쉽게 논리적으로 구조화하는 것이 궁극적 목적인데, Vue와 React도 결국 이러한 목적을 위한 것이다. 2. NuxtJS / NextJS 이걸 또 더 편하게 개발하라고 Vue는 NuxtJS, React는 NextJS..

npm update 시에 package.json 수정안되는 문제 [내부링크]

무엇을 개발하던 시간이 지나면 의존성 있는 패키지들을 업데이트해야하는 상황이 무조건 생기기 마련이다. 우리의 NodeJS 프로젝트에서 안전하게 패키지를 업데이트 하는 방법을 알아보자. NodeJS 패키지 업데이트 방법 1. 버전 확인 업데이트할 패키지을 확인하기 위해 npm outdated 명령어를 입력하면 아래와 같이 나온다. $ npm outdated 아래의 의미가 중요하다. Current 현재 설치된 버전 Wanted package.json에서 지정된 semVer 한도내의 최신버전 Latest 해당 패키지의 최신버전 우리는 대부분의 상황에서 Wanted 버전으로만 업데이트를 하게 될 것이다. Latest에서 Major버전이 업데이트되는 상황이 있다면 어떤 일이 발생할지는 각자가 알 거라 생각된다. ..