하고싶은대로##

사실 구조 분해 자체는 어려운 개념은 아닌데, 구조 분해라는 이름을 모르고 쓰고 있어가지고 이렇게 정리하게 되었다.

React에서 많이 사용하는 것 중 하나가

const { props에 있는 변수명들~~~ } = props

이런 코드다.

예시를 설명하자면

const player1 =

{ name: "hello",

   id: 3, 

}  

const { name, id } = player1

이렇게 한다면

name과 id에 각각 player1.name, player1.id 의 값이 저장된다.

따라서 console.log(name) 을 하면 "hello"가 출력된다.

그리고 name 값을 수정해도, player1.name의 값은 수정되지 않는다.

참조 복사가 아니라 값 복사가 이루어지기 때문이다.

그리고 재밌는 것은, 이것을 함수에도 활용할 수 있다는 것이다.

원래라면 player1의 name 값을 출력하기 위해

var printPlayerName = player1 => {

   console.log(player1.name)

}

이렇게 해주어야했다면,

var printPlayerName = ({ name }) =>  {

   console.log(name)

}

이렇게 출력이 가능하다.

또 이렇게하면 장점이 있는데, 작성자가 사용하는 변수만 코드에 작성하게 되므로,

작성자의 의도를 잘 알 수 있다.

그리고 이것을 선언적이라고 한다.

선언적이 무엇인지에 대해 간단히 설명하자면,

어떻게 보다 ,무엇을 할 것인지에 대해 초점을 맞추는 것이다.

이 부분이 궁금하다면 선언적 프로그래밍을 찾아보는 것이 좋을 것 같다.

그리고 배열 또한 구조 분해가 가능하다.

var [first] = [1, 2, 3]

이라면 first에는 1이 담긴다.

그리고 리스트 매칭 또한 활용 가능한데,

var [ , , third] = [1,2,3]

이면 third는 3이 된다.

리스트 매칭도 간단히 설명하자면,

배열에서 사용하지 않는 부분, 건들이지 않는 부분은 그냥 비워놓는 것이다.

물론 변수를 하나 뿐만 아니라 이렇게 

var [ first, second, third] = [1,2,3]

var [ first, , third] = [1,2,3]

여러 개도 가능하다.

아마 리스트 매칭도 선언적이다 라고 볼 수 있을 것 같다.

p.s

지금 공부하고 있는 러닝 자바스크립트에 리스트 매칭이라고 되어 있는데,

리스트 매칭이라고 검색하면 자료가 잘 없다...ㅠㅠ

이번에 구조 분해를 공부하면서, 선언적 프로그래밍, 리스트 매칭 등 사용하고는 있었지만, 그 이름을 몰랐는데 이름을 알게 되었다.

공부하면서 내가 쓰고 있는 것의 이름을 아는 것이 참 중요한 것 같다.

덕분에 검색하며 더 자세하고 깊게 알게 된 것 같다 ㅎㅎ

학교에서 Python 실습보조원을 하면서 많은 질문을 받았는데,

append 대신 extend를 사용했는데 작동이 제대로 안돼요! 라는 질문을 받았다.

나는 extend를 모르기에 바로 구글에 검색을 해보았다.

검색한 결과는 이 친구도 append처럼 리스트에 값을 삽입할 수 있지만

결론적으로 말하면 extend는 리스트에 원소를 삽입할 수 있다는 면에서는 append와 같지만, 전혀 다른 기능을 하는 함수였다.

extend는 오히려 Javascript의 spread operater 같은 느낌?... 요즘 자바스크립트만 계속 공부해서 그런지 보고 나서 이 생각이 들었다.

a = "hello"
append_list = []

expend_list = []

append_list.append(a)
extend_list.extend(a)

print(append_list)
print(extend_list)

만약 이렇게 한다면 결과는 어떻게 될까?

['hello']
['h', 'e', 'l', 'l', 'o']

이렇게 된다. JavaScript를 안다면 알겠지만, spread operater 같은 결과를 나타낸다.

