React.js, Next.js
-
프론트엔드 테스트 코드 작성하기 - 기초편React.js, Next.js 2024. 3. 28. 23:19
목차 prerequisites Project Basic Code Test Code Explain each test codes Results 마치며 1) Prerequisites 이번 장에서는 vs code의 extension인 Jest Runner를 사용합니다. 이전 장에서 다룬 레포지토리를 확장하여 사용합니다 2) Project 코드는 해당 레포지토리에서 다운로드하실 수 있습니다. https://github.com/junh0328/react-test GitHub - junh0328/react-test Contribute to junh0328/react-test development by creating an account on GitHub. github.com 기본적인 UI를 위해, styled-in-..
-
프론트엔드 테스트 코드 시작하기 - 개념편React.js, Next.js 2024. 3. 26. 20:13
목차 Goal What do you want to test Types of tests End to End test Integration test Unit test Static test Project Prerequisites Init Installation jest ts-node set the config Add script on package.json Initialize the test jsdom environment Sumaary results etc 레퍼런스 1) Goal 정확성 및 신뢰성 확보 테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인하는 것 다양한 조건 및 입력에서 리액트 컴포넌트가 예상대로 동작하는지 확인하는 것 수월한 리팩터링 프로젝트가 성장하면 리팩터링이 필요함 코드 품질, 성능개..
-
prettier로 import module 순서 통일하기React.js, Next.js 2023. 10. 24. 20:43
들어가며 코드 베이스가 커지면서, 저희 팀은 조금 더 규격화 된 코드를 지향하기 시작했습니다. 비즈니스 로직이 길어지기 때문에 코드 리뷰 시에도 피로도를 최소화하기 위해 최대한 같은 구조로 쉽게 파악할 수 있도록 import order를 설정하였습니다. 다음과 같이 auto import에 의해 자유롭게 추가된 모듈을 순서에 맞춰 보다 읽기 쉽게 구조화할 수 있습니다. Input import React, { FC, useEffect, useRef, ChangeEvent, KeyboardEvent, } from 'react'; import { logger } from '@core/logger'; import { reduce, debounce } from 'lodash'; import { Message } f..
-
한번에 적용하는 Sentry with Next.jsReact.js, Next.js 2023. 10. 23. 20:05
들어가며 안녕하세요, 정말 오랜만에 기술 블로그로 돌아왔습니다! 약 3개월 동안 많은 일들이 있었습니다. 서비스 출시가 임박하기도 했고, 프로덕션 배포에 집중하느라 글 작성을 등한시했던 것 같습니다. 아무래도 반복되는 작업과 공유할 수 있는 양질의 글이나 주제를 선택하기가 어려웠었어서 방생 아닌 방생조치를 취하고 있었던 것 같습니다. 이번에 공유드릴 내용은 Sentry 입니다. 전체적으로 서비스에 Sentry를 적용하게 되면서 겪었던 문제점이 많았기 때문에 다른 프론트 개발자 분들이 보기 쉽게 공유차원에서 글을 작성했습니다. 하단에 레포지토리도 같이 달아두었으니, 전체적으로 글을 읽고 코드로 직접 보시면서 만들면 보다 쉽게 적용할 수 있을 것 같습니다. 질문은 언제나 환영입니다. 목차를 보고 천천히 따라..
-
구글 애널리틱스 (GA4) for developersReact.js, Next.js 2023. 7. 16. 21:44
Prerequisitestypescriptnextgoogle analytics default configgoogle analytics debuggerReferencesUnlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript (2023 Edition) Unlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript (2023 Edition)If you own a website, you know how important it is to track its performance and make data-driven decisions..
-
리액트에서 다중의 동적 폼 처리하기React.js, Next.js 2023. 6. 15. 20:04
들어가며 프론트엔드로 개발하게 될 경우, 정적으로 사전에 생성된 폼 데이터를 다루기도 하지만, 동적으로 추가하거나 제거 및 수정이 필요한 폼을 만들어야 하는 경우가 생깁니다. 스타일링 코드를 제거하고 자바스크립트 코드 위주로 동적 폼 처리에 대한 기본적인 흐름을 파악합니다. 예시 [wanted] 동적 폼 처리 뷰 코드 import React, { useEffect, useState } from 'react'; function DynamicFormComponent() { const [formFields, setFormFields] = useState([{ name: '', value: '' }]); const handleAddFields = () => { const values = [...formField..
-
다양한 파일 확장자 파일 미리보기 지원하기React.js, Next.js 2023. 4. 5. 21:25
목차 들어가며 text, image, pdf, video 대응하기 리팩터링 with ChatGPT 들어가며 실무에서 폼 양식을 작성할 때, 다양한 타입의 파일을 지원하게 됩니다. 아쉽게도 우리는 단순히 객체로만 파일을 가지고 있는 것이 아닌, UX를 위해 파일의 미리 보기를 요구받을 수 있습니다. 따라서 이번에는 다양한 확장자 파일에 대하여 미리 보기를 지원하는 방법 및 로직을 알아봅니다. text, image, pdf, video 대응하기 import React, { useState } from 'react'; const Test = () => { const [text, setText] = useState(''); const handleFileInputChange = (event: React.Chang..
-
input image 미리보기 구현하기React.js, Next.js 2023. 3. 31. 23:15
Prerequisites useRef typescript FileReader Object Code import React, { useRef } from 'react'; const Test3 = () => { const imgRef = useRef(null); const readImage = (e: React.ChangeEvent) => { if (!e.target.files?.length) return; const imageFile = e.target.files[0]; const reader = new FileReader(); reader.addEventListener('load', (e: ProgressEvent) => { if (!e || !e.target) return; if (typeof e.ta..