프론트

babel은 javascript로 결과물을 만들어주는 컴파일러이다.

React는 CSR(Client Side Rendering)가 가능한 SPA(Single Page Application)이다.

Redux의 미들웨어 역할. 비동기 처리를 쉽게 하기 위해 사용한다.

상태의 중앙 관리를 위한 상태 관리 도구이다.

React란??

React는 Component 기반의 View를 중심으로한 라이브러리이다. 그래서 React는 Component의 생성부터 소멸에 이르는 Life-Cycle을 가지고있다.

React는 배열이나 객체를 업데이트 할 경우 직접 수정하는것이 아니라 불변성을 지키면서 업데이트 해주어야한다. immer는 React에서 불변성을 유지하는 코드를 쉽게 해주는 라이브러리이다.

동적 라우팅

Data fetch할때 사용하는 swr 모듈??

React의 디자인 패턴 중 하나

React에서 props를 체크하기 위한 라이브러리

create-react-app 프로젝트이름 으로 React를 빠르게 작업할 수 있는 패키지를 설치했다. 구성들을 확인해보자.

Next, TypeScript, styled-components, prettier 앱을 생성해보자.

빌드된 파일을 트리맵 형식으로 종류와 크기를 한눈에 보여준다.

Next에서 swr을 사용하는 경우 pre-Rendering 하는 방법을 알아보자.

Tailwind와 Emotion의 장점만 가져와보자.

조건부 렌더링으로 기기에 대한 처리를 해보자. 그리고 Next 환경에서 발생하는 문제점에 대해 알아보고 해결해보자.

useEffect와 useLayoutEffect의 차이를 알아보고 next.js환경에서 무슨일이 일어나는지 확인해보자.

CSR과 SS에 대해 알아보고 Hydrate에 대한 개념을 살펴보자. 그리고 React 18에서 추가된 Suspense의 강력한 기능과 Hydrate를 알아보자.

구글에서 무료로 제공하고 있는 웹분석 서비스이다. vercel을 이용하여 키 값을 관리하는 방법과 Production, Development 에서 GA를 따로 사용하는 방법을 알아보자.

Recoil을 이용하여 쉽게 상태관리 해보자. atom과 selector의 차이에 대해서도 알아보자.

Redux를 적용하려다 Redux ToolKit을 적용하게 되었다.

Client State와 Server State를 따로 관리하는 React Query를 완전 정복해보자!

CRA없이 React18환경으로 프로젝트를 셋팅해보자. tsconfig와 webpack을 활용하여 절대 경로도 설정해줄 것이다.

React 환경에서 D3를 사용해보고, 반응형으로 차트의 크기를 설정해보자.

현재 보여지는 페이지를 Image로 출력해보고, PDF로도 출력해보자.

카테고리마다 체크박스가 2개씩 있다고 가정하자. 복수 선택이 불가능하도록 설계하고, 체크한 아이템들을 마지막에 form onSubmit 할 때 넘겨주도록 구현하자.

TypeScript 환경에서 객체(objcet)를 키(key)와 값(value)를 이용하여 동적으로 생성하는 방법을 알아보자.

프론트엔드 개발자가 Class기반 객체지향 프로그래밍에 쉽게 다가갈 수 있도록 TypeScript를 이용하여 설명하는 글이다.

프론트엔드 프로젝트를 설계하다 보면, 마우스로 드래그 하거나 모바일로 터치한 값이 필요한 경우가 있다. 캐러셀을 예시로 드래그 이벤트에 대해 알아보자.

자세가 동일한 마네킹이 다른 옷만 입고 있다. 이런 경우에는 마네킹을 찍어내는 공장을 만들고 옷만 다르게 입히자.

input 하나만 핸들링 해도 모두 리랜더링 되는 현상을 react-hook-form으로 해결해보자

항상 기능을 구현하다 보면 React에서 동작하던 기능이, pre-rendering을 수행하는 Next.js에서는 에러를 발생시킬 수 있다.

무한 스크롤 구현과 최적화를 위해 display none을 사용하면 브라우저의 렌더링 동작 방식에서 어떤 문제점이 있는지 알아보자.

이제 API 없어서 통신 로직 못짠다고 빌빌대지 말자!!

공식문서의 내용을 모두 읽어보기 위해 React Study를 시작해보려고 한다.

기본이 되는 Hello world를 출력하며 JSX에 대해 알아보자.

저번 시간에 React 엘리먼트에 대해서 알아보았다. 이번에는 엘리먼트 렌더링과 Component와 Props란 무엇인가에 대해 알아보자.

간단하게 라이프사이클과 State에 대해 알아보자.

React에서 이벤트 처리 방법과 조건에 맞게 렌더링하는 방법을 알아보자.

React의 새로운 공식문서 Beta가 공개되었다. 번역이 가능한 단계가 되었는지 사람을 모집하는 GitHub을 보았다.

Form, 제어 컴포넌트, 다중 입력 제어

둘다 꾸준하게 공부해야지..!

코드로 알아보는 Vue의 라이프 사이클

styled-components는 CSS파일을 밖에두지 않고, 컴포넌트 내부에 넣기 때문에, CSS가 전역으로 중첩되지 않도록 만들어주는 장점이 있다. React 프레임워크를 주요 대상으로 한 라이브러리이다.

중국에서 개발한 디자인 개발을 위한 프레임워크이다.완성도 높은 UI 프레임워크이다.

직역을 하자면 의미론적 HTML이다. 문서의 의미에 맞게, 어플리케이션의 의미에 맞게 HTML을 작성하는것을 의미한다.

Responsive Web Design PC, 모바일, 태블릿 등 각각의 기기별로 웹 페이지가 최적화되어 보여지는 기능이다.

CSS box model은 기본적으로 모든 HTML 요소를 감싸는 상자다. margin, border, padding, content로 구성된다.

Sass는 햄튼 캐틀린이 설계하고 나탈리 바이첸바움이 개발한 스타일시트 언어이다. 효율적인 CSS 설계와 유지보수를 위해 사용한다.

font-face를 이용하면 하나의 font-fmaily 이름으로 한글과 영문에 다른 폰트를 적용할 수 있다..?! 심지어 폰트 굵기마다 다른 폰트도 가능하다.

앞만 보고 달려가는 주니어 개발자들이 놓치는 것

이미지를 출력하는 방법 중 좋은 방법?

서비스 커지면, 드래곤볼로도 힘들다.

마이크로 프론트엔드.. 직접 부딪혀보니 쉽지않다.

동료 개발자가 쉽게 사용할 수 있는 컴포넌트를 만드는 것은 중요하다.

enum의 특징에 대해서도 간단하게 알아보자.