설명하자면 잘기잘기 찢어서 그 원소들을 넣어주는 것이다!

"hello"같은 문자열 같은 경우는 한 글자씩 쪼개서 넣어주는 것이다!

그래서 int는 extend가 되지 않는다.

그렇다면 list를 넣어준다면?

a = ["hello"]
append_list = []

expend_list = []

append_list.append(a)
extend_list.extend(a)

print(append_list)
print(extend_list)

정말 재밌는 결과가 나온다.

[['hello']]
['hello']

이런 결과가 나온다.

처음 보는 사람은 헷갈릴 수 있겠다. 아마 이런 부분 때문에 질문을 한 것이 아닐까.

그러니까 append는 ["hello"] 라는 리스트 자체를 리스트에 넣은 것이다.

리스트 안에 리스트를 넣어준 것이다.

따라서 결과물은 이런 [['hello']]라는 2차원 배열이 된거다.

하지만 extend는 갈기갈기 찢은 거다.

a라는 리스트를 갈기갈기 찢어서 리스트의 원소인 "hello"만 꺼낸 뒤

extend에 넣어주었기 때문에, ['hello'] 이렇게 된 것이다.

그러니까 이해를 쉽게 하기 위해 비교하자면

for i in a:

    extend_list.append(i)

이거와 

extend_list.extend(a)

이 두 코드는 동일하다.!

코딩테스트들을 준비하다보니 요즘은 Python으로 풀면 편해지는 문제가 너무 많다.

사실 주력 언어가 C++이고, 대학교와서 대부분의 개인 공부와 과제를 C++로 했지만, 눈물을 머금고 코딩 테스트 주력 언어를 바꾸어야할 것 같다. ㅠㅠ

사실 그래프를 그리거나 트리를 그리는 문제는 아직 익숙해지지 않아서 그런지 C++이 더 편해보이긴하지만,

문자열 관련 문제는 파이썬이 압도적으로 편하다...

그리고 시간 같은 경우도 C++에 비해 파이썬이 느려서 파이썬 시간 제한을 좀 더 여유롭게 주는 것 같다?

뭔가 C++은 시간을 빡빡하게 주는 느낌.. 파이썬은 넉넉하게 주고..

그래서 코딩테스트 준비를 위한 파이썬 기본 문법 정리를 해보려 한다.

코테를 여유롭게 푸는 그날까지.....ㅠ

입력은 파이썬에서는 input() 이라는 함수로 받는다.

입력이 너무 많으면 시간이 오래걸려서 sys.stdin.readline()이나 sys.stdin을 쓰기도 하지만, 

기본적으로는 input()이라는 함수를 쓴다.

n = input() 이렇게하면 입력된 문자열은 n에 담긴다.

n은 문자열이므로, 숫자와 같은 다른 형태로 사용하려면 형변환을 해주어야하는데

입력 받을 때부터 int로 받으려면 n = int(input)  이렇게 받아주면 된다.

그리고 만약 띄어쓰기 한 값들을 받고 싶다!

1 2 3 4 이 값들을 하나하나 리스트에 담고 싶다면

num_list = input().split() 하면 된다.

split(끊을 부분) 을 입력하면 다르게도 받을 수 있긴하다.

num_list = ['1', '2', '3', '4'] 이렇게 저장되므로, 숫자로 사용할거면 형변환을 해주어야한다.

아쉽게도 num_list = int(input().split())

이렇게는 불가능하다 ㅎㅎ

* 간단 정리

State와 Event가 있다.

Event가 실행될 때 State의 값을 만지려면, 직접 건드리지 못하므로

Action을 만들고, 그것들 Dispatch(실행)해야한다.

Action을 어떻게 처리할지는 Reducer에서 관리를 한다.

State를 어떻게 바꿀지는 reducer에 기록한다.

---------------------------------------------------------------------------

사실 이 부분은 어떤 것인지 잘 몰라서 공부를 해보고 좀 더 익숙해져야하는데,

써보다가 setState와 비슷한 것 같아서 찾아보니 비슷한 역할을 하는 것이 맞다.

