deVSner

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. !!! 리액트 엘리먼트를 반환한다!!! 1. 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다 class Welcome extends React.Component ..

엘리먼트는 React 앱의 가장 작은 단위입니다. 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부릅니다.

const element = Hello, world!; 위는 JSX라 불리는, javascript를 확장한 문법입니다. 문자열도 아니고, HTML태그도 아닙니다. JSX라고 보시면 되겠습니다. 1. JSX란? "마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 '컴포넌트'라고 부르는 느슨하게 연결된 유닛으로..." (출처: https://ko.reactjs.org/docs/introducing-jsx.html) 2. JSX에 표현식 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); function formatNam..

1. var flattenArray를 함수 밖으로 뺐다 - 사진처럼 결과가 중복으로 들어갔다. 2. vscode로 디버깅 시작. Array.isArray(ele) 했을때, 콘솔창에 정상적으로 인식을 하지만, 이 값이 flattenArray로 들어가지 않는 문제 발생. - flatter(ele)로 함수를 돌렸지만, 해당 값이 실제로 flattenArray로 들어가지 않음. - 하지만, 콘솔창에 해당 ele만 따로 배열이 담기는 것을 확인함 - flattenArray가 2개 생성되고, 이 2개의 배열을 서로 합치면 최종 결과값으로 원하는 결과값을 얻을 수 있다는 가설을 설립함. -

edabit에서 스코프 문제를 풀다가 구조분해 할당 개념을 접했습니다. https://devsner.tistory.com/43 [edabit] Fix the Code: Un-Mutating an Array - 문제 해결 과정 및 배운 점(구조분해 할당) 스코프에 대한 개념은 있습니다. 하지만, 스코프에 해당하는 문제풀이가 부족하다고 생각했습니다. edabit을 통해서, 이러한 갈증을 조금은 해결할 수 있었는데요 그 첫 문제로 Fix the Code : Un-Mutating an Arr.. devsner.tistory.com 아직 잘 모르는 개념이기 때문에 러닝로그로 따로 정리해 봅니다. 우선, 구조 분해 할당이란, 배열이나 객체의 속성을 해체하여서 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트의 ..

스코프에 대한 개념은 있습니다. 하지만, 스코프에 해당하는 문제풀이가 부족하다고 생각했습니다. edabit을 통해서, 이러한 갈증을 조금은 해결할 수 있었는데요 그 첫 문제로 Fix the Code : Un-Mutating an Array 문제를 풀어보았습니다. 난이도는 medium이라고 책정되어있지만, 배열 메소드를 접해보셨다면 그렇게 어려운 문제는 아닙니다. 우선 문제 상황을 보시죠. let x = [3, 3, 3, 3, 3, 3, 3] // Each time x is called, the following results are shown: change(x, 0) // [3, 3, 3, 3, 3, 3, 3] change(x, 1) // [3, 2, 2, 2, 2, 2, 3] change(x, 2) /..

Tree 자료구조를 구현 중에 있습니다. 해당 Tree는 value와 children 키를 가지고, 각각 숫자, 배열의 값을 할당했습니다. Tree에 값은 추가했지만, 특정 값을 검색하는 것에서 애를 먹었습니다. 우선, 로직은 맞았다고 생각했는데, 이상하게, children의 0번째 인덱스만 검사를 하는 것이었습니다. 코드를 보시죠. treeMethods.contains = function(target) { if (this.value === target) { return true; } else if (this.children.length !== 0) { for (let i = 0; i < this.children.length; i += 1) { return this.children[i].contains(..

객체를 생성하는 방법에는 아래 4가지가 있습니다(es6제외) 1. functional 2. function - shared 3. prototypical 4. pseudoclassical 제가 이 4가지를 같은 날에 공부하려니, 헷갈리는 부분이 많았습니다. 선 코딩 후 이론의 방식이라, 개념적인 부분에서 모호한 부분이 많습니다. 그 때 그 때 필요한 이론을 채워넣고 있지만, 한 번 깊게 수렁텅이에 빠진 것은 재빨리 구해줘야...합니다 ㅋㅋㅋ 이번 러닝 로그의 주제는 객체 생성 시에, new 와 this를 타이핑 하는 '시점'입니다 pseudoclassical적인 방법에서만 new를 사용하는 것이 아니라, 1번 2번 3번의 방법에서도 new를 사용하여 객체를 생성할 수 있습니다. 이게 헷갈렸는데, 직접 만들..