코딩성장기

지금까지 배운것 자바스크립트의 기초(고차함수의 활용 등) html, css의 기초 linux,g git의 사용법 react의 기초(props, state 사용 등) HA(Hiring Assessment)를 끝내고 느낀 점 그래도 잘 따라가고 있구나. 하지만, 마지막 코플릿문제는 풀지 못했다. 배열에 대해 좀 더 공부를 하자. 왜 나는 30일이 넘는 시간 동안 좀더 열정적으로 하지 못했을까? 솔직히 말하면, 정말 코딩에 미쳐있지 못한것 같다. 코드스테이츠에서 제공하는 학습자료에 대해 공부를 하고 나름대로 내것으로 만든뒤에는 정말 많은 혼자만의 자유시간을 가졌다. 좀더 열심히 적극적으로, 남는시간에 나혼자만의 간단한 예제라도 만들어보도록 하자.

props의 사용 코드 스테이츠에서 배우면서 가장 애를 먹은 것을 꼽자면, 단언코 props의 사용이라고 할만큼 애를 많이 먹었다. 이번 HA를 하면서 배운점을 나름 잊지 않기 위해서 정리를 해보고자 한다. 사실 props의 사용 자체는 react홈페이지에 나와있는 것처럼 어렵지 않다. 위 처럼, 만들고 싶은 props를 전달하고 싶은 사용자정의 컴포넌트 태크의 속성으로 넣어주면 된다. (참고로 여기에서 props는 {text = "I'm the eldest child"}의 객체라고 생각하면 된다.) 그리고 이렇게 만든 props는 객체의 형태를 띄게 된다. (즉, key = text, value = 'I'm the eldest child" 가 되는 것. 이는 사용에 있어 필요한 부분이니 기억!) 그럼 ..

Route를 이용하기 React에서 페이지를 연결하기는 굉장히 쉽다. 와 같이, 필요한 BrowserRouter, Route, Switch 그리고 Link를 걸고 싶은 컴포넌트가 있는곳에는 Link를 import해준다. 그리고 BrowserRouter를 가장 밖에 두고, 그다음 Switch, 필요한 곳에 Route를 연결한 뒤, Route 태그안에 path를 적어 연결을 해주면 된다. 여기에서 주의 할 점은 홈 페이지의 path를 /로 설정하게 될텐데, 여기에서는 와 같이 exact가 필요하다는 점이다. 그렇지 않으면, '/'를 포함한 나머지 페이지들의 주소와 이 홈페이지를 구분하지 못하게 된다.

Reduce 함수의활용 앞서 살펴본 것처럼 Reduce함수의 기본적인 이용(내가 느끼기에는 단순히 수를 곱하고 더하고 빼고등의 산술적인 계산..)은 매우 쉽다. 하지만, 이를 내가 원하는대로 배열을 바꾸는데 사용할때에는 어려움을 많이 겪어, 이에 대해 자세히 다뤄보려고 한다. string 값을 가지고 있는 배열에 적용 let arr = ['적게 ', '일하고 ', '많이 ', '돈벌자'] let result = arr.reduce((a, c) => a+c)); 를 하게 되면 '적게 일하고 많이 돈벌자'라는 string이 생기게 된다. 역시 별로 어렵지 않다. 하지만, 이걸 객체를 value로 가진 array에 적용하게 된다면 생각이 좀 더 필요하게 된다. 잠시 아래의 예제를 보고 넘어가자. let lis..

map 배열의 각 요소들이 특정함수에 의해서 다른요소로 mapping 되는 것. e.g. let arr = [1, 2, 3]; let result = arr.map(function(num){ return num*2; }); result = [2, 4, 6]이 되게 된다. 이는 function multiple(num){ return num*2 } let result = arr.map(multiple);한것과 같은 결과를 불러온다. filter 배열의 각 요소들을 boolean값을 가지는 함수를 이용해 말그대로 filter하는 것. ex) let arr = [1, 2, 3, 4, 5, 6] return arr.filter(el =>el%2 === 0)을 하게 된다면 2의 배수들만을가지는 배열을 리턴하게 되는..

spread는 묶여 있던것들을 'spread'한다고 생각하자. e.g. let arr1 = [1, 2, 3, 4, 5]; let arr2 = [9, ...arr1, 10]; let arr3 = 9, arr1, 10]; 을 하게 되면 arr2 = [9, 1, 2, 3, 4, 5, 10] , arr3 = [9, [1, 2, 3, 4, 5], 10]이 되게 된다. 간단해 보이지만, 주의해볼점은 객체에서의 사용에 있어서이다. let obj1 = { foo: 'bar', x: 42 }; let obj2 = { foo: 'baz', y: 13 }; let clonedObj = { ...obj1 }; let mergedObj = { ...obj1, ...obj2 }; 을 하게 된다면, mergedObj는 {foo: ..

오늘은 Closure 라는 개념에 대해 알아보려고 한다. 일단 우리의 친구 mdn에 나온 클로저의 정의는 다음과 같다. "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 언제나와 같이 참 불친절하고 무슨 말을 하는지 모르겠다. 아래에서 좀 더 자세히 알아보도록 하자. 일반적인 함수를 생각해본다면, 일반적인 함수들은, 호출이 일어나기전이거나 호출이 일어난 이후, 해당 함수안에 들어 있는 컨텍스트에 접근하는것이 불가하다. 하지만 클로저, 클로저 함수는 외부함수의 컨텍스트(context)에 내부함수를 통해 접근이 가능하며, 이러한 상황일때 이 내부함수가 클로저함수가 된다. const add = x => y..

원시 자료형: 원시자료형은 변수와 값이 1:1로 대응이 되는 자료를 의미한다. 즉, number, string, boolean, undefined, null와 같은 원시자료형은 하나의 값만을 가질수 있고, 만약 재할당하게 되는 경우, 이전의 값은 사라지게 된다. 참조자료형: 원시자료형과 달리, 변수와 value가 pair가 되는 것이 아닌, 변수와 reference가 짝이 되는 자료형. 즉, 배열, 객체, 함수와 같은 참조자료형의 경우에는 하나의 값(value)이 아닌, 하나의 주소(reference)를 짝으로 가지게 되며, 해당 주소에는 여러 key와 value가 저장될 수 있다. 그러므로 참조자료형의 경우에는 보관함의 크기가 변경이 가능하다는 것이다.