typescript 사용해보기커스텀 hook 만들어서 사용해보기render hooks 패턴 적용해보기 기능은 동일하지만 UI가 다른 형태의 컴포넌트가 5개 있다고 가정해보자. 이러한 경우 useTodo로 커스텀 hook을 만들어서 사용하면 로직 재사용이 가능하다.

useEffect에 대해서 다시 생각해보기useEffect에서 의존성배열의 역할setState는 동기적일까 비동기적일까useEffect에서 여러 상태를 변경해야하는경우 이를 동기적으로 처리하는 방법< 이슈 >필터링 기능이 완성 되지 않은 상태 → 필터링 기능 개선

1. 이미지 슬라이드 2. 이미지 슬라이드 구현하는 방법 이전, 다음 버튼 클릭으로 이미지를 이동할 수 있어야한다. 이미지 하단의 버튼을 클릭하면 순서도에 일치하는 이미지를 확인 할 수 있어야한다. 이미지 슬라이드가 일정 시간마다 자동으로 변경되도록 하고, 일시정

사용자 시나리오 형태로 작성 예시) ooo하면 ~ 한다.\[] 추가(+) 버튼을 클릭하면 카드 정보 등록 화면으로 이동한다.\[] 보유카드가 존재하면 화면에서 확인할 수 있다.\[] 카드 정보(카드 번호, 만료일, 카드 소유자 이름, 보안코드, 카드비밀번호)를 입력하

생활코딩 자바스크립트 강의를 보고 궁금한 내용에 대하여 간략하게 정리하려고 한다.

전체 컨테이너 태그안에 아홉개 item 태그가 있다. display : grid 속성 활용해보기 전체 컨테이너에 넣어주었주도록 한다. 그리드 사용시 % 단위보다 fr단위를 사용을 권장 colum은 열 | | | row는 행 ㅡ ㅡ ㅡ ![](https://i

자식 엘리먼트가 float로 배치를 했으면 부모 엘리먼트 끝나는 시점에 clear를 해주어야 한다. (이유: 부모 엘리먼트가 정상적으로 높이를 확보하도록)예전에는 아래와 같이 html에 clear 코드를 추가해주었음!더 세련된 방법으로 아래와 같이 가상 엘리먼트 aft

참고 자료: Eric Meyer’s “Reset CSS” 2.0

출처 : 1분 코딩 YouTube

이번에는 라이브러리 없이 무한 스크롤 구현을 해보겠습니다.

2012년 마이크로소프트에서 발표한 타입스크립트(TypeScript)는 자바스크립트(Javascript)에 타입을 부여한 프로그래밍 언어입니다.

로딩 컴포넌트는 사용자 경험에 있어 필수적으로 개발되어야하는 컴포넌트로 이번에는 spinner 스탕일로 만들어 보겠습니다.emotion keyframes을 사용해서 css만으로 로딩중인 상태를 나타내도록 만들어 보았습니다.

리액트 로딩 컴포넌트 bubble 버전으로 만들어 보겠습니다. emotion keyframes을 사용해서 css만으로 로딩중인 상태를 나타내도록 만들어 보았습니다.

웹 서버를 띄워서 실제 서버에 요청하는 형태로 리팩터링한다.fetch api 사용하는 부분을 async await을 사용하여 구현한다.서버 통신에서 실패하는 부분에 대해 예외처리를 진행한다.중복되는 메뉴는 추가할 수 없다.서버에 카테고리에 따라 새로운 메뉴가 추가될 수

[바닐라 자바스크립트] 요구사항 분석 구현 연습 두 번째 미션 카페의 메뉴판 여러개 만들기 step 2. 요구사항 구현을 위한 전략 TODO TODO TODO step 2 과정에서 배운 내용 및 회고 1.

메뉴의 이름을 입력 받고 엔터키 입력으로 추가한다.메뉴의 이름을 입력 받고 확인 버튼을 누르면 메뉴가 추가된다.메뉴가 추가되고 나면, input은 빈 값으로 초기화한다사용자 입력값이 빈 값이라면 추가되지 않는다.총 메뉴 갯수를 count하여 상단에 보여준다. (TODO

비동기 처리 Async-Await

🐜 Mine 애플리케이션 프로젝트 - 로그인 기능 구현 코드숨에서 배운 것을 기반으로 프로젝트에 적용해보겠습니다. 이번에는 로그인 기능을 구현해보려고 합니다.

자바스크립트로 웹 통신을 하는 코드를 작성하려면 비동기 실행을 다루어야 한다. 비동기 처리를 하기 위해서는 Promise 객체와 async/await 구문 등에 대한 이해가 필수적이다.들어가기전에 동기 실행과 비동기 실행의 의미에 대해 이해하고 Promise 객체에 대