본문 바로가기

전체 글109

[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.
[BOJ] 6549. 히스토그램에서 가장 큰 직사각형 6549번: 히스토그램에서 가장 큰 직사각형 문제 히스토그램은 직사각형 여러 개가 아래쪽으로 정렬되어 있는 도형이다. 각 직사각형은 같은 너비를 가지고 있지만, 높이는 서로 다를 수도 있다. 예를 들어, 왼쪽 그림은 높이가 2, 1, 4, 5, 1, 3, 3이고 너비가 1인 직사각형으로 이루어진 히스토그램이다. 히스토그램에서 가장 넓이가 큰 직사각형을 구하는 프로그램을 작성하시오. 입력 입력은 테스트 케이스 여러 개로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있고, 직사각형의 수 n이 www.acmicpc.net 나를 몇달동안 괴롭혔던 문제다. 처음에는 로직이 생각이 안 났고, 로직을 알고 나니 구현이 귀찮았다... 사실 귀찮아할 만큼 구현이 복잡한 문제는 아니고, 아이디어만 알면 쉽게 풀 .. 2020. 5. 13.
[리액트 네이티브] RN 소개 및 장단점 리액트 네이티브(React Native)는 페이스북에서 만든 모바일 앱 프레임워크로서, 자바스크립트 프레임워크인 리액트를 기반으로 한다. 일반적으로 하이브리드 앱(ex. 아이오닉)은 웹앱을 네이티브 컴포넌트로 포팅한 개념이다. 웹 개발 하듯이 개발 하면, 프레임워크가 웹앱을 네이티브 컴포넌트로 감싸주는 역할을 한다. 네이티브 앱처럼 보이는 웹뷰라고 생각하면 되겠다. 그런데 RN은 일단 네이티브로 컴파일을 하기 때문에 하이브리드 앱과는 다르고, 그보다 성능이 좋다는 장점이 있다. 이를 포함해서 RN은 장단점이 확실한 편인데, 좁은 식견으로 다음과 같은 몇몇 장단점을 알아보았다. 장점 | 1. 크로스 플랫폼 개발이 용이 | 어느 정도 최적화가 필요하겠지만, IOS와 안드로이드 두 플랫폼을 동시에 개발할 수 .. 2020. 5. 12.
[CSS] 티스토리 스킨 커서 바꾸기 https://www.cursor.cc/ 등의 사이트에서 원하는 커서를 커스터마이징하거나, 다운받아 .cur 파일로 준비한다. 스킨 편집 화면에서 파일 올리기에 들어가 원하는 cur 파일을 추가해준다. CSS 편집 화면에 들어가 html, body {} 안에 cursor:url(images/파일명.cur), auto; 를 넣어준다. 2020. 5. 7.
[픽셀아트] 0507 관리포터 친구의 사진을 토대로 그려 보았다. 아래는 원본... 미안... 보기 2020. 5. 7.
[요리] 야매 간장 마늘 파스타 레시피 | 1. 면을 삶는다. 2. 기름을 취향껏 팬에 붓고 마늘과 파를 볶는다. 3. 향이 올라오면 대패삼겹살과 양파를 볶는다. 4. 삶아둔 면을 넣고 섞는다. 5. 간장과 멸치액젓을 몇 숟가락 넣어가며 간을 맞추고, 기호에 따라 설탕을 반~한 스푼 정도 넣는다. 6. 계란 노른자를 올리고 후추와 파슬리를 적당히 뿌려 준다. 정량의 레시피가 있는 것은 아니고, 그냥 집에 있는 재료들로 만들기 좋은 파스타이다. 마늘은 썰든 다지든 갈든 별 상관 없고, 고기나 양파는 없어도 된다. 물론 넣으면 더 맛있다. 대신 양파를 많이 넣으면 달아지기 때문에 설탕 양을 조절할 필요가 있다. 간은 먹어보면서 적당히 맞추면 된다. 기본적으로는 간장으로 간을 하고, 멸치액젓도 쪼르륵 섞어줘야 좀 더 맛있다. 계란 노른자를 .. 2020. 5. 4.
[픽셀아트] 0501 후드티 자주 입고다니는 후드티와 바지를 그려보았다. 애니메이션은 간단하게만 넣었다. 나중에 모션을 더 추가해봐야지. '나'를 그리려고 생각하기 전에는 눈이 조금 더 컸는데.. 현실을 반영해서 줄였다. 저번에 그렸던 동아리방에 얘를 넣으면 이런 느낌.. (크기가 안 맞아서 좀 웃기다.) 더보기 2020. 5. 1.

티스토리툴바