TDD 준비 및 예제(1)

# 준비 단계https://jestjs.io/docs/getting-started Getting Started · JestInstall Jest using your favorite package manager:jestjs.io  * jest를 global하게 설치하는 것이 좋을까?- jest 를 글로벌하게 설치하는 것보다는 프로젝트 단위로 로컬에 설치하는 게 좋다. 그 이유는 다음과 같다. 1. 프로젝트 간 의존성 관리- 각 프로젝트마다 사용하는 Jest 버전이 다를 수 있다. 글로벌하게 설치하면 모든 프로젝트가 동일한 Jest 버전을 사용해야 하기 때문에, 특정 프로젝트에서 Jest 버전이 맞지 않아 테스트가 깨지거나 예상치 못한 에러가 발생할 수 있다.- 로컬 설치를 하면 프로젝트마다 필요한 Jest..

• format_list_bulleted TDD
• · 2024. 8. 29.
• textsms

TDD(테스트 주도 개발)에 대해서 알아보자.

TDD(Test-Driven Development) - 테스트 주도 개발 1. 테스트란 무엇인가?=> 소프트웨어의 품질을 검증하기 위해 테스트하는 것 => 제품 or 서비스의 품질을 확인 => 소프트웨어의 버그를 찾음 => 제품이 예상하는 대로 동작 하는지 확인 # 제품 : 함수, 특정한 기능, UI, 성능, API 스펙 ----------------------------------------------------------------   - 요구 사항 분석 및 이해 -> 설계 -> (Re)Write the 테스트 케이스 -> Run Tests -> Write only enough Code - 사용자 입장에서 코드를 작성, 모든 요구 사항(목표)에 대해 점검하면서 개발하는 "방식" ------------..

• format_list_bulleted TDD
• · 2024. 8. 28.
• textsms

[React Project]F.ROCK🥻(Shopping mall)

F.ROCK 쇼핑몰 프로젝트 회고✍️F.ROCK 쇼핑몰은 Momentum과 PazizicTV를 제작하는 과정에서 부족함을 느낄 때마다 새롭게 도전하며 탄생한 프로젝트입니다. 기능 구현과 UI 디자인에서 더 나은 방법이 떠오를 때마다 처음부터 다시 설계하거나 기존 코드를 완전히 덮어쓰는 과정을 반복하며 두 차례에 걸쳐 발전시킨 결과물입니다. 이 프로젝트를 통해 얻은 지식과 깨달음은 제게 큰 의미가 있었습니다. 처음 구상할 때 예상하지 못했던 다양한 기술적 통찰을 경험하며, 프론트엔드 개발자로서 한층 더 성장할 수 있었습니다. ""어제는 디자이너였다가,서른에 처음 개발을 배워서 서른 셋인 지금 개발자로 일한다는 여성을 만났다.늦었다는 사람 따로 있고, 그냥 해버리는 사람 따로 있고,그 둘은 완전히 다른 세상..

• format_list_bulleted Project
• · 2024. 8. 15.
• textsms

[React Project] 파지직TV⚡[Ver2.0]

Intro✍️기존의 사이트를 자신만의 것으로 만들어 보는 것은 리액트를 공부하고 연습해 보는 의미에서 큰 의미가 있다고 생각한다. 파지직TV사이트는 학습한 리액트 지식을 활용하고, 더 나은 방식이 있으면 덮어씌우고, 새로운 기능의 구현 방법을 배우면 적용해 보는 방식으로 만들어진 사이트이다.  무려 3번이나 만들고 버리고를 반복해서 나름 완성의 마침표를 찍었다. "방법을 몰라서 안 하는 겁니다.방법을 몰라서 못하는 겁니다.방법을 몰라서 지속할 수 없고방법을 몰라서 시도할 수 없습니다.  계속하십시오.시행착오를 겪으십시오.처음부터 완벽할 수는 절대 없습니다.꾸중을 들어도 그러려니 하십시오.익숙해지면 모든 것이 괜찮아질 것입니다. "  1. 파지직TV는 어떤 웹 사이트인가? 유튜브의 매력을 그대로, 더 편리..

• format_list_bulleted Project
• · 2024. 7. 27.
• textsms

AJAX가 뭔지 설명하는 글

AJAX는 "Asynchronous JavaScript and XML"의 약자이다. 웹 페이지가 서버로부터 데이터를 비동기적으로 가져오고, 이를 갱신하는 데 사용하는 기술이다. AJAX의 핵심 아이디어는 웹 페이지 전체를 새로 고침하지 않고도 데이터를 비동기적으로 서버에 요청하고, 그 결과를 받아와서 페이지의 일부를 갱신할 수 있다는 점이다. 이는 웹 애플리케이션의 성능과 사용자 경험을 크게 향상시킨다.  AJAX를 이해하기 위해선 "서버"가 무엇인지 알아야 한다.  왜냐하면 서버랑 비동기적 통신하기 때문이다. 서버는 데이터를 관리하고, 요청에 따라 데이터를 제공하는 컴퓨터 프로그램 또는 시스템이다. 클라이언트는 서버에 요청을 보내고, 서버는 그 요청에 맞는 데이터를 찾아서 응답한다.  왜 AJAX가 중..

• format_list_bulleted Javascript
• · 2024. 7. 3.
• textsms

리액트의 동작원리 TEST

useState, useEffect, 리액트의 동작원리를 잘 알고 있어야 풀 수 있는 문제를 보여주는 영상을 우연히 보게 되었다.이 영상에 의하면 네카라쿠배당토의 개발자를 제외하면 아래의 답을 모르는 경력자들도 많다고 한다.     혹시 만약에 이 글을 보고 있는 리액트 개발자가 있다면 한 번 대답해 보자. 3초 주겠다.😋import { useEffect, useState } from 'react';export default function Apptest() { console.log('init'); const [state, setState] = useState(0); console.log(state); useEffect(() => { console.log('useEffect'); }, [..

• format_list_bulleted React
• · 2024. 7. 2.
• textsms