Study Output for Myself (58) 썸네일형 리스트형 [Typescript] Utility Types 공식문서: https://www.typescriptlang.org/ko/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org Typescript 를 더 잘 활용하고 싶다면 Utility types를 써보도록 하자. Partial interface Person { name:string; age:number; favoriteFood:string; } const update=(person:Person, updatedData:Partial) =>{ return {...person, ...updatedData} } const Jo.. [TS] type narrowing, discriminated union 타입스크립트 공식문서 :https://www.typescriptlang.org/docs/handbook/2/narrowing.html#discriminated-unions Documentation - Narrowing Understand how TypeScript uses JavaScript knowledge to reduce the amount of type syntax in your projects. www.typescriptlang.org 서버에 api 요청을 보냈다. 요청이 별 문제 없이 성공할 경우 내가 원하는 데이터가 넘어올 것이고 요청이 실패한다면 넘어오지 않을 것이다. 이 때 에러처리를 위해서 요청이 실패할 경우, 각 경우에 맞는 에러객체를 만들어서 반환하도록 설계해보자. 그러면 이제 ap.. [JS]proxy pattern Proxy Pattern : 디자인패턴 중 하나. Proxy는 객체를 지켜보다가 객체에 특정한 행동을 할 때 (getter로 필드 값을 가져오거나 setter로 필드 값을 설정하거나 constructure로 인스턴스를 생성하거나) 설정해놓은 핸들러(메소드)를 거치게 하는 스펙이다. 간단한 예로 person이라는 객체가 있고 그 객체를 프록시로 감싸보자. const person = {name:'Heather', age:29} const proxyPerson = new Proxy(person, { // 여기서 원하는 행동을 선언해준다. } 첫번째 인자로는 지켜보고자 하는 객체를 받고 두번째 인자로는 핸들러 객체를 받는다. 핸들러 객체에는 내장 메소드가 정해져 있다. 간단한 get과 set을 써보자 const.. [JS] 싱글톤(singleton) 패턴 클래스 / 생성자 함수 이름과 나이를 가진 사람이란 객체가 있다. printGreeting 메소드를 호출하면 이름과 나이를 넣어 인사를 한다. "사람을 여러명 만들고 싶다." 고 하자. 이름과 나이를 넣으면 새로운 사람 객체를 만들어주는 클래스 혹은 생성자 함수를 생성하면 된다. //Person.js class Person { constructure(name, age){ this.name = name; this.age = age; } printGreeting(){ console.log(`Hi, I'm ${this.name}. ${this.age} years old.`); } } export default Person; 인스턴스 클래스로 만든 새로운 객체를 '인스턴스'라고 한다. 아래 헤더 인스턴스와 애슐.. [React]React Query 사용후기 *개인적인 공부와 사용법을 적은 것이니 정확한 정보는 공식 웹사이트를 참고해주세요. https://react-query-v3.tanstack.com/ 렌즈 이커머스 사이트를 만드는 프로젝트에서 상품 데이터를 가져오고, 로그인/회원가입 정보 등을 post, get하는 모든 API 통신에 React Query 를 사용했다. 리액트쿼리는 한마디로 서버에서 받아오는 데이터 관리, 조작, 저장을 용이하게 해주는 도구이다. 리덕스가 프론트앤드(웹)단에서 필요한 데이터 상태를 관리해주는 것처럼 리액트는 백(서버)에서 받아온 데이터 상태를 관리해준다. 물론 리액트쿼리로 받아온 데이터를 리덕스로 관리해줄 수 도 있다. 사용해보자 상태관리라이브러리는 항상 provider로 모든 컴포넌트를 감싸서 데이터를 여기저기서 다 쓸.. [CS]TCP 개인공부 정리의 용도이니 정확한 정보를 알고 싶으시다면 다른 사이트를 방문하시기 바랍니다. https://ko.wikipedia.org/wiki/%EC%A0%84%EC%86%A1_%EC%A0%9C%EC%96%B4_%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C - http://www.ktword.co.kr/test/view/view.php?m_temp1=347 TCP(Transmission Control Protocol) - 서버와 클라이언트가 통신하기 위한 네트워크 방법 - 연결지향성 프로토콜 - 논리적 통신 - 패킷 통신 - 해더의 컨트롤비트에 여러 정보(데이터의 번호, 남은 공간의 크기 등)를 담아서 왔다갔다 함. 서버와 클라이언트가 데이터를 주고받기 위해서 연결되어야 하는데 그 .. [JS]insertAdjacentHTML ✅insertAdjacentHTML HTML 요소를 가져와서 그 앞, 뒤, 첫번째 child, 마지막 child에 새로운 요소를 넣을 수 있는 method element.insertAdjacentHTML(position, text); position에는 다음 4가지만 올 수 있다. beforebegin 요소 앞에 afterebegin 요소의 첫번째 child로 beforeend 요소의 마지막 child로 afterend 요소의 뒤에 [JS]History API window 객체에 내장되어 있는 history 객체는 브라우저 세션 기록에 접근할 수 있는 방법을 제공함. 뒤로 가기, 앞으로 가기, 특정 기록으로 가기를 가능하게 해주는 API property로는 length와 state가 있다. 아래는 method 방문기록 뒤로 가는 기능 방문기록 앞으로 가는 기능 -2는 두페이지 뒤로, 3은 앞으로 3페이지, 0은 refresh와 같다. 세션 기록 스택에 상태를 추가하는 method. pushState와 replaceState의 차이점은 push는 정말로 스텍에 push를 하는 거고 replace는 pop을 먼저 한 다음 push를 하는 거라 마지막 기록이 기존것에서 새것으로 대체된다는 차이가 있다. 첫번째 인자인 state는 원하는 객체를 넣어 popstate .. 이전 1 2 3 4 ··· 8 다음
