봉보로봉봉

✅ 과제 1. 첫번째 페이지 Figma를 참고하여 UI를 구현하고 카테고리별로 키보드 테마를 보여준다. 각 테마를 눌렀을 때, 두번째 화면으로 이동한다. 반응형으로 구현한다. 2. 두번째 페이지 Figma를 참고하여 UI를 구현하고 상세페이지를 보여준다. 라이브테마가 있을 때는 라이브테마를 보여준다. 뒤로가기를 눌렀을 때 첫번째 페이지로 이동한다. 반응형으로 구현한다. 3. 세번째 페이지 (선택사항) 두번째 페이지 최상단의 테마 프리뷰 이미지를 클릭했을 때 키보드를 체험할 수 있도록 UI를 구현한다. 지우기 버튼을 눌렀을 때 한글 음소가 하나만 지워져야 한다. (예 : 안녕 -> 안녀) shift를 눌렀을 때 쌍자음을 사용할 수 있도록 한다. 🗓 진행 기간 및 팀원 - 2022.10.04 ~ 2022.1..

Recoil는 React를 위한 상태 관리 라이브러리다. 따라서 Recoil를 사용하기 위해서는 React가 설치되어 있어야 한다. 리코일 설치 npm install recoil // or npm install recoil --save RecoilRoot recoil state를 사용하려면 어딘가의 부모 컴포넌트에서 RecoilRoot로 감싸주어야한다. import { RecoilRoot } from 'recoil'; function App() { return ( ); } Atom atom은 전역 상태라고 보면 된다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포..

이번에 프로젝트를 진행하면서 Recoil을 이용해서 상태관리를 했는데 recoilState를 변경하려고 하는데 변경은 안되고 자꾸 온갖 에러만 바뀌어 가면서 발생했다. TypeError: Cannot add property 0, object is not extensible. TypeError: can't delete non-configurable array element. 이거 말고도 2개 정도 더 떴던 것 같은데 자꾸 에러가 바뀌니까 원인을 알 수가 없었다. 이유 기존 state 자체를 변경하려고 해서 그랬다. 기존 state의 복사본을 변경했어야 했는데 기존 state를 변경하도록 코드를 작성해서 에러가 났던 거였다. 코드를 왜 그렇게 작성했는지 모르겠지만 불변성을 지켜줘야하는 걸 잊지 말자!😀 참고

부모 컴포넌트에서 자식 컴포넌트의 state를 조작해야하는 상황이 생겼는데 나의 경우에는 ref를 여러개의 자식 컴포넌트에 달아서 조작하려고 했다. 그런데 ref는 current로만 접근할 수 있어서 마지막 하나의 자식 컴포넌트의 함수만 실행할 수 있었다. 한번에 여러개를 조작하려고 하시는 분은 참고하시길..! 부모 컴포넌트에서 자식 컴포넌트 state 조작하기 useRef를 사용해서 부모 컴포넌트에서 자식 컴포넌트를 조작할 수 있다. 먼저 부모 컴포넌트에서 ref를 선언해서 자식 컴포넌트로 넘겨준다. import { useRef } from 'react'; import Child from './Child'; import styled from 'styled-components'; const Parents..

오늘부터 구름 먼데이 챌린지를 시작했다! 😀 readline을 이용해본 적이 별로 없는데 on을 쓰는 형식이랑 달라서 기록해두고 매번 풀 때마다 이용하려고 한다. 코드가 틀렸을 수도 있는데 풀어가며 고치려고 한다. 한 줄 입력받기 const solution = (data) => { console.log(data); }; const readline = require('readline'); (async () => { let rl = readline.createInterface({ input: process.stdin }); let data = []; for await (const line of rl) { data.push(line); rl.close(); } solution(data) process.exit..

✨프로젝트 소개 여기어때 모티프 프로젝트 사이트 선정 이유 이전 프로젝트로 다들 이커머스를 진행해 새로운 유형의 사이트를 하고 싶어 선정하게 되었다. FRONT 프로젝트 목표 Styled-components, Axios, Recoil, React-datepicker 등 새로운 기술을 사용해 본다. 이전에 해본 적 없는 기능을 맡아서 구현해 본다. 진행 기간 2022.09.19 - 09.30 (2주) GitHub repo 프론트 백 ✨사용된 기술 JavaScript React Styled-components Recoil Git, GitHub props drilling이 심각하게 발생하거나, 파일이 많아지면 state가 어디서 관리되고 있는지 알기 어려운 문제를 해결하고자 상태 관리 라이브러리를 사용하기로 ..

input 체크박스를 클릭하면 onClick이벤트가 2번 발생하는 이유 input checkbox를 커스텀해서 체크박스를 구현했다. 체크박스를 선택하면 해당 체크박스에 해당하는 쿼리스트링이 쿼리스트링을 관리하는 배열에 들어가는데 한 번 클릭했는데 2번씩 들어갔다. React.StrictMode 때문인가 싶어서 없애고 클릭해봐도 계속해서 2번 들어갔다. ... el.name === text)[0].checked} readOnly /> {text} ... 대략적인 구조는 이렇게 되는데 자꾸 onClick 이벤트가 2번 발생했다. 검색을 해봐도 strict 모드를 때문이다라고 나와서 결국 영어로 검색하다가 왜 그런지 이유를 찾았다. 영어를 못해도 영어 검색을 생활화하자...🥲 label태그와 input태그는 ..

git config 리스트 확인하기 git config --list git config 목록 세팅하기 // git config --global 설정하려는키 설정하려는값 git config --global core.ignorecase false git config 목록 지우기 // git config --global --unset 지우려는항목 git config --global --unset core.excludesfile git config 목록 전체 수정하기 git config --global --edit