Atelier BiCute

이 게시물은 2021.03.11 타 블로그에 작성된 내용의 백업본입니다. 블로그를 새로 만들었다면 블로그 대표 이미지, 블로그의 이름, 닉네임 수식어, 블로그 설명 등도 하나씩 설정해 주어야 합니다. 티스토리의 '블로그 관리 홈' 화면의 왼쪽 아래에 있는 '관리 > 블로그'에서 설정 가능합니다. 일단 가장 위의 대표 이미지는 원하는 이미지를 등록해주세요. 저의 경우는 HOKARI의 앞글자를 따서 Ho에 말풍선과 느낌표를 달아 하이텐션 분위기로 간단히 만들어 봤습니다. 기왕이면 직접 만든 로고라면 여러 가지 색상 변경이나 png(배경 없는) 파일이 필요한 경우가 생길 수 있으니 원본도 항상 보관해 두는 걸 추천드려요! 블로그 이름은 이미 만들 때부터 생각해서 작성하였겠지만, 수정이 필요하면 이곳에서 변경이..

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

이 게시물은 2021.03.09 타 블로그에 작성된 내용의 백업본입니다. 블로그를 생성하였다면 이제 글을 쓰고 그 글들을 분류하기 위한 카테고리를 설정할 차례입니다. 카테고리는 '블로그 관리 > 카테고리 관리'에서 생성 및 변경이 가능합니다. *아래의 내용은 이 시점의 저의 블로그를 기준으로 설명하고 있습니다. 각 항목별 자신에게 맞는 설정으로 진행하시면 됩니다. #1 카테고리 설정 상단에 카테고리 관리가 있지만 아래쪽의 카테고리 설정부터 하도록 합시다 다른건 굳이 건들 필요는 없다 생각하며, 여기서 건들만한 건 2가지. 카테고리별 글 수 : 이건 취향대로 설정하면 되지만, 처음이면 글이 너무 얼마 없으니 일단은 너무 없어 보이지 않게 저는 '표시하지 않습니다'로 설정 새 글 여부를 표시 : 글이 대량으..

이 게시물은 2021.03.07 타 블로그에 작성된 내용의 백업본입니다. 블로그를 시작해보고 싶다면... 만일 블로그를 해보고 싶은 마음은 가득하지만 어떤 글을 써야 할지도 모르겠고, 쓰고 싶은 글은 있지만 아직 준비가 되어있지 않은 거 같아 시작을 못하고 있다면! 일단 블로그를 만드세요. 유튜브도 모든 장비를 갖추고 시작할 필요가 없고, 결혼생활도 집을 꼭 먼저 살 필요는 없습니다. 하다 보면 그에 맞춰 어떻게든 됩니다. 우선 시작하고 유지하는 게 중요해요. 하다못해 시작한 게 실패하게 되더라도 그게 모두 자신의 경험이 되어, 다음번의 좋은 자료가 되어 줍니다.

서버와 데이터를 주고받는 방식은 다음 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..

#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가 각각의..