# todo list

23개의 포스트

공부해야 할 것들

공부해야 할 것들 (22.06.12 이전부터 밀린 것들)

2022년 6월 12일
·
0개의 댓글
post-thumbnail

[to do list] FAKE API 구축

Json server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리로 REST API 서버의 기본적인 기능을 대부분 갖추고 있습니다. json server 는 실제 프로덕션에서는 사용되지 않으며, 주로 테스트나 프로토타입 용으로 사용을 합니다.http&

2022년 2월 25일
·
0개의 댓글

[Vanilla js] To Do List(할 일 수정기능) (이벤트 버블링)

To Do List에서 입력된 할 일을 수정버튼을 이용해 수정하는 코드 구현할 일의 수정 버튼을 누르면 prompt창이 뜸prompt 인터페이스에서 할 일을 입력받고, 확인버튼을 누르면 할 일이 수정됨이벤트 버블링은 HTML의 특성으로 생기는 현상부모를 클릭했을 때,

2021년 12월 11일
·
0개의 댓글

[Vanilla js] To Do List (할 일 추가기능)

To Do List에서 할 일을 입력하여 추가하는 코드부분 코드(1) querySelector() querySelector는 HTML을 태그를 선택한다.(제일 처음에 있는 태그를 선택함) ex document.querySelector('선택자') HTML태그를 변

2021년 12월 11일
·
0개의 댓글
post-thumbnail

[Todo-List] 5. 컴포넌트 성능 개선 (2)

앞서 컴포넌트의 성능을 개선하기 위해 했던 과정들은 [Todo-List] 4. 컴포넌트 성능 개선 (1)를 참고하면 된다. 1. onToggle, onRemove 함수 바뀌지 않게 하기 1.1 useReducer 사용하기 useState의 함수형 업데이트를 사용하는

2021년 10월 7일
·
0개의 댓글
post-thumbnail

[Todo-List] 4. 컴포넌트 성능 개선 (1)

Todo-List 프로젝트는 소규모 프로젝트라서 추가되어 있는 데이터가 매우 적기 때문에 속도나 성능 측면에서 문제가 없을 수 있다. 👉 하지만, 데이터가 무수히 많아진다면? 🤦‍♂️ 바로 느려지는 것을 체감할 수 있을 것이다. 이번에는 임의적으로 랙(lag)을

2021년 10월 6일
·
0개의 댓글
post-thumbnail

[Todo-List] 3. 기능 구현

앞서 생성한 컴포넌트들이 실제로 작성할 수 있도록 기능을 구현해보자. 1. App에서 todos 상태 사용하기 Todo-List 프로젝트는App 컴포넌트에서 나중에 추가할 일정 항목에 대한 모든 상태들을 관리한다. src/App.js 파일을 아래의 코드로 수정하였다.

2021년 10월 5일
·
0개의 댓글
post-thumbnail

[Todo-List] 2. 컴포넌트 생성

* 프로젝트를 시작하기 전 컴포넌트 구성은 [Todo-List] 1. 프로젝트 구성을 참고하면 된다. 1. UI 구성 ✍ 컴포넌트는 src 디렉터리에 components 디렉터리를 생성하여 저장했다. Todo-List 프로젝트는 기능을 구현하기 전 UI를 먼저 구현하

2021년 10월 3일
·
0개의 댓글
post-thumbnail

[Todo-List] 1. 프로젝트 구성

지금까지 리액트를 공부하면서 기본기 부터 스타일링 까지 살펴보았는데, 계속 이론만 공부하는 것 보다 간단한 토이 프로젝트를 해보고 싶었다. 왜냐하면, 계속 일반적인 실습 보다는 실제로 하나라도 구현 하면서 놓쳤던 기본기를 잡아보고 싶었기 때문에.❗❗ 그래서 리액트를

2021년 10월 3일
·
0개의 댓글
post-thumbnail

바닐라 자바스크립트를 이용한 Todo List 만들기 - 2

위와 같이 스타일링을 하게 되면 아래와 같이 렌더링된다.그러면 임시로 적어놓은 hey를 지우고 실제 입력한대로 나타나게 해보자.간단하다. newTodo.innerText = todoInput.value;로 수정해주면 된다.그런데 Todo List를 입력하고 나서 입력창

2021년 6월 16일
·
0개의 댓글
post-thumbnail

바닐라 자바스크립트를 이용한 Todo List 만들기 - 1

바닐라 자바스크립트를 이용한 Todo List 첫번째

2021년 6월 16일
·
0개의 댓글
post-thumbnail

찍어먹는 NestJS - CRUD without DB

기본적인 CRUD를 작성해 보겠다.원래라면 DB연동을 해야하지만 DB연동은 다음 포스팅에서 진행하고이번 글에서는 내부 데이터를 사용해 만들어 보겠다.먼저 비즈니스 로직부터 작성해보겠다.nest cli를 통해 service를 생성하고 해당 이름을 todo로 정했다.그럼

2021년 4월 25일
·
0개의 댓글
post-thumbnail

찍어먹는 NestJS - 초기설정

NestJS의 기본적인 사용방법을 Todo list를 만들며 정리해보겠다.NestJS는 CLI를 통해 프로젝트 초기 설정 및 기본적인 Controller, Provider, Module를 만들어준다.아래의 명령어를 통해 nestjs cli를 설치하자.그 후 다음과 같은

2021년 4월 18일
·
1개의 댓글
post-thumbnail

[React] TODO LIST

React - Todo List

2021년 4월 18일
·
6개의 댓글
post-thumbnail

[Vue.js] 백엔드지만... ToDoList를 만들었다!

Brandi internship을 진행하다 보니 vue.js가 필요한 상황이었다.그래서 열심히 책도 읽고 강의도 찾아보면서 todo list를 만들어 보였다.vue.jscomponent로 만들어 사용props, event 이용데이터를 올리고 내리고 하는 기능을 이용해봄

2021년 3월 21일
·
0개의 댓글
post-thumbnail

🧩 Expo로 Today's ToDoList 만들기(6)- 완성!

드디어 완성!아직도 모르는 부분에 대해서 좀 건너뛰고 더 쉬운방법으로 작업했기 때문에많이 부족하긴 하지만...기능 구현 연습삼아서 작업한 첫 프로젝트를 끝냈다.전체적인 기능들에 대해서 오류가 없나 이것저것 확인해보고우선은 완성한 모습들에 대해서는 동영상을 추가해두어야지

2020년 8월 11일
·
0개의 댓글
post-thumbnail

🧩 Expo로 Today's ToDoList 만들기(4)- 삭제기능 구현

이전 포스팅인 '추가기능 구현'에 비해서 삭제기능은 비교적 코드양이 많지 않다. 상태관리에 대한 내용까지 들어가다 보니 추가기능에 대한 글이 길었지만, 바탕이 다 잡혀있는 상황에서 삭제기능은 정말 손쉬웠다. 할 일 삭제 기능🗑 기존 예제들에 나와있는, 휴지통 모양의

2020년 8월 11일
·
0개의 댓글