Today Hailie Learned

지금까지 2번의 프로젝트에서 로그인/ 회원가입 파트를 맡았는데 그때는 모두 로그인, 회원가입을 별도의 경로로 분리해서 만들었다. 그런데 이리저리 구글링을 하다가 위의 gif처럼 탭 형식으로 로그인과 회원가입을 만들어보고 싶었다! 그래서 도전! 사용한 기술스택 React, Typescript, Styled-components 구현할 퀘스트 1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀐다. 2. 클릭되는 로그인/회원가입 탭을 css로 표시한다. 3. 이메일에 @, . 포함되고, 비밀번호가 8자리 이상일 때 버튼이 활성화된다. 1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀌게 하기 탭부분과 폼부분을 나눠서 만들어서 붙이면 된다. 그리고 로그인이 된 상태를 알..

🤓 배움 요약하기 웹 브라우저의 요청 흐름에 대해서 설명해주세요. 1. 먼저, 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력합니다. 2. 그러면 DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색을 합니다. 3. 그리고 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다. 4. 이렇게 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성해 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송되고, 이 요청 메세지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환이 됩니다. 5. 웹 서버는 이 변환이 된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤 HTT..

🤓배움 요약하기 URI가 무엇인가요? 인터넷 자원을 나타내는 고유 식별자 입니다. ✔️ URI? URL? URN? URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다. ▶ URI 란? 👉 인터넷 자원을 나타내는 고유 식별자 입니다. Uniform = 리소스 식별하는 통일된 방식 Resource = 자원, URI로 식별할 수 있는 모든 것(제한 없음) html 코드뿐만 아니라 모든 것 Identifier = 다른 항목과 구분하는데 필요한 정보 ▶ URL 란? Location = 리소스가 있는 위치를 지정 변할 수 있다. ▶ URN 란? Name = 리소스에 이름을 부여 변하지 않는다. URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화 되지 않음. ✔️ URI ..

✔️ 이번 정독을 통해 알게 된 것 Promise가 무엇인가요? Promise.all은 언제 사용하나요? 🤔 Promise가 무엇인가요? 🤓 자바스크립트는 비동기 처리를 위한 패턴으로 콜백 함수를 사용하는데, 콜백 함수는 콜백 헬로 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하다는 한계가 있습니다. 이를 보완하기 위해 ES6에서 프로미스가 도입되어 콜백 함수의 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다. 🤔 Promise.all은 언제 사용하나요? 🤓 앞선 비동기 처리 결과를 다음 비동기 처리가 사용하지 않는다면, 비동기 처리를 순차적으로 처리할 필요가 없기 때문에, 이때 Promise.all 메서드를 사용해서 비동기 처리를 병렬로 처리할 수 있습니다. ..

🤓배움 요약하기 DNS란? IP는 변하기 쉽고, 기억하기 어려운데 도메인을 등록해서 사용할 수 있도록 도와주는 것이다. ✔️ TCP, UDP 없이 IP만 사용할 때의 단점 1. IP는 기억하기 어렵다. ip 주소 예시 : 100.100.100.1, 200.200.200.2 2. IP는 변경될 수 있다. IP는 바꿀 수 있다! ✔️ DNS(Domain Name System) 전화번호부 같은 서버를 제공해준다. 그래서 도메인 명을 등록을 하고 그거를 IP 주소로 바꿀 수 있다. DNS 서버 예시) 도메인 명 IP google.com 200.200.200.2 aaa.com 210.210.210.3 클라이언트가 도메인 명(google.com)을 DNS 서버에 요청을 하면 DNS 서버는 해당하는 IP를 응답으로 ..

