반응형

■ Go 언어 조건문

if문과 switch문 많은 프로그래밍 언어에서 활발하게 사용되고 있는 조건문이다.

Go언어라고 해서 크게 다르지 않으니 가벼운 마음으로 확인해보길 바란다.


■ IF문

1. if 문

if문에는 단일 if문과 if..else문 if...else if...else문이 있다.

이번에는 두가지 조건으로 작업을 처리할 수 있는 if...else문을 통해서 정리를 하려고 한다.

단일 if문 또는 if...else if...else문도 if...else문을 충분히 이해한다면, 사용하는데 크게 어려움이

없을거라고 생각한다.

예시) 나이가 20세이상일 경우 '성인', 20세 미만일 경우 '미성년자' 를 출력하시오.
// 임의로 나이를 20세로 지정
age := 20

if age >= 20 {        
     fmt.Println("성인")    
} else {        
     fmt.Println("미성년자")    
}

/*
※ 출력 결과
성인
*/

2. if문에서만 사용할 변수를 선언하며, 사용하는 if문

위 if문과 크게 다른점은 없지만 if문에서만 사용할 변수를 다른 프로그래밍 언어들과는 달리

if문 선언부에서 변수를 선언하고 그 변수를 활용하여 조건처리가 가능하다.

예시) 나이를 계산하는 방식이 외국인과 한국인의 차이가 있음을 알고, 외국인 나이기준으로 나이를 주어줬을 경우 한국인 나이로 계산하여 20세이상일 경우 '성인', 20세 미만일 경우 '미성년자' 를 출력하시오.
// 외국인 나이 기준으로 19세로 지정
age := 19    

// koreanAge 변수에는 '외국인 나이 + 1' 가 대입된다.
if koreanAge := age + 1; koreanAge >= 20 {        
     fmt.Println("성인")    
} else {        
     fmt.Println("미성년자")    
}

/*
※ 출력 결과
성인
*/

■ SWITCH 문

1. switch문

switch문은 다양한 조건으로 값을 비교할때 유용하게 사용된다.

다른 프로그래밍 언어의 case문은 break를 쓰지 않는경우 다음 case로 이동하지만, Go 언어는 다음 case로 가지 않는다.

예시) * 청소년 : 13~ 19세, 청년 : 20 ~ 29세, 중년 : 30 ~ 49세, 노년 : 50세 이상, 어린이 : 13세 미만
위에 조건에 따라 임의로 지정한 나이에 맞게 출력하시오.

* 나이에 따른 정의는 임의로 지정한 것이며, 사실과 다름을 알린다.
// 임의로 나이를 28세로 지정
age := 28    

switch {    
case age > 12 && age < 20:        
      fmt.Println("청소년")    
case age > 19 && age < 30:        
      fmt.Println("청년")    
case age > 29 && age < 50:        
      fmt.Println("중년")    
case age > 49:        
      fmt.Println("노년")   
default:        
      fmt.Println("어린이")    
}

/*
※ 출력 결과
청년
*/

2. switch문에서만 사용할 변수를 선언하며, 사용하는 switch문

위 switch문과 크게 다른점은 없지만 switch문에서만 사용할 변수를 다른 프로그래밍 언어들과는 달리 switch문 선언부에서 변수를 선언하고 그 변수를 활용하여 조건처리가 가능하다.

예시) 나이를 계산하는 방식이 외국인과 한국인의 차이가 있음을 알고, 외국인 나이기준으로 나이를 주어줬을 경우 한국인 나이로 계산한다.

* 청소년 : 13~ 19세, 청년 : 20 ~ 29세, 중년 : 30 ~ 49세, 노년 : 50세 이상, 어린이 : 13세 미만
위에 조건에 따라 임의로 지정한 나이에 맞게 출력하시오.

* 나이에 따른 정의는 임의로 지정한 것이며, 사실과 다름을 알린다.
// 외국인 나이 기준으로 28세로 지정
age := 28    

// koreanAge 변수에는 '외국인 나이 + 1' 가 대입된다.
switch koreanAge := age + 1; {    
case koreanAge > 12 && koreanAge < 20:        
    fmt.Println("청소년")    
case koreanAge > 19 && koreanAge < 30:        
    fmt.Println("청년")    
case koreanAge > 29 && koreanAge < 50:        
    fmt.Println("중년")    
case koreanAge > 49:        
    fmt.Println("노년")    
default:        
    fmt.Println("어린이")    
}

/*
※ 출력 결과
청년
*/

반응형
반응형

■ Go 언어 반복문

