본문 바로가기

[Study] 개발 공부48

[React-redux] ToDo List 로컬스토리지로 관리하기 노마드코더 react-redux 강의 챌린지 중 하나인 state를 로컬스토리지로 관리하기강의: https://nomadcoders.co/redux-for-beginners   초보자를 위한 리덕스 101 – 노마드 코더 Nomad CodersVanilla JS, Redux, Reactnomadcoders.co 먼저 기존 코드 중 store.js의 일부이다.여길 고쳐서 state를 localStorage로 관리하여 새로고침해도 state가 초기화되지 않도록 바꿔보자!redux-persist를 사용해도 되는데, 기존 프로젝트에서 recoil-persist를 사용한 적이 있고 직접 코드를 짜보는 김에 사용하지 않았다const reducer = (state = [], action) => { switch (a.. 2025. 2. 5.
[Study] CORS 1. CORS란,Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 부릅니다. CORS는 SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다.  여기서 SOP란, Same Origin Policy의 약자로 동일 출처 정책을 의미합니다. SOP는 현재 출처와 동일한 출처(Origin)의 리소스만 접근할 수 있도록 하는 정책입니다.  출처(Origin)은 Protocol + Host(Domain) + Port로 구성되며 모두 같은 경우가 동일 출처가 됩니다.이 세 가지 중 하나라도 다르면 다른 출처(Origin)으로 간주되어 CORS 에러가 발생합니다. 애플리케이션의 요구 사항이 복잡해지면서, 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문.. 2025. 1. 10.
sort를 사용한 특수 조건 우선 정렬 sort 사용법 관련해서 공부가 필요해서 정리 목표: Post의 특정 조건(예: 북마크)을 가장 우선적으로 비교하고, 그 후 시간 비교(최신순)를 수행한다. 북마크가  최우선 정렬되어야 하며, 북마크끼리도 시간순 정렬이 되어야한다.  Q1: new Date에서 getTime()을 해야하는 이유?A1: new Date는 Date 객체로만 바꿔줄 뿐이고 비교는 불가. getTime()을 사용하면 날짜를 숫자 값으로 변환하여, 두 날짜의 차이를 정확하게 비교할 수 있다.type Post = { id: number; title: string; upload_date: string; // 날짜는 ISO 8601 형식의 문자열 bookmark: boolean; // 북마크 여부};// 예제 데이터const p.. 2025. 1. 3.
dataset 사용하여 todoList 삭제 구현 let todoList = [];function addTodo() { // 여기에 기능을 구현하세요. const newTodoInputEl = document.getElementById("newTodo"); todoList.push(newTodoInputEl.value); renderTodos();}function deleteTodo(index) { // 여기에 기능을 구현하세요. todoList.splice(index,1); renderTodos();}function renderTodos() { // 여기에 기능을 구현하세요. const todoUlEl = document.getElementById("todoList"); todoUlEl.innerHTML= ""; todoUlEl.i.. 2024. 12. 27.

티스토리툴바