💕
후원
본문 바로가기

분류 전체보기113

[CSS] 스크롤바 커스텀하기 스크롤바 커스텀을 적용하고 싶은 CSS에 아래를 추가해주면 된다. ::-webkit-scrollbar { //width: 스크롤바 너비; } ::-webkit-scrollbar-track { //스크롤 영역 스타일 } ::-webkit-scrollbar-thumb { //스크롤 막대 스타일 } 예시 | ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #eeeeee; } ::-webkit-scrollbar-thumb { background: linear-gradient(#c2e59c, #64b3f4); } 이런 식으로 그라디언트를 넣어줄 수도 있다. ::-webkit-scrollbar { width: 10px; } :.. 2020. 8. 5.
[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.
[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.

티스토리툴바