Front-End (55) 썸네일형 리스트형 다시 시작하는 Node.js, 새로 시작하는 CS 책으로만 읽는 것에 한계를 느껴서 제로초 강의를 통해 다시 공부한다.https://www.inflearn.com/course/%EB%85%B8%EB%93%9C-js-%EA%B5%90%EA%B3%BC%EC%84%9C [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지 강의 | 제로초(조현영) - 인프런제로초(조현영) | 노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서www.inflearn.com해당 강의를 택했고 MySql과 aws도 사용하기에(람다,S3) 나에게 적합한 강의라고 생각해서 결제했다.(근데 대부분 유튜브에 무료강의로 올라와서 사기 당한 느낌 ㅠ).. Jest의 한계점과 Cypress(UI) 일단 테스트의 종류가 뭐가 있는지 알아보자. 유닛 테스트코드의 개별 단위가 올바른지 확인함수, 메서드, 컴포넌트가장 빠름Jest, Mocha 등통합 테스트여러 유닛의 결합이 잘 되는지 확인API, 모듈 간 연동중간Jest, Supertest 등E2E 테스트전체 애플리케이션 흐름이 문제없는지 확인사용자 관점, 전체 시스템가장 느림Cypress, Playwright 등 Jest는 주로 **유닛 테스트(Unit Test)**와 **통합 테스트(Integration Test)**에 많이 쓰이긴 하지만,기본적으로 E2E 테스트(End-to-End Test)도 가능하다.하지만 E2E 테스트에 특화된 도구인 Playwright나 Cypress 같은 툴에 비해 좀 번거로운 점이 있을 수 있는데 Jest는 기본적으로 .. React-hook-form & Zod를 사용해보자 유저는 회원가입/로그인 할 때 항상 값을 제대로 입력해주지 않는다.고의고 아니고를 떠나서 그렇다. 숫자칸에 "숫자만 넣으세요" 라고 해도 실수로 글자를 넣을 수 있는 법이니까. React-hook-form 이란? 그래서 프론트 개발자가 막아주는 게 좋다. 틀리면"여기는 숫자만 들어가야 해요" , "여기선 문자만 쓸 수 있어요" 이 역할을 해주는 게 React-hook-form이다.서버에 전송하기 전에 한번 걸러주는 필터 같은 친구다. import React from "react";import { useForm } from "react-hook-form";const MyForm = () => { const { register, handleSubmit, formState: { errors .. Jest Method 1. Test 블록 관련 메서드describe(name, fn): 테스트 그룹을 정의하는 블록입니다. 테스트 케이스를 논리적으로 묶을 때 사용합니다.test(name, fn) 또는 it(name, fn): 개별 테스트 케이스를 정의합니다.beforeAll(fn, timeout): 테스트 케이스가 실행되기 전에 한 번 실행됩니다.afterAll(fn, timeout): 모든 테스트 케이스가 실행된 후 한 번 실행됩니다.beforeEach(fn, timeout): 각 테스트 케이스가 실행되기 전에 실행됩니다.afterEach(fn, timeout): 각 테스트 케이스가 실행된 후 실행됩니다.2. Assertions (단언) 메서드expect(value): 테스트할 값을 지정합니다.3. Mock 함수 관련 메.. Jest란? Jest는 자바스크립트 테스트 프레임워크다.- 메타에서 개발- React를 포함한 다양한 JS애플리케이션 테스트를 작성하고 실행하는 데 유용하다.-유닛테스트,통합테스트,엔드투엔드테스트까지 다 커버할 수 있다. (차후에 설명) Jest 특징쉬운 설정 가능 : 기본적으로 설정 없이도 바로 사용할 수 있다.빠른 실행 속도 : 테스트를 병렬로 실행해 빠르게 결과를 확인할 수 있다. 스냅샷 테스트 : UI변화가 없는지 검증할 때 유용하다.모킹 함수 기능 : 함수,모듈 등을 모킹(mocking)해서 독립적인 테스트 환경을 만들 수 있다. Jest 언제 쓰나요? 유닛 테스트:개별 함수나 모듈이 예상대로 동작하는지 확인.예) 로그인 함수가 올바른 데이터를 반환하는지 확인.통합 테스트:여러 모듈이 함께 동작할 때, 그.. TodoList(Node.js) 나는 노드가 어렵다. 서버가 어려운 걸지도 모르겠다.원래라면 SQL,Node.js, React를 써서 프로젝트를 해야하는데내가 너무 얕봤다.SQLD,학은제를 하면서 하기엔 당장은 저 플젝 완성을 못할 거 같는 생각에투두리스트 먼저 해보기로 했다.(11.07부턴 코드잇 가서 배운다..!)일단 모습은 이렇고 진짜 별 거 없다. 단순 CRUD가 끝이다.입력 시 input을 초기화 하는 것과 같은 기능은 안넣었다. 파일구조는 이렇게 되어있다.server..js는 서버코드 , todo.html은 웹에 표기, 함수는 todo.js에 넣어놨다.express,cors를 사용하였는데 각각 이런 놈들이다. express - 서버 구성을 좀 더 쉽게 해주는 프레임워크cors -서버에 허용할 도메인을 지정해줘서 보안이랑 .. 새로운 프로젝트 시작 새로운 시작: 노드 공부와 프로젝트 시작이번에는 Node.js를 본격적으로 공부해보려고 한다. 새 프로젝트와 함께 말이다.프로젝트 목표는 명확하다. React, Node.js, SQL을 사용해 티스토리 같은 블로그 사이트를 혼자서 만들어 보는 것이다.이 프로젝트를 통해 내가 얻고 싶은 것은 다음과 같다:Zustand: 로그인, 다크모드 등 전역 상태 관리에 익숙해지기SQL: 관계형 데이터베이스를 직접 다뤄보며 실전 경험 쌓기Node.js: 서버 코드 작성에 능숙해지기또한, 무중단 배포를 도전해보려고 한다. 이는 기존 프로젝트에서는 시도하지 않았던 부분이다.기존 학습 방식의 한계지금까지는 강의를 하나 골라 프로젝트를 따라가는 방식으로 공부해왔다.하지만 이렇게 공부하다 보니 겉핥기만 하는 것 같았고, 배우는.. StoryBook이란? UI 컴포넌트를 독립적으로 분리해 개별 관리,테스트를 도와주는 도구다. 장점으론 아래와 같다.1.개별 정돈 편리2.재사용성을 고려한 디자인 & 개발가능3.테스트가 용이 작성하는 게 좀 번거로울 수 있으나 웹디자이너분과 소통하기에 정말 편리할 거 같다.즉, 기획과 업무 진행에서 이점을 가진다.npx storybook@latest init해당 명령어로 설치하면 된다. 만약 chips라는 컴포넌트가 있다고 가정해보자.이런 chips라는 컴포넌트를 이쁘게 띄워주는 "npm run dev" 같은 거다.실행 명령도 비슷하다.npm run storybook해당 명령어로 실행하면 스토리북에 대한 페이지가 열린다. 방법은 내가 만든 컴포넌트를 불러오고 스토리북에서 쓰라는 대로 쓰면 된다.import { Meta,.. 이전 1 2 3 4 ··· 7 다음
