Dev 47

VS Code - lorem ipsum 제어하기 (자동 줄바꿈 등)

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

Dev/HTML & CSS 2022.06.26

EmailJS - 서버 없이 이메일 폼 구현하기 (포트폴리오 페이지에 유용)

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

Dev/Library 2022.06.20

추천하는 CSS 프레임워크 Top 6

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

Dev/HTML & CSS 2022.06.09

서버에 요청하기 1. GET

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

Google Cloud Platform으로 프로젝트 배포하기

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..

[npm] ejs - DB에서 가져온 데이터를 HTML에 손쉽게 넣자

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

[npm] 서버 구성의 시작 Express

#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이라 입력해 줍니다. 초기화 작업을 하게되면 아래와 같이 계속해서 무언..

[React] axios 사용하여 서버와 데이터 주고받기

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

Dev/React 2022.05.30

[React] 라우터 사용방법 (react-router-dom@v6)

#1 설치와 세팅 설치 터미널을 열고 아래 방식 중 원하는 방식으로 설치 npm 설치 $ npm install react-router-dom@6 yarn 설치 $ yarn add react-router-dom@6 세팅 index.js 파일을 열어 브라우저 상단에 BrowserRouter를 import 하고, 를 로 감싸 주면 이제 앱 어디에서나 React Router를 사용할 수 있게 됩니다. import { BrowserRouter } from 'react-router-dom'; ... #2 기본 사용법 페이지 나누기 App.js 파일의 상단에 Routes, Route, Link를 import 해옵니다. 페이지가 변경되며 표시될 위치에 컴포넌트를 작성해주고, 안에 를 넣어줍니다. 이 Route가 각각의..

Dev/React 2022.05.28

[React] styled-components 설치와 사용 방법

설치 방법 npm install styled-components 터미널을 열어 위 코드를 입력해주면 끝입니다. 공식 페이지의 install 설명에는 --save옵션이 포함되어 있는데, --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미입니다. 모듈이 추가되어 있지 않으면, 파일을 공유하거나 옮길 때 많게는 수백 메가에 달하는 node_moduls 폴더를 함께 옮겨야 하는데, dependency 항목에 모듈이 추가되어 있다면, 이 항목을 체크하면서 자동으로 관련된 모듈을 다운로드합니다. 하지만 현제 release 되는 버전들은 --save 옵션이 기본 적용되어 있어 --save를 사용하지 않아도 자동으로 추가됩니다. 사용 방법 가져오기 (import) import..

Dev/React 2022.05.26
반응형