김기지의 코딩노트

자료구조 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것 더보기 ➰ 데이터란? 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값 데이터 자체만으로는 어떤 정보를 의미하는지를 알기 어렵다. ex) 나이라는 데이터가 사람의 나이인지 동물의 나이인지 알 수 없음 ➡︎ 데이터는 분석하고 정리하여 활용 해야만 의미를 가질 수 있다. 🗂️ 자료구조의 분류 필요에 따라 데이터의 특징을 파악해 체계적으로 저장해 두는 것이 데이터를 활용하는데 있어 유리하다. 상황에 따른 데이터 분류 자료구조 무수한 상황에서 데이터를 효율적으로 다룰 방법을 모두 모아둔 것 자주 등장하는 자료구조 : Stack, Queue, Tree, Graph 🗂️ 자료구조의 특징 대부분의 자료구조는 특정한 상황에 놓인 문..

OAuth 인증을 중개해주는 메커니즘 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 사용자가 이미 사용하고 있는 서비스가 다른 서비스에 사용자가 인증을 할 수 있도록 중개해준다. 대표적인 예 소셜 로그인 인증 방식 정보를 입력하지 않고 이미 사용자 정보를 가지고 있는 웹 서비스에서 사용자의 인증을 대신 해주고, 접근 권한에 대한 토큰을 발급 정보를 해당 사이트에 직접적으로 노출하는 것이 아니기때문에 더 안전함 🤝 OAuth 작동 메커니즘 📍 OAuth의 주체 Resource Owner OAuth 인증을 통해 소셜 로그인을 하고싶은 사용자 Resource 사용자의 이름, 전화번호 등의 정보 Resource Server & Authorization Server ..

🪙 Token 세션 인증 방식을 보완한 토큰 인증 방식 1. Hashing 가장 많이 쓰이는 암호화 방식 중 하나 📌 다른 암호화 방식들은 복호화가 가능하지만, 해싱은 암호화만 가능하다. 해시 함수(Hash Function)을 사용하여 암호화를 진행한다. 특징 항상 같은 길이의 문자열을 리턴 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나옴 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나옴 🌈 레인보우 테이블과 🧂 솔트(Salt) 🌈 레인보우 테이블 항상 같은 결과값이 나온다는 특성을 이용해 해시 함수를 거치기 이전의 값을 기록 해놓은 표 레인보우 테이블에 기록된 값의 경우, 유출이 되었을 때 해싱을 했더라도 해싱 이전의 값을 알아낼 수 있다. → 보안상 위협..

🍪 Cookie 무상태성을 가진 HTTP에서 사용자의 상태를 브라우저에 저장할 수 있다. 쿠키를 정의하자면... 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단 더보기 ➰ 쇼핑몰 사이트를 여러 군데 돌아다니는 상황에서 마음에 드는 옷 여러개를 장바구니에 담아두었다. 여러 사이트를 돌아다니는데도 장바구니에 담아두었던 상품은 그대로 유지가 된다. 그런데 HTTP요청은 무상태성한데 다른 페이지로 이동해도 기존 장바구니는 유지가 된다. ❓ HTTP는 무상태성(stateless)인데 어떻게 정보가 유지될까? ➡︎ 쿠키 덕분! 🍪 Cookie란? 어떤 웹 사이트에 들어갔을 때, 서버가 일방적으로 클라이언트에 전달하는 작은 데이터 해당 도메인에 대해 쿠키가 존재하면, 웹 브라우저는 도메인에게 http요청 ..

TCP/IP 1. 네트워크의 시작 인터넷 프로토콜, 즉 IP기반의 네트워크는 아르파넷(ARPANET)프로젝트에서 시작되었다. 기존에 사용되었던 회선교환 방식이 아닌 패킷교환 방식으로 네트워크를 구축하게 되었다. → 이를 토대로 현재의 인터넷 통신 방식의 기반이 세워졌다. 📞 회선교환 방식 발신자와 수신자 사이에 데이터를 전송할 전용선을 미리 할당하고 둘을 연결한다. 연결하고 싶은 상대가 다른 상대와 연결중인 경우, 상대방은 이미 다른 상대와의 전용선과 연결되어있다. → 연결이 끊어지고 나서야 상대방과 연결이 가능하다. 특정 회선이 끊어지는 경우 처음부터 다시 연결을 성립해야 한다. ➡︎ 회선교환 방식은 즉시성이 떨어진다는 비효율을 가진다. 📦 패킷교환 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는..

