Today Hailie Learned

🤓배움 요약하기 캐시가 무엇인가요? 나중에 요청할 결과를 미리 저장해둔 후 빠르게 서비스 해주는 것을 말합니다. 캐시 덕분에 비싼 네트워크 사용량을 줄일 수 있고 브라우저 로딩 속도가 빠르기 때문에 빠른 사용자 경험이 가능하다는 장점이 있습니다. 검증 헤더와 조건부 헤더이란? 검증헤더와 조건부 요청을 사용하면 캐시 유효 시간이 초과해도 서버의 데이터가 갱신되지 않으면 304 Not Modified와 함께 헤더만 응답해서 네트워크 다운로드가 아주 적게 발생해서 캐시보다 매우 효율적으로 데이터를 전송할 수 있습니다. ✔️ 캐시가 없다면? 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다. 인터넷 네트워크는 느리고 비싸기 때문에 웹 개발자라면 신경을 써야한다. 느린 사용자 경험 ✔..

🤓배움 요약하기 쿠키의 가장 큰 특징이 무엇인가요? 쿠키는 지정한 서버에 대해서는 모든 요청에 쿠키 정보를 자동으로 포함하는 점이 가장 큰 특징이라고 생각합니다. ✔️ 쿠키 Set-Cookie : 서버에서 클라이언트로 쿠키를 전달 (응답) Cookie : 클라이언트가 서버에서 받은 쿠키를 저장하고 HTTP 요청시 서버로 전달한다. 참고로 HTTP는 무상태(stateless) 프로토콜이라서 클라이언트와 서버는 요청과 응답을 주고 받으면 연결이 끊어져서 서로 상태를 유지하지 않는다는 특징이 있다. 이것을 위한 대안으로 모든 요청에 사용자 정보를 포함해서 보내는 방법이 있다. => 모든 요청에 사용자 정보가 포함되도록 개발해야해서 개발자가 힘들고, 보안에도 문제가 있고 심각한 문제가 있다. 여기서 쿠키를 사용..

면접을 보면서 내가 아는 내용을 다른 사람에게 말로 제대로 설명하는게 생각보다 어렵다는 걸 알고나서 제대로 알아야겠다고 생각했습니다. 그래서 자바스크립트는 Deep Dive 책으로, HTTP 기본 개념은 인프런 강의로 지식을 채워나가고 있습니다. 그 외 부분은 두루두루 넓게 아는게 우선인 것 같아서 노마드코더 챌린지로 IT 기본 지식을 공부하고자 합니다. 이 책을 통해 얻고 싶은 것 IT 기본 지식 습득해서 당당한 웹 개발자 되기 이 책을 읽고 추가로 공부한 것 인터프리트 언어(interpreted language)와 컴파일 언어(compiled language)의 차이 => 인터프리터 언어는 빌드과정이 없이 바로 고급언어에서 한줄 씩 읽어서 실행합니다. 반면에 컴파일러 언어와 같은 C, Java는 .c..

1. 맥락 이해하기 쉬운 변수명으로 통일 참고 타입별 변수명 boolean : is-, has-, can-, ... function : get-, handle-, submit-, … array : -s (ex. users.map(user ⇒ user.id)), … 피해야 할 변수명 data, info, foo, user1, mdhms, … 이벤트 함수나 api 함수명을 ~ handler로 통일했습니다. onSubmit => submitHandler changeButton => changeButtonHandler handleEdit => editHandler handleDelete => deleteHandler 2. typescript에서 'any' 없애기 Axios의 interceptors 라는 기능을 ..

🤓배움 요약하기 HTTP 상태 코드에 대해서 설명해주세요. HTTP 상태코드는 클라이언트가 보낸 요청의 처리 상태를 서버에서 응답해주는 코드입니다. 200번대 코드는 클라이언트가 보낸 요청이 제대로 성공했음을 알려주는 코드이고, 300번대는 클라이언트의 요청이 완료되려면 추가적인 조치가 필요하다는 뜻이고, location 헤더가 있으면 location 위치로 리다이렉션된다는 특징이 있습니다. 400번대 코드는 클라이언트에서 잘못된 코드나 데이터를 보내서 나타나는 에러코드이고, 500번대 에러는 서버에 문제가 생겨서 나타나는 에러코드 입니다. 프로젝트에서 멘토로 잠시 만났던 분이 웹 개발자라면 HTTP 상태코드에 대해서는 빠삭하게 알고 있어야 한다고 강조하셨는데 이번에서야 제대로 공부할 수 있었습니다. ✔..

✔️ 클라이언트에서 서버로 데이터 전달 방식 1. 쿼리 파라미터를 통한 데이터 전송 (GET) => 주로 정렬 필터 (검색어) 2. 메세지 바디를 통한 데이터 전송 (POST, PUT, PATCH) => 회원가입, 상품 주문, 리소스 등록, 리소스 변경 등등 ✔️ 클라이언트에서 서버로 데이터 전송 상황 1. 정적 데이터 조회 (GET) 이미지, 정적 텍스트 문서 일반적으로 리소스 경로로 단순하게 조회 가능 2. 동적 데이터 조회 (GET) 주로 검색, 게시판 목록에서 정렬 필터(검색어) GET은 쿼리 파라미터를 사용해서 데이터를 전달한다. 3. HTML Form을 통한 데이터 전송 (GET, POST) 회원가입, 상품 주문, 데이터 변경 GET, POST만 지원하므로 컨트롤 URI를 사용한다. ex) P..

✔️ 해결하고자 하는 것 상태관리 툴까지 쓸 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 전송에 필요한 모든 부가정보가 들어..