Slick Slider란 ? Slick Slider는 JQuery 기반으로, 슬라이더를 구현하기 쉽게 해주는 플러그인이다. 공식 페이지는 다음과 같다. Slick Slider 공식페이지 뮤지컬 관련 프로젝트를 하면서, 사용자에게 뮤지컬을 추천해주는 서비스를 만들었는데, 서비스를 제공하는 화면을 Netflix처럼 슬라이더를 사용해보면 좋을 것 같다는 생각에 슬라이더를 구현하는 방법을 찾아보게되었고, 사용방법이 비교적 간단하고 테스트해봤을때 매끄럽게 잘 돌아가서 Slick Slider를 사용했다. 사용법 라이브러리 연결 CDN을 이용해서 slick.css, slick-theme.css, slick.min.js, jQuery를 연결한다. 다음의 코드를 HTML에 넣어줍니다. 로딩속도를 위해서 는 안에, sli..

1. 쿠키 또는 세션을 사용하는 이유 HTTP 통신인증의 단점을 해결하기위한 방법으로 쿠키 또는 세션을 사용한다. HTTP 프로토콜 통신의 단점은 1) 통신이 끝나면 상태를 유지하지않음 2) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않음 만약에 웹사이트에서 쿠키 / 세션을 사용하지않는다면, 페이지를 이동할때마다 로그인을 새로해야한다. 쿠키 / 세션을 사용한다면 사용자에 대한 인증을 유지한다. 2. 쿠키(Cookie) 쿠키는 클라이언트(브라우저)에 저장되는 키와 값을 가진 데이터 파일이다. 사용자 인증 유효시간을 명시할 수 있고, 이를 통해 브라우저가 종료되어도 인증을 유지시킬 수 있다.(클라이언트 정보를 로컬에 저장했다가 참조함) 클라이언트에 300개까지 저장가능하고, 도..

로그인 인증방법 정리 뮤지컬을 추천해주는 프로젝트를 진행중이다. 궁극적으로는 웹사이트에서 사용자별 추천시스템과, 커뮤니티 기능을 구현할 것이기에, 로그인 기능이 필요하다. 로그인 기능 구현에 앞서서 인증방법에 대해서 조사하면서 정리해봤다. 로그인 인증 방식 - Cookie & Session - JWT(Access Token / Refresh Token) - OAuth 2.0 - SNS 인증을 왜 해야 하나요? 인증은 프론트쪽에서 생각했을때, 비회원과 회원을 구분하는 시작부분이라 볼 수 있다. 서버사이드 쪽에서 본다면 사용자를 확인하는 작업이기도 하다. 현재 모바일/웹에서 가장 많이 쓰이는 통신 방식은 HTTP 통신이다. HTTP는 응답하고나서 연결이 끊기고, 연결이 끊긴 이후에는 연결정보가 사라진다. 따..

다양한 방법으로 배포하기 1. Fly.io (Fly.io 계정이 필요함) 참고 : https://fly.io/docs/hands-on/install-flyctl/ Install flyctl Documentation and guides from the team at Fly.io. fly.io $ curl -L https://fly.io/install.sh | sh (터미널에 입력) $ tail -n 3 ~/.zshrc ( ~/.zshrc 에 다음 3줄을 추가하세요) # fly.io export FLYCTL_INSTALL="/home/dj26/.fly" export PATH="$FLYCTL_INSTALL/bin:$PATH" $ fly auth login $ flyctl launch app name : 앱이름..

웹코딩 에디터인 Adobe Brackets 사용 시에 유용한 플러그인 정리 Brackets 환경설정할때 쓰기위해서 유용한 플러그인들을 간단하게 정리해보려고한다. 위 사진처럼 블럭모양의 버튼을 클릭하면 설치하는 플러그인을 설치할 수 있는 창이 열린다. 1. Emmet 도움말 옆에 Emmet탭이 생기며 코딩을 빠르게 하기위한 다양한 기능을 제공함. 2. Beautify Ctrl + Shif + L로 사용하며 코드를 자동으로 정리해줌(들여쓰기) 3. Custom Work 탭을 만들어줌. 탭바 우측끝에 설정을 통해서 커스터마이징 가능. 4. Brackets Icons 설치시 적용되며 좌측 네비바에 있는 파일 목록에 아이콘이 생김. 5. Better HTML5 template 새 문서를 만들때 기본 세팅을 해줌...

1. install D2 font https://github.com/naver/d2codingfont GitHub - naver/d2codingfont: D2 Coding 글꼴 D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 2. 폰트 변경 및 테마수정 2.1 다운받은 폰트 적용 및 시작설정 2.2 테마변경 2.2.1 oh my zsh 설치 : https://ohmyz.sh/#install 명령어 입력 : vi ~/.zshrc THEME 변경 3. install pyenv https://github.com/pyenv/pyenv#automatic-installer $cu..