본문 바로가기

프론트엔드25

[리액트] 제어 컴포넌트, 비제어 컴포넌트 기술 면접에서 질문 받은 내용, 별로 중요하다고 생각 하지 않던 부분이라 기억이 안났는데, 이게 의미 있는 것 같기도 해서 간단히 정리 해본다. 제어 컴포넌트와 비제어 컴포넌트의 차이 리액트에서 비제어 컴포넌트 와 제어 컴포넌트의 차이는 리액트 라이브러리에서 Form 구현시 어디서 데이터를 다룰지에 따라 달라진다. 제어 컴포넌트의 경우 리액트 컴포넌트(리액트)에서 데이터를 핸들링하고, 비제어 컴포넌트의 경우 기존처럼 DOM객체에서 데이터를 핸들링한다. 가장 핵심적인 차이는 이것이고 사실 이걸 통해서 모든걸 설명 가능하다. 제어 컴포넌트 제어 컴포넌트의 경우 리액트 컴포넌트 자체의 state를 갱신하는 방식으로 동작하기 때문에 폼의 데이터가 항상 최신상태를 유지한다. 다만 그로 인해서 리렌더링이 계속 되고.. 2021. 10. 28.
[프론트엔드] ajax & axios 개인적으로 늘 잘하는 시니어 개발자가 없는 환경에서 홀로 모든 걸 주도적으로 판단하고 처리 해온 입장에서 학습과 평가를 위해서 코딩 테스트, 과제 테스트 등의 기회가 있을 때마다 주기적으로 참여해왔다. 과제 테스트의 경우 검색이 허용 되는 경우가 대부분이지만 레퍼런스를 제외하고는 검색을 제한하는 방식으로 (모르는 게 있거나 기억나지 않으면 그냥 0에서부터 구현하기) 주로 참가해왔는데 이번 프로그래머스 데브 매칭의 경우 바닐라 js로 기본적인 dom제어와 클라이언트 라우팅 그리고 ajax를 아예 처음부터 만들어야 했다. 그 과정에서 ajax를 통해서 fetch로 기본적인 api형태를 만들다가 엄청 헤매면서 시간을 허비하게(대략 20분) 되는데 평소 ajax의 경우 axios를 통해서 처리하다 보니 fetc.. 2021. 9. 16.
프론트엔드 관련 링크모음 1 https://medium.com/class101/%EC%97%94%ED%84%B0%ED%94%84%EB%9D%BC%EC%9D%B4%EC%A6%88-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-79eef2e30c77 엔터프라이즈 프론트엔드 애플리케이션 아키텍쳐 소프트웨어의 수명과 복잡도는 대개 비례 관계입니다. 아무리 정교하고 아름답게 코드를 작성해도, 시간이 지날수록 코드베이스는 복잡해지기 마련입니다. 그래서 우리는 이런 문제들을 마법 medium.com https://fe-developers.kakao.. 2021. 7. 12.
프론트엔드 설계 및 디자인 패턴 프론트엔드를 혼자 공부하고 개발하면서 개인적으로 효율적이라고 생각하고 만든 구조중 하나입니다. 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.

티스토리툴바