김기지의 코딩노트

🌱 번들링 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위 번들 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 개발자가 번들링한 여러 파일을 받음 이 파일을 브라우저가 실행하여 웹 애플리케이션을 제공 🌱 번들링의 필요성 HTML, CSS, JavaScript 파일을 그대로 전송할 시 생길 수 있는 문제점 두 개의 .js파일에서 같은 변수를 사용하고 있는 경우 → 변수 간 충돌이 일어남 딱 한 번 불러오는 프레임워크 코드가 8MB → 인터넷 속도가 느린 국가의 모바일 환경에서는 사용이 불편 번들 파일 ..

🌐 반응형 웹 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론 디바이스 종류에 따라 웹 페이지의 크기가 자동으로 재조정됨 모바일 퍼스트 사용자 경험을 디자인할 때 모바일인 경우에 최우선으로 초점을 맞춰 디자인하는 것 반응형 웹의 탄생 배경 더보기 과거의 웹 사이트들은 데스크탑 컴퓨터를 통해서 이용하는 경우가 대부분이였기에 개발자들은 데스크탑에 최적화된 화면만 구성했었다. 이후 전자기기의 발전으로 태블릿, 스마트폰 등의 전자기기에서 웹에 접속할 수 있게 되어 전자기기들의 화면의 크기가 다양해져 여러 가지 버전의 웹 페이지를 만들어야 하는 경우가 발생하게 되어 반응형 웹페이지가 나오게 되었다...

자료구조 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것 더보기 ➰ 데이터란? 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값 데이터 자체만으로는 어떤 정보를 의미하는지를 알기 어렵다. 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 액..