📖오늘 배운 것 단일 연결 리스트 연결 리스트는 다음 데이터 엘리먼트를 가리키는 인덱스 없이 다수의 데이터 엘리먼트들로 구성되어있다. 따라서 연결 리스트들은 다수의 노드들로 구성되고, 각각의 노드는 문자열 혹은 숫자와 같은 하나의 데이터 엘리먼트를 저장한다. 각 노드들은 다음 노드를 가리키는 정보를 저장하고 있고, 더 이상 다음 노드가 없는 경우 null을 저장하게 된다. 단방향 연결 리스트는 이러한 노드가 다음 노드로 오직 단일 방향으로만 연결되어 있는 것 노드: 각각의 엘리먼트 head: 연결 리스트의 시작 노드 tail: 연결 리스트의 마지막 노드 연결리스트는 엘리베이터가 없는 고층 건물 계단, 배열은 엘리베이터로 비유할 수 있다! 배열의 경우 5층로 엘리베이터를 타고 바로 이동할 수 있지만 연결리..
📖오늘 배운 것 제어 컴포넌트 vs 비제어 컴포넌트 제어컴포넌트란? react에 의해서 값이 제어되는 컴포넌트를 말한다. 주로 state로 값을 관리하면서 입력값을 setState로 업데이트할 때 제어 컴포넌트라고 한다. 이러한 방식은 실시간으로 사용자의 입력 값을 추적하며 유효성 검사 등을 할 때 유용하나 계속 렌더링 되기 때문에 불필요한 렌더링이 일어나게 된다. 비제어 컴포넌트란? react에 의해 값이 제어되지 않는 컴포넌트를 의미한다. 이 방식은 주로 ref 로 값을 관리하며 필요한 경우 onSumbit 등의 이벤트 핸들러를 통해 저장된 요소의 값을 가져와 활용하게 된다. 값을 입력할 때마다 불필요한 렌더링이 일어나지 않아 렌더링을 줄일 수 있으나 실시간으로 입력 값을 검색해야하는 경우 적합하지 ..
📖오늘 배운 것 유클리드 호제법 유클리드 호제법은 2개의 자연수 사이의 최대공약수를 구하는 알고리즘의 하나이다. 원리 1. 큰 수를 작은 수로 나눈다. 2. 나머지가 0이면 작은 수가 최대 공약수 3. 나머지가 0이 아니라면 작은 수를 나머지로 나눈다. 4. 나머지가 0이 될 때까지 반복. 자바스크립트로 구현 function gcd(a, b) { const rest = a % b; if (remainder === 0) return b; return gcd(b, rest); } 퀵 정렬 : 배열의 요소가 0개 또는 1개의 항목이 남을 때까지 분할하여 개별적으로 정렬되는 방식 : 하나의 요소를 선택해서(pivot) 그 숫자를 기준으로 작은 수는 왼쪽으로, 큰 수는 오른쪽으로 옮긴다. 옮기는 숫자는 정렬하는 ..
모임 일정 관리 서비스 프로젝트를 진행하면서 겪었던 어려움, 고민 과정을 기록하고자 한다. 깃허브 주소: https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE 배포 주소: https://5yes-wumo.vercel.app/ (회고 주소 추가 예정) 프로젝트를 진행하면서 댓글을 생성/수정에서 이미지 업로드 기능을 구현해야 했다. 이미지를 서버에 등록하는 api와 댓글 생성 api가 나뉘어 있어서 댓글을 작성할 때 글과 이미지를 선택해서 댓글 생성 버튼 클릭 하면 이미지 등록 api 호출 -> 이미지 url 반환 -> 반환된 이미지 url로 댓글 생성 api 호출 이런 순서로 진행되어야 했기 때문에 이미지 등록 api가 완료될 때까지 기다린 후에 댓글 ap..
총 4주의 기간 동안 프론트엔드 4명, 백엔드 3명으로 프로젝트를 진행하였다. 처음으로 백엔드와 함께 협업을 하면서 배려하며 소통하는 방법, 백엔드와 협의해야 할 점들에 대해 배울 수 있었다. 기획부터 개발까지 진행하면서 어려웠던 점, 느낀 점들에 대해 정리하고자 한다. 📌서비스 소개 서비스 명: WuMo 해당 서비스는 가족, 친구와 함께 모임에 대해 일정을 만들어서 기록할 수 있는 서비스이다. 카톡방에서 약속, 모임에 대해 이야기할 때 모임 내용과 관련없는 이야기가 섞여서 필요한 장소나 정보에 대해 찾기가 어렵다고 느껴서 모임에 대한 내용을 정리하고 기록할 수 있는 서비스를 만들게 되었다. 📱배포 사이트: https://5yes-wumo.vercel.app/ 🛠️프로젝트 깃헙: https://githu..
📖오늘 배운 것 검색 알고리즘 선형 검색 데이터를 담은 배열이 있고 사용자가 해당 배열에 해당하는 값을 입력했는지 확인할 때 맨 앞부터 순서대로 맞는 데이터인지 확인하는 것이 선형검색이다. ⇒첫 부분에서 시작해서 끝부분으로 이동하면서 한 번에 하나씩 항목을 확인하는 것(혹은 역순으로) 선형 검색을 사용하는 자바스크립트 내장함수 indexOf includes find findIndex 선형검색은 배열의 길이가 길어질 수록 더 많은 검색을 실시해야되기 때문에 최악의 경우 O(n) 의 시간복잡도를 가지게 된다. ⇒ best는 O(1), 평균은 O(n), 최악은 O(n)이다. ❗선형 검색은 데이터가 정렬되어 있지 않을 때 적절한 방법이다. 이진검색 데이터가 정렬되어 있는 상태에서 절반씩 버리면서 확인하는 방법 ..
프로젝트를 진행하면서 이미지 등록을 위해 input type='flie'을 사용하였다. 그런데 기능을 구현하면서 올렸던 이미지를 삭제 후 다시 동일한 이미지를 선택하였을 때 input의 onChange 이벤트가 발생하지 않는 것을 알았다. A이미지 선택 ➡️ change 이벤트 발생 A이미지 삭제 A이미지 재선택 ➡️Change 이벤트가 발생하지 않아서 파일이 업로드되지 않음. input type이 file일 때 선택된 파일의 변경사항이 없으면 change 이벤트가 실행되지 않는다. 그래서 이미지를 삭제할 때 이미지 미리보기만 삭제하는 것이 아니라 input에 대한 초기화 과정이 필요했다. 여러 가지 방법 시도하기 시도한 방법 1 구글링 했을 때 봤던 방법 중 하나는 해당 input을 select하고 s..
📖오늘 배운 것 recoil - 여러 를 사용하는 경우 는 여러 개가 같이 존재할 수 있으며 각각 독립적인 atom 상태가 providers/store된다. -> override를 false로 지정하지 않는 한 중첩 될 때 동일하게 발생 * override란? :기본 값 true 가 다른 와 중첩된 경우에 true라면 해당 루트는 각각 새로운 reocil 범위를 생성한다. 만약 false라면 루트의 자식들은 가장 가까운 조상 의 recoil 값에 액세스한다. atom :recoil의 상태를 표현. 쓰기 가능한 RecoilState 객체를 반환한다. key: 내부적으로 atom을 식별하는데 사용되는 고유한 문자열 default: atom의 초기 값 effects_UNSTABLE: atom을 위한 선택적인 ..
📖오늘 배운 것 recoil Atom: 데이터 상태의 단위, atom은 어떤 컴포넌트에서나 읽고 쓸 수 있으며 atom 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 따라서 atom에 변화가 있으면 구독하고 있는 모든 컴포넌트가 재 렌더링된다. Selector: atom에서 state를 가져온 후 새로운 state를 만들어서 반환 -> 현재 state를 가지고 데이터를 가공하는 데 주로 사용하는 것 같다. ex) todo 리스트 필터링, todo 리스트 통계 ... const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = get(fontSizeState); const unit..
📖오늘 배운 것 리액트 - jsx XSS 공격 방지 const title = response.potentiallyMaliciousInput; const element = {title}; React DOM에서는 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하기 때문에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 반환하기 때문에 XSS 공격을 방지할 수 있다. * 이스케이프란? THML 엔터티와 같은 특정 문자를 HTML로 변환하는 행위 React.js와 Next.js의 차이 - React.js는 라이브러리, Next.js는 프레임워크이다. -React.js는 CSR(Client Side Rendering)을 하고, Next.js는 SSR(Server Si..
