alex im

dispatch, store, action.. 뭔가 많아 보이고 복잡해보여서 그렇지 정말 기초는 간단한 것 같다. 1. action은 이벤트를 설명하는 이름인 타입을 가지고 있는 "객체" 이고 2. dispatch(action) 을 호출하면 (dispatch는 이벤트 트리거라고 할 수 있다.) 3. reducer에 이전 state와 action이 담겨 실행되면서 action의 타입과 맞는 부분이 실행되고 새로운 state를 내뱉는다. 그리고 store는 dispatch, getState, subscribe 메서드가 담겨있는 객체일 뿐이다. 오늘 다른 사람의 코드를 봤을 때 내가 공부했던 것과 달라보여서 너무 혼란스러웠는데 알고보니 thunk 미들웨어 때문이었다. (action 생성자 함수가 type만을 ..

Given the head of a linked list, return the node where the cycle begins. If there is no cycle, return null. There is a cycle in a linked list if there is some node in the list that can be reached again by continuously following the next pointer. Internally, pos is used to denote the index of the node that tail's next pointer is connected to (0-indexed). It is -1 if there is no cycle. Note that p..

Given head, the head of a linked list, determine if the linked list has a cycle in it. There is a cycle in a linked list if there is some node in the list that can be reached again by continuously following the next pointer. Internally, pos is used to denote the index of the node that tail's next pointer is connected to. Note that pos is not passed as a parameter. Return true if there is a cycle..

MyLinkedList() Initializes the MyLinkedList object. int get(int index) Get the value of the indexth node in the linked list. If the index is invalid, return -1. 인덱스가 맞지 않으면 -1을 리턴 void addAtHead(int val) Add a node of value val before the first element of the linked list. After the insertion, the new node will be the first node of the linked list. void addAtTail(int val) Append a node of value v..

웹팩은 js, jsx, css 등 파일들을 모아 하나의 JS파일로 만들어준다. creat-react-app 으로 react 프로젝트를 시작하게 되면 따로 자동으로 webpack 환경 셋팅이 된다. 리액트에서 컴포넌트가 담긴 파일(js, jsx....)들을 모아 하나의 파일처럼 사용할 수 있는 이유가 webpack에 있다. 📗 Webpack Entry, Output Webpack에서 제일 중요한 2가지가 바로 Entry와 Output이다. Entry point - 모든 의존 객체들이 모인 웹팩의 시작점을 정의한다. Output - 빌드 과정에서 어느 곳에 js파일과 정적 파일들을 모을지 정의한다. 📗 creat-react-app 하지 않고 react 시작하기 1. root 폴더에서 npm init (pac..

삭제하기 버튼 옆에 수정하기 버튼을 만들고 일기를 수정할 수 있게 만들어보자. 1. 수정하기 버튼 만들기 2. isEdit이라는 state를 만들어 버튼을 클릭했을 때 true가 되고 수정할 수 있는 칸이 나오게 해보자 const [isEdit, setIsEdit] = useState(false) const toggleIsEdit = () => setIsEdit(!isEdit); toggleIsEdit을 만들어 isEdit을 반전시키는 토글 함수를 만들고 버튼에 onClick 이벤트에 toggleIsEdit을 넣어주자. {isEdit ? ( ) : {content}} 수정하기 삭제하기 일기가 들어가는 content부분에 삼항연산자를 사용하여 isEdit이 true일 때는 textarea가 뜨고 false..

1. App.js에서 onDelete 함수를 만든다. 2. prop으로 DiaryList에 전달해준다. const onDelete = (targetId) => { const newDiaryList = data.filter((it) => it.id !== targetId) setData(newDiaryList) } return ( ); 3. DiaryList에서 DiaryItem으로 onDelete 함수를 전달해준다. 4. DiaryItem에서 삭제 버튼을 만들고 onClick 이벤트 안에 prop으로 받은 onDelete를 넣어 id를 전달시켜준다. { console.log(id) if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) { onDelete(id); } }} ..

리액트에서는 같은 레벨의 컴포넌트에서는 데이터를 주고 받는 게 불가능하다. 리액트에서는 데이터는 위에서 아래로 단방향으로 흐른다. 이벤트는 아래에서 위로 올라갈 수 있다. 같은 레벨에서 데이터를 주고 받기 위해서는 같은 state를 공통 부모로 끌어올려서 사용할 수 있다. 현재 상황 DiaryEditor와 DiaryList는 현재 같은 레벨에 있다. DiaryEditor에서 일기를 작성하면 DiaryList에서 그걸 받아서 일기 리스트 화면에 보여주려고 한다. 이 두 컴포넌트가 데이터를 공유하려면 같은 state를 공통 부모로 삼아 prop으로 내려 받아서 공유할 수 있다. App에서 공통 부모로 삼을 data state를 만들어주고 새로운 일기를 만들 onCreate함수를 만들었다. onCreate는 ..

일기 리스트에 일기 저장한 리스트가 뜨도록 만들기 먼저 App.js에 테스트를 위해 dummyList를 만들어보자. import './App.css'; import DiaryEditor from "./DiaryEditor" import DiaryList from "./DiaryList" const dummyList = [ { id: 1, author: "임", content: "hi", emotion: 5, create_date: new Date().getTime(), }, { id: 2, author: "박", content: "hi2", emotion: 2, create_date: new Date().getTime(), }, { id: 3, author: "최", content: "hi3", emot..

https://ko.reactjs.org/docs/hooks-reference.html#useref useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. MutableRefObject는 HTML DOM 요소에 접근할 수 있게 하는 기능을 한다. input에 ref={authorInput} 을 넣어주고 onChange 함수인 handleSubmit에서 authorInput.current.focus() 를 넣어주게 되면 저 조건을 만족시켰을 경우 input에 focus가 생기게 된다.