반응형

ARCHIVE 47

[알고리즘/JS] 최대값 최소값 제외한 배열 요소의 합 (reduce)

Task Sum all the numbers of a given array ( cq. list ), except the highest and the lowest element ( by value, not by index! ) The highest or lowest element respectively is a single element at each edge, even if there are more than one with the same value. Mind the input validation. Example { 6, 2, 1, 8, 10 } => 16 { 1, 1, 11, 2, 3 } => 6 If an empty value ( null, None, Nothing etc. ) is given in..

ARCHIVE/ALGORITHM 2023.01.14

[JS] JavaScript ES6 - var / let / const

ES6 ? > ECMAScript : 자바스크립트 표준명세서 (JavaScript는 ECMAScript의 특정 버전이라고 할 수 있다.) ES6 = ES2015 (ECMA International에서 버전을 발표할 때 표기하는 정식 명칭은 연호를 사용해서 ECMAScript 2015) Modern JavaScript : 현시점에 사용하기 적합한 범위 내에서 최신버전의 표준을 준수하는 JS > javascript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준. (ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JS는 ECMAScript를 준수해서 만들어낸 '결과물') > ECMAScript가 JavaScript화 하기 위해 등장하긴 했지만, Ja..

ARCHIVE/JavaScript 2022.11.25

[TS] TypeScript Basic

TypeScript is "superset" to Javascript. 자바스크립트는 타입에 관대하다. 5 - '3' 이렇게 숫자와 문자를 연산해도 알아서 타입을 바꿔서 연산해주는데, 이는 자바스크립트가 Dynamic typing(동적타이핑)을 지원하는 언어이기 때문이다. 이런 Dynamic typing은 큰 프로젝트 시 type과 관련된 버그들이 많이 발생하면서 단점이 된다. 이런문제점을 해결해주는 언어로 타입스크립트가 사용된다. 타입스크립트는 자바스크립트의 superset이라고 불린다. 자바스크립트를 기반으로 하는 프로그래밍 언어, 혹은 자바스크립트의 확장이라고 할 수 있다. 핵심언어는 여전히 자바스크립트이다! TypeScript adds static typing to JavaScript. 타입스크립..

ARCHIVE/TypeScript 2022.04.28

[React] 칸반보드 Kanban Board Drag & Drop (Recoil, TypeScript, React DnD)

Kanban Board Drag & Drop kanban card 추가, 수정, 삭제 kanban 기본틀 kanban의 기본구성은 'To do' 'In progress' 'Done' 'Notes & Reference' 4개의 list로 구성한다. Add task 버튼으로 card를 생성하고, card는 수정과 삭제가 가능하며 list간 drag,drop으로 이동이 가능하게 구현한다. Recoil 기본setting https://recoiljs.org/ko/docs/basic-tutorial/atoms Atoms | Recoil Atoms는 애플리케이션 상태의 source of truth를 갖는다. todo 리스트에서 source of truth는 todo 아이템을 나타내는 객체로 이루어진 배열이 될 것이..

ARCHIVE/TOY_PROJECT 2022.03.23

[React] Kakao Map - 폴리곤 (카카오맵)

선택지역을 polygon으로 표시하는 map 기본 Kakao Map 설정 https://developers.kakao.com 카카오 개발자 사이트에서 카카오 로그인 내 에플리케이션 - 애플리케이션 추가하기 - 앱이름 등록 생성한 앱클릭 - 플랫폼 - 사용할 플랫홈 선택 후 도메인 설정 html파일에 추가 지도 생성하기 javaScript로만 할 경우 import React, { useEffect } from 'react'; const { kakao } = window; export const KakaoMap = () => { useEffect(() => { const container = document.getElementById('map'); const options = { center: new kak..

ARCHIVE/TOY_PROJECT 2022.03.14

[React] Dashboard (TypeScript + Redux-toolkit)

https://github.com/manonkim/A_team_test GitHub - manonkim/A_team_test Contribute to manonkim/A_team_test development by creating an account on GitHub. github.com Filtering 기능이 있는 Dashboard 필터링 기능 1. dropdown menu 클릭 시 checkbox 생성 (toggle + menu 바깥영역 클릭 시 close) 2. checkbox 클릭 : 견적 요청 카드 필터링 + dropdown menu에 클릭한 checkbox 카운팅 + Reset button 노출 3. '필터링 리셋' 클릭 시 filtering 초기화 4. '상담 중인 요청만 보기' Toggl..

ARCHIVE/TOY_PROJECT 2022.02.26

[React] 환율계산기

https://github.com/manonkim/exchange_cal GitHub - manonkim/exchange_cal Contribute to manonkim/exchange_cal development by creating an account on GitHub. github.com Exchange Rate Calculator timestamp 변환 Unix 타임 스탬프는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간이며 초 단위로 표시된다. JavaScript Date 객체는 1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 시간을 밀리 초 단위로 표시합니다. new Date()를 사용하여Date()클래스에서 새 객체를 생성하면 생성 된 시간을 밀리 ..

ARCHIVE/TOY_PROJECT 2022.01.26

[TS] keyof / Mapped Types / infer 등

keyof ✔️ keyof : Object 타입에 사용하면 object 타입이 가지고 있는 모든 key 값을 union type으로 합쳐서 내보내준다. object의 key를 봅아서 새로운 타입을 만들고 싶을 때 사용한다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" let a1: PersonKeys = "age"; let b1: PersonKeys = "agee"; //에러 [key : string]를 keyof 하면 stirng | number 타입이된다. object key 값에 숫자를 넣어도 문자로 치환되기 때문에 ( [key : number]는 typeof하면 numb..

ARCHIVE/TypeScript 2022.01.17

[TS] declare / d.ts / index signatures

declare 외부 js 파일 import 했을 때, 파일이 ts로 작성된게 아니라 js로 작성된 파일이면 에러가 발생한다. 이럴 때 declare 쓰면 이미 정의된 변수나 함수,타입을 재정의하여 '타입에러나 변수없다는 에러' 방지할 수 있다, // data.js let a = 1; let b = {name : 'kim'} //index.ts (data.js파일에서 변수 a를 가져다가 쓰고싶을 때) declare let a : number; 'a 라는 변수를 이 파일에서 잠깐 정의한다" (a라는 변수 어디에 있으니까 그만 징징거려라) js로만 작성된 외부 라이브러리 쓸 때 유용, ts 버전이 없다면 직접 declare로 타입작성하면 된다. ts파일들은 변수만들 타입 까먹어도 자동으로 타입지정이 되어있으니..

ARCHIVE/TypeScript 2022.01.13

[TS] React

React - TypeScript typescript 셋팅이 완료된 react 프로젝트 설치 npx create-react-app 프로젝트명 --template typescript 기존 프로젝트에 typescript만 더하고 싶으면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 🔻 JSX문법을 지원하는 tsx 확장자 사용 JSX 타입지정 🔻 JSX.Element let 박스 :JSX.Element = let 버튼 :JSX.Element = 좀 더 정확하게 타입을 지정하고 싶으면 같은 기본 태그들은 JSX.IntrinsicElements let 박스 :JSX.IntrinsicElements['div'] ..

ARCHIVE/TypeScript 2022.01.12
반응형