🤓배움 요약하기 PORT란? 같은 IP 내에서 프로세스를 구분하는 것을 말합니다. 하나의 피씨에서 여러 서버와 통신을 가능하게 해주는 역할을 합니다. TCP/IP 패킷에는 어떤 정보가 들어 있나요? 출발지 IP, 출발지 PORT, 도착지 IP, 도착지 PORT, 전송 데이터 등이 들어있습니다. ✔️ TCP/IP 패킷의 PORT란? 어느 유저가 게임도 하고 있고, 화상통화도 하고 있고, 웹 브라우저 요청도 하고 있다면, 클라이언트 피씨가 여러개의 서버와 통신하고 있는 상황이다. 이 클라이언트 피씨로 패킷들이 들어올텐데 게임에서 필요한 패킷인지 화상통화에서 필요한 패킷인지, 웹 브라우저의 응답 결과로 오는 패킷인지 알 수가 없다. 이 구분을 어떻게 할 것인지에 대한 해결책이 바로 TCP/IP 패킷의 PORT..

🤓배움 요약하기 인터넷 프로토콜 스택의 4계층이란? 애플리케이션 계층(HTTP, FTP), 전송 계층 (TCP, UDP), 인터넷 계층 (IP), 네트워크 인터페이스 계층 (LAN 등등)으로 구성되어 있는 것을 말합니다. TCP란? TCP는 IP 프로토콜의 한계를 보안해주는 역할을 하는데 TCP 3 way handshake로 대상이 서비스 가능 상태일 때만 패킷을 전송하고, 데이터 전달을 보증해주고, 데이터 전송 순서도 보증해주는 신뢰할 할 수 있는 프로토콜이고, 현재는 대부분의 애플리케이션에서 TCP 사용합니다. UDP란? IP에서 PORT와 체크섬이 추가되어 있는 프로토콜을 말합니다. 최근에는 웹브라우저에서 HTTP 통신할 때 HTTP 3 way handshake에서 UDP를 사용하면서 사용성이 더욱..

모든 것이 HTTP 기반 위에서 동작한다. (웹 - 서버 통신, 서버 - 서버 통신 등 HTTP 프로토콜 위에서 데이터를 주고 받는다. ) HTTP의 전체 흐름을 이해하자!! 인터넷 네트워크 - HTTP도 결국에는 TCP/IP나 UTP 기반 위에서 동작하기 때문에 인터넷 네트워크를 알아야한다. - IP (인터넷 프로토콜) - TCP, UDP - PORT - DNS IP (인터넷 프로토콜)이란? : 인터넷 망을 통해서 목적지까지 메세지를 전달해야하는데 이때 사용하는 것이 IP이다. 복잡한 IP망에서 'hello world'라는 메세지를 미국에 있는 친구에게 보내야한다면? 최소한의 규칙인 IP를 통해서 가능하다! IP(인터넷 프로토콜)의 역할 1. 지정한 IP 주소(IP Address)에 데이터를 전달한다...

✔️ 에러 코드 Uncaught TypeError: Cannot read properties of undefined (reading 'img') ✔️ 에러가 나온 이유 await 키워드를 사용하는 것을 깜빡했더니 위와 같은 에러가 나왔습니다. WHY?? 👉 HTTP 요청은 비동기 처리 방식으로 동작하니까! (참고) 2022.12.19 - [JavaScript] - [Deep Dive] 동기와 비동기, 비동기가 처리될 수 있는 이유 get 함수는 서버의 응답 결과를 반환하는 비동기 함수입니다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료됩니다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료됩니다. 이때 aw..

✔️ 에러 코드 Uncaught TypeError: Cannot read properties of undefined (reading 'map') ✔️ 에러가 나온 이유 객체를 가리키기를 기대하는 변수의 값이 (여기서는 product.color) null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러(TypeError)가 발생한다고 합니다. console.log(product.color)가 undefined로 나온걸 확인했습니다... 👇에러코드 👇 {product.color.map((c) => ( ))} 👇에러 해결 코드 👇 객체가 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조하자! 방법 1. 논리 연산자 &&를 사용 (옵셔널 체이닝이 생..