Go 언어는 다른 프로그래밍 언어(Java, Python,..)들과는 달리 반복문의 형식이 한가지이다.

그것은 바로 for 문이다. 이번에는 for에 사용방법에 대해 알아본다.


1. 기본 for 문

많은 프로그래밍 언어에서 많이 사용하는 방법으로써 Java를 사용해봤던 개발자라면 익숙한 방법이다.

예시) 0 부터 10미만까지의 숫자를 출력하시오.
for i := 0; i < 5; i++ {
        fmt.Println(i)
}

/*
※ 출력 결과
0
1
2
3
4
*/

2. range를 활용한 for 문

python의 for ... in range() 와 유사한 방법이며, Python을 사용해봤던 개발자라면 익숙한 방법이다.

예시) 10부터 15미만까지의 숫자와 인덱스를 출력하시오.
// 10 부터 15미만의 값을 가지고 있는 배열변수
numbers := []int{10, 11, 12, 13, 14}    

// index변수에는 해당 배열의 인덱스 값
// number변수에는 해당 배열의 값
for index, number := range numbers {        
          fmt.Println(index, number)    
}

/*
※ 출력 결과
0 10
1 11
2 12
3 13
4 14
*/

반응형
반응형

1. Go 설치 사이트로 이동

 

The Go Programming Language

Download Go Binary distributions available for Linux, macOS, Windows, and more. // You can edit this code! // Click here and start typing. package main import "fmt" func main() { fmt.Println("Hello, 世界") } Hello, World! Conway's Game of Life Fibonacci

golang.org

2. Go 설치 진행

  • 'Download Go' 버튼 클릭

  • Go 개발 환경을 진행하는 OS에 맞게 설치(필자의 경우 윈도우로 진행) 

주의 사항!!!!!

Go의 경우 다른 언어들과 달리 설치경로를 변경하면 안된다.

이유는, Go의 시스템 변수 PATH 아래와 같은 경로의 bin 폴더로 자동 설정되기 때문이다. 

 

* Windows

* Linux

* Mac

* Windows의 경우 C:\go

* Linux, Mac의 경우 /usr/local/go

3. Go 설치 확인

  • C드라이브에 Go 폴더가 생성 되었는지 확인

  • 명령 프롬프트를 열고 go 명령어 실행 (명령 프롬프트 호출 방법 : 윈도우 키 + R > cmd)
  • 아래와 유사한 화면이 나온다면 설치 완료!!

반응형
반응형

■ 스토리북

스토리북은 비주얼 테스트를 위한 도구이며, 화면을 구성하는 컴포넌트들을 독립적으로

관리하고 변화를 테스트해 볼 수 있다.


■ 스토리북 활용

1. 스토리북 설치

  • 프로젝트의 루트 폴더로 이동
  • 명령어 실행
  • package.json에 자동으로 스토리북이 추가된걸 확인
> yarn add -dev @storybook/react@5.2.6

2. package.json에 스토리북 실행 명령어 추가

  • package.json의 script 블록에 npm 또는 yarn으로 실행할 명령어를 추가
  • storybook 명령어가 스토리북 서버를 9001 프토를 통해 실행시킬 수 있도록 설정

* package.json의 script블록은 리액트 서버를 구동하는 명령어인 yarn start와 같이 실행할 명령어를 정의하는 공간이다.

"scripts": {
        :
        :    
    "storybook": "start-storybook -p 9001 -c .storybook",    
    "start": "react-scripts start",    
    "build": "react-scripts build",
        :
},

3. 스토리 파일 만들기

  • src 폴더에 stories 폴더 생성
  • 컴포넌트의 여러 출력 형태를 구성할 스토리 파일 생성
import React from 'react';
// 스토리를 스토리북 도구에 추가해주는 storiesOf() 함수를 임포트
import { storiesOf } from '@storybook/react';

// 다양한 형태의 Input 컴포넌트를 가지는 Input 스토리를 임포트
import Input from '../Input';

// 'Input' : 스토리북 도구에 표시할 스토리의 이름
// '기본 설정' : 스토리북 도구에 표시할 메뉴 이름
storiesOf('Input', module)  .add('기본 설정', () => <Input/>)

4. 스토리북 config.js에 스토리 연결

  • 프로젝트 루트 폴더에 .storybook 폴더 생성
  • .storybook 폴더에 config.js 설정 파일 생성

* InputStory.jsx 파일을 loadStories 함수 안에서 require 함수로 임포트 했다. 즉, Input 스토리를 스토리북에 연결

import { configure} from '@storybook/react';

