🐕 Redux Redux는 상태관리 라이브러리이며 리액트에 종속되는 라이브러리가 아닙니다. 따라서 리액트 환경 뿐만 아니라 다양한 환경 심지어는 바닐라 자바스크립트에서도 리덕스를 사용할 수 있습니다. 리덕스는 하위 컴포넌트의 상태 공유를 위해서 상태 끌어올리기와 props drilling을 반복해야한다는 리액트의 구조에서 기인한 문제점을 해결해줍니다. 컴포넌트의 깊이가 깊지 않은 경우에는 props를 사용해서 상태를 내려주는 것도 상태 끌어올리기를 통해 서로 다른 하위 컴포넌트에서 사용해야 할 상태를 상위 컴포넌트에서 관리하는 것 또한 그리 귀찮지 않은 범위에서 가능하지만 구조의 복잡도가 심해지고 깊이가 깊어질수록 이런식의 데이터흐름은 복잡도가 올라갑니다. 어느정도의 시점까지는 필요한 상태를 최대한 가까..
🐕 케이크 먹기 보다 쉽다https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSSSetting up Tailwind CSS in a Vite project.tailwindcss.com공식 docs의 설명이 매우 친절해서 따라가기만 하면 됩니다. 따라서 한번 해보시면 매우 편할거에요npm create vite@latest cd 만들어진폴더이름 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p개발종속성으로 설치해줍니다. tailwindcss와 함께 postcss autoprefixer를 추가적으로 설치해줍니다. https://post..
🤡디바운스란? 자바스크립트에서 디바운스는 이벤트를 그룹화하여 제일 처음 or 제일 마지막 함수만 호출되도록 하는 것을 말합니다. 제일 처음 함수만 호출되는 형식으로 구현한 것을 leading edge 가장 마지막 함수만 호출되는 형식으로 구현한 것을 trailing edge라고 부릅니다. 보통 일정 주기 동안 이벤트가 입력되고나서 일정 시간 동안 다른 이벤트가 발생하지 않은 경우 이벤트를 실행시키는 형식으로 디바운스를 구현합니다. 이러한 디바운스는 성능최적화와 큰 연관성을 가지고 있습니다. 알아두면 손해볼것 없으니 간단하게 자바스크립트로 디바운스를 구현하는 코드를 작성해보겠습니다. 우리가 만들어볼 웹페이지입니다. 숫자를 카운팅해줄 태그와 디바운스를 실습해볼 버튼 하나만 있는 간단한 웹페이지입니다. 다음과..
🐕 HTTPS HTTPS란 HTTP Secure의 약자입니다. HTTP에 Secure가 하나 더 붙었을 뿐이고.. Secure라는 단어에서 알 수 있듯이 HTTP 프로토콜을 좀 더 안전하게 사용할 수 있는 프로토콜이겠구나 라는 예상을 할 수 있습니다. HTTPS가 HTTP프로토콜에 비해 안전한 이유는 HTTPS는 요청과 응답으로 오가는 내용을 암호화하기 때문입니다. 예컨대 HTTP로 보낸 요청은 패킷 분석 프로그램(ex : wireshark)을 이용하면 데이터의 내용을 그대로 확인할 수 있습니다. 따라서 비밀번호와 같은 민감정보들을 제 3자가 탈취할 수 있는 위험성이 생기게 됩니다. 그 위험성을 방지하기 위해 HTTPS는 대칭키 방식과 공개키 방식을 혼합한 암호화 방식을 사용합니다. 왜 HTTPS는 이 ..
👱♂️간헐적 회고 나오늘 뭐했냐 1. 정규시간 페어 과제 진행 2. RTK Query로 간단한 서버요청 성공 3. RTK Query 공식문서를 읽으면서 이해한 내용을 알기쉽게 정리하는 중(~ing) 4. Tailwind CSS 환경을 설정하고 간단한 사용까지 해보았음. 사용법에 대해서는 포스팅까지 진행 그동안 숙원사업이었던 RTK Query를 어느정도 알게되어서 기분이 좋네요 다만 내용이 너무 많아서 조금 힘든... 그래도 실제로 돌아가는 걸 보면 재밌고 신기하고 그렇읍니다.
⚡문제정보 주어지는 입력에서 대부분의 요소들은 단 2번 등장하지만 드물게 한번만 등장하는 요소들이 있다고 합니다. 이 한번만 등장하는 요소들을 찾아서 배열로 만들어 반환하는 것이 조건입니다. 보통 2번만 등장하니까 객체형태로 카운팅을 해주면서 카운팅한 값이 2가 되는 순간 딜리트해주면되겠네요 🔍접근방법 1. map 자료구조를 생성하고 주어진 배열을 순회한다. 2. 배열을 순회하며 등장횟수를 카운팅한다. 3. 등장횟수가 2가 된 경우 map에서 자료를 지워버린다. 4. 남은 값의 key만 반환하면 끝 😑나의 풀이 var singleNumber = function(nums) { const map = new Map() for(let i = 0 ; i < nums.length; i++) { map.set(num..
https://devjin-blog.com/what-happen-browser-search/ [번역] Browser에 www.google.com을 검색하면 어떤 일이 일어날까? What happens when you type an URL in the browser and press enter… devjin-blog.com 위 글을 참고하여 정리해보았습니다. 어느정도 어렴풋이는 네트워크의 흐름을 배웠지만 정확하게 설명을 하기는 좀 부족하다는 생각이 들어 글을 읽어봤어요 1. 사용자는 www.google.com을 을 브라우저 주소창에 입력한다. 사용자는 브라우저의 주소창에 url을 입력합니다. 2. Browser는 캐싱된 DNS 기록들을 통해 www.google.com에 에 대응되는 ip주소가 있는지 확인합..
👱♂️간헐적 회고 나오늘 뭐했냐 1. 오전 - 오후 / 페어프로그래밍 대체로 아는 내용이었지만 복습하는 마인드로 코드를 다시 보면서 분석했다. 2. 스터디 리덕스 / 리덕스 툴킷 발표 진행 약 한시간 정도 소요했고 라이브 코딩으로 간단하게 리덕스 툴킷을 이용한 카운터 예제를 만드는 시간을 가졌다. 제법 반복적으로 연습한 덕에 리덕스의 기본적인 기능과는 꽤 친해진 것 같다. 3. 리액트 투두리스트 프로젝트를 타입스크립트로 마이그레이션 오래걸릴 것이라 생각했는데 생각보다 공수가 많이 들지 않아서 금방 끝낼 수 있었다. 하지만 redux-toolkit을 도입하고 처음부터 짜려고하면 좀 시간이 걸릴듯하다. 로직을 바꾸지 않고 타입만 추가해주는 정도여서 금방 끝난 것 같다. 그럼에도 불구하고 타입을 작성하면서 ..
