개발일기

1. useHistory란? useHistory는 리액트에서 URL주소를 변경할 때 사용하는 Hook이다. 예를 들어, 로그인 버튼 또는 여러 목록 중에서 하나를 선택하여 클릭했을 때, URL주소를 변경시켜 URL주소와 일치하는 Route의 컴포넌트를 렌더링하기 위해 사용한다. 리액트 특성상, URL변경없이 내부 컴포넌트만 변경시켜 화면을 바꿔줄 수 있다. 하지만 URL을 바꿔주면 현재 어느 페이지에 있는지 대략적으로 알 수 있고, 검색 쿼리가 추가된 URL을 공유할 때, 사용자가 페이지의 초기 단계부터 검색 쿼리를 추가할 때 까지 직접 하는 것이 아니라 URL주소만으로 페이지에서 결과값을 볼 수 있다. URL주소 변경없이 컴포넌트의 변경만으로 사용자가 웹 페이지를 이용할수 있지만, 복잡한 순서와 사용자..

Socket.io란?emit : 데이터를 보내는 함수이다. 클라이언트는 서버에게, 서버는 클라이언트에게 데이터를 보낸다.on : 데이터를 받는 함수이다. 클라이언트 서버로부터, 서버는 클라이언트로부터 데이터를 받는다.Socker.io를 사용하여 서버와 클라이언트 간에 데이터를 주고받는 결과를 확인하기 위해 간단하게 서버와 클라이언트를 생성하여 결과를 확인할 수 있다. 1. 서버 생성 1-0. package.json 생성npm init -yyarn init -y 1-1. Express 설치npm install expressyarn add express서버는 노드의 express를 사용하여 서버를 오픈할 것이다. 1-2. Socket.io 설치npm install socket.ioyarn add socke..

FontAwesome 아이콘을 사용하기 위해 i태그에 해당하는 아이콘 클래스이름을 넣은 후, 페이지를 실행하였을 때, 다음과 같은 에러가 발생하였다. React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node test i태그를 위와 같이 사용하였을 때, 에러가 발생하였다. 해결법 : div, span태그로 하위 태그를 감싸준다. test // span 또는 div 등의 다른 태그로 감싸주면 에러가 해결된다. test 위의 소스코드처럼 span태그 또는 div 태그로 해당 내용들을 감싸주면 에러가 해결된다. 노드 패키지 매니저로 FontAwesome 패키지를 설치..

https://stackoverflow.com/questions/65770449/react-onclick-not-working-in-any-of-my-browsers-but-for-colleagues-it-does React onClick not working in any of my browsers, but for colleagues it does I've created an onClick handler in a very simple React function component: export default function MyButton() { return ( { console.log('te... stackoverflow.com

1. Map이란? Map은 Key와 Value로 구성된 일종의 데이터타입이다. 맵을 사용할 때, Key와 Value에 값을 넣은 후, 키값에 따라 해당하는 값을 가져오는 방식으로 사용한다. 자바의 HashMap, 파이썬의 Dict와 같은 형식을 가지고 있다. 2. Map의 형식 Go에서 map을 생성할 때는, Slice를 생성할 때와 마찬가지로 make내장함수를 사용하여 생성한다. 맵이름 = make(map[키의 자료형]값의 자료형) testMap = make(map[string]int) // testMap이라는 맵에 키값의 자료형이 string이고 값의 자료형이 int로 비어있는 맵 생성 3. Map 생성 package main func main() { testMap := make(map[int]str..

리액트에서 컴포넌트가 리렌더링되는 조건은 상태값이 변경되었을 때 발생한다. 아래와 같은 세가지 경우에서 상태값 변경이 주로 일어나며 해당 컴포넌트의 변경된 상태 부분이 변화하는 것을 확인할 수 있다. 상태값이 변경되었을 때 (useState, Redux 등을 통한 상태값 변경시) props의 값이 변경되었을 때 상위 컴포넌트가 렌더링될 때 useState 변경 import React, { useState } from 'react'; const TestComp = () => { console.log('TestComp Component'); const [ test, setTest ] = useState(true); return ( setTest(!test) }>리렌더링 테스트 ) } export defaul..

useSelector는 리액트의 리덕스 스토어 관련 Hook중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우( 버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다. 1. useSelector 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux useSelector를 사용하기 위해서는 react-redux를 설치해야 한다. 2. useSelector 형식 import { useSelector } from 'react-redux'; const fruitList = us..

redux의 액션 생성함수를 실행하여 리덕스 스토어에 변경된 상태값을 저장하기 위해서는 useDispatch라는 리액트 훅을 사용하여 액션을 실행시켜야 한다. 1. useDispatch 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux react-redux에 useDispatch라는 객체가 속해있기에 설치해준다. 2. useDispatch 선언 import { useDispatch } from 'react-redux'; cosnt dispatch = useDispatch(); // dispatch로 재선언하여 사용한다. useDispatch객체를 dispatch로 재선언한 후, dispatch 변수를 활용하여 액션을 호출할 수 있다. ..