\(@^0^@)/

- 유데미 알고리즘 연결 리스트 연결 리스트 연습 문제풀이인 줄 알았는데 연결 리스트 학습했던 것 메서드 별로 복습하는 간단한 연습들이었다. 그래도, 이렇게 연습하면서 반 암기, 반 이해할 수 있으니 좋은 것 같음. - 쏙쏙 들어오는 함수형 코딩 책 챕터 2 : 현실에서의 함수형 사고 https://dev-minju.tistory.com/286 - 제로베이스 JS 강의 canvas 학습 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D CanvasRenderingContext2D - Web APIs | MDN The CanvasRenderingContext2D interface, part of the Canvas API, ..

제어 컴포넌트 (Controlled Component) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링 하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 예를 들어, 이전 예시가 ..

챕터 2 - 현실에서의 함수형 사고 피자를 만드는 함수형 사고를 사용한 로봇을 예로 들어서 1. 함수형 사고 기술인 액션과 계산, 데이터 각 분류에 해당하는 예를 살펴보고 코드에 적용한 계층형 설계(stratufued design) 원칙과 2. 일급 추상의 분산 시스템을 이해하기 위한 타임라인 다이어그램(timeline diagram)에 대해 살펴보자. 1. 액션 액션은 호출 횟수와 시점에 의존하는 것. 오븐이나 배달차 같은 자원과 요리 재료를 사용하는 것은 액션. ex) 반죽 펴기, 피자 배달, 재료 주문 2. 계산 어떤 것을 결정하거나 계획하는 것은 계산. 계산은 실행해도 다른 곳에 영향을 주지 않음. 따라서 계산은 아무 때나 사용해도 됨. ex) 조리법에 나온 것을 두 배로 만들기, 쇼핑 목록 결정..

- 유데미 알고리즘 이중 연결 리스트 사용 예시 : 데이터를 반대방향으로 취급해야 하는 경우, 검색 기록을 봐야 하는 경우 데이터를 검색할 때 이중 연결 리스트(DoublyLinkedList)는 단일 연결 리스트(SinglyLinkedList)에 비해 절반의 소요시간이 걸린다. 오늘은 get, set, insert, remove 메서드들을 살펴보았고, 아래는 지금까지 배운 이중 연결 리스트의 최종 코드이다. 내일부터는 문제를 풀어보며 더 깊이 이해해보자. class Node { constructor(val) { this.val = val; this.next = null; this.prev = null; } } class DoublyLinkedList { constructor() { this.head = ..

많은 함수형 프로그래밍 자료에서 함수형 프로그래밍은 부수 효과가 없는 순수한 함수로 프로그래밍을 해야 한다고 말한다. 함수형 프로그래밍을 하려면 부수 효과를 처리하는 방법을 알아야 한다. 부수 효과를 처리한다는 말은, 없앨 수 있는 부수 효과는 없애고 필요한 부수 효과는 잘 두는 것을 의미한다. 함수형 프로그래밍의 핵심 개념 계산과 액션을 구분하는 것 계산은 외부에 어떤 영향을 주지 않기 때문에 여러 번 실행해도 같은 결과를 돌려준다. 하지만 액션은 부수 효과를 가지고 있다. 화면에 글씨를 표시하거나 로켓을 발사하는 것과 같은 액션은 실행할 때마다 다른 결과가 나올 수 있다. 코드에 어떤 부분에 부수 효과가 있고 어떤 부분이 '순수한 계산' 인지 쉽게 구분할 수 있는 패턴으로 구성하면 프로그램을 쉽게 이..

- 제로베이스 React 강의 간단한 명함 추첨 이벤트를 구현하는데, 리액트를 최근에 공부를 안 해서 그런지 정말 많은 부분을 잊어서.. 리액트의 특징? 철학에 대해서 조차 많은 부분 기억을 못 해서 슬픈 하루였다.. 혼자서 최대한 구현을 해보고, 강의를 보며 내 코드와 비교해보았다. 데이터를 가져와서 렌더링 시키려면, useEffect를 사용해서 업데이트될 때만 재 렌더링 되도록 해주어야 한다. 또한 이 것이 업데이트되고 있는지 상태를 알려면 useState를 사용하여야 한다. 늘 api 받아와서 useEffect에 구독시켜서 update 될 때마다 렌더링 하는 것이 당연했는데.. 이 당연한 것도 잊어서 그냥 import 한 data 객체를 바로 사용했다 하하. 마지막에 모든 당첨자를 발표하기 위해, ..

- 유데미 알고리즘 이중 연결 리스트 push, unshift, pop, shift 단일 연결 리스트를 배워서 그런지, 그때보다 훨씬 이해가 잘 된다. 내일 나머지 배우고 얼른 문제를 풀어봐야 백 프로 이해할 수 있을 것 같다. class Node { constructor(val) { this.val = val; this.next = null; this.prev = null; } } class DoublyLinkedList { constructor() { this.head = null; this.tail = null; this.length = 0; } push(val) { let newNode = new Node(val); if (this.length === 0) { this.head = newNode;..

글쓰기 에디터 에디터를 구현하려면, Document.execCommand()에 대해 알아야 한다. Document.execCommand() HTML 문서가 designMode로 전환되면 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있다. 문법 bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) aCommandName 실행해야 할 명령어 이름 DOMString을 나타냅니다. 사용 가능한 명령어 목록은 Commands를 참고하세요. aShowDefaultUI 기본 사용자 UI가 나타나야 하는지를 보여주는 Boolean 값입니다. Mozilla에서는 구현되어 ..

- 유데미 알고리즘 단일 연결 리스트 get 메서드 get메서드는 인덱스 혹은 위치를 의미하는 수를 인자로 받아서 주어진 위치에 있는 노드를 반환하는 메서드. class Node{ constructor(val){ this.val = val; this.next = null; } } class SinglyLinkedList{ constructor(){ this.head = null; this.tail = null; this.length = 0; } push(val){ var newNode = new Node(val); if(!this.head){ this.head = newNode; this.tail = this.head; } else { this.tail.next = newNode; this.tail = ..

이미지 에디터 만들기 0. 생성자 함수 안에 데이터들을 초기화시켜놓기. ;(function () { 'use strict' const get = (element) => document.querySelector(element) class PhotoEditor { constructor() { this.fileInput = get('.drag_area input') this.fileImage = get('.fileImage') this.fileEvent() this.width = 500 this.height = 200 this.targetImage = get('.canvas_wrap') this.targetCanvas = document.createElement('canvas') this.targetCtx =..