맨땅에 헤딩

프로젝트 소개 쇼핑목록을 관리하는 메모장이다. 👉 배포사이트 보러가기 👉 깃허브보러가기 🖥 제작기간: 2일 (2023.3.21-3.22) 제작인원: 1명 (개인프로젝트) 기술스택: React, styled-components 추가 라이브러리: uuid, react-icons 배포: Netlify 1. 기능 ✅ 추가하기(create) -useState() : useState를 통해서 state관리 -name: 2개의 input에 각각 들어오는 것을 name을 통해서 한번에 관리 - uuid: 새롭게 create되는 값들의 key에 uuid를 통해서 고유한 값들을 부여 ✅ 읽기 (read) 컴포넌트: 재사용성이 높은 것들을 component화하여 불러옴 map(): item리스트들을 일일이 적는것이 아닌,..

Netlify 배포를 하다가 컴파일 에러가 발생했다. 1. 에러메시지 에러메시지는 아래와 같다. Failed to compile. Module not found: Error: Can't resolve 'react-icons/fi' in '/opt/build/repo/src ➡️ 'react-icons/fi'를 찾지 못한다 2. 에러 원인 구글링결과 react-icon이 package.json에 존재하기 않아서라는 것을 알게 되었다. 실제로 들어가보니 package.json의 dependencies에 react-icons가 없었다. 3. 해결방법 터미널에서 yarn add react-icons 해준다 (react-icons 다시 설치해줌) package.json에 react-icons가 추가된 것이 보인다..

리액트로 crud를 또 만들어보고 있다. 이번에는 다 만들어서 배포까지 할 예정이다..!! 오늘은 기능위주로만 만들어서 디자인은 허접하다 ㅋㅋ 내일 디자인해서 배포해야지! crud를 너무 많이 만드는거 같기도 하지만, 기본이 중요하니까 ㅋㅋ 일단 배포를 한뒤에 나중에 다른 기능들도 더 추가할 생각이다 오늘은 프로그래머스 문제를 풀면서 filter()의 index를 이용하는법을 배웠다. 배열의 index를 돌면서 뭔가를 하고 싶었는데 이럴때 charAt()을 쓰려고 하니 너무 복잡한 코드가 완전 되었다. filter()의 index를 사용하니, 문제를 간단하게 해결할수가 있었다! 잘 기억해뒀다가 나중에 또 써야겠다. 또, 자바스크립트를 대문자와 소문자로 만들어주는 함수도 공부했다. 대문자: toUpperC..

어제 일기를 못쓰고 자서, 하루 늦게쓰는 밀린일기 ㅋㅋ 일기쓰는게 조금 귀찮기도 하지만 그래도 의무감으로라도 매일 쓰려고 하고 있다!! 프로그래머스도 매일 1문제씩 풀고 있는데 오늘 문제는 푸는데 50분 걸렸다😅 그래서 풀기는 풀었는데, 다른 사람 풀이를 보니까 훨씬 간단하더라 ㅋㅋ 그래도 문제에 접근한게 어디야라고 생각함! 이런것도 많이 풀어봐야 익숙해져서 점점 더 풀기가 쉬워지는것같다 이게 도움이 될까하는 생각이 들때도 있었지만, 풀다보니 지금은 믿는다 실제 기능을 구현하는데에도, 코드를 읽는 능력도 느는것같아서 꾸준히 할 예정이다. 다크모드나 로그인 상태 유지를 위해서, 로컬스토리지에 저장하는 법을 공부하였다. 로컬스토리지는 웹스토리지의 일종인데 새로고침이나 컴퓨터를 껐다가 켜도 데이터가 남아있다...

✔️ 로컬스토리지란? - web storage 객체 중 하나 (나머지하나는 sessionStorage) - 브라우저에 key-value를 저장 - 탭, 창 전체에서 공유됨 - 브라우저를 껐다 켜도 남아있음 - key, vlaue는 반드시 문자열!! 1. sessionStorage와의 비교 로컬스토리지는 web Storage의 일종이다. 브라우저에 저장하는 기능을 한다는 공통점이 있지만 차이점도 존재한다. webStorage에는 sessionStorage도 있는데, 둘의 가장 큰 차이점은 1️⃣저장범위와 2️⃣저장기간이다. 2. 사용이유 1️⃣ 서버로 전송되는 쿠키보다 더 많은 양의 자료 보관 (web Storage 객체는 네트워크 요청시 서버로 전송되지 않는다.) 2️⃣ 페이지 새로고침, 브라우저 다시 ..

