본문 바로가기

전체 글36

프론트엔드 개발자도 알면 좋은 Docker 도커 (Docker) 도커는 컨테이너 기반의 오픈소스 가상화 플랫폼입니다. 도커는 2013년 3월 산타클라라에서 열린 Pycon Conference에서 Solomon Hykes가 발표한 The future of Linux Containers라는 세션에서 처음 세상에 알려지게 되었고, 고(go)언어로 개발되고 있습니다. 컨테이너 기반이라고 했는데 무엇일까요? 컨테이너 (Container) 오늘날 컨테이너라고 하면 주로 선박 운송용 컨테이너를 지칭합니다. 선박 운송시 모든 선적물은 거대한 상자모양의 컨테이너를 통해 패키징 된 후 화물선에 선적됩니다. 컨테이너는 국제적으로 표준화, 규격화 된 크기를 가지고 있습니다. 그래서 컨테이너와 관련된 보관, 운송과 관련된 장비, 제도, 프로세스 등은 모두 국제 표준에 .. 2023. 7. 25.
Zod를 사용한 유효성 검증 Zod는 TypeScript를 주로 사용하는 스키마 선언 및 유효성 검사 라이브러리 중 하나입니다. 비슷한 걸로는 Yup, Joi 등의 라이브러리가 있습니다. Zod에서 "Schema(스키마)" 라고 하는 용어는 단순한 문자열부터 복잡하게 중청된 객체까지 모든 데이터 유형을 포괄적으로 나타내기 위해 사용됩니다. 라이브러리 설치 $ yarn add zod Zod 패키지에서 z 를 불러와 사용 할 수 있으며, z 하나로 Zod의 모든 기능을 활용할 수 있습니다. import { z } from "zod" 스키마 정의 Zod를 사용하기 위해서는 먼저 스키마를 정의해야 합니다. 예를 들어 이름, 나이, 나이공개여부로 이루어진 사용자 객체를 나타내는 스키마를 만들어보겠습니다. const User = z.objec.. 2023. 6. 19.
프론트엔드에서 아키텍처 바라보기 프론트엔드에서 아키텍처를 어떻게 바라보고 또한 어떻게 발전해 왔는가를 알아보겠습니다. 여러글들을 참고하여 작성하였고 계속해서 발전시켜 나가겠습니다. 일단 프론트엔드에서 바라보는 아키텍처를 논하기 전에 우선적으로 아키텍처 자체에 대해 한번 살펴보겠습니다. 영어 단어로 아키텍처는 "건축학" 이라는 뜻입니다. Wiki에서는 시스템 아키텍처를 "시스템 목적을 달성하기 위해 시스템의 상호작용들의 시스템디자인에 대한 제약 및 설계이다." 라고 정의하고 있습니다. 프론트엔드 아키텍처 프론트엔드에서도 아키텍처를 신경써야 하는 이유는 프론트엔드 프로젝트는 충분히 복잡하기 때문입니다. 복잡하다는 것은 개발자가 프론트엔드 프로그램을 봤을 때 인지적인 한계에 부딪히게 된다는 사실을 의미하고, 이 사실은 개발을 진행할때 뿐만 .. 2023. 5. 12.
React - ref, forwardRef 사용해 값 전달하기 ref React 에서 ref prop은 HTML Element에 직접 접근하기 위해 사용됩니다. 예를 들어, 아래 컴포넌트에서는 useRef 훅으로 생성한 inputRef 를 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체에 접근해서 current속성에 엘리먼트에 레퍼런스가 할당되고 이를 통해 handleFocus 이벤트 핸들러에서 엘리먼트의 focus 함수를 호출할 수 있습니다. const Form = () => { const inputRef = useRef(null) const handleFocus = () => { inputRef.current.focus() } return ( 인풋 포커스 ) } 자식 컴포넌트에 접근하기 그렇다면 부모컴포넌트에서 자식컴포넌트 내.. 2023. 2. 7.
TypeScript - 유틸리티 타입(Utility types) 사용 타입스크립트에서는 Type Transformation을 유연하게 도와 주는 여러 유틸리티 타입을 제공하고 있습니다. (TypeScript Utility Types) 그 중에 실무에서 유용한 몇가지 타입을 알아보겠습니다. 타입스크립트에서는 조건부 형식으로 타입을 정의 할 수 있습니다. T extends U ? X : Y 위와 같은 형태를 취하는데 조건식 결과에 따라 X가 될 수도 Y 가 될 수도 있습니다. 타입스크립트는 용도에 맞게 조건부 타입을 활용한 새로운 타입들을 미리 정의해두고 이것을 "Predefined conditional types" 라고 하며 그 중 하나가 Exculude 입니다. Exclude Exclude 타입은 2개의 제네릭 타입을 받을 수 있으며, 첫번재 제네릭 타입 T 중 두번째 제.. 2023. 1. 30.
Next.js 기초부터 알아보기 Next.js 는 React 라이브러리의 프레임워크 입니다. 장점 서버사이드 렌더링 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주면서, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO의 장점을 가질수 있습니다. pre-reloading은 SSR 뿐만 아니라 SSG(Static Site Generate - 정적 사이트 생성)도 가능하게 해줍니다. 또한 SSR 과 CSR도 혼합하여 사용 할 수 있습니다. SEO 문제 - 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보가 보이지 않습니다. 구글의 검색엔진의 경우 자바스트립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않.. 2023. 1. 10.
스토리북으로 개발하기 스토리북? 스토리북은 독자적인 UI 컴포넌트 개발을 위한 업계표준 컴포넌트 탐색기 입니다. 내부 개발자들을 위한 문서화(Documentations)에 사용할 수도 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있습니다. 장점 복잡한 로직 없이 독립적인 환경에서 컴포넌트를 개발을 할 수 있습니다. 재사용을 위한 컴포넌트 들을 Story 에서 조합해 테스트 할 수 있습니다. 컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화할 수 있습니다. 초기세팅 # Storybook 설치 npx storybook init # Storybook 실행 yarn storybook 폴더구조 크게 .storybook 폴더와 stories.. 2022. 12. 20.
Jest로 테스트코드 작성하기 테스트의 종류 단위테스트 단위 테스트는 응용 프로그램에서 테스트 가능한 가장 작은 소프트웨어를 실행하여 예상대로 동작하는지 확인 하는 테스트 단위테스트에서 테스트 대상 단위의 크기는 엄격하게 정해져 있지 않습니다. 하지만 일반적으로 클래스 또는 메소드 수준으로 정하여 테스트합니다. 단위의 크기가 작을 수록 복잡성이 낮아집니다. 따라서 단위 테스트를 활용하여 동작을 표현하기 더 쉬워집니다. 즉, 테스트 대상 단위의 크기를 작게 설정해서 단위 테스트를 최대한 간단하고 디버깅하기 쉽게 작성해야 합니다. 소프트웨어를 개발할 때, 소프트웨어 내부 구조나 구현 방법을 고려하여 개발자 관점에서 테스트합니다. 그러므로 단위 테스트는 소프트웨어 내부 코드에 관련한 지식을 반드시 알고 있어야 하는 화이트박스 테스트입니다... 2022. 12. 12.
Emotion의 배경지식 / 사용법 (CSS in JS) Emotion? Emotion은 JavaScript로 css 스타일을 작성하도록 설계된 라이브러리입니다. 본격적으로 Emotion에 대해 알아보기 이전에 간단히 다양한 웹 스타일링 기술을 알아보겠습니다. 다양한 웹 스타일링 기술 CSS CSS(Cascading Style Sheets)는 HTML 이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지 지정합니다. CSS의 문제점 - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 한다. - Dependencies: CSS간의 의존 관계를 관리 하기 힘들다 - Dead Code Elimi.. 2022. 12. 6.
React Query React Query는 React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화 하고 업데이트 하는 작업을 도와 주는 라이브러리 입니다. 장점 * 캐싱 * Boilerplate 코드의 감소 * get 한 데이터에 update 가 발생하면 자동으로 get을 다시 수행한다. * 동일 데이터 여러번 요청시 한번만 요청한다 (옵션에 따라 중복호출 허용 시간 조절 가능) * 데이터가 오래되었다고 판단하면 다시 get (invalidateQueries) * API 요청 수행을 위한 규격화된 방식 제공 사용 npx create-react-app my-app cd my-app yarn add react-query yarn && yarn start 세팅 // src/index.js import R.. 2022. 11. 28.
반응형

티스토리툴바