본문 바로가기

분류 전체보기226

[1] 리액트에 대해 ( + 리액트 컴포넌트, 가상돔, Nodejs, 리액트 설치하기) React(리액트)란?: 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교하게 된다.Angular와 Vue는 프레임워크이며 리액트는 라이브러리이다. 프레임워크와 라이브러리의 차이점?프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다.라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다.위 그림을 보면 프레임 워크는 라이브러리를 포함하고, 우리가 작성한 소스 코드를 호출한다.그리고 소스코드는 기능을 구현하기 위해서 라이브러리를 호출하게 된다.이처럼, 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있으며, 라이브러리들은 특정.. 2024. 12. 3.
[23] 자동차 경주 - 할 일들을 이터러블(리스트)로 바라보기 데이터 구조는 track, 파이프라인 코드는 _.go를 사용1. L.range(Infinity)무한 범위의 이터러블을 생성합니다. Infinity는 무한대이므로, 끝없이 숫자를 생성합니다.이때, 실제로 무한히 반복되는 것이 아니라 나머지 조건에 의해 제한됩니다.2. L.map(i => track[i])L.map()을 사용하여 L.range(Infinity)에서 생성된 각 인덱스를 사용해 track 배열의 요소에 접근합니다.예를 들어, track[0], track[1], track[2] 등을 차례로 접근합니다.3. L.map(({ cars }) => cars)각 track[i]에서 cars 프로퍼티만 추출합니다.즉, [ '철수', '영희', '철희', '영수' ]과 같은 형태의 배열을 얻습니다.4. L.m.. 2024. 12. 2.
[21~22] range와 take의 재해석 / takeWile, takeUntil range와 take의 재해석range와 take는 보통데이터 생성 및 처리를 쉽게 해주는 함수로, 데이터 파이프라인을 구성할 때 자주 사용됩니다.1. range()range() 함수는 지정된 범위의 숫자들을 순서대로 생성해주는 함수입니다. 보통 이 함수는 반복 작업이나 특정 범위의 값을 생성할 때 사용됩니다.2. take()take() 함수는 특정 개수만큼의 데이터를 추출하는 역할을 합니다. 즉, 입력받은 이터러블이나 배열에서 앞에서부터 원하는 개수만큼의 요소를 가져오는 기능을 합니다. 코드 설명L.range(10): 0부터 9까지의 배열을 생성합니다._.take(3): 생성된 배열에서 처음 3개의 요소만 추출합니다. 즉, [0, 1, 2]를 가져옵니다._.each(console.log): 추출된 각 .. 2024. 12. 2.
[18~20] Map, Set / Model, Collection 클래스 / Product, Products / MapMap은 ES6에서 추가된 새로운 데이터 구조로, 키-값 쌍을 저장하는 용도로 사용된다. Map 객체는 일반적인 자바스크립트 객체와 비슷하지만 몇 가지 중요한 차이점이 있다.키의 타입: Map의 키는 객체를 포함한 모든 값이 될 수 있다. 반면 일반 객체의 키는 반드시 문자열이나 심볼이어야 한다.저장 순서 유지: Map은 키-값 쌍이 삽입된 순서를 유지한다. 코드 설명1. new Map()으로 빈 Map 객체를 생성2. m.set('a', 1)와 같이 .set() 메서드를 통해 'a', 'b', 'c'라는 키에 각각 1, 2, 3을 설정3. _.go는 함수형 파이프라인을 구현하기 위해 자주 사용되는 형태로, 여러 개의 함수를 순차적으로 실행하는 방식이다.4. 첫 번째 인자로 m (Map 객체)을 넘.. 2024. 12. 2.
[w/퍼실리테이터 이대희 강의] React 예제 살펴보기 react 예시 확인하기 ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizatireact.dev video가 props가 된다.반환할 때를 보면 html과 똑같이 태그들을 사용할 수 있다. 사용법이 조금씩은 {}으로 넣는 등 다르다. MyButton에 props를 'name'으로 받아와서 'a.bu.. 2024. 12. 2.
[17] 객체를 이터러블 프로그래밍으로 다루기 (values, entries, keys, object, mapObject, pick, indexBy 및 응용, 그 외) 여기서 말하는 객체는 key value 쌍을 말한다. 이전까지는 iterator를 사용해서 다뤘다. 객체를 이터러블 프로그래밍으로 다루는 이유는 코드의 가독성, 유지보수성, 확장성을 높이고 데이터를 효율적으로 처리하기 위해서입니다. 이터러블 프로그래밍은 데이터를 순차적으로 처리하거나 변환하는 작업을 선언적으로 표현할 수 있는 기능을 제공합니다. 객체를 이터러블로 다루는 것은 특히 데이터 구조가 복잡하거나 동적으로 처리해야 할 때 유용합니다. 객체와 이터러블의 차이객체(Object):키-값 쌍으로 데이터를 표현.직접적으로 이터레이션(반복)할 수는 없음.JavaScript에서는 객체가 기본적으로 이터러블이 아님.이터러블(Iterable):순회 가능한 데이터 구조(예: 배열, 맵, 세트 등).for...of와.. 2024. 11. 30.