공부블로그

원래 Hot Reloading은 Next.js에서 제공하는 기능인데, 다시 프로젝트를 열고 실행하니까 반영이 안돼서 한참 찾아봤다. 해결방법 : 위에 답변 처럼 .next 폴더를 지우고 npm run dev하니까 잘 반영된다~! 이유는....찾으면 다시 오겠다...

list.map( )은 프론트엔드 하면서 제일 많이 쓰는 구문아닐까 싶다. { list.map((value, index) => ) } 보통 이런 식으로 코드를 작성해서 list안의 각 값에 따라 컴포넌트를 쫘악 펼쳐주는 역할을 하는데 개념자체를 혼동해버렸다... 에서 수정 모드로 변경하게 되면 전체 배열이 수정모드로 변경된다고 생각하고 수정모드로 변경된 아이템을 찾아서 따로 적용해줘야된다고 착각하고 있었다. 은 배열의 요소 중 오직 하나의 아이템이고 하나의 값만 넘어오기 때문에 내가 수정버튼을 누르면 내가 누른 그 컴포넌트만 변경되는 것이다!!! 그래서 다시 정리한다... map()은 뭘까? 보다시피 map은 배열 내에 모든 요소에 대해 주어진 함수를 실행하고 결과를 모아서 '새로운 배열'을 '반환'한다..

이거땜에 ㄹㅇ 하루종일 삽질을 해버렷다... todo list에서 분명 항목을 삭제했는데 수정하려고 클릭하면 계속 다른 값이 나오는 문제였다....왜냐면 코드가 이랫기 때문... //props로 받은 todoItem const Item = ({ todoItem, index } : Props) => { ... const [updateText, setUpdateText] = useState(todoItem.title) console.log('todoItem,title : ',todoItem.title ) console.log('updateText : ',updateText) } 변경된 todoItem이 전혀 반영되지 않는다 props를 useState에 할당하면 안되는 이유 useState는 최초 한번만 호..

기본 사용법 useSelector는 리덕스 스토어의 상태를 조회하는 Hook이다. import { useSelector } from 'react-redux'; //RootState 중에 내가 가져오고 싶은 todo를 가져온다. const todoList = useSelector((state: RootState) => state.todo) //또는 useSelector안에서 원하는 형식으로 바꿔서 리턴할 수도 있다. const list = useSelector((state: RootState) => { const { todo } = state return Array.from(todo.todo.values()) }) 기본적으로, useSelector를 사용해서 리덕스 스토어의 상태를 조회 할 땐 만약 상태가..

1. window에서 제공하는 window.confirm기능 사용 const onClickConfirm = () => { if(window.confirm('삭제하시겠습니까?')){ alert('ok') }else{ alert('cancel') } } 장점 : 진짜 간단하다 단점 : 커스텀이 안된다 (내가 알기로는) = 이쁘지가 않다 2. createPortal로 모달창 구현하기 portal = 컴포넌트를 부모 컴포넌트 바깥에 렌더링해주는 것 1. public / index.html 에 Modal이 렌더링 될 위치 심어주기 //modal의 부모 컴포넌트 portal을 구현할 tree의 부모 컴포넌트를 어디로 설정할지 정하는 것 따로 만들어도 되고 나는 그냥 'root'에 구현할거라서 코드를 수정하지는 않았..

await / async → promise의 동작을 동기스럽게 사용할 수 있게 한다 = "비동기(를) 처리" 1. then( )에서 응답 기다리고 return const getData = () =>{ // 1. return axios.get('https://api.binance.com/api/v3/ticker/24hr') // 응답 성공 시, response에 접근 가능 .then((response) => { return response.data }) // 2. let response = axios.get('https://api.binance.com/api/v3/ticker/24hr') return response.then(response => response.data ) } // getData 함수가 ..

1. 원하는 이미지를 다운받고, 이미지가 있는 경로에서 불러와서 import import trash from './icons/trash.png'; import modify from './icons/pencil.png' 2. styled component 로 버튼을 만든다. 기존의 스타일을 없애기 위해 background와 border속성을 none으로 설정 const DeleteBtn = styled.button` background: none; border: none; cursor: pointer; ` const ModifyBtn = styled.button` background: none; border: none; cursor: pointer; ` 3. 만들어 놓은 버튼 안에 img태그를 넣어주고 s..

( GitBook을 보고 정리한 내용입니다 ) 타입 기본 내장 타입 (in Javascript) number string boolean symbol null undefined object + 다른 중요한 타입 unknown 최상위 타입. never 하위 타입. 객체 리터럴 예, { property: Type } void 리턴 타입으로 사용하기 위해 의도된 undefined 의 서브타입. T[ ] 수정가능한 배열들, 또한 Array 으로 사용가능 [ T , T ] 요소의 타입과 개수가 고정, 수정 가능한 튜플 ( t : T ) => U 함수 Enum (열거) : 0부터 시작하여 멤버들의 번호를 매긴다. enum Color {Red, Green, Blue} let c: Color = Color.Green; ..