🌐 웹 접근성(Web Accessibility) 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 웹 접근성을 갖추면 웹에 접근했을 때 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다. ➡︎ 웹 접근성의 궁극적인 목적은 상황이나 사용자에 상관없이 정보를 제공받지 못하는 경우가 없도록 하는 것 👍 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층 확대 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있으므로 사이트의 이용자를 늘릴 수 있고, 새로운 고객층을 확보할 수 있게 된다. → 시장 점유율이 높아짐 2. 다양한 지원 정보 소외 계층이 아닌 경우에도 정보에 접근하기 어려운 상황이 있다. ( 운전..

🌐 웹 표준 웹 사이트를 만들 때 기술적인 표준을 따르는 것을 의미 모든 브라우저에서 웹 사이트가 동일하게 보이고 작동하도록 보장하므로써 다양한 브라우저에서 웹 사이트가 동일하게 보이고 작동하지 않는 문제를 해결한다. 🧑‍💻 웹 이란? 인터넷은 웹 기반으로 작동되는 걸까? 웹===인터넷 ; // false 📍 인터넷 ‘전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망’ 웹 이외에도 온라인 게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스를 모두 포함 📍 웹 인터넷에서 가장 일반적으로 사용되는 서비스 중 하나로, 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 인터넷 웹 정의 컴퓨터들이 서로 연결되어 정보를 주고받을 수 있는 네트워크 인터넷 위에서 동작하는 서비스 ..

✅ Todo… Shopping Cart Actions ✓ addToCart는 ADD_TO_CART 액션을 생성해야 합니다 ✓ removeFromCart는 REMOVE_FROM_CART 액션을 생성해야 합니다 ✓ setQuantity는 SET_QUANTITY 액션을 생성해야 합니다 Item Reducer ✓ ADD_TO_CART 액션에 따라 cartItems 상태가 변해야 합니다 ✓ REMOVE_FROM_CART 액션에 따라 cartItems 상태가 변해야 합니다 ✓ SET_QUANTITY 액션에 따라 cartItems 상태가 변해야 합니다 ✓ 리듀서는 다른 상태의 값을 보존해야 합니다 Shopping Pages ✓ ShoppingCart에 cartItems가 렌더되어야합니다. ✓ ADD_TO_CART 액..

Redux 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트를 만들 수 있다. 더보기 ⚠️ 참고 사항 ⚠️ Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리가 아니므로 React 없이도 사용할 수 있는 상태 관리 라이브러리이다. React 애플리케이션 중 하위 특정 컴포넌트에서만 사용되는 상태가 있는 경우, 이 상태를 어느 컴포넌트에 위치시켜야 할까? 기존 React의 데이터 흐름에 따르면, 최상위 컴포넌트에 위치시키는 것이 적절하다. 하지만 이런 상태 배치는 다소 비효율적이라고 느껴진다. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐 상태 끌어올리기, props내려주기를 여러번 거쳐야함 애플리케이션이 복잡해..

1. 전역 상태 관리 React가 상태 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 📍 프론트엔드 개발에서의 상태 관리 상태란? 변하는 데이터로 UI, 프론트엔드 개발에서는 “동적으로 표현되는 데이터”이다. ➰ UI에서 상태 찾기 연습 : 장바구니 페이지 이 장바구니 페이지에 몇 개의 상태가 있을까? “장바구니에 담기”와 같은 버튼을 눌러 해당 물품을 장바구니에 추가할 수 있음 → 동적인 데이터이므로 상태 상단에 [일반구매/ 정기배송] 중 현재 선택된 탭이 무엇인지 나타내는 상태가 있을 수 있음 상품 선택 여부에 따라 주문 금액이나 배송비가 달라짐 선택 ..