본문 바로가기

전체 글

20-44 요약 리액트 이번주에 리액트를 공부했습니다. 이번주에 배운것을 요약해보자면, 리액트쓰는 이유, 리액트작동방식 import 문에 대한 생각 상태, 불변성, 순수성, 최적화 map. filter (맵을 사용하여 컴포넌트 변환시 key props를 전달, 이유 vitualDOM) 라이프사이클 3가지 (리렌더링이 무엇인지 알기) (각단계마다 호출하는 함수들이 있다는 것을..) 컴포넌트가 업데이트 되는경우 (알기) 마운트 초기렌더 useState, useEffect, useReducer useMemo, useCallback useRefer 스타일설정 및 사용법 최적화 (부모리렌되도 자식안되게 자식은 props 바뀔때만 React.memo로 컴포넌트 감싸), 스크롤, 최적화(useCallback[], 이후엔 특정 상태 .. 더보기
최적화 설정하기 (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.. 더보기
Tour of Go: structs, slices, and maps pointers 고는 포인터가 있습니다. 포인터는 값의 메모리주소를 가지고 있습니다. 사용법은 C와 같다고 생각하면 될것 같습니다. package main import "fmt" func main() { i, j := 42, 2701 p := &i // point to i fmt.Println(*p) // read i through the pointer *p = 21 // set i through the pointer fmt.Println(i) // see the new value of i p = &j // point to j *p = *p / 37 // divide j through the pointer fmt.Println(j) // see the new value of j } Structs 구조체인.. 더보기
Tour of Go: for, if, switch For 소괄호가 없는것을 유의하면 될것 같습니다. package main import "fmt" func main() { sum := 0 for i := 0; i < 10; i++ { sum += i } fmt.Println(sum) } Init 부분과 하나의 반복이 끝나고 작동되는 ++ 구분은 생략될수 있습니다. 타언어의 while 문과 비슷하네요. package main import "fmt" func main() { sum := 1 for ; sum < 1000; { sum += sum } fmt.Println(sum) } loop condition 까지 제거를 하면 무한루프가 됩니다. package main func main() { for { } } if문도 for 문 처럼 소괄호는 없고 중괄호는.. 더보기
Tour of Go: 패키지, 변수 그리고 함수 Tour of Go Tour of Go 는 Go 언어 튜토리얼입니다. 하지만 한국어를 클릭하면 Go 1.9 is no longer available. 가 떠서 영어로 기록하면서 공부하려 합니다. Packages 모든 Go 프로그램은 패키지로 구성되어 있습니다. package main import ( "fmt" "math/rand" ) func main() { fmt.Println("My favorite number is", rand.Intn(10)) } 위 코드는 main 패키지에서 실행을 합니다. 또한 위 프로그램에선 2가지 패키지를 더 사용합니다. 관례적으로 패키지이름은 뒤에 있는 단어를 패키지 이름이라고 합니다. ex) math/rand 는 rand 패키지입니다. Import import 문은 일반.. 더보기
VS Code에서 Go 설치하기 (환경설정) 설치 golang.org 에서 Go 를 다운받습니다. 저는 go.1.15.3.windows-amd64.msi 를 다운받았습니다 😀 설치가 다 되었는지 확인하기 위해 터미널에 버전확인을 해봅니다. go version 환경변수 확인해 GOROOT와 GOPATH 를 확인합니다. go env GOROOT는 go가 설치된 곳이고, GOPATH는 내 작업소스가 있는 곳 입니다.(모듈이 여기로 다운로드됩니다.) 저는 GOPATH 경로를 C\go-workspace 로 변경했습니다. (내PC > 우클릭 > 시스템속성 > 환경변수 > 위쪽에 GOPATH 경로수정) VS Code VSCode Extensions 에서 Go(Go Team at Google) 를 설치합니다. 이 Extension의 ReadMe.md 를 읽어보면.. 더보기
스타일링 설정하기 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 만 사용하고 있습니다. 더보기