Atelier BiCute

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

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

웹의 특정 요소를 조작할 때, 가장 간편한 방법은 CSS로 해당 속성을 미리 지정한 후, 클래스를 추가 삭제하는 방식으로 제어하는 것입니다. 아래는 클래스를 제어와 관계있는 classList 속성과 className에 관한 예시입니다.. - Setting - BUTTON bt1과 bt2라는 2개의 클래스를 가진 버튼을 생성. // JavaSciprt let $button = document.querySelector('button') $button.addEventListener('click', () => { // $button.classList.add("active", "add"); // $button.classList.remove("bt2"); // $button.classList.toggle("acti..

막상 사용해보면 비슷한데, 조금씩 용도가 다른 innerHTML / innerText / textContent 의 차이점입니다. - Setting - // HTML 헬로 월드 헬로 자바스크립트 숨겨놓은 글 // JavaScript let $textbox = document.getElementById('textbox'); innerHTML console.log($textbox.innerHTML); 해당 요소의 HTML값을 그대로 가져옵니다. 출력 결과 " 헬로 월드 헬로 자바스크립트 숨겨놓은 글 " ※ console.log나 alert 등으로 출력을 할경우 내부 태그도 함께 보이지만, 당연하게도 document.write로 출력할 경우엔 태그 속성이 적용된 [헬로 월드 헬로 자바스크립트]로 출력됩니다. i..

생명주기 메서드 생명주기 메서드(Lifecycle Methods)는 클래스형 컴포넌트에 사용되는데, 컴포넌트가 브라우저에 ① 나타나고, ② 업데이트되고, ③ 사라지게 될 때 작동되는 메서드입니다. 이렇게 태어나고(생성) 사라지게 될 때까지의 컴포넌트의 인생을 Lifecycle이라 표현하는 것인데, 사용 방법은 대략 아래와 같습니다. class Lifecycle extends React.Component { componentDidMount(){ // 컴포넌트가 Mount될 때 실행될 코드 } componentDidUpdate(){ // 컴포넌트가 Update될 때 실행될 코드 } componentWillUnmount(){ // 컴포넌트가 unmount될 때 실행될 코드 } } useEffect 라이프사이클..

BiCute 스킨에 많은 부분 변화가 있었습니다. 전체적으로 모바일에서 보기 좋아졌으며, 효과들이 단순화 되었습니다. 추가로 게시물의 스타일을 조금은 애플스럽게(?) 변경하였습니다. 상세한 변동 내용은 아래와 같습니다. 커버 스타일 Ver. 1 Ver. 2 (1) 전체적인 마우스 오버 효과 삭제 썸네일에 검게 테두리가 나타나는 효과 / 제목에 배경 색이 슬라이드 되는 효과 제거. 마우스 포인터에 효과를 주어 링크 위로 마우스가 올라가면 포인터가 변하도록 변경 (2) 반응형 1:1 비율 3단 포스터 하단 제목을 삭제 / 이미지로 표시 / 게시물간 여백 조절 (3) 단순 텍스트 타입 스타일 변경 하단 날짜 삭제 및 모바일에 어울리는 디자인으로 변경 본문 스타일 (1) 폰트 색상 조절을 통하여 라이트 모드와 ..