🐕 쿠키 Domain 쿠키에 저장할 도메인 정보 Path 서버가 라우팅할 때 사용하는 경로 MaxAge or Expires 쿠키의 유효기간 정하는 옵션 Secure 프로토콜에 따른 쿠키 전송 여부 옵션 HttpOnly 자바스크립트로 쿠키에 접근 가능한지 결정하는 옵션 SameSite Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정 다양한 옵션이 있음 Domain 쿠키옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다. 서브 도메인이란 www 같은 도메인 앞에 추가로 작성되는 부분을 말합니다. 따라서 요청해야할 URL이 http://www.localhost.com:3000/users/login 이라고 가정..
🐕 ARP(Address Resolution Protocol) ARP는 간단하게 생각하면 MAC 주소를 알아내기 위한 프로토콜 입니다. 왜 MAC 주소를 알아내야 하는가 하면 IP 주소 체계는 물리적 MAC 주소와 연관성이 없지만 두 주소를 연계시킬 필요성이 있기 때문입니다. ARP 프로토콜의 헤더는 다음과 같이 구성됩니다. 하드웨어타입(2계층) 프로토콜 타입(3계층) 하드웨어 주소 길이 (2계층) 프로토콜 주소 길이 (3계층) 오퍼레이션 코드 송신자 하드웨어 주소 (2계층) MAC 주소 송신자 프로토콜 주소 (3계층) IP 주소 대상자 하드웨어 주소 (2계층) 대상자 프로토콜 주소 (3계층) IP 주소 MAC 주소가 없으면 곤란한 이유는 데이터 링크 계층에서 주소 매핑을 할수가 없어지기 때문입니다. M..
제가 자주 사용하는 속성들을 간단히 정리합니다. Animation transition all transition 효과 duration 100 , 200 , 300 전환 기간 delay 100 150 전환 지연 rotate 0~6 요소 회전 ease-in-out ease-in-out 애니메이션 처리 skew skew-(x or y)-1 요소 기울이기 요소 가운데 정렬 flex display:flex justifycenter justifycontent-center itemscenter alignitem-center 자주 사용하는 디자인 속성 rounded md, lg , xl ,2xl etc border radius border border-(n*2) border border t,r,b,l top, left..
🐕 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를 어느정도 알게되어서 기분이 좋네요 다만 내용이 너무 많아서 조금 힘든... 그래도 실제로 돌아가는 걸 보면 재밌고 신기하고 그렇읍니다.