하지만 reduce는 Vuex ( 아직 redux를 안써봐서... ) 처럼 좀 더 중간에서 관리한다는 느낌이고,

setState는 단순 변수나 배열 같은 걸 관리하기 좋다면

reduce는 object를 관리하기 좋다고 한다.

많이 써봐서 손에 익혀봐야겠다.

hook을 사용했을 경우를 가정했다.

1.  npm install react-ga --save 으로 react-ga를 React 프로젝트에 설치한다.

2. 체크하고자하는 페이지에

import ReactGA from "react-ga"; 

export default function Home() {

useEffect(() => {

getGA();

}, []);

const getGA = () => {

console.log("페이지 들어옴");

const pathName = window.location.pathname;

ReactGA.initialize("UA-로 시작하는 값");

ReactGA.set({ page: pathName });

ReactGA.pageview(pathName);

};

return <wrapper/>;

}

이런 식으로 해주면 된다.

useEffect 안에 이렇게 함수화시켜서 넣어주지 않으면,

주소를 받기 전에 window.location.pathname를 찾는 경우가 생겨 오류가 발생했다.

window가 존재하지 않는다고 ㅠ

사실 hook을 사용할 때 이 오류 알려주는 글이 없어서 작성해보았다.

만약 이래도 안된다면 

import Router from "next/router";

를 추가해보아라...

JS로 코테를 볼 것을 대비하여 C++과 다른 함수들을 정리해보았다.

<문자열 관련>

var s = "abcde" 

var num = 25 

라고 했을 때

var  a = s.split(끊을 기준) - 기준으로 끊어서 배열에 나눠 저장. 예를 들어 var a = s.split('c')하면 a[0] = "ab", a[1] = "de"가 저장된다.

s.substring(시작, 끝+1)  - 예를 들어 s.substring(0,4) 하면 abcd로 끊긴다.

s.substr(시작, 끊을 크기) - 예를 들어 s.substr(1,2)하면 bc로 끊긴다.

String( 문자열로 바꿀 값 ) 

Number( 숫자로 바꿀 값 ) 

num.toString( 이 수는 몇 진수로 변환할거야? - 없으면 디폴트값 10진수 ) -  숫자를 문자로 변경한다.

<수학 관련>

Math.min(비교할 값1, 비교할 값2, 비교할 값3..... ) - C++의 min함수와 동일 

별로 어려운 것은 아니지만, 찾아보니 잘 적힌 설명이 없어서 간략하게 적어보려한다.

먼저 json 파일을 만든다.

a.json 

{

 “hello”: [

    {

      "id": 0,

      "content": “없어”

    },

    {

      "id": 1,

      "content": “있어”

    },

]

}

그리고 json 파일을 읽어올 js 파일에 이 json 파일을 import한다

import AA from “a.json 파일의 경로”

그 후, json 파일을 사용하듯 사용하면 된다.

예를 들면 “없어”를 출력해주고 싶다면

console.log(AA.hello[0].content)

이런식으로 말이다.

ESLINT : 자바스크립트 linter이다.

그러면 linter란 무엇인가?

정적 타입 분석 도구이다.

즉, 코딩 컨벤션과 문법적 에러 체크를 도와주는 것입니다.

그럼 코딩 컨벤션은 무엇인가?

코딩 스타일이나 코딩 표준 가이드라인을 의미한다. 재밌는건 이 표준이라는게 기업마다 조금씩 다르다 ㅎㅎ

예시로 Google 스타일이나 Airbnb 스타일 같은게 있다.

Prettier도 ESLINT와 비슷한데, Prettier은 여기에 줄 간격, 줄 길이 같은 규칙을 설정하여 자동으로 정렬해준다.

Prettier은 그런 포맷을 맞춰주기 때문에 Code Formatter라고 한다.

규칙을 설정해 놓고 Editor의 Auto Save기능을 활용하면 저장을 할 때, 안 맞게 작성했던 코드들이 자동으로 인덴트된다.