📖오늘 배운 것 Spanning Tree : 그래프 내의 모든 정점을 포함하는 트리 => 모든 정점들이 연결되어 있고 n개의 정점을 갖는 경우 (n-1)개의 간선으로 연결된다. 최소 신장 트리(MST = Minimum Spanning Tree) : Spanning Tree 중 사이클을 만들지 않고 간선들의 가중치 합이 최소인 트리 => 각 간선의 가중치를 고려하여 최소 비용의 Spanning Tree를 선택하는 것. 단순히 가장 적은 간선을 사용한다고 해서 최소 비용이 얻어지는 것이 아님! ex) 통신망, 도로망, 유통망 등... 어떤 그래프 형태에서 길이, 구축 비용, 전송 시간 등을 최소로 구하는 경우 MST 구현 방법 1. 크루스칼 알고리즘 : 그리디(탐욕법) 알고리즘 중 하나 -> 그래프의 모든 ..
새로운 프로젝트 시작! 첫 넥스트 사용이라 걱정했는데 아직까진 next로 뭘 했다.. 하는 건 없다!(오늘 작업 시작했으니깐..당연) 프로젝트도 진행하면서 틈틈이 넥스트도 더 공부해야지 알고리즘도 계속 하고.. 티스토리가 왜 컴퓨터에서 글 작성이 안되는지 모르겠다 나만 그런가?ㅠ 오늘 한 것 - 프로젝트 작업 시작하기 - tailwind 공부 - next 공부
📖오늘 배운 것 WAI-ARIA : RIA의 웹접근성에 대한 표준 기술 규격 RIA란? 정적인 웹사이트가 아닌 자바스크립트 등을 이용하여 동적인 UX를 제공하는 웹 애플리케이션 자바스크립트에서 주로 사용하는 div 태그는 태그 자체에 의미가 없기 때문에 스크린리더기 등의 보조기기에서 기능을 명확하게 파악하기가 어렵다고 한다. 그래서 해당 태그에 대한 정보를 제대로 전달하고자 하는 목적으로 WAI-ARIA를 통해 역할, 속성, 상태에 대한 정보를 추가할 수 있다. 즉, WAI-ARIA는 웹접근성 향상을 위한 방법 중 하나! WAI-ARIA에서는 role, aria-* 속성을 통해서 해당 태그에 대한 역할, 상태, 속성 정보를 보조기기에 제공할 수 있다. role 탭, 탭 패널의 경우 role='tablis..
📖오늘 배운 것 깊은 복사 얕은 복사 개념은 완전 알고있었는데 코딩 테스트 풀면서 멍청한 짓을 하고 있었다. 원본 배열 order가 있고 해당 배열을 반복문 돌면서 복사하고 싶었다. 그래서 const copyOrder = order 를 한거다. 이러면 배열의 참조값만 복사되는 얕은 복사를 하기 때문에 원본배열도 같이 변경되서 원하는대로 동작하지 않는다. const copyOrder = [...order]로 배열을 펼쳐줘야 깊은 복사가 가능하다 분명 알고있는 개념이었는데 코드에 적용하면서 생각도 못했다 ㅎ 라이트하우스 권장사항 적용하기 라이트하우스 검사 결과를 기반으로 최적화 시작! 이러한 부분에 대한 수정을 위해 해당 이미지에 object-fit='cover'속성을 줘서 비율을 유지하면서 크기에 맞춰지도..
📖오늘 배운 것 변수의 메모리 할당은 언제 일어나는가? 면접스터디를 하면서 이야기가 나와 찾아보게 되었다. 변수 객체를 실행 컨텍스트에 등록하고 메모리 주소를 맵핑하고 만든다음 undefined로 초기화를 한다. 그 다음 데이터를 할당하게 된다. 이 때 메모리 등록은 언제 일어나는가? 사실 아직 완벽히 찾아보지 못했다. 딥다이브 서적이나 검색 결과 초기화 단계에서 메모리를 할당하다고 하는데 선언 단계에서 한다는 의견도 있었어서 좀 더 찾아보려고 한다. chat gpt 한테도 계속 물어보고 있는데 선언단계에서 메모리를 할당한다고 한다..변수 '선언'이라는 걸 선언 + 초기화 단계로 합쳐서 부르기도 해서 그런 것 같기도 하고... 더 찾아봐야지! chat gpt에서 저렇게 말하는 근거의 출처가 어딘지 궁금하..
📖오늘 배운 것 State as a Snapshot! state는 setState를 한 후 바로 적용되는 것이 아니라 변경된 값을 다음 렌더링 때 적용한다. 따라서 한 함수내에서 setState 후 변경된 값을 사용하려 했다면 의도대로 동작하지 않는다! 즉, 함수가 호출될 때의 현재 state에 대한 snapShot을 찍어서 저장하고 해당 값을 활용해서 함수를 실행한다. 그리고 다시 재렌더링될 때 업데이트 된 state값을 반영하는 것! Queueing a Series of State Updates 리액트는 state 업데이트를 처리하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린 후 한번에 실행된다. 이렇게 묶어서 진행하면 많은 재렌더링을 방지할 수 있다. 클릭 이벤트 같은 의도적인 이벤트는..
📖오늘 배운 것 이중 연결 리스트란? 단일 연결 리스트와 유사하지만 차이점은 앞으로 가는 포인터 뿐만 아니라 뒤로 가는 포인터도 가지고 있다는 특징이 있다. !양방향적! 이러한 이중 연결 리스트는 단일 연결 리스트보다 융통성있게 사용할 수 있다 .하지만 그 만큼 메모리가 많이 든다는 단점이 있다. next뿐만 아니라 prev 까지 저장해야하니까 메모리가 두 배! 면접 준비 겸 자바스크립트 공부하기 면접 질문 대비 스터디 준비하면서 기술 면접에 대해 계속해서 공부중이다. 분명 들어봤던 건데 다시 이해안되는 개념도 있고... 이런 개념이 있었구나! 하고 새롭게 알게 되는 부분도 많았다. 아직 서류나 코테같은 게 제대로 준비되지 않은 것 같은데 면접 준비를 먼저 시작해도 될까? 하는 걱정이 있었지만 단순 면접..
📖오늘 배운 것 DFS - 프로그래머스 타겟 넘버 알고리즘 강의랑 별개로 알고리즘 문제를 통한 학습이 필요하다고 생각했다. 그 중에 BFS/DFS가 자주 나온다고 생각했고 아직 제대로 구현하는 방법이 제대로 이해가 안되서 이전에 풀어봤던(이라기 보단 답을 알고 있는) 문제를 다시 분석해보았다. 이해가 안되서 다시 손으로 써보면서 문제도 이해하고... DFS가 어떤 건지 어떤 식으로 작동하는지도 다 이해가 되지만 아무래도 재귀로 구현되다보니까 직관적으로 감이 안와서 실제로 이걸 어떻게 작성할 수 있지??는 잘 모르겠다. 아무래도 연습과 반복, 암기가 필요할듯!! 💭배운 점 요즘 약간의 공부 하향선을 겪고 있는 것 같다...왜이리 집중이 안되는지... 하지만 하향이 있으면 상향도 있을 것이기에! 넘 조급해말..
📖오늘 배운 것 단일 연결 리스트 구현 class Node{ constructor(val){ this.val = val; this.next = null; } } class SinglyLinkedList{ constructor(){ this.head = null; this.tail = null; this.length = 0; } push(val){ const newNode = new Node(val); if(!this.head){ this.head = newNode; this.tail = this.head; } else { this.tail.next = newNode; this.tail = newNode; } this.length++; return this; } pop(){ if(!this.head) re..
wumo 프로젝트를 진행하면서 고민했던 부분을 기록하고자 한다. wumo 서비스(06.23 현재 서버 종료): https://5yes-wumo.vercel.app/ wumo 깃헙: https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE wumo 회고: https://yj-zero.tistory.com/176 react hook form에 가격 formetter 적용하기 사용금액 입력하는 부분에서 입력 즉시 포맷터를 적용해야 했다. 기존에 진행했던 방법은 react-hook-form고 별개로 state로 input을 관리하였다. 포맷터를 별도의 라이브러리가 아니라 자바스크립트에 내장되어 있는 Intl을 사용하였다. 따라서 포맷터를 적용한 입력값을 input의..
