profile
꾸준히 학습하는 프론트엔드 개발자입니다!
post-thumbnail

[FEConf] 디자인 시스템, 형태를 넘어서

디자인 시스템을 확장성 있게 설계하지 않았을 때 생기는 문제 여러가지 옵션 중에 하나의 값을 선택하는 Select 컴포넌트입니다. 하지만 이러한 기능은 아래 그림처럼 다양한 형태로 표현될 수 있죠. 형태 여기서 말하는 형태란 무엇일까요? 형태는 컴포넌트의 생김새

약 21시간 전
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 서스펜스와 에러바운더리

컴포넌트 렌더링을 먼저 시작하고, useEffect 혹은 ComponentDidMountemddm 생명주기 메서드를 활용해서 비동기 처리하는 방식직관적이고, 간편하게 사용할 수 있다.현재는 fetch가 한 개밖에 없지만, 여러 데이터를 받는 경우 데이터 상태에 따른 여

4일 전
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] React Hooks

2018년 React Conf에서 처음 소개되어 React v16.8에 도입된 기술함수형 컴포넌트에서 state 관리와 Life cycle을 다룰 수 있게 해주는 기술useState()useEffect()useMemo()useContext()useCallback()us

4일 전
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 리액트 렌더링 최적화

리액트에서의 렌더링이란? 브라우저 렌더링 HTML을 파싱해서 DOM을 만들고 CSS를 파싱해서 CSSOM을 만들고 DOM과 CSSOM을 활용해 Render Tree를 만들고 Layout과 Paint 과정을 거쳐서 화면에 웹사이트가 렌더링됩니다. 리액트에서의 렌더링

5일 전
·
0개의 댓글
·

[10분 테코톡] React 18

useTransition 블로킹 렌더링 문제 한 번 렌더링 연산이 시작되면 멈출 수 없음 대형 화면 업데이트의 경우 렌더링 되는 동안 페이지 지연이 발생 input창에 입력한 value의 길이에 비례해서 파란색 박스가 계속 출력되는 예시 입렵값이 별로 없다면 문제가

6일 전
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 프론트엔드에서 컴포넌트

마무리 Reference [10분 테코톡] 호프의 프론트엔드에서 컴포넌트

6일 전
·
0개의 댓글
·

[10분 테코톡] 제어 컴포넌트와 비제어 컴포넌트

Form Tag Elements , , value Attribute를 통해 값에 접근 Value Attribute Value Attribute를 통해서 사용자가 입력한 값을 가져올 수 있다. 사용자가 입력한 값이 Value Attribute에 저장된다 Valu

6일 전
·
0개의 댓글
·

[10분 테코톡] 커링

커링이란 N개의 파라미터를 받는 함수를 N개의 단항함수(하나의 파라미터만 받는 함수)로 나누는 것기존 함수의 파라미터를 하나씩 체인 형태로 호출하도록 만든다.커링 함수 curridAdd의 첫 번째 인수로 1을 넣어 호출하여 반환된 함수 addWithOne은 클로저가 된

7일 전
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] History API

history 글로벌 오브젝트를 이용브라우저의 세션 히스토리에 대한 접근과 조작 기능을 제공브라우저를 사용할 때 뒤로가기와 앞으로가기 버튼이 있습니다. 이것을 우클릭하면 이전에 방문했던 기록들이 나옵니다.이게 세션 히스토리입니다.history.length: 세션 히스토

7일 전
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 웹 표준과 웹 접근성

어떤 운영체제나 브라우저에서든 동일한 콘텐츠를 볼 수 있도록 웹페이지를 만들 때 지켜야하는 규칙다양한 브라우저의 등장으로 과도한 경쟁이 나타나고 해당 브라우저에서만 사용 가능한 기능이 나타나기 시작했습니다.이러한 현상은 여러 브라우저를 지원해야 하는 개발자에게 많은 피

7일 전
·
0개의 댓글
·

[10분 테코톡] 모듈 번들러와 빌드 도구

