짧은코딩

처음으로 js를 통해 무언가 만들어봤다. 아직 초라하지만 이 강의와 챌린지를 기반으로 리엑트를 공부하는 등 탄력을 받고 있다. 다음엔 노마드 코더님 리엑트 영상을 보고 챌린지도 통과하는 것이 목표다.

App 컴포넌트에는 굉장히 많은 상태들이 존재한다. -상태 변화 처리 함수 onCreate: 데이터 생성 onEdit: 데이터 수정 onRemove: 데이터 삭제 이 3개의 상태 변화 로직이 있다. 함수들 안에 data가 많다. 이렇게 컴포넌트의 코드가 길어지고 무거워 지는 것은 좋지 않다. => 따라서 복잡하고 긴 상태 변화 로직을 컴포넌트 밖으로 분리해야한다. useReducer const [state, dispatch] = useReducer(reducer, initialState); 이렇게 있으면 왼쪽 첫번째 인자는 state이다. 그리고 두번째 인자는 상태를 변환시키는 엑션을 발생시키는 함수이다. 오른쪽 첫번째 인자에는 reducer가 있어야한다. dispatch에서 일어난 상태 변화를 redu..

이진 탐색은 리스트 내에서 데이터를 매우 빠르게 탐색하는 알고리즘이다. 순차 탐색 순차 탐색이란 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 차례대로 확인하는 방법이다. 보통 정렬되지 않은 리스트에서 데이터를 찾아야 할 때 사용한다. 리스트 내에 데이터가 아무리 많아도 시간만 충분하면 원하는 원소를 찾을 수 있다. 순차 탐색은 이름처럼 순차적으로 데이터를 탐색한다는 의미이다. 리스트의 데이터에 하나씩 방문하여 검사하여 구현도 간단하다. for문 한번으로 구현할 수 있어서 최악의 경우 시간 복잡도는 O(N)이다. 이진 탐색(반으로 쪼개면서 탐색하기) 이진 탐색은 데이터가 정렬되어 있어야지만 사용 가능하다. 이진 탐색은 범위를 절반씩 좁혀가며 탐색하는 특징이 있다. 이진 탐색은 시..

이전까지 한 최적화를 해도 모든 최적화가 되진 않는다. 특히 심각한 것은 댓글을 삭제하면 다른 댓글도 리렌더링된다. -DiaryItem.js import React, { useEffect, useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { useEffect(() => { console.log(`${id}번 째 아이템 렌더!`); }); // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIs..

-DiaryEditor.js import React, { useEffect, useRef, useState } from "react"; const DiaryEditor = ({ onCreate }) => { useEffect(() => { console.log("DiaryEditor 렌더"); }); const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }..

-처음에 생각한 풀이 처음엔 max, min 메소드를 이용하면 될 것이라고 생각했지만 이거로는 충분하지 않았다. -풀이 n, k = map(int, input().split()) a = list(map(int, input().split())) b = list(map(int, input().split())) a.sort() #오름차순 b.sort(reverse=True) #내림차순 for i in range(k): if a[i] < b[i]: a[i], b[i] = b[i], a[i] else: break print(sum(a)) a를 오름차순, b를 내림차순으로 입력 받는다. 그리고 k만큼 반복하면서 비교한다. 만약 a가 b보다 작으면 두 집합의 원소를 바꾼다. a가 b보다 같거나 커지면 반복문을 종료한..

App에서 state로 count, text가 있다. 그리고 자식 컴포넌트에 CountView는 count를 받고 TextView는 text를 받는다고 한다. 그럼 count가 변경되었을 때, 모두 자식도 모두 리렌더 된다. 하지만 TextView는 리렌더 될 필요가 없다. => 자식 컴포넌트에게 업데이트 조건으로 각각 count와 text가 변경될 때만 업데이트 되도록 조건을 걸면된다. 이것을 할 수 있는 것이 React.memo이다. -리엑트 공식 문서 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 이 사이트를 잘..

-깃허브 https://github.com/5hyun/youtube-site GitHub - 5hyun/youtube-site Contribute to 5hyun/youtube-site development by creating an account on GitHub. github.com -깃허브로 연결한 사이트 https://5hyun.github.io/youtube-site/ Youtube Mobile subscribe 5hyun.github.io -코드를 만들 때 헷갈린점 1. 우선 드림 코딩님 처럼 색이나 여백 사이즈, 글자 크기 등을 지정하고 하는게 편한 것을 확실히 알았다. 2. 버튼에 대한 코드가 헷갈렸다. button, button:focus { border: none; cursor: poi..

Memoization 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억했던 데이터를 반환 시키게 하는 방법 -Memoization이 리엑트의 어떤 부분에 적용되어야 하는지 App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { cons..

React developer tools 리엑트 개발시에 생산성을 굉장히 늘려준다. 이것은 크롬의 확장 도구이다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 이 사이트에서 다운 설정 -> 도구 더보기 -> 확장 프로그램 -> 세부 정보 그리고 설정을 켜준다. 그 후 npm start를 하면 오른쪽 상..