본문 바로가기

전체 아티클133

리덕스(Redux) 그리고 RTK(Redux Tool Kit)의 등장 목차 · 리덕스(Redux) · 리덕스(Redux)를 왜 사용하고 있을까? · 리덕스(Redux)의 단점 · 리덕스(Redux)의 장점 · 너무 복잡한 Redux, RTK(React Tool Kit)의 등장? · 레퍼런스 리덕스(Redux) 먼저 리덕스는 Flux 아키텍쳐의 구현체로, 대형 MVC 어플리케이션에서 종종 나타나는 데이터 간 의존성 이슈, 즉 연쇄적인 갱신이 뒤얽혀 데이터의 흐름을 예측할 수 없게 만들었던 문제를 해결하기 위해서 고안이 되었다. 잘 알려진 사례 중 하나인 2014년 컨퍼런스에서 소개된 페이스북의 채팅 버그에서 읽지 않은 메세지 상태를 나타내는 카운트를 확인하고 사용자가 메세지를 확인해도 어느새 좀비처럼 카운트 숫자가 되살아나면서 사용자를 괴롭히던 버그가 있었다. 개발자가 버그.. 2023. 3. 8.
함수형 컴포넌트와 클래스 컴포넌트 리마인드 목차 · 왜 함수형 컴포넌트를 선호할까? · 컴포넌트 목적에 따른 종류 (컨테이너 컴포넌트, 프레젠테이셔널 컴포넌트) · 컴포넌트의 차이 (State, Props, 이벤트 핸들링) · Life Cycle 현재 리액트 공식문서에서는 함수형 컴포넌트와 훅(hook)을 함께 사용하는 것을 권장하고 있다. 왜 함수형 컴포넌트를 선호할까? 요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트 + Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에, 상대적으로 복잡한 UI 로직을 갖고 있는 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어.. 2023. 3. 5.
React JSX 개념에 대한 리마인드 목차 · JSX(JavaScript XML) · JSX 문법 · 자바스크립트 표현식 · 일반 조건문 대신 삼항연산자 사용 · React DOM은 HTML Attribute 이름 대신 Camel-case Property 명명 규칙을 사용한다. · JSX 내에서의 주석 사용 · 마치며 · 레퍼런스 JSX(JavaScript XML) · JavaScript에 XML을 추가해 확장한 문법이다. · JSX는 리액트로 프로젝트를 개발 할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. · 브라우저를 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. · JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다. · 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가.. 2023. 3. 5.
[독학 일대기] SSR을 위한 Next.js 학습 목차 · 모든 페이지는 _App 파일을 통한다. · 라우트 설정과 다이나믹 라우트 · 글로벌 CSS · _Document · PreFetching 해당 글은 계속해서 작성 중입니다 👏🏻 모든 페이지는 _App 파일을 통한다. · _App 컴포넌트에서 렌더링 하는 값은 모든 페이지에 영향을 준다. · 최초로 실행되는 컴포넌트는 _app.tsx이다. (타입 스크립트 사용 시 tsx, 아닐 경우 jsx) · _app.tsx는 클라이언트에서 띄우길 바라는 전체 컴포넌트이며, 공통 레이아웃임으로 최초 실행되며 내부에 컴포넌트들을 실행한다. · 내부에 컴포넌트가 있다면 전부 실행하고 html의 body를 구성 · Component와 pageProps를 받는다. 1. Component props는 요청한 페이지를 의.. 2023. 3. 4.
리크루팅을 위해 어플라이 사이트를 개발했다 목차 · 너무 형식적인 UI와 사용자 경험이 마음에 들지 않았다. · 내 집은 디스코드 · 처음 진행해본 프로젝트 QA · 잘 돌아가고 있다, 내가 만든 서비스가 · 다시 처음 개발했던 때로 돌아간다면 멋쟁이사자처럼 5기와 6기를 수료하고, 다시 11기를 시작했다. 군 입대와 동시에 7기 운영을 선배 누나가 진행을 해주셨고, 그 후에는 학교의 멋쟁이사자처럼이라는 단체가 사라졌다. 학교 생활보다 대외 활동을 더 재밌게 임할 수 있었던 나는, 사람들과의 네트워킹이 얼마나 중요한지를 알게되었고 교내 중심으로 활동을 하는 멋쟁이사자처럼 강남대학교라는 단체가 사라졌을 때 당시 군입대를 하고 있던 너무 아쉬웠다. 너무 형식적인 UI와 사용자 경험이 마음에 들지 않았다. 아는 동기형님이 멋쟁이사자처럼 11기를 다시 .. 2023. 3. 2.
[에러일지] React The href attribute requires a valid value to be accessible. 목차 · 원인 · 해결 방법 · 레퍼런스 React The href attribute requires a valid value to be accessible. ESLint를 적용하면서, 그 전에 뜨지 않던 태그에 관련된 에러가 뜨게 되었다. 아직은 하이퍼링크를 적용시키고 싶지는 않지만, 일단은 구현해두어야하는 코드기에 이럴 경우에는 어떻게 상황 대처를 해야하는지에 대해 의문이 들었다. 바로가기 // Vanilla 바로가기 // React 원인 The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href.. 2023. 3. 1.
[에러일지] ESLint - Function component is not a function declaration 목차 · 원인 · 함수 유형 구분 · 해결 방법 · 레퍼런스 Function component is not a function declaration eslint (react/function-component-definition) ESLint를 연결해주는 과정에서, 마주한 에러이다. 함수는 올바르게 작성을 했지만 ESLint 설정 과정에서 함수에 관련된 규칙을 빼먹은 것 같아 구글링을 진행하고 이에 따른 해결방법을 포스팅을 했다. 원인 리액트에서는 공식문서에서도 나왔듯이 클래스형 컴포넌트보다 요즘 많이 찾는 보통 함수형 컴포넌트를 사용한다. ESLint react/function-compoent-definition 규칙을 사용한다면, 이 함수형 컴포넌트를 어떤 함수 유형으로 사용할지 미리 정하고 rules.. 2023. 3. 1.
협업을 위한 eslint와 prettier 목차 · ESLint · Prettier · ESLint와 Prettier을 같이 왜 사용해요? · ESLint 설치 방법 · Prettier 설치 방법 · eslint formatting rules와 prettier의 충돌 · ESLint, Prettier 함께 사용해보기 · 레퍼런스 해당 글은 계속해서 업데이트 중 👏🏻 ESLint와 Prettier의 공통적인 특징은 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이다. 이는 협업에서 각 개발자 간의 코드 문법의 통일성을 유지시키고 규칙을 정해 보다 퀄리티 높은 코드를 작성할 수 있게 해주는데 아주 유용한 도구이다. ESLint 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. 대부분의 프로.. 2023. 2. 28.
프론트엔드 웹 성능 최적화 방법은 뭐가 있을까? 목차 · 성능 최적화 방법 · 렌더링 최적화 (CSS 최적화, unused css의 제거, 간결한 스타일 작성, HTML 최적화, 복잡한 DOM 트리 지양, 애니메이션 최적화, JS 최적화) · 로딩 최적화 (link와 script의 올바른 위치 지정, media 속성, Async / defer 사용) · 이미지 최적화 (Picture 태그, 이미지 지연 로딩, 스프라이트 이미지) · Webpack · Gzip · JS 압축 · CDN · 캐싱 프로젝트를 진행함에 있어 기능을 구현하면서, 점점 규모가 커짐에 따라 코드의 양과 컴포넌트의 단위들도 비례하는 것을 발견하였다. 그리고, 중간중간 성능 향상을 위해 나름대로 이미지 크기를 줄이거나, 압축을 하는 등의 노력을 했지만 이미지 최적화 이외에도 다른 다양.. 2023. 2. 27.

티스토리툴바