분류 전체보기 (50) 썸네일형 리스트형 JS - 자바스크립트 비동기 자바스크립트 비동기를 위해 알아야한 키워드 * 동기(sync) & 비동기(async) ex) 1번, 2번, 3번이라고 부르는 세 가지 일이 있다고 하자 동기 - 1번 작업이 끝나면 2번 작업을 시작, 2번 작업이 끝나면 3번 작업이 시작 비동기 - 1번, 2번, 3번 작업이 동시에 진행됨 * 비동기 작업을 위한 API의 예시 - 브라우저 또는 node.js가 아래의 API를 제공해준다. (순수 자바스크립트에는 비동기 API가 없다한다) Ajax(비동기로 통신하기 위한 api. fetch함수가 바로 ajax작업을 위한 공식 api. axios는 더 쉽게 ajax를 하기 위한 라이브러리) 파일 읽기 암호와/복호와 작업 예약(setTimeout()과 같은 것) * 비동기 작업이 가질 수 있는 3가지 상태 - .. Jenkins - Git push 명령어만으로 자동 배포하기(jenkins 이용, none docker) 개요 Jenkins를 이용하여 git push 명령어만으로 자동 배포가 이뤄지게 하는 것이 이 글의 목표입니다. 보안이나 최적화면에서 부족함이 많겠지만 토이 프로젝트를 테스트하는 용도로는 불편함 없이 쓸 수 있을 것 같습니다. 이 글의 예제에서는 Javascript만으로 애플리케이션을 작성하였고 stack은 아래와 같습니다. Front-end Back-end Package manager yarn npm Library react express 0. Aws Ec2 세팅 처음에는 평생 프리티어가 있는 GCP를 이용하려고 하였으나 Jenkins와의 통신이 잘되는가 싶다가도 자꾸 끊기는 이슈가 있었고 오랜 시간에도 해결이 안되어 Aws의 ec2를 사용해보았습니다. 다행히도 ec2에서는 jenkins와 통신이 원활.. Nginx - socket.io Revers proxy 설정 # websocket reverse proxy location ~* \.io { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy false; proxy_pass http://localhost:3001; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } 아래에 작성한 react-router.. Nginx - react-router-dom 을 사용한 페이지에서 reload시 404에러 해결하는 코드 nginx.conf 또는 default.conf 파일의 location / 부분에 아래 코드처럼 추가한다. location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.html break; } } Nginx - Ubuntu 18.04 LTS에 설치하는 방법 개발환경 클라우드 - GCP OS - ubuntu 18.04 LTS nginx 저장소 추가 $ sudo vi /etc/apt/sources.list.d/nginx.list 위에서 작성한 파일내에 내용 추가 deb [arch=amd64] http://nginx.org/packages/mainline/ubuntu/ bionic nginx deb-src http://nginx.org/packages/mainline/ubuntu/ bionic nginx Nginx 공개 키 추가 $ sudo wget http://nginx.org/keys/nginx_signing.key $ sudo apt-key add nginx_signing.key apt-get 업데이트 $ sudo apt-get update 이전 버전의 N.. CSS - selector - 선택자 우선순위 1) 동일한 선택자에 대해 두 개가 선언 되었다면 뒤에 선언 되어있는 것을 스타일로 적용합니다. 2) 선택자별 우선 순위 1 - ID 2 - Class, Pseudo-class 3 - Type 3) 예외 1 - Inline style - html 태그안에 style속성을 선언하여 스타일하는 방법 2- !important - Inline style보다도 우선함. * { color: blue !important; } CSS - Selector - User Action Pseudo-classes ex) a:hover { } a:active { } input:active { } input:focus { } CSS - Structural Pseudo-classes 개요 모든 가상 클래스는 ':'기호를 통해 표현합니다. element:first-child 첫 번째 element에만 적용 element:last-child 마지막 element에만 적용 element:nth-child(n) n번째 element에만 적용 (2n)으로 짝수번째 모두 선택 가능 (2n-1)으로 홀수번째 모두 선택 가능 이전 1 2 3 4 ··· 7 다음
