Today Hailie Learned

✔️ 해결하고자 하는 것 상태관리 툴까지 쓸 depth는 아니지만 부모와 자식 관계가 아닌 컴포넌트가 아니라 페이지일 때 데이터를 전달할 수 있으면 좋겠다고 생각함 ✔️ 해결 방법 Link 과 Location 를 사용해서 문제를 해결할 수 있다. state로 {{}}를 두 번 묶어서 데이터를 전달할 수 있다. 👇 데이터를 전달하는 컴포넌트 코드 👇 import { Link } from "react-router-dom"; {title} 👇 데이터를 받는 페이지 코드 👇 import { useLocation } from "react-router-dom"; const TodoDetail = () => { const location = useLocation(); const title = location.stat..

🤓배움 요약하기 멱등성이란? 한 번 호출하든 두 번 호출하든 100번 호출하든 결과가 똑같은 것을 말하는데 HTTP 메서드에서는 GET, PUT, DELETE가 멱등합니다. ✔️ API URI 설계에서 가장 중요한 것은 리소스 식별이다! URI는 리소스만 식별한다. 리소스와 해당 리소스를 대상으로 하는 행위를 분리 - 리소스: 회원 - 행위: 조회, 등록, 삭제, 변경 리소스는 명사, 행위는 동사 ✔️HTTP 메서드 종류 GET : 리소스 조회 POST : 요청 데이터 처리, 주로 등록에 사용 PUT : 리소스를 대체, 해당 리소스가 없으면 생성 PATCH : 리소스 부분 변경 DELETE : 리소스 삭제 OPTIONS : 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명 (주로 CORS에서 사용) ■..

객체 불변성이란? immutability = 변화가능하지 않음 👉 데이터의 원본이 훼손되는 것을 막는다. => 불변 (immutability), 필요할때만 새로 만든다. String Number Boolean Null Undefined Symbol => 가변 (mutability), 생성할 때마다 새로 만든다. Object Array Function let p1 = 1; let p2 = 1; console.log(p1, p2, p1 === p2); // 1,1,true // 원시데이터 타입은 값이 같으면 같은 곳을 가리켜서 true다. let o1 = {name:'hailie'} let o2 = {name:'hailie'} console.log(o1, o2, o1 === o2); // {name:'hai..

🤓배움 요약하기 HTTP가 무엇인가요? HTTP는 HTML이나 리소스를 전송하기 위한 프로토콜입니다. HTTP의 특징과 장점은 무엇인가요? 서버가 클라이언트의 상태를 보관하지 않는 stateless하다는 특징에서 서버의 확장성을 높일 수 있다는 장점이 있습니다. 그리고 연결을 유지하지 않는 비연결성이라는 특징에서 서버 자원을 효율적으로 사용할 수 있다는 장점이 있습니다. HTTP 메세지 구조에 대해서 알려주세요. HTTP는 시작라인, 헤더, 공백, 메세지 바디로 구성되어 있습니다. request의 시작라인에는 HTTP 메서드, 요청대상, HTTP Version이 들어있고, response의 시작라인에는 HTTP Version과 응답코드가 들어있습니다. 헤더에는 HTTP 전송에 필요한 모든 부가정보가 들어..

지금까지 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를 응답으로 ..