전체 글787

• 

  [React]자식 컴포넌트가 부모 컴포넌트의 state 변경 자식 컴포넌트가 부모 컴포넌트의 state를 변경 설명할 컴포넌트의 구조는 아래 사진과 같습니다. 컴포넌트의 역할 index : 최상위 컴포넌트 어떠한 동작도 기능도 존재하지 않음 App : View 컴포넌트와 ButtonComponent 컴포넌트에 전달하는 state를 관리하고 있음 NotWork : 어떠한 동작도 기능도 존재하지 않음 ButtonComponent : 버튼 클릭 시 App 컴포넌트의 state에 데이터를 추가함 View : App 컴포넌트의 state를 화면에 출력함 ※ CodeSandBox에서 Button.js 파일을 만들 수가 없어서 ButtonComponent로 생성하였습니다. 큰 의미는 없습니다. 샘플 App의 컴포넌트의 state를 변경하는 함수를 ButtonComponent .. React/React 문법 2021. 7. 23.

• 

  [React]Warning: A component is changing an uncontrolled input to be controlled. 경고 『 A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 』 해석 '컴포넌트는 제어할수없는 input을 제어하기 위해 변경하고 있습니다. 해당 경고는 undefined에서 정의된 값으로 변경할려고 해서 발생하였으며, 이러한 경우는 발생해서는 안됩니다. 컴포넌트의 일생동안 input .. React/기타 2021. 7. 22.

• 

  [JavaScript]배열 size()와 length의 차이 JavaScript에서 배열(Array)의 size()와 length의 차이를 정리합니다. 특정 브라우저에서만 호환되는 size() .size() 메서드는 jQuery 1.8부터 사용되지 않습니다. jQuery 1.8부터 .size() 메소드가 삭제되었으므로 .length property를 사용할 것을 권고하고 있습니다. 특정 브라우저에서 .size() 메서드가 동작하는 이유는 jQuery 버전이 1.8 미만이기 때문입니다. 참조 : https://api.jquery.com/size/ size() 메서드는 순수 배열의 메서드가 아닙니다. size() 메서드는 jQuery에서 지원하는 라이브러리입니다. 순수한 자바스크립트 방식이 아닙니다. size()는 길이를 구하는데 적합하지 않습니다. 다른 프로그래밍 .. JavaScript/JavaScript 문법 2021. 7. 22.

