본문 바로가기

프론트엔드28

[리액트] 제어 컴포넌트, 비제어 컴포넌트 기술 면접에서 질문 받은 내용, 별로 중요하다고 생각 하지 않던 부분이라 기억이 안났는데, 이게 의미 있는 것 같기도 해서 간단히 정리 해본다. 제어 컴포넌트와 비제어 컴포넌트의 차이 리액트에서 비제어 컴포넌트 와 제어 컴포넌트의 차이는 리액트 라이브러리에서 Form 구현시 어디서 데이터를 다룰지에 따라 달라진다. 제어 컴포넌트의 경우 리액트 컴포넌트(리액트)에서 데이터를 핸들링하고, 비제어 컴포넌트의 경우 기존처럼 DOM객체에서 데이터를 핸들링한다. 가장 핵심적인 차이는 이것이고 사실 이걸 통해서 모든걸 설명 가능하다. 제어 컴포넌트 제어 컴포넌트의 경우 리액트 컴포넌트 자체의 state를 갱신하는 방식으로 동작하기 때문에 폼의 데이터가 항상 최신상태를 유지한다. 다만 그로 인해서 리렌더링이 계속 되고.. 2021. 10. 28.
[프론트엔드] ajax & axios 개인적으로 늘 잘하는 시니어 개발자가 없는 환경에서 홀로 모든 걸 주도적으로 판단하고 처리 해온 입장에서 학습과 평가를 위해서 코딩 테스트, 과제 테스트 등의 기회가 있을 때마다 주기적으로 참여해왔다. 과제 테스트의 경우 검색이 허용 되는 경우가 대부분이지만 레퍼런스를 제외하고는 검색을 제한하는 방식으로 (모르는 게 있거나 기억나지 않으면 그냥 0에서부터 구현하기) 주로 참가해왔는데 이번 프로그래머스 데브 매칭의 경우 바닐라 js로 기본적인 dom제어와 클라이언트 라우팅 그리고 ajax를 아예 처음부터 만들어야 했다. 그 과정에서 ajax를 통해서 fetch로 기본적인 api형태를 만들다가 엄청 헤매면서 시간을 허비하게(대략 20분) 되는데 평소 ajax의 경우 axios를 통해서 처리하다 보니 fetc.. 2021. 9. 16.
펫링크 마이그레이션 후기 펫링크 마이퍼피 펫링크 관련 설명. 인수인계 및 리팩토링시 참고해서 진행바랍니다. 기술 구성 해당 프로젝트는 기존의 PHP 코드 이그나이트, 부트스트랩, 제이쿼리 기반, 멀티페이지 어플리케이션을 리액트로 마이그레이션 진행한 프로젝트입니다. 프로젝트 환경 설정 과정에서 개인적으로 작성한 웹팩 템플릿을 사용했습니다. 적용된 기술스택: React, TypeScript, Axios, Redux, Redux-saga, Bootstrap(react), C3, React-hook-form, React-quill, React-select, React-tooltip, Signature_pad, Styled-components, React-circular-progressbar, React-daumpost-hook, Web.. 2021. 7. 8.
프론트엔드 설계 및 디자인 패턴 프론트엔드를 혼자 공부하고 개발하면서 개인적으로 효율적이라고 생각하고 만든 구조중 하나입니다. CSR 기준으로 되어 있습니다. # 리액트 & 웹팩 설정 ### 루트 1. root - 패키지 매니저, 깃, 웹팩, 기타 플러그인 설정이 위치한다. 2. build - 웹팩 세부 설정 & 플로그인등 셋팅이 존재한다. 3. public - 정적파일 보통 index.html이 존재한다. 4. src - 개발한 모든 소스가 존재한다. 5. dist - 웹팩을 통해서 빌드된 프로덕트 소스가 존재한다. 6. etc - types, .storybook 등 폴더가 선택적으로 존재한다. ### SRC 1. assets - 정적 리소스, img나 웹폰트등이 존재한다. 경우에 따라서 css나 js 파일도 있을 수 있다. 2. c.. 2021. 6. 28.

티스토리툴바