빌드에 필요한 여러가지 과정을 자동화하는 도구현대의 모듈 번들러들은 빌드 도구의 역할까지 수행하고 있습니다.의존성이 있는 여러개의 JS파일을 하나의 JS파일로 합쳐주는 도구번들러 설정에 따라서 CSS나 이미지 파일 같은 것도 같이 취급할 수 있습니다.초기 모듈은 HTM

7일 전
·
0개의 댓글
·

[10분 테코톡] Babel

구형 브라우저나 환경에서 ES6+ 문법을 사용하기 위해 이전 버전의 자바스크립트 문법으로 변환해주는 도구브라우저들은 ES6를 지원하기 위해서 약 1년에서 2년정도의 기간이 걸렸습니다.그렇다면 웹 개발자들은 이 기간동안 ES6 문법들을 사용하지 못했을까요?그렇지 않습니다

7일 전
·
0개의 댓글
·

[10분 테코톡] 번들 사이즈 최적화

초창기 웹 페이지는 정적인 HTML 문서로 이루어져 있었습니다. (사용자의 입력에 따라 변하는 동적인 특성이 거의 없었습니다.)자바스크립트의 등장으로 인해 웹 페이지는 더 동적인 특성을 가질 수 있게 되었습니다. (사용자의 입력에 따라 변하는 UI)이후 앵귤러, 리액트

2023년 11월 29일
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 상태관리 패턴과 반응형 프로그래밍

"반응형 프로그래밍은 데이터 스트림과 변경 사항의 전파에 관한 선언형 프로그래밍 패러다임이다." 간단한 예시를 들어보자면?그렇다면 앞서 나왔던 표현들에 대해서 간단한 설명을 해보겠습니다.실시간으로 발생하는 이벤트를 시간 순으로 나열한 것값(value) / 에러(erro

2023년 11월 29일
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 서버 컴포넌트

간단합니다! 컴포넌트가 서버에서 렌더링되면 서버 컴포넌트입니다.서버에서 렌더링된 컴포넌트는 클라이언트로 전달되어서 보이게됩니다.리렌더링 되지 않는다.서버 리소스에 접근 가능하다. (파일 시스템, 데이터베이스 등)자바스크립트 번들에 포함되지 않는다. => 제로 번들 사이

2023년 11월 29일
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 리액트 사이드 이펙트

마무리 Reference [10분 테코톡] 도담의 리액트 사이드 이펙트

2023년 11월 29일
·
0개의 댓글
·
post-thumbnail

[10분 테코톡] 리액트 컴포넌트 설계와 SOLID

소프트웨어 설계 5원칙소프트웨워 설계를 이해하기 쉽게 해주는 5가지 원칙단일한 동작만 가지도록 분리? => X사용자나 이해 관계자 등의 변경을 요청하는 사람들을 중심으로 책임을 분리한다.즉, SRP 원칙은 비즈니스 관점에서 책임을 분리하는 원칙으로 볼 수 있습니다.분리

2023년 11월 28일
·
0개의 댓글
·

[10분 테코톡] 컴포넌트 IoC패턴

API를 사용하는 이에게 내부적으로 어떻게 동작할지에 대한 권한을 부여하는 매커니즘컴포넌트를 사용하는 개발자에게 컴포넌트의 제어권을 넘겨줌필요한 상태를 정의하고, 로직을 구현하고, UI를 그린다음 로직과 연결을 하겠죠?그리고 해당 컴포넌트를 사용할 때는 필요한 opti

2023년 11월 28일
·
0개의 댓글
·

[10분 테코톡] 합성 컴포넌트 패턴

컴포넌트에서 다른 컴포넌트 담기children을 통해 컴포넌트 주입props를 통해 컴포넌트 주입합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다.단일 책임 원칙 => 관심사의 분리데이터 패칭, 에러 핸들링, 로딩에 대한 처리가 하나의 컴포넌트에서 일어난다

2023년 11월 28일
·
0개의 댓글
·

[Next 13] Data Fetching - Form 과 Mutations

Reference https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations

2023년 9월 6일
·
0개의 댓글
·