Goggle IO 2022 - State Of CSS , CSS의 미래를 알려드림. feat. 구글 I/O 영상을 참고하여 작성한 글입니다.

thunk 란? > Thunk 란? 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것 예를 들어 주어진 파라미터에 1을 더하는 작업이 있다면 addOne() 이라는 작업을 1초 뒤에 실행할 수 있도록 addOneThunk 라는 함수로 감쌌는데 이

User 의 정보가 redux store 에서 state 로 관리되고 있을 때, 수정 사항이 발생한 경우 DB 의 정보를 수정함은 물론 redux store 의 state 도 변경되어야 한다. useEffect 내부에서 axios 를 통해 서버에 정보를 전달하고, state 를 업데이트 해야한다면 Component 의 useEffect 내부에서 axio...

1. AWS S3 란 > AWS Simple Storage Service(S3) 데이터를 버킷 내의 객체로 저장하는 객체 스토리지 서비스 웹 사이트 및 모바일 애플리케이션 등에서 원하는 양의 데이터를 저장하고 보호할 수 있다. 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공한다. 버킷 > AWS S3 에 저장된 객체에 대한 ...

벨로그의 설정 페이지를 보면, 위 이미지와 같이 썸네일 이미지, 이미지 업로드 버튼 / 이미지 제거 버튼이 있다. 이처럼 클라이언트 앱에서 이미지 업로드 버튼을 클릭해 이미지를 선택하고, 서버를 통해 클라우드 스토리지(오브젝트 스토리지)에 이미지 파일을 업로드해

1. Update package.json, dependencies react-scripts , react-router-dom 제거 (react, react-dom 은 유지) next 설치 script 에 next 관련 명령어 추가 next dev : localhost

0. CSR/SSR 1) 전통적인 Web Framework Browser 에서 Server 로 요청을 보낸다. Server 는 해당 요청을 분석해 이에 맞는 HTML 응답을 내려준다. 2) CSR 페이지 새로고침 최소화, 더 빠른 응답성을 위해 등장 React.js

다크/라이트모드 별 스타일 정의 다크/라이트 모드 별 스타일 정의하기 ThemeVariables 라는 type 으로 lightThemeVariables, darkThemeVariables 2개의 객체를 만들었다. 이 객체를 가공하여 css variable 을 만들고 컴포넌트에서 참조할 수 있는 구조로 만들 것이다. 먼저 css variable 로 만들...

TypeScript, React, Emotion.js 환경에서 다크 모드 구현하기

React.js, Emotion.js, Typescript 환경에서 Theme 설정하기

HomeTab Component 구현 구조 HomeTabLeftAreaBox HomeTabLink 2개, TimeFrameDropdownButton 1개로 구성 HomeTabLink * 설치 * npm i -D react-icon 를 통해 react-icon pa

이벤트 루프

Blocking / Non Blocking & Sync/ Async

React Router 는 라우터의 상태에 액세스하고 구성 요소 내부에서 탐색을 수행할 수 있는 Hooks를 제공한다.withRouter HOC 를 사용해야 match, location, history 객체에 접근할 수 있었던 기존 방식을 대체하는 데에 좋은 hooks

Server 에 Parameter 전송하기 client 에서 요청 횟수 (lodePostCount) 라는 변수를 url 경로에 담아 Node.js 기반 Server에서 데이터 15개씩 가져오기 req.params API를 이용해 loadPostCount 라는 파라

TypeScript Interface 에 대해 알아보자.

IntersectionObserver API 를 사용하여 무한 스크롤 기능을 구현해보자!

반응형 웹을 위한 기술 중 하나인 미디어 쿼리에 대해 알아보자.

문자열 리터럴과 숫자 리터럴을 타입으로 정의할 수 있다.enum 키워드를 사용해 정의. 열거형 타입의 각 원소는 값 또는 타입으로 사용 가능 열거형 타입은 객체로 존재하며, 각 원소는 이름과 값이 양방향으로 매핑된다.단, 열거형 타입의 값으로 문자열을 할당하는 경우 단

React 로 구성한 클라이언트 환경에서, 서버와의 통신을 통해 데이터를 받아오기 위해서 fetch 또는 axios 를 사용합니다. 이 글은 각 방법에 대해 알아보고 제 프로젝트에 적용시킨 결과를 정리한 글입니다. 1. axios? fetch? 2) Why axi