본문 바로가기

전체 글34

프론트엔드에서 아키텍처 바라보기 프론트엔드에서 아키텍처를 어떻게 바라보고 또한 어떻게 발전해 왔는가를 알아보겠습니다. 여러글들을 참고하여 작성하였고 계속해서 발전시켜 나가겠습니다. 일단 프론트엔드에서 바라보는 아키텍처를 논하기 전에 우선적으로 아키텍처 자체에 대해 한번 살펴보겠습니다. 영어 단어로 아키텍처는 "건축학" 이라는 뜻입니다. 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.
React 상태관리 라이브러리 1탄 (Redux) React 에는 많은 상태관리 라이브러리들이 있습니다. 그중에 가장 많이 사용하는 Redux를 먼저 정리해 보았습니다. Redux의 역사 MVC 패턴 Redux의 역사는 MVC 패턴에서 시작합니다. MVC 패턴에서 Cotroller는 Model에 정의된 데이터를 조회하거나 업데이트하는 역할을 하고, 변경된 Model의 데이터를 View에 반영해 줍니다. 또한 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View 와 Model은 데이터를 양방향으로 주고받는 형태입니다. 프로젝트의 규모가 커질수록 수많은 View와 Model들이 생겨났기 때문에 데이터가 어디로 흐르는지 파악하기 어렵다는 문제점이 있었습니다. 새 기능을 추가할때 마다 크고 작은 문제가 생겼고, 예상 할 수 없는 결과(Si.. 2022. 11. 21.
ESLint, Prettier 무엇이 다르고 어떻게 Setting 해야 할까? 'ESLint'는 자바스크립트 코드에서 발겨노디는 문제시되는 페턴들은 식별하기 위한 정적 코드 분석 도구입니다. 2013년에 니콜라스 C. 자카스의 의해 개발되었습니다. ESLint 의 규칙들은 구성이 가능하며, 사용자가 지정한 규칙들을 정의하고 로드 할 수 있습니다. 개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 여러가지 방법이 존재합니다. 예를 들자면 함수를 정의 할 때, function 키워드를 사용하여 할수도 있고 arrow function을 쓸 수도 있습니다. 또한 배열의 반복문을 사용할 때, for문을 사용할 수도 있지만, forEach, map 등 Array 내장 함수를 사용 할 수도 있습니다. 이러한 여러가지 방식들을 일관성있는 방식으로 구현할 수 있도록 도와주고 고쳐주는 것이.. 2022. 10. 13.
반응형

티스토리툴바