innn

uuid의 경우 typescript를 사용해서 @types/uuid 타입 정의도 설치해야한다. type 파일의 경우 빌드시엔 필요 없어서 devDependecy에 추가한다. bun add -d @types/uuid bun add 설치할 패키지 이름 -d 또는 bun add 설치할 패키지 이름 --dev 로 설치하면 됨 그냥 간단한 전자로 설치한다.

state 구조화 5원칙 관련된 state를 그룹화하기 state 안에서 모순 피하기 불필요한 state 피하기 중복된 state 피하기 깊게 중첩된 state는 피하기 연관된 state 그룹화 const [position, setPosition] = useState({x:0, y:0} x값과 y값을 분리해서 state로 처리하지 않고 그룹화한다. 커서를 움직일때 동시에 x, y값이 움직여야하는 상황에서 필요하다. ⇒ 동시에 업데이트 해야하는 state에선 그룹화 하기! ⇒ 단, x값 따로 y 값따로 업데이트하려면 …로 복사를 해주지 않으면 불가능하다. state 안에서 모순을 피하자 isSending, isSent와 같은 단계적으로 변하는 연관된 state의 경우 하나라도 업데이트를 하는 것을 까먹는다..

짧은 서론 : 11월은 자료구조와 알고리즘에 충실하게 공부해보자는 의미의 달로 정했다. 이번주부터 시작한 자료구조 스터디에서 배운 내용을 블로그에 최대한 나의 언어로 잘 정리하는 것이 목표. 배열 연관된 데이터를 연속적인 형태로 구성된 구조다. 배열에 포함된 원소는 순서대로 index(번호)가 붙는다. 배열의 특징 - 고정된 크기를 가지며 일반적으론 동적으로 크기를 늘릴 수 없다. (다만, 내가 주로 사용하는 자바스크립트처럼 대부분의 스크립트 언어는 동적으로 크기가 증감되도록 만들어졌다. 내가 자바를 배웠을 때는 어레이의 크기와 어레이에 들어갈 타입을 미리 지정해서 선언했던 걸로 기억한다. 자바스크립트에선 한 어레이에 스트링, 넘버 다 들어갈 수 있다.) - 원하는 원소의 index를 알고 있다면 O(1..

바닐라JS로 투두리스트를 만들다 마주친 JSON 내장 객체 로컬스토리지에 todo를 저장하려다가 로컬 스토리지는 오직 text만을(string) 저장한다는 것을 알게됐다. 가령 내가 할 일로 ts 공부 js 복습 병원 갔다오기 를 입력해 로컬스토리지에 setItem으로 저장하면 이런 식으로 텍스트로 저장 되는 것이다. todo는 배열로 저장되어 아이템 하나 하나(ts 공부 / js 복습 등)으로 관리돼야 한다. 그래서 JSON 내장 객체의 parse와 stringify를 사용해야했다. 잠깐 json을 살펴보자면, JSON이란? javascript object notation의 약자로서, 데이터를 문자열의 형태로 나타내기 위해 사용된다. js의 객체(object) 형식과 유사함. { "name" : "윤삼..

https://javascript.info/basic-dom-node-properties Node properties: type, tag and contents javascript.info 팀원 서머님에게 노드에 대해서 질문했음 ㅋㅅㅋ 독독한 스맛걸답게 나의 이해를 도와주었다. 답변 : createElement() 메서드는 document 객체의 메소드이기 때문에 document.createElement appendChild() 메서드는 Node 클래스를 상속 받는 노드들에 대해서 사용 가능 하기 때문에 Node.appendChilde라고 돼있는 것이다. ex) elem.createElement 는 안되는데, elem.appendChild 는 됨 (elem에 child 요소를 추가하는 것) 이유는 노드가..

https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild Node.appendChild() - Web API | MDN Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노 developer.mozilla.org JS 로 과제를 풀다가 이제까지는 HTML의 요소(element)를 js 쿼리셀렉터로 가져와서 썼다면 (가령, 아래와 같은 식으로) const toDoInput = document.querySelector('#todo-form input'); => todo-form 이라는 i..

요 며칠간 Tailwind 로 이것저것 만져보다가 소개하는 글을 써보려한다. 지난 해커톤 참여 때 같은 프론트엔드 팀원분께서 css로는 이 tailwind를 쓰길 원했으나, 짧은 대회기간에서 내가 css를 새로 익히기는 무리가 있다고 판단해서 팀원분께서 양보해주셨다. 언제든지 테일윈드를 쓰는 곳에선 테일윈드로 빠르게 적응하기 위해서 이번 기회에 써본다. 배우기 위해선 공식문서가 짱 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 공식문서의 메인문구 : 오직 HTM..

1. 배열 d에 있는 숫자들(요소들)을 오름차순으로 정렬한다. 2. 배열 앞에서부터 순서대로 더해가면서 budget 을 초과하지 않는 최대 개수의 숫자들을 찾는다. 아래는 한 줄 한 줄 해석. function solution(d, budget) { // 함수 solution은 배열 d와 숫자 budget을 받는다. let answer = 0; // 최대 개수를 나타내는 변수 answer을 0으로 초기화한다. let money = 0; // 현재까지의 예산 사용 금액을 나타내는 변수 money를 0으로 초기화 한다. d.sort((a, b) => a - b) // 배열 d을 오름차순으로 정렬한다. .forEach(function (val) { // 정렬된 배열에서 각각의 요소 val에 대해 다음의 함수를 ..