function loadStories() {  
    require('../src/stories/InputStory');  
    // 스토리 파일을 이곳에 추가할 수 있다.
}
configure(loadStories, module);

5. 스토리북 실행하기

  • 터미널에 명령어 실행
> yarn storybook

6. 스토리북 실행 화면

반응형
반응형

■ 컴포넌트의 생명주기

컴포넌트의 생명주기는 컴포넌트의 생성부터 소멸까지의 과정을 의미하며,

생명주기 함수는 리액트 엔진에서 자동으로 호출되며, 각 함수의 기능을 이해하면 

컴포넌트를 효율적으로 활용할 수 있다.



■ 생명주기 함수

1) constructor(props) 함수

컴포넌트가 생성될 때 한 번만 호출되며, 상태를 선언할 때 사용된다.
constructor 함수를 정의할 때는 항상 super 함수를 가장 상위에 호출해야 한다.

 * super 함수는 프로퍼티와 생명 주기 상태 등을 초기화하는 과정을 포함하고 있다.

2) static getDerivedStateFromProps(props, state) 함수

getDerivedStateFromProps 함수는 정적 함수이다.
따라서 함수 안에서 this.props 또는 this.state와 같이 프로퍼티나 state값에 접근할 수 없다.
만약 프로퍼티나 state에 접근해야 하는 경우 반드시 인자로 전달된 props, state를 이용해야한다.
props는 상위 컴포넌트에서 전달된 값이며, state는 현재 컴포넌트의 state값 이다.
결론적으로 getDerivedStateFromProps 함수는 상위 컴포넌트에서 전달받은 프로퍼티로 state값을
변경할 때 주로 사용되며, 반환값으로 state를 변경한다.

3) render() 함수

데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출되는 함수이다.
render 함수가 반환하는 JSX를 화면에 그려준다.

4) componentDidMount() 함수

render 함수가 JSX를 화면에 그린 이후에 호출되는 함수이므로, 컴포넌트가 화면에 표현된 이후 
작업들을 componentDidMount 함수에서 하면 된다.

5) shouldComponentUpdate(nextProps, nextState) 함수

shouldComponentUpdate 함수는 프로퍼티를 변경하거나 setState 함수를 호출하여 state값을 변경하면
화면을 새로 출력할 것인지를 판단하는 함수이다.
따라서 이 함수는 화면을 새로 출력할지 말지 판단하며, 데이터 변화를 비교하는 작업을 포함하므로 
리액트 성능에 영향을 많이 준다.

* forceUpdate 함수를 호출하여 화면을 출력하게 되면 shouldComponentUpdate 함수는 호출되지 않는다.

6) getSnapshotBeforeUpdate(prevProps, prevState) 함수

getSnapshotBeforeUpdate 함수는 컴포넌트의 변경된 내용이 가상 화면에 완성된 이후 호출되는 함수이다.
따라서 이 함수는 컴포넌트가 화면에 실제로 출력되기 전에 호출되므로 화면에 출력될 엘리먼트의 크기
또는 스크롤 위치 등의 DOM 정보에 접근할 때 사용된다.

7) componentDidUpdate(prevProps, prevState, snapshot) 함수

componentDidUpdate 함수는 컴포넌트가 실제 화면에 출력된 이후 호출되는 함수이다.
따라서 스크롤 위치를 옮기거나 커서를 이동시키는 등의 DOM 정보를 변경할 대 사용된다.


* 함수 인자 정의
prevProps : 부모 컴포넌트로부터 전달된 이전 프로퍼티
prevState : 이전 state 값
snapshot : getSnapshotBeforeUpdate 함수에서 반환된 값

8) componentWillUnmount() 함수

componentWillUnmount 함수는 컴포넌트가 소멸되기 직전에 호출되는 함수이다.
컴포넌트에서 감시하고 있는 작업들을 해제할 때 필요한 함수이다.
따라서 메모리 누수 현상이 발생하여 웹 브라우저의 작동이 멈추는 현상을 방지할 수 있다.
반응형
반응형

■ 디바운스

내용을 입력하다가 특정 시간 동안 대기하고 있으면 마지막에 입력된내용을 바탕으로 서버 요청을 하는 방법이다.구글의 검색창을 떠올리면 이해하는데 도움이 된다.검색창에 입력을 하다가 입력을 멈추면 검색창 하단에 연관 검색어가 나오는 것이 디바운스로 구현한 기능이다.


예시)


■ 스로틀

페이스북의 타임라인 기능으로 이해하기 쉽다.

스크롤을 내리는 동안 계속해서 다음 내용이 출력되는 무한 스크롤 기능이다.


예시)

반응형

+ Recent posts