리사트 파밍챌린지 프론트엔드 개발자편 4기 문제 위와 같은 형태로 된 타이머 만들기 레이아웃 우선 HTML과 CSS로 기본 틀을 잡는다. form-fieldset-input을 추가하여 입력 창을 만들고, placeholder로 00을 입력했다. placeholder는 실제 입력 시 사라진다. 3개의 버튼은 동일한 디자인으로 만들었고, flex를 이용하여 space-between으로 간격을 맞췄다. box-shadow로 멋을 좀 부려 보았다. 기능 만들어야 하는 기능은 다음과 같다 - START 버튼을 누르면 시간, 분, 초 단위로 카운트 다운 작동 (시간, 분, 초를 입력하는 영역이 사라진다) - STOP 버튼을 누르면 카운트 다운을 정지한다. - RESET 버튼을 누르면 모든 항목 0으로 초기화 되면서..

타입스크립트 시작하기 1. 타입 정의하기 몇 가지 기본 타입 const(let) 변수명: 타입 = 값; const one: number = 1; const isTrue: boolean = 1 > 0; const text: string = "텍스트"; const arr: number[] = [1, 2, 3]; const arr2: Array = [4, 5, 6]; - 오류 arr2.push("가"); 자바스크립트 내에서 array는 object로 인식을 한다. 타입스크립트를 사용함으로 array와 같이 자바스크립트로 관리하기 어려운 타입들을 관리할 수 있다. 또한 null과 undefined 도 관리가 가능한데 아래와 같이 유니온 타입을 선언할 수 있다. | 로 사용하는 union 타입은 교집합이고 & 로..

타입스크립트 시작하기 1. 타입스크립트란? 타입스크립트 / 자바스크립트 자바스크립트 - 동적타입언어 - 변수의 타입이 런타임에 결정 - 코드의 양이 적을 때 생산성이 높다. - Python, PHP 타입스크립트 - 정적타입언어 - 자바스크립트의 모든 기능을 지원하면서 정적 타입 또한 지원 - 변수의 타입이 컴파일 타임에 결정 - 코드의 양이 많을 때 생산성이 높다. - Java, C++ 2. 타입스크립트 설치부터 컴파일까지 타입스크립트 설치하기 1. 우선 node.js를 설치한다. 2. 폴더에 npm init -y 하여 package.json 파일을 생성한다. 3. npm install typescript를 입력하여 타입스크립트를 설치한다. 4. npx tsc --init 을 입력하여 tsconfig.j..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-06-12, 2023-06-19 20:30 15, 16일차 안내 - 월요일로 바뀌고 기록하는 것을 깜빡 ;ㅁ; access token에서 생긴 에러가 재부팅하니까 깔끔하게 사라졌다 충격 - refresh 토큰 설정

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-28 21:00 14일차 안내 - 204p부터~ Apollo 클라이언트 링크 Apollo 링크는 아폴로 클라이언트와 GraphQl 서버 간의 데이터 흐름에 대한 커스터마이징을 돕는다. 링크를 통해 토큰을 관리하거나, 통신 관련 에러 처리, 소켓 통신, 로깅 등과 같은 클라이언트-서버 간 통신 시 발생되는 행동들을 제어할 수 있다. 기본적으로 구성할 수 있는 onError 링크와 HttpLink를 구성해준다. Authorization 이라는 헤더를 이용해 액세스 토큰이 있으면 넣어서 서버와 인증하는 구조를 만들어 준다. Apollo 서버 Context 요청과 응답 객체를..

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-21 21:00 13일차 안내 - 204p 까지 진행 액세스 토큰 발급 기능 추가 jwt 이용하여 토큰 발급 로그인 UI 완성 signup 처럼 로그인 UI 완성 로그인 요청 로그인 뮤테이션 만들고 로그인 진행 mutation login($loginInput: LoginInput!){ login(loginInput: $loginInput) { errors{ field message } user{ id username email } accessToken } } 유저 확인 로직에서 에러 메시지 field 파라미터를 emailOrUsername으로 바꾸지 않아서 에러메시지가..