• 

  [JavaScript]배열에서 특정 값의 개수 JavaScript에서 배열 내부에 특정 값의 개수를 구하는 방법을 정리합니다. 데이터 1. 배열(Array) 2. 배열의 객체(Object of Array) 3. 다차원 배열(Multidimensional Array) 방법 1. for문 2. map() 2. filter() 4. reduce() 배열(Array) 1. for문 가장 기본적인 방법으로 배열의 모든 요소를 순회하면서 특정 값이 있을 경우 count를 증가합니다. var arr = ['A', 'B', 'B', 'C', 'D' ]; var count = 0; for(let loop = 0; loop < arr.length; loop++) { if(arr[loop] === 'A') { count++; } } console.log(`count :.. JavaScript/JavaScript 문법 2021. 7. 22.

• 

  [JavaScript]함수형 프로그래밍, 순수 함수 함수형 프로그래밍의 핵심 개념 중 하나인 순수 함수에 대해 설명을 합니다. 순수 함수(Pure Function) 아래 요건을 충족하면 순수 함수라고 할 수 있습니다. 1. 파라미터를 최소 하나 이상 받으며 파라미터에 의해서만 반환 값이 결정됩니다. 2. 값이나 다른 함수를 반환합니다. 3. 부수 효과가 없어야 합니다. 4. 입출력을 수행해서는 안 됩니다. EX) 함수 내부에서 콘솔에 로그를 남김, 파일입출력 부수 효과(side effect) 함수 내부에 전역 변수를 사용 함수 내부나 애플리케이션에 있는 다른 상태를 변경 함수 내부에서 다른 함수를 호출(순수 함수는 제외) 순수하지 않은 함수 var globalAge = 50; var userInfo = { name: "JaeSeong", age: 29 }.. JavaScript/함수형 프로그래밍 2021. 7. 18.

• 

  [JavaScript]함수형 프로그래밍 - 불변성(immutable) 함수형 프로그래밍의 핵심 개념 중 하나인 불변성에 대해 설명을 합니다. 불변성(immutable) 이력서에서 본인의 사진을 숨기는 작업을 진행할 경우 싶은 경우 가능한 방법은 두 가지입니다. (더 창의적이고 다양한 방법이 있겠지만 2가지라고 가정합시다.) 첫 번째 방법은 원본 이력서에서 사진을 빗금 처리하던지 사진을 가립니다. 두 번째 방법은 원본 이력서의 복사본을 만들어 복사본을 수정하는 방법입니다. 두 가지 방법 중에서 사진을 숨기는 작업을 취소해야 하는 경우가 있을 수도 있으므로 안전한 방법은 두 번째 방법입니다. JavaScript와 불변성 자바스크립트에서 데이터가 변경되었을 경우 변하는지 불변하는지 예제 코드를 통해 알아보도록 합니다. 예제코드 변수 변수의 경우에는 원본 변수인 myAge의 값이.. JavaScript/함수형 프로그래밍 2021. 7. 18.

• 

  [JavaScript]명령형 프로그래밍, 선언적 프로그래밍 프로그래밍 패러다임은 프로그램 개발 방법론을 의미합니다. 그림에서 확인할 수 있듯이 현재까지 수많은 프로그래밍 패러다임이 탄생했으며, 지금도 다양한 연구를 통해 새로운 패러다임을 만들어 나가고 있습니다. 개발자는 본인이 사용하는 프로그래밍 언어와 해당 언어의 패러다임을 이해하여 올바른 프로그램을 개발하는 자세를 갖추어야 합니다. 수많은 패러다임이 존재하지만, 이번 포스팅에서는 선언적 프로그래밍(declarative programming)과 명령형 프로그래밍(imperative programming)에 대해 설명을 합니다. 선언적 프로그래밍 목표를 달성하기 위해 과정보다는 필요한 기술을 우선 중점으로 프로그래밍을 하는 스타일입니다. 함수형 프로그래밍은 선언적 프로그래밍에 포함됩니다. 즉, 선언적 프로그래밍.. JavaScript/함수형 프로그래밍 2021. 7. 17.

• 

  [JavaScript]1급 시민(First Class Citizen) 자바스크립트에서 함수형 기법을 사용하여 코드를 작성해보셨을 겁니다. 그리고 본인이 함수형 기법을 사용했는데, 함수형 기법이 무엇인지 모르는 분들도 계실 겁니다. 이번 포스팅에서는 함수형 프로그래밍의 1급 시민에 대해 설명을 하며, 예제 코드를 통해 확인을 해봅니다. 함수형 프로그래밍의 역사 「 1930년대 발견한 람다 계산법(lambda calculs)이 함수형 프로그래밍의 시작이라고 할 수 있습니다. 람다 계산법 발견 후 여러 가지 연구를 진행하여 1950년대 존 맥카시(Jonh McCarthy)는 람다 계산법을 활용한 리스프(Lisp)라는 프로그래밍 언어를 만들었습니다. 리스프는 고차 함수라는 개념과 함수가 1급 시민 또는 1급 멤버라는 개념을 구현했습니다. 」 고차 함수 - 다른 함수를 조작하는 함.. JavaScript/함수형 프로그래밍 2021. 7. 17.

• 

  [React]비동기로 동작하는 setState() React에서 state를 변경하는 setState()에 대해 설명합니다. setState() 호출 직후 this.state에 바로 반영이 되지 않습니다. 아래 예제를 통해 값이 바로 반영이 되는지 콘솔 창에서 확인을 할 수 있습니다. 최초 버튼을 클릭 했을 때, 아래와 같은 결과를 예상했습니다. *****1 번째 클릭***** setState() 호출 전 : 0, 0 First : 1, 1 Second : 1, 2 Third : 1, 3 하지만, 예상과 달리 아래와 같은 결과가 나왔습니다. *****1 번째 클릭***** setState() 호출 전 : 0, 0 First : 0, 0 Second : 0, 0 Third : 0, 0 React는 this.setState() 호출 후 this.state에.. React/React 문법 2021. 7. 15.

• 

  [JavaSciprt]Warning : You provided a `value` prop to a form field without an `onChange` handler. 경고 『 Warning: You provided a 'value' prop to a form field without an 'onChange' handler. This will render a read-only field. If the field should be mutable use 'defaultValue'. Otherwise, set either 'onChange' or 'readOnly' 』 해석 'onChange' 이벤트 핸들러 없이 form 내부에서 'value' prop를 사용하였습니다. value를 사용한 Element는 읽기 전용으로 렌더링 될 것입니다. 만약 값을 수정하고 싶다면, defaultValue를 사용해야 합니다. 그렇지 않으면, 'onChage' 또는 'readOnly'로 설.. JavaScript/JavaScript 문법 2021. 7. 14.

• 

  티스토리와 CodeSandBox 연동 CodeSandBox CodeSandBox는온라인 코드 에디터입니다. 사용방법은 이미 포스팅하였으므로 클릭하여 확인부탁드리겠습니다. 연동방법 1. 우측 상단의 Share 클릭 → Embed 클릭 2. 좌측 중앙의 Copy Embed Code 클릭 3. 티스토리에서 HTML모드로 들어갑니다. 4. 복사하였던 내용을 원하는 위치에 붙여 넣기 합니다. 5. 붙여 넣기 후 다시 기본 모드로 돌아와서 추가적으로 작성해야 하는 내용이 있다면, 작성 후 완료하면 됩니다. 아래는 연동 샘플입니다. 6. 크기 조정 방법 HTML모드로 들어가서 width와 height를 입력합니다. Embed의 기능 소개 1. Embed Light Theme : 선택시 배경을 흰색으로 변경합니다. Editor + Preview : 코드와.. 개발자 도구/CodeSandbox 2021. 7. 14.

• 

  돈의 시나리오 - 김종봉 대표 ■ 책 제목 : 돈의 시나리오 ■ 저 자 : 김종봉 ■ 출 판 : 다산북스 책 리뷰 『 돈의 시나리오 』는 김종봉 저자의 『 돈 공부는 처음이라 』를 잇는 두 번째 책이다. 직장 생활을 하고 있는 나와는 다르게 저자는 전업투자자이기 때문에 책 리뷰를 어떻게 작성해야 할지 상당히 고민이 되었고 생각이 많이 들었다. 책 리뷰가 미루어졌던 첫 번째 이유는 나는 저자가 운영하고 있는 돈 공부는 처음이라 카페의 회원이며, 이 책을 4번 이상 읽었지만, 직장인이라서 환경상 전업투자자를 따라 할 수가 없다. 두 번째 이유는 주식과 관련된 서적은 단순히 독서로만 끝나는게 아니라 적용을 해보고 리뷰를 하는 게 맞다고 생각을 했기 때문이다. 이러한 이유가 있음에도 불구하고 리뷰를 작성하는 이유는 이 책의 내용이 온전히 전.. 책 리뷰 2021. 7. 14.