Atelier BiCute

Typed.js는 입력한 문자열을 설정한 시간에 맞춰 직접 입력하는듯한 느낌으로 작성을 반복해주는 기능의 JavaScript Library 입니다. 흔히 말하는 타이핑 효과를 자바스크리븥로 쉽게 구현할 수 있게 도와줍니다. (1) 설정하기 CDN 방식 아래 코드를 문서의 닫는 body 태그 위에 작성합니다. 파일을 직접 첨부하고 싶다면 공식 페이지에서 다운받아 이용하시면 됩니다. Typed.js Github > (2) JavaScript 코드 작성 기본형은 다음과 같습니다. /* ===== typing animation ===== */ let typed = new Typed(".typing", { strings: ["", "Web Designer", "Web Developer", "Graphic Desi..

MixItUp은 아래와 같은 포트폴리오의 프로젝트들 혹은 블로그의 포스트 목록, 제품들을 필터링 또는 정렬을 손쉽게 할 수 있도록 도와주는 라이브러리 입니다. 이 글에서는 필터링 기능만 설명하며 정렬등의 기능은 공식 페이지의 Get started 에서 확인 가능합니다. #1 파일 다운받기 (1) MixItUp 홈페이지로 이동한 후, 하단에 위치한 Download lastest 를 클릭하여 파일을 다운 받습니다. MixItUp 홈페이지 > (2) 압축을 풀어 dist 폴더에 있는 mixitup.min.js파일을 자식의 프로젝트 폴더로 이동합니다. #2 HTML 파일 설정 (1) 필터 기능을 컨트롤할 버튼 세팅 All Category A Category B Category C 해당 버튼들에게 data-fil..

VS Code를 이용해 코드를 작성하다보면 더미 텍스트를 입력하는 경우가 많은데 이때 Lorem ipsum을 emmet(단축키)을 이용해 많이 사용하게 됩니다. #1 lorem 가장 기본적인 사용방법입니다. lorem 입력후 엔터나 tap을 누르면 자동으로 문장이 작성되는데, 이 방법을 사용하게 되면 1줄에 약 200열 정도의 글자가 작성됩니다. 내용과 글의 양은 Emmet에서 미리 볼 수 있다 이렇게 작성하게되면 한줄로 길게 작성되는데, 우선 텍스트의 양을 원하는 만큼 잘라 내기도 해야 하고, 보기 좋게 하기위해선 하나하나 원하는 지점을 찾아 엔터를 쳐서 글을 끊어주기도 합니다. #2 lorem * (반복횟수) 추가로 로렘의 길이가 짧다고 생각할 경우 다음과 같이 *n 을 입력하는 것으로 내용을 더욱 ..

EmailJS는 서버 구축없이 자바스크립트만을 이용해 이메일 전송 폼을 만들고 이용할 수 있게 도와줍니다. 무료 이용자는 다음의 제한이 있습니다. - 월 200건 요청 가능 - 사용가능한 이메일 템플릿 2개 - 최대 50Kb 요청 - contacts history 제한 하지만!? 포트폴리오 페이지 등에 사용되는 Contact Me 같은 페이지에 사용하기엔 차고 넘치는 기능이기에 매우 추천할만 한거 같습니다. #1 사용 준비 과정 (1) 회원가입 우선 회원 가입은 필수입니다. https://www.emailjs.com/ (2) 로그인을 하게되면 Email Services 페이지가 나오는데, + Add New Service 를 눌러 연결할 이메일 서비스를 선택합니다. 네이버 같은건 없으니 Gmail을 사용하..

개인적으로 처음에는 절대적으로 기피했던 프레임워크에 대한 사용 빈도가 갈수록 높아지고 있다. 그러던 와중에 부트스트랩은 이제 좀 질려서 이번기회에 테일윈드CSS를 사용해보기로 했는데, 너무나 마음에 들어서 이런 글도 한번 적어보게 되었다. (이젠 테일윈드 없이는 코드를 짤수없는 몸이 되버렸다) CSS 프레임워크를 사용하는 이유는? 한줄로 요약하면 코드를 쉽고 간편하게 사용하기 위해서이다. 그게 정형화된 코드로 인하여 유지 보수가 편리할수도 있고, 협업할때 좋을수도 있으며, 재사용성이 높을수도 있다. 이유는 다양하지만 결국 쉽고 간편하게 쓰고싶기 때문에 사용하게 된다. #1 Bootstrap 장점도 많고 단점도 많은 가장 유명한 프레임워크. 일단 다른 장단점들 다 제쳐놓고 사용 방법이 가장 쉽다. 압도적..

서버와 데이터를 주고받는 방식은 다음 4가지로 나뉩니다. 1. 읽기 (GET) - 뭔가를 읽고 싶을 때 2. 쓰기 (POST) - 뭔가를 생성할때 3. 수정 (PUT) - 뭔가를 수정할때 4. 삭제 (DELETE) - 뭔가를 삭제할때 *CRUD라고도 하는데 Create(쓰기), Read(읽기), Update(수정), Delete(삭제)를 뜻합니다. 이번 게시물은 GET에 대한 설명입니다. GET 요청 무엇인가를 보여주세요~라고 요청하는 것인데, 인터넷 창에 주소를 적는 것 자체가 GET 요청입니다. https://bicute.net/71 이렇게 작성하는 것은 bicute 사이트의 71번째 게시물을 보여달라고 서버에 요청하는 것이며, 서버가 이를 확인하고 사용자에게 해당 내용을 보여주는 것입니다. 사용 방..

node.js로 서버를 만들고 작업한 프로젝트를 Google Cloud Platform으로 배포하는 방법입니다. #1. app.yaml 파일 생성 서버 설정파일 (server.js)이 있는 루트폴더쪽에 app.yaml 파일을 생성합니다. app.yaml 파일에서 App Engine 앱의 설정을 구성할 수 있습니다. 또한 app.yaml 파일에는 앱 코드, Node.js 런타임, 환경 변수에 대한 정보가 포함되어 있습니다. runtime: nodejs env: flex // 오토매틱 스케일링 설정 (수동 설정 가능) automatic_scaling: min_num_instances: 1 max_num_instances: 15 cool_down_period_sec: 180 cpu_utilization: ta..

#1 ejs란? Embedded JavaScript Template HTML을 조금 더 쉽게 사용할 수 있도록 도와주는 템플린 엔진입니다. 리액트와 뷰처럼 서버에서 데이터를 가져와서 HTML에 바로 적용하여 사용할 수 있게 되는데 예를 들면 다음과 같습니다. (더러운 클래스들은 부트스트랩용이니 무시하시고 중간중간의 부분만 확인하시면 됩니다) DELETE 위와 같이 HTML문서에 for를 이용한 반복문을 서버에서 가져온 데이터의 수만큼 반복하고, 내용 또한 서버에서 가져온 제목과 설명으로 수십, 수백 개의 글을 한 번에 쉽게 처리할 수 있습니다. (블로그 글, 쇼핑몰 아이템들 등) ejs는 새로운 문법을 배울 필요 없이 거의 모든 명령을 로 끝내면 되기에 매우 간편하게 사용할 수 있는 것이 특징입니다. #..

#1 Express Express는 'Node.js 를 위한 빠르고 자유로운 미니멀리즘 웹 프레임워크'라고 되어있는데, 바꿔 말하면 Node.js를 사용하여 서버를 쉽게 구성할 수 있게 도와주는 프레임 워크입니다. #2 Express 설치하기 (1) Node.js 설치 express를 설치하기위해선 우선 Node.js를 설치해야 합니다. 이미 설치가 되어있다면 터미널을 열어 node -v라고 입력했을때 설치되어있는 버전을 확인 할 수 있습니다. 설치가 되어 있지 않다면 Node.js 사이트에서 설치를 진행하면 됩니다. Node.js 공식 페이지 > (2) 초기화(initialize) 작업 폴더로 이동한 후 터미널을 열고 npm init이라 입력해 줍니다. 초기화 작업을 하게되면 아래와 같이 계속해서 무언..

서버에 보통 자료를 요청할 때는 GET, 자료를 생성하거나 업데이트할 때는 POST라고 작성하고 서버의 주소를 함께 적는 것으로 해당 위치에 자료를 가져오거나 업데이트를 진행할 수 있습니다. 이러한 경우 기본적으로는 페이지가 새로고침이 되는데, AJAX는 페이지 전체를 리프레쉬하지 않고, 일부분만을 업데이트할 수 있게 도와줍니다. AJAX를 사용하는 방법은 여러가지가 있는데, 이 글에서는 axios라는 라이브러리를 사용하는 방법에 대하여 설명합니다. #1 설치 npm 사용하기: $ npm install axios yarn 사용하기: $ yarn add axios #2 사용하기 get 요청은... axios.get('URL주소')형식으로 작성하고, .then에는 데이터 요청 성공 시 수행할 코드, .cat..