스터디 로그

왜 리덕스 등 상태관리 툴을 사용해야 하는가?에 대한 대답은 코딩애플님 영상을 참고! https://youtu.be/QZcYz2NrDIs 오늘은 기본 세팅부터 count를 하는 기본 예제를 만들어봅니다. https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 설명은 Dave Gray님의 영상을 바탕으로 합니다. 몇 개월 전 영상이라 최신 버전과 다소 상이한 부분이 있을 수 있습니다. https://youtu.be/u3KlatzB7GM 기본 세팅 1) 프로젝트를 만들고 redux를 설치합니다. npm install @reduxjs/toolkit ..

Study with me 2023. 2. 9. 16:09

local storage를 사용해 새로 입력하는 데이터들이 클라이언트 브라우저에 저장되고, 그 저장된 데이터를 가져와 화면에 리스트로 표현하는 작업을 했습니다. 추가로 데이터를 좀 더 넣어 그럴듯하게 만들어보겠습니다. 이미 리스트 화면상에 있지만 ㅎㅎ 삭제 버튼도 만들고, 이제 함수를 만듭시다. // Post.js const PostItem = ({ handleClick, contents, handleDelete }) => { return ( {contents.length > 0 ? ( contents.map((content, index) => ( handleClick(content)}> {content.title} {content.visitedAt} Del )) ) : ( 콘텐츠가 없습니다. )} );..

Study with me 2023. 1. 2. 18:04

모달창으로 작성한 데이터가 리스트 화면에 뜬다고 해서 끝이 아닙니다. 현 단계에서 새로고침을 하면 화면에 리스트 아이템이 사라지니까요. 데이터를 저장하는데에는 서버나 클라우드를 사용해도 되겠지만, 클라이언트 단, 그러니까 브라우저상에 저장할 수 있는 웹 스토리지(local storage, session storage) 중 localStorage를 사용해 이전의 mock데이터를 옮겨주고, 새로 추가하는 데이터 또한 새로고침해도 보여지도록 하겠습니다. 우선 초기 데이터 세팅을 합니다. const initialPostData = localStorage.getItem("contents") ? JSON.parse(localStorage.getItem("contents")) : []; 그리고 이 초기 데이터를 co..

Study with me 2023. 1. 2. 15:17

이번에는 새로운 object data를 추가해 list 화면에 보여주고자 합니다. 주의할 점은 1. input 하나만이 아니라, 여러 input이 들어간 object 형식 2. 지난번과 마찬가지로 추가하는 정보를 담은 양식을 컴포넌트화할 것이기 때문에 props 전달 3. 그리고 저장 버튼을 눌렀을 때 list 화면에 보여줌 4. 이 때에 기존 array에 push하는 것이 아니라, useState를 통해 기존 data array를 유지 입니다. 일단 컴포넌트부터 제작 ㄱㄱ const NewPostForm = () => { return ( 새 맛집 추가하기 저장 ); }; 아참 css는 emotion을 사용하고 있습니다. 적당히 맘대로 이쁘게 만듭시다. input에 있는 name과 value는 원래 ar..

Study with me 2022. 12. 29. 19:09

list item을 클릭하면 해당 item에 맞는 object정보를 담은 modal을 띄우고, 그 안에 정보들을 표시해보도록 합니다. JavaScript 기초 지식이 없어서 쩔쩔 해맸음ㅜㅜ 🤔 어디까지나 제가 대충 이해한 내용으로 정리했을 뿐, 정확하지 않습니다..! 우선 modal은 다른 컴포넌트로 분리합니다. function Modal() { return ( 제목 종류 ❌ 📌: 주소 📞: 전화번호 📆: 방문일 ); } Modal컴포넌트는 list들이 map()을 통해 나열되도록 만든 부분 아래에 두었습니다. return ( 블로그 남천동 맛집리스트 정렬변경 {contents.length > 0 ? ( contents.map((content, index) => ( {content.title} {cont..

Study with me 2022. 12. 28. 01:41

Object로 이루어진 Array를 map()을 사용하여 리스트를 만들었다. const posts = [ { id: 1, title: "마이웨이 린린", sort: "중식", address: "부산 수영구 수영로408번길 24-4", call: "", createdAt: "2022. 12. 22", }, { id: 2, title: "레브꽁뜨", sort: "카페", address: "부산 수영구 수영로408번길 32", call: "051-611-4127", createdAt: "2022. 12. 23", }, { id: 3, title: "덴푸라마켓", sort: "분식", address: "부산 수영구 수영로388번길 6", call: "051-622-1522", createdAt: "2022. 1..

Study with me 2022. 12. 26. 16:01

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 마지막으로 localStorage에 데이터를 저장해보겠습니다. 현재 만들고 있는 Todo List는 새로고침을 하면 할 일 아이템이 빈값으로 돌아갑니다. 작성한 데이터를 localStorage에 저장하여 새로고침해도 남아있도록 만들고자합니다. localStorage 사용법 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage** **읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 ..

Study with me 2022. 9. 7. 23:58

✔️ 해당 글은 John Ahn님의 인프런강좌 "따라하며 배우는 리액트 A-Z"를 들으며 작성합니다. 이번에는 할 일 아이템을 수정, 저장하는 기능을 생성하겠습니다. 각 할 일 아이템의 삭제 버튼 옆에 EDIT버튼을 만들고, 그 버튼을 클릭하면 할 일 아이템의 ui를 바꿔서 글 수정이 가능하게하고, EDIT버튼이 SAVE버튼이 되어 수정한 글을 저장할 수 있도록 만들고자합니다. 1️⃣ State 만들기 Item컴포넌트로 가서 State 두 개를 만듭니다. 하나는 글을 수정하는 State, 다른 하나는 수정이 완료된 글 State입니다. const [IsEditing, setIsEditing] = useState(false); const [editedTitle, setEditedTitle] = useSta..

Study with me 2022. 9. 7. 22:55