본문 바로가기

Web36

[GCP] 구글 클라우드 DNS에 도메인 연결하기 원래는 AWS Router53에서 구매하려고 했는데 원하는 도메인이 없어서 네임칩에서 도메인을 구입했다. 구글 클라우드에 기존에 만들어 놓은 인스턴스가 있어서 여기에 도메인을 연결하려고 한다. 우선 구글 클라우드 콘솔에서 Cloud DNS에 접속한다. 영역 만들기를 클릭한다. 각 필드를 적당히 입력해준다. 이렇게 네임서버 주소가 나온다. 레코드 모음 항목 추가를 누르고 A 레코드를 추가해주고, 연결될 서버 인스턴스 IP 주소를 입력해준다. 기존 도메인 구입처에서 네임서버를 위의 구글 네임서버 주소로 바꾸어 준다. 네임칩의 경우는 관리 패널에서 바꿀 수 있다. 이제 r4bb1t.dev로 들어가면 기존 인스턴스로 연결된다. DNS 설정 전에는 서버 IP 주소를 찾을 수 없다고 뜬다. DNS 설정 후에는 연결.. 2020. 7. 20.
[리액트] 이미지 업로더 - 서버에 이미지 Post로 보내기 https://r4bb1t.tistory.com/29를 이용해 클라이언트에서 서버에 이미지를 업로드하면 그 이미지를 표시해주는 업로더를 만들어보자. 클라이언트 | import React, { useState} from "react"; import * as S from "./styles"; import axios from "axios"; import AddAPhotoIcon from "@material-ui/icons/AddPhotoAlternate"; function ImageUploader() { const [imageUrl, setImageUrl] = useState("디폴트 이미지 주소"); const setFile = (e) => {}; return ( setFile(e)} /> ); } expo.. 2020. 7. 20.
[리액트] 드래그 앤 드롭, 리사이징 리스트 만들기 개요 | 드래그 앤 드롭으로 순서 변경 및 리사이징까지 가능한 리스트를 만들어보았다. 코드 예시는 맨 밑에 있다. 모듈 설치 | 우선 React DnD 모듈을 사용하기로 했다. 더보기 $yarn add react-dnd react-dnd-html5-backend immutable 드래그 앤 드롭을 원활하게 사용하기 위해 react-dnd 모듈을, Card들을 배열로 관리하기 용이하게 immutable 모듈을 설치해준다. 컴포넌트 만들기 | - Table Table이라는 전체 총괄 컴포넌트 안에 Card 컴포넌트 여러 개가 있고, 카드의 위치 변경이나 리사이즈 등 변화는 전부 Table에서 관리한다. Card에 props로 주는 정보는 카드의 id, 카드의 내용 (children), 카드의 크기(heigh.. 2020. 6. 2.
[GCS] 구글 클라우드 스토리지(GCS)로 파일 업로드 후 접근 URL 생성하기 1. 새 프로젝트 및 버킷 만들기 | 구글 클라우드 스토리지에서 새 버킷을 만들어 준다. 나는 대충 이렇게 했다. 아래부터는 이 문서를 93.5% 정도 따라하는 내용이다😁 2. 초기 설정 | $ npm init -y $ npx tsc --init $ npm install -S typescript @google-cloud/storage dotenv express multer pug $ npm install -D @types/express @types/node nodemon ts를 쓸 것이기 때문에 typescript도 설치해 준다. { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "outDir".. 2020. 6. 1.
[GCS] [번역] 브라우저에서 구글 클라우드 스토리지(GCS)로 파일 업로드하기 원글 | https://medium.com/imersotechblog/upload-files-to-google-cloud-storage-gcs-from-the-browser-159810bb11e3 Upload Files to Google Cloud Storage (GCS) From the Browser After having spent the better part of a day struggling to upload files straight from the browser to GCS I felt the internet could do good… medium.com ※ Papago와 짧은 영어 지식을 동원해서 번역했습니다. 오역한 부분이 있다면 알려주세요😏 브라우저에서 GCS로 파일을 직접 업로드하기 위.. 2020. 6. 1.
[리액트] 수정 가능한 텍스트 박스 만들기 기본적으로는 그냥 텍스트로 보이지만, 클릭하면 수정할 수 있는 텍스트 박스를 만들어 보자! 우선 필요한 기능은 다음과 같이 간단하다. 1. editable 상태에 따라 plain text / input box로 표시되어야 한다. 2. 엔터 버튼을 누르거나, 컴포넌트 외부를 클릭하면 editable이 false가 되어야 한다. import React, { useState } from "react"; interface TextInputProps { init: string; } function TextInput({ init }: TextInputProps) { const [text, setText] = useState(init); const [editable, setEditable] = useState(fal.. 2020. 5. 25.
[리액트] immutable-js 사용해보기 리액트에서 state는 항상 불변이어야 한다. state의 기존 객체를 직접 수정할 수 없고, setState 함수를 통해서만 수정해주어야 한다. 그렇지 않으면 컴포넌트가 재 렌더링되지 않는다. setState 호출 -> shouldComponentUpdate가 true -> 가상 DOM과 실제 DOM을 비교해서 다르면 -> 화면을 다시 그린다. immutable한 변수를 사용하면, 변수의 내용을 하나하나 비교할 것 없이 레퍼런스만 비교하면 되기 때문에 부담이 줄게 된다. 이런 immutable한 변수를 만드는 방법에는 immutability-helper나 immutable-js가 있다. Immutable-js | $ npm install immutable $ yarn add immutable npm이나.. 2020. 5. 21.
[리액트] TypeScript, Styled-Components 프로젝트 초기 셋팅 $ npx create-react-app my-app --typescript TypeScript와 Styled-Components를 같이 이용할 것이다. npx create-react-app에 --typescript 옵션을 줘 my-app이라는 프로젝트를 만들어준다. $ cd my-app $ npm install --save @types/styled-components 프로젝트 폴더로 이동한 후 Styled-Components를 설치한다. 와! 2020. 5. 14.
[JS] 티스토리 달력 위젯 만들기 티스토리 사이드바에 무엇을 넣으면 좋을까 하다가, 간단한 달력이 있으면 좋을 것 같아서 만들어 보았다. Date를 이용해 월별 달력 배열 만들기 | let today = new Date(); let final = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if (today.getFullYear() % 4 == 0 && (today.getFullYear() % 100 != 0 || today.getFullYear() % 400 == 0)) { final = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; } function prev() { today = new Date(today.getFullYear(), today.g.. 2020. 5. 14.
[CSS] 티스토리 스킨 커서 바꾸기 https://www.cursor.cc/ 등의 사이트에서 원하는 커서를 커스터마이징하거나, 다운받아 .cur 파일로 준비한다. 스킨 편집 화면에서 파일 올리기에 들어가 원하는 cur 파일을 추가해준다. CSS 편집 화면에 들어가 html, body {} 안에 cursor:url(images/파일명.cur), auto; 를 넣어준다. 2020. 5. 7.
[NodeJS] 소켓을 이용한 간단한 채팅방 만들기 net 모듈을 이용하여 TCP 프로토콜로 서버-클라이언트 간 데이터를 전송하는 코드이다. 서버 | socket-server.js const net = require("net"); let pool = []; const server = net.createServer((socket) => { pool.push(socket); socket.on("data", (data) => { let d = JSON.parse(data); switch (d.type) { case "CONNECT": for (let s of pool) s.write(d.content + " connected!"); break; case "CHAT": for (let s of pool) s.write(d.content); break; } });.. 2020. 4. 30.
[기타] URL과 URI의 차이 최근에 백엔드 공부를 하면서, encodeURI, decodeURI 함수를 접하게 되었는데, 처음엔 오타인 줄 알았다. URI가 URL의 오타인 것은 당연히 아니고, URL은 Uniform Resource Locator, URI는 Uniform Resource Identifier의 약자이다. 일단 결론부터 말하자면 URL은 URI에 포함되는 개념이다. URI는 통합 자원 식별자로 인터넷에 있는 자원을 나타내는 유일한 주소이다. 어떤 형식이 있는 것은 아니고, 특정 자원을 식별하는 문자열의 개념 자체를 의미한다. URL은 통합 자원 위치로 인터넷 상의 자원 위치이다. https://r4bb1t.tistory.com은 https://r4bb1t.tistory.com 라는 서버를 가리키는 URL이자 URI이다.. 2020. 4. 28.

티스토리툴바