반응형 프로그래밍23 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.. 2022. 4. 8. npm 특정 버전의 모듈을 설치하는 방법 NPM (Node Package Manager)은 자바스크립트 패키지 매니저로써 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 합니다. 개발자는 npm 저장소에 업로드된 모듈들을 아래 명령어를 통해 쉽게 다운받아 사용할 수 있습니다. npm install firebase npm install -f firebase // 강제 설치 하지만, 종종 어떤 모듈의 특정 버전을 설치하고 싶은 경우가 있습니다 (일반적으로 종속성 문제때문이지요) 예를 들어, firebase 모듈은 아래 버전들이 있습니다. 굉장히 많은 버전이 있군요. 저도 firebase 모듈을 최신 버전으로 업데이트하니 특정 기능이 종속성 문제로 작동을 안해서 결국 다운그레이드를 결정했습니다. 특정 버전 8.10.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:.. 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.. 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) 만약.. 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.. 2021. 6. 17. XHR? AJAX? 정확한 의미를 알아보자. AJAX, XHR은 웹(web) 개발을 하다보면 반드시 마주치는 용어 중 하나이다. 뭔가 동일한 의미로 사용되기도 하는 것 같고, 문맥을 통해 대충 의미를 알고 있고, 대부분은 정확한 의미를 모르지 않을까 싶다. 정확히 알고 있을 필요는 없는 단어이기 때문이다. XHR (XMLHttpRequest) 역사적으로는 XHR이라는 단어가 먼저 등장했다. XHR은 비동기적으로 데이터를 요청하는 것을 의미한다. 아주 옛날에는 반응형 페이지를 만들기 위해 서버에 페이지를 통째로 요청해서 갈아엎는 방식이었는데, 1999년 XHR이 등장하면서 서버에 필요한 부분을 비동기적으로 요청하게 되면서 대역폭 낭비를 크게 줄일 수 있게 되었다. AJAX (Asynchronous Javascript and Xml) XHR이 대세로 .. 2021. 6. 16. 웹/앱 디자인의 근거가 되는 "UX/UI의 10가지 심리학 법칙" 요약 개발자의 입장에서 UX/UI 디자인은 정말 어려운 일이다. 좋은 코드와 나쁜 코드는 어느 정도 명확한 기준을 통해 장/단점을 구분할 수 있고, 어떤 전문가가 와도 비슷한 의견을 낼 것이다. 하지만, UX/UI의 좋고 나쁨을 구분하는 것은 어렵다. 그것이 왜 좋은지 설명하기 어렵고 또 전문가마다 의견이 다 다르기 때문이다. 명확한 "정답"이 있으면 실력 향상에 큰 도움이 된다. 중구난방식으로 학습하면 제자리를 멤돌 뿐이다. UX/UI 디자인에서는 "명확한 정답"이 부재되었기 때문에 나의 UX/UI 실력도 제자리인 듯해서 돌파구를 찾기 시작했다. 저자가 심리학을 UX/UI에 접목한 이유도 마찬가지였다고 한다. 분명 다수가 선호하는 디자인이 있기 때문에 좀 더 명확한 정답을 찾기 위해서였다고 한다. 저자는 ".. 2021. 5. 12. 이전 1 2 3 다음 반응형
