전체 글48 FontAwesome 아이콘 색깔 지정 FontAwesome에서 이전에는 i 태그로 아이콘을 삽입했었는데 svg도 지원하게 되면서 이번에 svg 아이콘을 사용했습니다. FontAwesome에서 svg로 아이콘을 불러와서 svg에 color 를 지정해줬는데 동작하지 않아서 저와 같은 사람이 있을까봐 작성합니다. 색깔이 적용되지 않은 모습을 볼 수 있습니다. 검색을 해보니까 svg 안에 있는 path의 색상을 지정해줘야 바꿔지더라고요! 저는 props로 iconColor를 지정받아서 적용시켜주었습니다~ 2021. 9. 19. Docker 이용해서 Let's Encrypt 인증서 발급 받기 (https 설정) 도메인 주소 발급 먼저 ssl 인증서를 발급 받기 위해선 도메인 주소를 얻어야 합니다. 무료로는 freenom (https://www.freenom.com/) 을 추천드리고, 유료는 AWS Route 53을 추천드립니다. (왜냐면 제가 두 곳만 써봤습니당.하하) Let's Encrypt 인증서 발급 도메인 주소를 받았으면 배포한 서버에 접속해서 아래와 같이 입력합니다. 도메인 주소라고 적힌 부분에는 본인의 도메인 주소를 넣어주면 됩니다. ex) ziho.com docker run -it --rm --name certbot \ -v '/etc/letsencrypt:/etc/letsencrypt' \ -v '/var/lib/letsencrypt:/var/lib/letsencryp.. 2021. 9. 9. PUG - 템플릿 엔진 Pug Pug는 템플릿 엔진입니다. HTML의 정적인 단점을 개선하여 반복문, 조건문, 변수 등을 사용할 수 있고 동적인 페이지 작성이 가능합니다. 특징 꺾쇠가 필요없습니다. 기존 html보다 코드가 간결합니다. 들여쓰기로 계층 구조를 표현합니다.(중요) 셋팅 저는 vscode에서 prettier 익스텐션을 사용하는데, 기본 prettier는 pug 확장자를 지원하지 않습니다. 그래서 추가적으로 pug를 인식하도록 플러그인을 설치 해줘야 했습니다. npm i -D prettier @prettier/plugin-pug들여쓰기가 중요하다보니 prettier를 활용했습니다. express로 사용할 경우, //pug 파일 폴더 지정 app.set('views', path.join(__dirname.. 2021. 8. 30. 리액트에서 tailwindcss 사용하기. 그런데 styled-components를 곁들인. 저는 리액트에서 주로 styled-components를 이용해서 스타일링을 하고 있습니다. 스타일링에 항상 자신이 없어서 이번에 tailwindcss를 써봤는데, 반응형도 처리하기 쉽고 생각보다 편리하더군요. 그래서 styled-components + tailwindcss 를 사용한 세팅 방법을 기록하기 위해 작성합니다. 저 두가지에 추가적으로 twin.macro 라는 라이브러리를 사용했는데요. 이 라이브러리는 styled-components 안에서 tailwindcss를 작성할 수 있게 도와줍니다. 짱짱 설치 tailwindcss 설치 yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 craco 설치 y.. 2021. 8. 20. JS Date.now() timestamp 날짜 처리 JS로 데이터 생성시간을 저장하기 위해 {createdAt: Date.now()} 형태로 저장시켜주었습니다. 이렇게 저장시키면 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 ms를 반환합니다. 해당 데이터를 다시 가져올 때, 보기 좋게 변환시켜주기 위해 아래와 같이 작성했습니다. timestamp 변환 예시 const createdAt = 1626081551593; const timestamp = new Intl.DateTimeFormat("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }).format(createdAt); 이렇게 설정할 경우에는 2021. 07. 1.. 2021. 8. 20. 리액트에서 .env 사용하기 리액트에서 .env 사용하기 DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 환경 변수 파일을 외부에 만들어 소스코드 내에 하드코딩 하지 않고 사용하는 방법으로 .env 파일을 생성하는 것이다. ( 터미널로 직접 환경변수를 설정해줘도 된다. ) 리액트에서는 특이하게도 REACT_APP 으로 시작되어야 인식을 한다. # .env REACT_APP_FIREBASE_API_KEY = key REACT_APP_FIREBASE_AUTH_DOMAIN = auth_domain해당 환경변수를 사용하는 방법은 아래와 같다. console.log(process.env.REACT_APP_FIREBASE_API_KEY) 2021. 8. 20. Djongo 자동으로 integer id 생성되는 경우 몽고DB는 ObjectId가 자동으로 생성되는걸 알아서 Django models에 따로 적지 않았는데, 이렇게 될 경우 Integer id가 자동으로 생성됩니다. 즉 DB에는 ObjectId와 id 2개의 id 필드가 생겨버립니다. # models.py class Test(models.Model): name = models.TextField(null=True, default="Jill") class Meta: db_table = "Test" 저희는 ObjectId만을 사용하고 싶기 때문에, model에 꼭 ObjectIdField의 _id 를 적어주셔야 합니다! from djongo import models class Test(models.Model): _id = models.ObjectIdField().. 2021. 8. 20. React 특정 DOM으로 스크롤 이동시키기 ref 리액트에서 ref는 DOM에 직접 접근할 때 사용합니다. 저는 특정 div태그들에 직접 접근해서 해당 위치로 스크롤을 이동시키기 위해, 이 ref를 사용했습니다. import React, { useRef } from 'react'; function HomePage() { ... const homeRef = useRef(null); ... return ( ... ) } 이 처럼 div태그에 homeRef를 지정해주었습니다. 이제 클릭 이벤트를 생성해서, 해당 ref 위치로 가게 설정해보겠습니다. function HomePage() { ... const homeRef = useRef(null); const onHomeClick = () => { homeRef.current?.scrollIntoView.. 2021. 8. 19. ImportError: cannot import name 'abc' from 'bson.py3compat GCE 가상머신에서 도커 이미지를 불러오는 도중에 아래와 같은 에러가 발생했습니다. ImportError: cannot import name 'abc' from 'bson.py3compat 검색 결과 bson과 pymongo가 같이 설치되어 있을 때 충돌이 발생하는 에러였습니다. bson Github issue에 해당 에러에 대한 내용이 있었는데, pymongo 라이브러리를 설치하면 bson도 같이 설치되기 때문에 추가적으로 bson을 설치할 필요가 없다는 내용이 있었습니다. 그래서 bson은 따로 설치할 필요 없이, pymongo만 설치해서 해당 에러를 해결할 수 있었습니다. 2021. 8. 19. 이전 1 2 3 4 5 6 다음
