티스토리

beside 연구실

검색하기

블로그 홈

beside 연구실

beside-lab.tistory.com/m

주식, ETF, IT (프로그래밍), 이슈 정보 제공

구독자: 34

방명록 방문하기

반응형

주요 글 목록

GCE (Google Compute Engine) 인스턴스에 ssh (Putty) & ftp (Filezilla) 연결하는 방법 Google Compute Engine (이하 GCE)를 사용하다보면 브라우저를 통해 Google cloud platform에 접속하여 ssh로 접속하는 것이 귀찮아 질때가 많습니다. SSH를 이용하면 VM(Virtual Machine) 인스턴스 Shell에 손쉽게 접근이 가능해져 인스턴스 관리가 훨씬 편해집니다. 또, VM 인스턴스에 파일을 업로드나 다운로드하는 것도 Filezilla와 같은 FTP없이는 굉장히 피곤한 일입니다. FTP를 연결해놓으면 VM 인스턴스에 파일 관리가 너무 편해지기 때문에 저는 인스턴스 생성 후 무조건 FTP는 연결해놓습니다! 그럼 WINDOWS 운영체제를 기준으로 GCE에 ssh와 filezilla ftp 접속하는 방법을 간단히 알아보도록 하겠습니다. 1. PUTTY & P.. 공감수 0 댓글수 0 2022. 4. 8.
npm 특정 버전의 모듈을 설치하는 방법 NPM (Node Package Manager)은 자바스크립트 패키지 매니저로써 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 합니다. 개발자는 npm 저장소에 업로드된 모듈들을 아래 명령어를 통해 쉽게 다운받아 사용할 수 있습니다. npm install firebase npm install -f firebase // 강제 설치 하지만, 종종 어떤 모듈의 특정 버전을 설치하고 싶은 경우가 있습니다 (일반적으로 종속성 문제때문이지요) 예를 들어, firebase 모듈은 아래 버전들이 있습니다. 굉장히 많은 버전이 있군요. 저도 firebase 모듈을 최신 버전으로 업데이트하니 특정 기능이 종속성 문제로 작동을 안해서 결국 다운그레이드를 결정했습니다. 특정 버전 8.10.0 버전.. 공감수 1 댓글수 0 2021. 12. 7.
nextjs에 google font 적용하기 1. GOOGLE FONT 사이트에 가서 원하는 폰트를 찾는다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. pages/index.js 3. css에서 font-family에 해당 폰트를 적용한다. .css-selector { font-family: '폰트 이름', serif; } 예를 들어, mui theme에 global에게 적용할 경우 아래와 같다. let theme = createMuiTheme({ typography: { fontFamily: `"Noto Sans CJK KR", sans-serif`, }, palette: { primary: { main:.. 공감수 0 댓글수 0 2021. 11. 22.
Next.js getInitialProps 제대로 알고 사용하기 Next.js 9.3 이전 버전에서는 SSR (Server-Side Rendering)을 위해 getInitialProps만을 사용했습니다. 하지만 9.3 버전 이후부터는 SSR을 위해 getStaticProps나 getServersideProps를 사용하는 것이 권장됩니다. (이에 대한 사용법은 아래 링크를 통해 자세히 확인할 수 있습니다) Next.js - getStaticProps vs. getServerSideProps, 차이와 활용 Next.js 9.3 버전부터는 pre-rendering을 위한 data fetching을 위한 기존 기능인 getInitialProps가 getStaticProps, getServerSideProps, getStaticPaths로 분리되었습니다. 모두 pre-ren.. 공감수 0 댓글수 0 2021. 7. 7.
Nextjs 환경 변수 (environment variable)를 server와 client에 모두 적용하는 방법 일반적인 환경 변수 적용 (only server) nextjs에서 환경 변수 (environment variable)를 적용 시 프로젝트 root 경로에 ".env.local" 파일을 만들고 필요한 변수들을 아래처럼 선언해주면 된다. IS_DEV=1 이 경우 process.env.IS_DEV라는 값을 참조 시 1이라는 값을 얻을 수 있다. 하지만, getStaticProps나 getServersideProps와 같이 server단에서 호출되는 함수에서는 process.end.IS_DEV는 1인데, client단에서는 undefined가 된다. 이는 서버 상의 환경 변수를 보안상의 이유로 외부에 노출하지 않기 때문이다. Server와 client 모두에 적용되는 환경 변수 (server+client) 만약.. 공감수 0 댓글수 0 2021. 6. 28.
Next.js - _app.js, _document.js, _error.js에 대해 알아보자 _app.js './pages/_app.js' 파일을 만들 경우 Next.js 어플리케이션의 시작페이지 (App component)를 커스텀화할 있습니다. function MyApp({ Component, pageProps }) { return } export default MyApp App component는 앱이 시작할 때 가장 먼저 호출되며, 라우팅도 이 페이지에서 내부적으로 작동하면 되기 때문에 앱의 글로벌한 작업들을 수행하기에 좋습니다. 일반적인 사용예 페이지 전환 시에도 전체 레이아웃을 유지하고 싶을 경우 페이지 전환 후에도 state를 유지하고 싶을 경우 componentDidCatch을 사용하여 커스텀한 에러 처리를 하고 싶은 경우 페이지에 추가적인 데이터를 삽입하고 싶은 경우 글로벌한 C.. 공감수 3 댓글수 0 2021. 6. 17.
XHR? AJAX? 정확한 의미를 알아보자. AJAX, XHR은 웹(web) 개발을 하다보면 반드시 마주치는 용어 중 하나이다. 뭔가 동일한 의미로 사용되기도 하는 것 같고, 문맥을 통해 대충 의미를 알고 있고, 대부분은 정확한 의미를 모르지 않을까 싶다. 정확히 알고 있을 필요는 없는 단어이기 때문이다. XHR (XMLHttpRequest) 역사적으로는 XHR이라는 단어가 먼저 등장했다. XHR은 비동기적으로 데이터를 요청하는 것을 의미한다. 아주 옛날에는 반응형 페이지를 만들기 위해 서버에 페이지를 통째로 요청해서 갈아엎는 방식이었는데, 1999년 XHR이 등장하면서 서버에 필요한 부분을 비동기적으로 요청하게 되면서 대역폭 낭비를 크게 줄일 수 있게 되었다. AJAX (Asynchronous Javascript and Xml) XHR이 대세로 .. 공감수 0 댓글수 0 2021. 6. 16.
웹/앱 디자인의 근거가 되는 "UX/UI의 10가지 심리학 법칙" 요약 개발자의 입장에서 UX/UI 디자인은 정말 어려운 일이다. 좋은 코드와 나쁜 코드는 어느 정도 명확한 기준을 통해 장/단점을 구분할 수 있고, 어떤 전문가가 와도 비슷한 의견을 낼 것이다. 하지만, UX/UI의 좋고 나쁨을 구분하는 것은 어렵다. 그것이 왜 좋은지 설명하기 어렵고 또 전문가마다 의견이 다 다르기 때문이다. 명확한 "정답"이 있으면 실력 향상에 큰 도움이 된다. 중구난방식으로 학습하면 제자리를 멤돌 뿐이다. UX/UI 디자인에서는 "명확한 정답"이 부재되었기 때문에 나의 UX/UI 실력도 제자리인 듯해서 돌파구를 찾기 시작했다. 저자가 심리학을 UX/UI에 접목한 이유도 마찬가지였다고 한다. 분명 다수가 선호하는 디자인이 있기 때문에 좀 더 명확한 정답을 찾기 위해서였다고 한다. 저자는 ".. 공감수 1 댓글수 0 2021. 5. 12.
Next.js - getStaticProps vs. getServerSideProps, 차이와 활용 Next.js 9.3 버전부터는 pre-rendering을 위한 data fetching을 위한 기존 기능인 getInitialProps가 getStaticProps, getServerSideProps, getStaticPaths로 분리되었습니다. 모두 pre-render가 필요한 경우에만 사용하는 것이 좋습니다. (원문: If you don’t need to pre-render the data, then you should consider fetching data on the client side.) 이 중 많이 사용되는 getStaticProps와 getServerSideProps의 차이와 활용에 대해 알아보겠습니다. per-render가 필요한 경우 (SEO, Adsense 등)는 이 링크를 통해 .. 공감수 8 댓글수 0 2021. 5. 11.
파이썬(python) matplotlib xlabel 위치 조정하기 x축에 축 이름을 적을 때 matplotlib.pyplot.xlabel 함수를 사용하고, 이 때 축 이름 위치를 조정하고 싶은 경우가 있습니다. 먼저, 이 함수가 가지는 인수(parameter)를 살펴봅시다. 인수 (parameters) 이 함수에는 3개의 파라미터가 있습니다. xlabel (타입: str) x축에 표시할 텍스트를 입력하면 된다 labelpad (타입: float, default: 4.0) 텍스트를 둘러싼 여백의 크기를 설정해준다. 이것을 통해 세부적인 조정이 가능하다. loc (타입: str, default: 'center', 옵션: {'left', 'center', 'right'}) 텍스트를 표시할 위치를 정해준다. (왼쪽, 가운데, 오른쪽) 사용 예 labelpad - 0.0 vs .. 공감수 1 댓글수 0 2021. 5. 10.
Github, 5분만에 SSH key 생성/등록/접속 하는 법 SSH 접속의 필요성 1. Github 저장소를 관리하다보면 push/pull 작업 시 매번 비밀번호를 입력하기 귀찮아질 때가 옵니다. 2. 보안상 이점도 많다고 합니다. 3. 곧 아이디/비밀번호 접속이 막힌다고 합니다. SSH 접속을 위해 아래의 순으로 진행하면 됩니다. SSH key 생성 방법 Windows는 powershell, Linux는 terminal에 아래와 같이 본인 계정의 이메일을 포함한 명령어를 입력합니다. ssh-keygen -t ed25519 -C "email_id@example.com" 생성이 제대로 됐다면 아래 출력을 볼 수 있습니다. > Generating public/private ed25519 key pair. 다음에 이것저것 물어보는 것이 나오는데 전부 그냥 Enter 쳐.. 공감수 1 댓글수 0 2021. 4. 8.
SSR (Server Side Rendering) vs SPA (Single Page App), 내 앱은 뭘로 개발해야 할까? 요약 검색엔진 노출, 애드센스 광고 수익 등이 핵심이라면 SSR 그렇지 않으면 SPA 장단점 비교 SSR SPA 검색엔진 노출 O (페이지를 서버단에서 렌더링하기 때문에 검색엔진 크롤러가 크롤링하기 쉬움) △ (최근 검색엔진 크롤러는 어느정도 크롤링할 수 있다고는 함) 구글(Google) 애드센스 호환 가능 불가능 (애드센스는 SPA앱을 지원하지 않음 - “콘텐츠 없음”) 초기로딩 속도 매우 빠름 (요청한 페이지만 응답해주기 때문에 빠름) 느림 (첫 요청 시 전체 앱을 다 불러오므로 느림) 구현 난이도 상대적으로 높음 (SPA + α 지식 필요) 낮음 운용 비용 상대적으로 높음 (클라우드 운용 시 작은 가상컴퓨터는 얻어야됨) 낮음 (여러 무료플랫폼에 디플로이 가능) 유용한 프레임워크 next.js - R.. 공감수 1 댓글수 0 2021. 3. 4.
Container 내 python앱에서 Google Error Reporting 사용하기 서버에 오류가 발생했을 때 실시간으로 알림을 받을 수 있는 방법이 없나 검색하던 중, Google에서 제공하는 Google Error Reporting 서비스를 찾았다. (https://cloud.google.com/error-reporting) 이 서비스의 장점을 정리해보면 1. 서비스 규모가 크지 않을 경우 거의 무료 2. Google cloud console 앱만 설치하면 실시간 푸시 알림 3. 오류 스택 상세히 확인 가능 4. 문서화가 잘되있어 적용이 매우 쉬움 (https://cloud.google.com/error-reporting/docs/setup/python) 문서를 따라 서버에 Google Error Reporting을 적용한 결과, 서버에서 버그 발생 시 실시간으로 앱으로 푸시알림을 .. 공감수 0 댓글수 0 2020. 12. 30.
Portainer를 이용해 container 모니터링하기 Portainer란 Portainer는 "Docker 명령을 일일이 수행할 필요가 없이 손쉽게 관리할 수 있는 web UI를 제공해주는 툴"입니다. docker 관리외에 로깅, 모니터링 용도로도 사용이 가능할 뿐만 아니라 설치가 간단하고 직관적으로 사용하기가 쉽습니다. Portainer 설치 ubuntu 18.04 환경에서 도커를 설치한 후에, 아래 명령어로 바로 설치 및 실행이 가능합니다. docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer 설치 및 실행이 완료되면 9000번 포트를 통해 접속하여 테스트합니다. Nginx를 이용해 https 적용 p.. 공감수 0 댓글수 0 2020. 12. 29.
GCE (Google Compute Engine)에 nginx로 무료로 https 적용하기 GCE에 https를 적용하기 위해 가장 간단한 방법은 GCP의 load balancer 기능을 이용하는 것입니다. 관련 내용은 아래 링크에서 확인할 수 있습니다. 하지만, 이 방법을 사용할 경우 시간 당 비용을 지불해야 됩니다. https://cloud.google.com/load-balancing/docs/ssl-certificates 부하가 작을 경우 큰 비용이 아니지만, 작은 서비스를 시작하는 사람에게는 부담이 될 수 있습니다. Nginx를 이용하면 무료로 https를 적용할 수 있다. GCE에 ubuntu 18.04 OS를 기준으로 방법을 설명하겠다. Nginx 1. nginx 설치 sudo apt update sudo apt install nginx -y 2. 발급받은 도메인을 nginx에 등.. 공감수 1 댓글수 0 2020. 12. 29.
GCE (Google Compute Engine)에 mysql-server 설치하기 Invest Helper의 sql 데이터베이스를 만들기 위해 GCP (Google Cloud Platform)의 GCE (Google Compute engine)를 이용하였다. GCP에서 제공하는 sql database 전용 서비스인 Cloud SQL이 있지만, GCE와 동일 성능 대비 가격이 비싸다. 물론, Compute Engine에 직접 sql database를 구축할 시 여러 설정을 직접 해야하고 자동백업, 자동스케일링 등의 기능을 제공받지 못하지만 서비스가 매우 커질때까지는 큰 의미가 없을 것 같다. 1. GCE 인스턴스를 생성 콘솔 혹은 gcloud 명령어로 본인이 원하는 성능의 인스턴스를 직접 생성한다. 2. mysql server 설치 현재는 mysql 5.7 버전을 사용하고 있다. sud.. 공감수 1 댓글수 0 2020. 12. 28.
강화학습과 능동진동제어의 결합 강화학습은 최적제어 (optimal control)와 동일한 목표를 갖고 있다. 둘의 목표는 "주어진 문제에서 최적의 답을 찾는 것"이다. 그럼에도 이 둘을 구분짓는 것은 "제어하려는 대상의 모델을 모르고도 제어가 가능하냐"인 것 같다. 물론 최적제어 내에서도 적응제어 (adaptive control)의 개념이 있지만, 강화학습만큼 유연하지는 않다. 강화학습과 심층신경망 (deep neural network)를 결합할 시 아주 복잡한 대상의 액션도 묘사할 수 있으므로, 최적제어보다 더 복잡하고 다양한 대상체에 대해 유연한 제어가 가능하다. 능동진동제어에서 최적제어가 주로 사용되어왔고 관련된 연구는 매우 많다. 능동진동제어에 강화학습을 결합한 연구는 최근에 들어서야 이뤄지고 있는 걸로 보이며, 주로 랜덤한.. 공감수 0 댓글수 0 2020. 12. 22.
GCP Compute engine에서 Cloud Run으로 이전하기 첫 선택은 GCP의 compute engine Invest Helper의 "데이터베이스인 mysql"과 "api 구축을 위한 python flask앱"을 google cloud platform (이하 GCP)의 compute engine으로 운영하고 있었다. 작은 compute engine에 mysql + flask를 동시에 올려서 운용하면, 비용적으로 큰 부담이 없을 거라는 판단에서였다. GCP를 선택한 이유도 작은 앱을 운용하는데 마이크로소프트의 Azure나 아마존의 AWS보다 성능 대비 비용이 저렴했다고 판단했기 때문이다 (GCP의 UI/UX가 직관적이고 documentation이 잘되있는 것도 한몫했다) 도커와 쿠버네티스에 눈을 뜨다 최근에 유행하는 마이크로서비스 패턴이 향후 서비스가 커졌을 때 .. 공감수 0 댓글수 0 2020. 12. 21.
강화학습이란 지도 학습 (supervised learning) vs 강화 학습 (reinforcement learning)기계 학습에서 가장 널리 알려진 학습 형태는 "지도 학습"입니다 . 지도 학습을 간단히 설명하면 "지도자 (supervisor)"의 도움을 받아 학습하는 것입니다. 아버지의 도움으로 자전거타는 법을 학습하는 어린아이의 모습을 생각하면 됩니다. 이 때, 지도자인 아버지는 본인이 생각하는 "자전거타는 방법에 대한 정답"을 아이에게 가르칩니다. 반면, 강화 학습은 지도자없이 혼자 시행착오를 거치며 자전거타는 방법을 배우는 것입니다. 하지만, 가르쳐주는 사람이 없는데 어떻게 자전거타는 방법을 깨우칠 수 있을까요? 결국 순차적 의사결정 문제!강화 학습이 결국 풀고자하는 문제는 순차적 의사결정 (sequen.. 공감수 0 댓글수 0 2020. 12. 2.
[C# 간단정리] Value Type vs. Reference Type C#의 모든 타입은 아래 4가지로 분류된다. 1. Value types 2. Reference types 3. Generic type parameters 4. Pointer types 이 중 가장 기본이 되는 Value와 Reference type에 대해 알아보자. Value type은 대부분의 내장 타입 (모든 숫자 타입, char type, bool type)과 struct나 enum으로 만들어진 커스텀 타입이다. Reference type은 모든 class, array, delegate, interface, string이다. 둘의 가장 큰 차이는 메모리 관리이다. 예제를 통해 알아보자. Value Types value type 인스턴스의 할당은 항상 인스턴스를 복사한다. public class Po.. 공감수 0 댓글수 0 2020. 11. 17.
C# 언어의 특징 - "객체 지향"편 C#은 캡슐화 (encapsulation), 상속 (inheritance), 다형성 (polymorphism)을 아우르는 객체지향 패러다임을 풍부하게 구현한다. 통합 타입 시스템 (unified type system) C#의 모든 타입은 궁극적으로 공통된 기본 타입을 공유한다. 즉, 모든 타입은 동일한 기본 기능을 공유한다. 예를 들어, C#의 어떤 타입의 인스턴스든 ToString 메서드를 이용해 string으로 변환할 수 있다. 클래스와 인터페이스 (classes and interfaces) 기존 순수 객체지향 패러다임에는 클래스만 있다. 하지만 C#에는 더 다양한 타입들을 제공하며 이 중 하나가 interface다. Interface는 멤버들에 대한 구현 (implementation)을 제외하면 클.. 공감수 0 댓글수 0 2020. 11. 17.
[sql] 컬럼당 하나의 특성만 저장하는 게 좋은 이유 관계형 모델에서 관계 (테이블)는 한 주제에 대해서만 기술해야 합니다. 즉, 동일한 주제를 가진 데이터를 하나의 테이블로 정리해야합니다. 속성 (컬럼)은 테이블의 주제를 설명하는 유일한 "특성"과 관련된 데이터입니다. 즉, 주제가 가지는 하나의 특성을 하나의 컬럼으로 만들면 됩니다. 컬럼에 하나의 특성만 저장되는게 좋은 이유는 뭘까요? 이 경우 검색을 하거나 값을 집계할 때 특성값을 분리하기 쉽기 때문입니다. 특히, 중요한 개별 특성에 대해 하나의 컬럼으로 분리하는 설계 상 훨씬 바람직합니다. 예를 들어, 아래의 테이블이 있다고 합시다. ID FullName FullAddress 1 이 순신 320-10, 경기도 A시 2 이 성계 340-20, 경기도 B시 3 이수 김 350-30, 충청남도 C시 이 테.. 공감수 0 댓글수 0 2020. 11. 17.
[sql] 테이블에 기본키를 만들어야 하는 이유 테이블에 기본키 (primary key)가 있어야 할 이유가 무엇일까요? 가장 중요한 이유는 "특정 로우 (레코드)를 다른 로우들과 구별하기" 위해서입니다. 즉, 테이블 내 로우의 유일성을 보장하는 것입니다. 어떤 컬럼을 기본키로 설정하는 것이 바람직할까요? 1. 유일한 값 2. NULL값을 가질 수 없음 3. 값이 갱신될 일이 없음 4. 가능한 간단한 형태 (문자형보단 정수형, 여러 컬럼보단 단일 컬럼이 나음) 기본키를 통해 로우의 유일성을 확보하면 어떤 점이 좋을까? 반복적이고 쓸데없는 데이터가 쌓이지 않으므로, 이런 데이터에 의한 1) 쿼리 속도 저하 방지 2) 부정확한 정보 방지 가 됩니다. 복합키 (compound primary key)를 사용할 경우 단점이 있을까? 1. 두 개 이상의 컬럼을 .. 공감수 5 댓글수 0 2020. 11. 16.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.