전역적인 상태관리를 위해서 contextAPI와 useContext를 사용하였다. 필요없는 컴포넌트에까지 props drilling을 해줄때보다 가독성측면이나, 효율성, 유지보수 모두 뛰어나다. 하지만 필요한 페이지마다 import를 많이 해주는 나름의 단점(?)이 존재한다. 그래서 이것을 조금이라도 줄여보조자하는 방법을 적어보고자 한다. 어제 만들었던 다크모드의 리팩토링을 통해 useContext를 다른 방식으로도 사용해보겠다. //footer.js import React, { useContext } from "react"; import { ThemeContext } from "./ThemeContext"; export default function Footer() { const { isDark, se..

꾸준히 하고 있는 이론스터디!! 이론은 혼자서는 꾸준히 하기가 어려운데, 양을 정해서 팀원들이랑 주2회씩하니까 열심히 하게된다 😊 자바스크립트의 내용이 이제 거의 끝나서 다다음번부터는 리액트에 들어간다. 오늘 함께하던 팀원중 한명이 합격소식을 전했다, 더이상 같이 못한다는게 조금 아쉽지만 ㅋㅋ 그래도 나중에 다같이 만나서 치맥하기로 약속했다!! 나중에 꼭 다같이 만나요 ❤️ 항상 공부를 하다보면 발전하는게 눈에 안보여서 조급한 마음이 들때도 있는데 이렇게 한것들을 체크하고 돌아보니, 나름 꽤 많은 양들을 공부했더라!! 나중에 스터디에 대해서도 한번 정리해서 올려야겠다. 오늘은 프로그래머스를 풀다가 match()도 공부했는데, 확실히 함수도 많이 알수록 코드를 더 간단하게 짤수 있어서 좋다. 또 어제 co..

오늘은 useContext 훅을 사용해서 리액트로 다크모드를 구현해보았다. 사실 이걸 따로 만들어본 이유는, 정확히 이걸 어떻게 쓰고 왜 쓰는지 한번 따로 연습을 해보려고..!! 투두리스트를 만들어보다가 다크모드구현을 위해 useContext 훅을 써야했기 때문이다 ㅋㅋ 유저정보나 다크모드와 같이 전역적으로 관리해야 하는 정보들을 이 정보를 필요로 하지 않는 컴포넌트에게까지 props로 넘겨준다면, 코드도 지저분해지고, 유지보수도 어렵기 때문에 ContextAPI를 통해 관리하는 것이 좋다는 것을 공부하였다. 프로그래머스도 매일 한문제씩 풀고 있는데, 엄청 잘한다고 하기는 아직 어렵지만 ㅋㅋ 그래도 확실히 실력이 많이 성장한 것이 느껴져서 뿌듯하다. 특히 풀면서 자바스크립트의 내장함수들을 익힐 수 있어서..

1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. context는 앱안에서 전역적으로 사용되는 데이터들을 여러컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. ➡️ 일일이 props로 제공하지 않아도 상위컴포넌트에서 전역적인 정보를 해당 컴포넌트로 바로 제공할 수 있어서 편리 2️⃣ useContext 사용법 🔫 다크모드 만들어보기 🔫 1. contex이름.js 파일을 생성한다. 2. createContext를 impor..

오늘부터는 다시 투두리스트를 만들고 있다. CRUD 연습을 하도 해서, 기본적인 추가, 삭제, 수정같은 기능은 이제 나름 잘 만들 수 있는데 filter를 통해 Read되는 값에 변화를 주는 걸 만들다가 또 막히는 지점이 발생.. !! 😇🔫 답은 없다. 모르면 알때까지 하는것뿐!! 오늘은 체력적으로 뭔가 힘들어서 내일 와서 다시 만들어볼거다..!! 오늘은 input을 통해 추가하기를 하는 방법에 대해 블로그에 기록해보았다. 리액트 추가하기(Create)기능구현 /input 리셋 / 앞뒤빈칸제거 1. 기본추가하기 2. input 리셋시키기 3. 빈칸만입력 & 앞뒤빈칸 제거 ✅ 기본 추가하기 // TodoList.js const [todos, setTodos] = useState([ { id: "1", te..