본문 바로가기

분류 전체보기339

axios 공식문서 따라서 (일부) 작성하면서 이해하기! axios-docs 지금까지는 fetch를 사용했지만, 다른 팀원들 전부 axios를 사용했기 때문에 axios를 공부하려고 한다. 흥미로운 점은, (1) 인스턴스를 만들고 (2) 인터셉터를 활용 (3) response에 대한 모듈화(인 것 같았다) fetch를 썼던 이유는 추가적인 패키지를 설치할 필요가 없었기 때문이었고 기본적인 GET, POST, DELETE, UPDATE하는데 문제는 없었다.(...) 나는 fetch(즉, API 통신 부분)를 특별하게 모듈화 하지 않았지만(못했지만..) 일반적으로는 모듈화를 통해 중복코드를 줄이면서, 코드를 분리해 뷰는 뷰만, API는 API 만 집중하도록 만드는 패턴이 자연스러운 것 같다. (MVC로 가는 길) (프로그래머스 과제관 해설에서도 fetch 사용, .. 2023. 2. 27.
TypeScript 제네릭 (arg: T):T 여기서 는 Type의 약자로 제네릭을 선언할 때 T를 관용적으로 사용한다. 여기에서 다이아몬드 연산자 안에 있는 T는 타입변수라고 한다. 이제 이 identify 함수는 T라는 타입 변수를 갖게 된다. 그리고 argument와 return의 type은 T라는 타입 변수로 동일하다. async-await은 Promise를 자동으로 만들어주고 Promise를 해체해서 결과만을 반환해줌. 이때 반환형이 Promise였다면 T타입 형태로 반환 const c = new someClass(...) someFunction(...); 컴파일 될 때 자리에 이 들어가게 됨. 이 경우, someFunction(..)이라면 T 타입이 인자, 본문, 반환형에 모두 써줄 수 있음 https://heropy... 2023. 2. 23.
2023-02-22 회고 - 잘 한 점 라이브러리 확인 배포 [1. 로그인 / 회원가입] => 속성을 확인 [Assignment 1]=> 이미 가입되어 있는 경우를 확인(alert) [Assignment 4]=> 로그아웃 기능을 넣어서 테스트 [Assignment 5]=> 태그의 속성과 전체 구조를 확인 [Assignment 6]=> 태그의 속성과 전체 구조를 확인 -잘 못한 점 : 전체 페이지 구조를 미리 설계하지 못한 것, 중복되는 부분을 컴포넌트화 하지 못한 것, API 통신을 적절한 시점에 하지 못한 것, 리다이랙트 후반에 UI가 바뀌면서 중복되는 요소가 생겼는데 컴포넌트화 하지 못했음. 전체적인 페이지 구조를 설계하지 않고 코드작업을 진행함. 중복 컴포넌트가 생기는 부분이 많아졌지만 컴포넌트화 하지 못함.. 변화가 생길.. 2023. 2. 23.
코어 자바스크립트 2023/03/05 02 실행 컨텍스트 1. 실행 컨텍스트 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 => 콜스택에 쌓았다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행 -> 실행 컨텍스트를 생성하고 콜스택에 담는다. 그 후 실행 컨텍스트와 관련된 코드들을 순차 실행(즉, 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점) 2. VariableEnvironment 3. LexicalEnvironment 2-3-1 environmentRecord와 호이스팅 - 호이스팅: 식별자들을 최상단으로 끌어올림(그 뒤 실제 코드를 실행). environmentRecord의 수집 과정을 추상화한 개념 - 함수 선언문: 전체 호이스팅 - 함수 .. 2023. 2. 9.
기초부터 완성까지, 프런트엔드 2023/02/01 (수) 2장 HTML과 CSS 2.1 HTML 1. 시맨틱 - '의미론적인' : 가독성이 높아지고 유지보수가 쉬워진다. 계층적으로 파악하기도 용이하다. (예) 태그를 마구 사용하는 것 보다, 상황에 따라 의미있는 태그를 사용하는 것. 등 2. SEO(Search Engine Optimization): 검색 엔진 최적화. 사이트를 찾기 쉽도록 개선하는 노력 (1) 시맨틱하게 HTML 작성 (2) 작성 (3) 을 이용해서 페이지에 설명 남기기 (4) 로 인코딩 방식 지정하기: 통일된 방식으로 인코딩을 노출함 (5) open graph, twitter 태그를 사용해 외부 사용자를 유인하라 2.2 CSS 1. (예) 선택자 { 프로퍼티: 값; } 2. 스타일 상속: 상위 요소에 적용된 내용이.. 2023. 2. 2.
callback, promise callback, promise Promise를 사용한 함수의 경우, const promiseFunc = async () => { const data = await fetch() .... const responseData = await response.json(); return responseData } const exampleFunc1 = () => { const responseData = promiseFunc() //이 경우, Promise가 반환된다. } const exampleFunc2 = async () => { const responseData = await promiseFunc() //이 경우, responseData가 반환된다. } https://velog.io/@vraimentres/pr.. 2023. 1. 29.
(책)개발자를 위한 독해력 http://www.yes24.com/Product/Goods/89523240 개발자를 위한 디자인 독해력 - YES24 디자인하는 개발자, 개발하는 디자이너를 일컬어 소위 ‘개자이너’, ‘디발자’라고 한다. 우스갯소리지만, 그만큼 개발과 디자인은 교집합이 많다. 하지만 평생 프로그래밍만 배운 사람이 갑 www.yes24.com 2023/01/21 (토) Section 03 색 감각을 키우는 연습하기 1. 시상 세포 훈련: 다양한 색을 '보자' - 서점=> 인테리어, 디자인 책 .. 글x 그림o - 꽃 Section 04 단순한 도형으로 그리는 연습하기 - 사진 투명도를 올린 뒤에 레이아웃을 만들고 , 가장 간단한 도형( 네모 , 세모, 동그라미, 반원, 타원, 마름모)으로 라인을 따라서 그린다. 선은 .. 2023. 1. 21.
(책) 알아서 잘 딱 깔끔하고 센스있게 정리하는 TypeScript 핵심 개념 2023/01/19(목) 1. TypeScript란? - 알고있던 내용 1. JavaScript 변수에 타입을 설정해주는 것 2. (사용 경험) interface로 객체타입을 설정해주거나, 매개변수(props등)에 타입을 미리 넣어준다. - 궁금한 내용 1. 타입스크립트와 자바스크립트의 차이, 혹은 관계? 2. 타입 체크 3. tsc를 해서 컴파일 하는 이유 4. 자동으로 타입스크립트 파일을 자바스크립트 파일로 전환하는 방법 - 이해한 내용 1. 타입스크립트는 JavaScript에 정적 타입이 추가된 언어이다. 2. 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사)를 진행합니다. 3. tsc란 타입스크립트 파일을 자바스크립트 파일로 컴파일해 줍니다. => 이유: 브라우저는 타입스.. 2023. 1. 19.
(책) 리액트를 다루는 기술 - 알고있던 내용 1. => 제목과 관련된 기존에 알고 있던 내용을 서술했습니다. - 궁금한 내용 1. => 해당 주제에서 다루는 내용 중, 바로 이해하지 못한 부분, 혹은 궁금한 내용을 서술했습니다. - 이해한 내용 1.궁금한 내용의 번호에 맞게 이해한 내용을 서술했습니다. - 새로 알게된 내용 1. 이해한 내용과는 다르게, 새로 알게 되었지만 이해하는 노력 없이 자연스럽게 받아들인 내용을 서술했습니다. - 보충할 내용 1. 이해한 내용, 새로 알게된 내용과 다르게 암기해야 할 간단한 내용등을 부수적으로 서술했습니다. 2023/01/13 15. Context API 15.1. ~ 15.2. Context API - 알고있던 내용 1. Context API: 컴포넌트의 트리가 깊어질수록 props로 같은.. 2023. 1. 13.

티스토리툴바