\(@^0^@)/

- 드림 코딩 TS 강의 프로그래머가 열심히 작성한 코드를 프로그램 형태로 동작시키기 위해서는 그 프로그램이 동작할 수 있는 환경. 즉, 언어나 이진법 형태로 변환해주는 작업을 거쳐야 하는데 그 작업을 도와주는 것이 컴파일러(compiler) Compile time에 타입이 결정되고 확인할 수 있으면 statically typed Rumtime 환경 때 타입이 결정되는 것을 dynamically typed js는 dynamically typed이기에 유연하고 초반에 배우기 쉽지만 가독성이 떨어지고, 불안전하다. dynamically typed 변수에 선언한 타입을 다른 곳에서 재할당하며 타입 변환이 가능함. ex) js, python, ruby, php let name = 'amy'; name = 23;..

😣 에러 발견 원인 function printName(firstName: string, lastName?: string) { console.log(firstName); console.log(lastName); } printName("amy", "park"); printName("amy"); // undefined printName("amy", undefined); // Optional parameter ts-node 1-2-function.ts ts-node를 통해, 내가 작성한 코드를 콘솔로 찍어서 확인하려 했는데, error 발생하였다. 🤩 1. runtime이 Node.js인 경우 해결법 npm i -D @types/node 현재 내가 작성하고 있는 1-2-function은 작은 폴더이기에, 그보다..

- 제로베이스 TS 강의 통일성을 위해 규칙을 가지고 null과 undefined 중 하나만 사용할 수 있도록 하자. any Type 지양하기. noImplicitAny or strict 옵션 true 권장 unknown Type은 any처럼 모든 값을 허용하지만, 상대적으로 엄격하다. TS에서 unknown으로 추론하는 경우는 없으니 개발자가 직접 명시해야 함. Array Type 둘 다 Array Type을 만드는 구문. 특별한 차이가 없으므로 개인의 취향에 따라 작성하면 됨. const strArr: string[] = ['str', 'str', 'str'] /* .JS const strArr = ['str', 'str', 'str']; */ /* .D.TS declare const strArr: ..

액션과 계산, 데이터 구분하기 절차적인 방법으로 구현한 쇼핑몰 페이지의 코드를 함수형으로 리팩터링 하기 위해서 액션, 계산, 데이터로 구분해보자. 액션은 코드 전체로 퍼진다. 어떤 함수 안에 액션이 하나만 있어도 그 함수 전체가 액션이 된다. 함수에는 입력과 출력이 있다 정보는 입력을 통해 함수 안으로 들어간다. 정보나 어떤 효과는 출력으로 함수 밖으로 나온다. 입력과 출력은 명시적이거나 암묵적일 수도 있다. 인자는 명시적인 입력이다. 리턴 값은 명시적인 출력이다. 하지만 암묵적으로 함수로 들어가거나 나오는 정보도 있다. let total = 0; function add_to_total(amount) { // 인자는 명시적 입력 console.log("합계 :" + total); // 전역변수를 읽는 것..

- 제로베이스 스쿨 수강후기 작성 - 1분 코딩 html5 canvas 강의 canvas 강좌 5 - 6 너무 재미있고 흥미롭게 보고 있는데도 강의를 보면 가끔 졸린 건 어쩔 수 없나보다...ㅠ 오늘을 끝으로 1분 코딩 채널의 canvas 관련 강의를 완료하였다. 오늘 학습한 강좌 5-6은 지난번보다 수학적인 개념? 들이 많고, 코드도 훨씬 길어져서 더 어려웠기에, 다음 주 저녁 파트에 TS와 REACT를 우선적으로 학습하고, 시간이 된다면 canvas 프로젝트를 조금씩 구현해보면서 복습해야겠음. canvas의 매력에 빠질 수 있는 정말 재밌고 만족스러운 강의였고, 개인적으로 포폴 사이트를 canvas 또는 인터렉티브 웹으로 구현해보고 싶은 욕심이 생겼다. 학습하면서 배운 간단한 프로젝트들에 기능을 추가..

- 제로베이스 REACT 강의 리액트 주요 개념 마무리 + 컴포넌트 스타일링 데이터를 가져와서 컴포넌트에 뿌려줄 때, reduce를 이용해볼 수 있다. react 공식 문서의 mock data를 사용해보자. filter함수를 사용해서 카테고리가 Sporting Goods 이거나 Electronics 일 경우의 데이터만 뽑아 올 수도 있지만, 그렇게 데이터를 추출한다면 만약 Sporting Goods 또는 Electronics가 없을 경우, 사용이 불가능하다. 즉, 코드의 확장성이 좋지 않으므로 reduce를 이용해서 어떤 카테고리가 나타나더라도 사용 가능할 수 있도록 구현해보자. import React from "react"; import products from "./products" export de..

- leetcode 알고리즘 연결 리스트 문제 풀이 head, tail이 분리되어있고 그 후에 val가 오는 연결 리스트 class Node { constructor(val = null, prev = null, next = null) { this.val = val; this.prev = prev; this.next = next; } } class MyLinkedList { constructor() { this.head = new Node(); this.tail = new Node(); this.length = 0; this.head.next = this.tail; this.tail.prev = this.head; } get(idx) { if (idx = this.length) ret..

우선 결과물을 먼저 보도록 하자. 시간 날 때마다 기능을 조금씩 더 추가해보고, 리팩터링 할 예정이다. 마크업 마크업을 동적 생성으로 구현하면 더 좋았을 수도 있겠지만, 우선 canvas를 알아가는 것이 목표이기에 간편하게 html단에서 마크업을 구현하였다. JS에서 활용하기 위해 아래의 tool들에 알맞은 dataset을 주었다. 예를 들어보면 연필의 경우 button안의 img태그에 data-tool="pencil"을 주었음. 이렇게 dataset을 사용하면, JS단에서 클릭이벤트를 활용하여 해당 이미지를 클릭할 경우 어떤 데이터인지 쉽게 알 수 있다. 스타일링 굵기를 선택하는 버튼의 경우에는 현재 div안에 button을 마크업 한 상태여서 button에 background 검정을 주고, heigh..

- 유데미 알고리즘 연결 리스트 get메서드!! flow를 조금 더 생각하고 로직을 짜자. class Node { constructor(val) { this.val = val; this.next = null; this.prev = null; } } class DoublyLinkedList { constructor() { this.next = null; this.tail = null; this.length = 0; } get(index) { if (index = this.length) return null; let count, current; if (index

액션과 계산, 데이터의 차이를 알기 챕터 1부터 계속 말하고 있지만, 다시 한번 정리해보자. 액션 실행 시점과 횟수에 의존한다. 다른 말로 부수 효과(side-effects), 부수 효과가 있는 함수(side-effecting function), 순수하지 않은 함수(impure function)라고 부르기도 한다. ex) 이메일 보내기, 데이터 베이스 읽기 계산 입력으로 출력을 계산한다. 다른 말로 순수 함수(pure function), 수학 함수(mathematical function)라고 부르기도 한다. 계산은 계산을 호출하는 코드를 계산 결과로 바꿀 수 있기 때문에 참조 투명(referentially transparent)한다. ex) 최댓값 찾기, 이메일 주소가 올바른지 확인하기 데이터 이벤트에 ..