전체 글
-
[리사트파밍챌린지] day02 타이머 만들기WEB Dev/StudyNote 2023. 10. 24. 16:25
리사트 파밍챌린지 프론트엔드 개발자편 4기 문제 위와 같은 형태로 된 타이머 만들기 레이아웃 우선 HTML과 CSS로 기본 틀을 잡는다. form-fieldset-input을 추가하여 입력 창을 만들고, placeholder로 00을 입력했다. placeholder는 실제 입력 시 사라진다. 3개의 버튼은 동일한 디자인으로 만들었고, flex를 이용하여 space-between으로 간격을 맞췄다. box-shadow로 멋을 좀 부려 보았다. 기능 만들어야 하는 기능은 다음과 같다 - START 버튼을 누르면 시간, 분, 초 단위로 카운트 다운 작동 (시간, 분, 초를 입력하는 영역이 사라진다) - STOP 버튼을 누르면 카운트 다운을 정지한다. - RESET 버튼을 누르면 모든 항목 0으로 초기화 되면서..
-
[타입스크립트] 타입스크립트 시작하기 - 2WEB Dev/Javascript | REACT | Node.js 2023. 10. 12. 17:50
타입스크립트 시작하기 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 타입은 교집합이고 & 로..
-
[타입스크립트] 타입스크립트 시작하기 - 1WEB Dev/Javascript | REACT | Node.js 2023. 10. 11. 14:43
타입스크립트 시작하기 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..
-
[카페24] 디자인 스킨 다운로드 받아 VSCode에서 작업하기StartUP/카페24 2023. 9. 20. 12:12
카페24 디자인스킨 수정 시 자체 에디터로 수정하면 편한 점(0개)도 있지만, 개발을 하다보면 당연히 VSCode로 작업하는 것이 수월하다. 이번에는 sftp를 이용해서 카페24 디자인스킨을 다운받아 업로드 하는 방법을 알아보자 먼저 확인해야 할 것은 - 카페24 ftp 주소 - ftp 아이디와 비밀번호 이다. 이 내용은 여기에서 확인할 수 있다. 그리고 이용할 디렉터리를 만들고, 여기에서 VSCode를 연다. 열린 VSCode 플러그인에서 sftp를 찾아 설치한다. 다양한 플러그인이 나와 있으며 개 중 많은 다운로드 수를 차지한 버전으로 다운받으면 된다. f1키를 눌러 상단에 뜬 입력창에 sftp:config를 클릭한다. 열린 sftp.json 확인하자. { "name": "My Server", "ho..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 14WEB Dev/StudyNote 2023. 5. 28. 22:04
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-28 21:00 14일차 안내 - 204p부터~ Apollo 클라이언트 링크 Apollo 링크는 아폴로 클라이언트와 GraphQl 서버 간의 데이터 흐름에 대한 커스터마이징을 돕는다. 링크를 통해 토큰을 관리하거나, 통신 관련 에러 처리, 소켓 통신, 로깅 등과 같은 클라이언트-서버 간 통신 시 발생되는 행동들을 제어할 수 있다. 기본적으로 구성할 수 있는 onError 링크와 HttpLink를 구성해준다. Authorization 이라는 헤더를 이용해 액세스 토큰이 있으면 넣어서 서버와 인증하는 구조를 만들어 준다. Apollo 서버 Context 요청과 응답 객체를..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 13WEB Dev/StudyNote 2023. 5. 21. 22:29
⌈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으로 바꾸지 않아서 에러메시지가..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 12WEB Dev/StudyNote 2023. 5. 14. 22:04
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-05-14 21:00 12일차 안내 -금일 진도 182p 부터 189p 책 요약 정리 5장 프로젝트 개발 2 회원가입 요청 react-router-dom에서 사용하던 useHistory 사용법이 변경되어서 useHistory -> useNavigate 로 바꿔서 사용. https://kangdanne.tistory.com/167 [React-Router]리액트 라우터 v5 → v6 (useHistory → useNavigate) 리액트 라우터 v6에서는 기존의 useHistory 대신 useNavigate를 사용해야합니다. 공식문서 : https://reactrouter.c..
-
[React] React-Router-dom으로 리액트 앱에 라우팅 만들기WEB Dev/Javascript | REACT | Node.js 2023. 5. 5. 22:12
📌 들어가며 리액트 라우트 패키지의 기본인 react-router-dom을 이용해 리액트 페이지에 라우팅을 만드는 방법을 알아보자. 📌 react-router-dom란 리액트 라우터 돔은 클라이언트에서 페이지 라우팅을 가능하게 한다. 서버 사이드에서 보내지는 페이지들은 일반적으로 디렉터리에서 파일 단위로 이동하게 되는데 리액트와 같은 클라이언트 사이드 렌더링(Client-Side-Rendering)의 경우는 하나의 파일에서 화면만 변경되는 구조이기 때문에 url에서 보여지는 경로를 변경한다고 해서 화면이나 파일이 변경되지 않는다. 하지만 필요에 의해 (구글 등에서 검색, 딥 링크 등의 필요) url에서 페이지를 지정해주어야 하고, 유저도 그것으로 화면의 변화를 인지하는 경우도 있기 때문에 라우팅이 필요하..