본문 바로가기

728x90

Computer Science

(132)
GCP 자격증이란? GCP 구글 클라우드 플랫폼 자격증이 있다고 합니다. 저는 초보니깐 Associate Cloud Engineer 에 도전 해보겠습니다. 😀 Associate Cloud Engineer (ACE) 시험시간: 2시간 등록비용: $125 (후..) 유효기간: 2년 시험에 나오는 주제,범위를 알아야합니다(중요!) [링크] 여러 모의고사들이 있습니다. [링크] 외부 강의들을 이용해 키워 실력을 키웁니다. (코세라, 큌랩 등) 시험을 봅니다. 어떻게 공부해야할까? 강의도 많고, 범위도 넓고.. 도대체 어떻게 공부해야할지 한번 알아봤더니 대부분 아래내용으로 공부하는걸 확인할수 있었습니다. 1. 학습 - Official Study Guide 책 [링크] - Coursera 강의 - Qwiklabs 강의 2. 연습문제풀..
최적화 설정하기 (react-virtualized, immer) react-virtualized 2,500 개 컴포넌트 중 2,491 는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링이 이루어집니다. react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있습니다. 만약 스크롤되면 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킵니다. yarn add react-virualized import React, { useCallback } from 'react'; import { List } from 'react-virtualized'; import TodoListItem from './TodoListItem'; import './TodoList.scss'; c..
[golang] VS Code에서 Go 설치하기 (환경설정) 설치 golang.org 에서 Go 를 다운받습니다. 저는 go.1.15.3.windows-amd64.msi 를 다운받았습니다 😀 설치가 다 되었는지 확인하기 위해 터미널에 버전확인을 해봅니다. go version 환경변수 확인해 GOROOT와 GOPATH 를 확인합니다. go env GOROOT는 go와 표준패키지가 설치된 곳이고, GOPATH는 내 작업소스가 있는 곳 입니다. 다운받은 모듈은 GOPATH로 설정된 경로의 'pkg'에 저장됩니다. 만약 제가 패키지를 만든다면 GOPATH로 설정된 경로의 'src' 에서 만들어야합니다. (패키지만들기 링크) 저는 GOPATH 경로를 C\go-workspace 로 변경했습니다. (내PC > 우클릭 > 시스템속성 > 환경변수 > 위쪽에 GOPATH 경로수정)..
[react] 스타일링 설정하기 Sass 사용하기 Sass 는 .sass 확장자와 .scss 확장자를 지원합니다. 보통 .scss 확장자를 사용합니다. yarn add node-sass 이 라이브러리는 Sass 를 css로 변환해줍니다. sass-loader 설정 커스터마이징하기 create-react-app 으로 만든 프로젝트는 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있습니다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내 주어야 합니다. (commit 한후) yarn eject webpack.config.js 에서 "sassRegex" 두번째 탐색결과에서 use 부분을 아래와 같이 수정합니다. { test: sassRegex, exclude: sassModuleReg..
Reactjs code snippets 설정하기 VSCode 확장프로그램에서 설치를 합니다. 작성자가 charalampos karypidis 인 프로그램을 설치합니다. 코드를 작성할때 자주 반복적으로 작성하기 귀찮으니 단축키를 입력해서 쉽게 템플렛을 가져옵니다. 현재 저는 rsc 만 사용하고 있습니다.
ESLint와 Prettier 설정하기 ESLint ESLint는 문법검사 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. Prettier-Code formatter 코드 스타일을 자동으로 정리해주는 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. .prettierrc를 프로젝트의 루트 디렉토리에 만들어줘야 합니다. (설정예제) { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, } 정렬은 파레트명령어(F1 또는 ctrl + shift + p)에서 format selection(부분정렬) 또는 format document(전체정렬) 를 입력해야합니다. 단축키는, 부분 정렬 하려면 뭔하는 부분 드래그하고 ctrl + k + f 하면 됩니다. 자동정..
Object.create() 란 ES5 Object.create() 는 ES5 문법입니다. ES6 에서는 new 문법을 사용합니다. The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. 새로 생성될 객체의 프로토타입 객체를 넣어주면, 새로운 객체가 생성됩니다. 아래의 예제를 보면 어떻게 작동하는지 쉽게 알수있습니다. const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); } }; const me..
JavaScript assign 문법 a = { a: '1', b: '2', c: '3' } // {a: "1", b: "2", c: "3"} Object.assign(a, function () { return { d: '4' }; }()); // {a: "1", b: "2", c: "3", d: "4"} Object.assign(a, {e: '5'}); // {a: "1", b: "2", c: "3", d: "4", e: "5"} Object.assign(a, {f: function() { return 'hello'}}); /* a: "1" b: "2" c: "3" d: "4" e: "5" f: ƒ () */ Object.assign(a, {g: function() { return 'hello'}()}); /* a: "1" b: "2" c..

728x90