개발일기

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 변수를 활용하여 액션을 호출할 수 있다. ..

1. 리액트의 상태관리(props) 리액트에서 컴포넌트간의 상태관리를 위해 각 컴포넌트들의 상태값을 props로 넘겨 주고받는 방법으로 상태관리를 하였다. 프로젝트의 규모가 소규모라 나뉘어진 컴포넌트와 기능들이 적은 경우 props로 간단하게 상태관리를 할 수 있다. 하지만, 이와는 반대로 프로젝트의 규모가 커지는 경우 원하는 컴포넌트로 상태값들을 전달하려 할 때, 4~5 개의 컴포넌트들을 지나쳐 값을 전달하는 경우가 종종 발생한다. 불필요한 컴포넌트들을 거쳐 값을 전달하여 관리하려면, 값을 전달할 때 마다, 불필요한 작업을 반복적으로 해야하고, 실수를 통해 에러가 발생할 수도 있다는 단점을 가지고 있다. 각 컴포넌트 간에 value={value} 형식으로 값을 주고받는다. 컴포넌트가 적은 소규모 프로젝..

1. Slice란? Slice는 배열의 일부분이다. Slice는 동적 타입의 배열로써, 컴파일 시점에 배열의 크기가 정해지는 특징을 가진 배열이다. 기존의 배열을 선언할 때는, 배열 크기를 지정해줘야 했지만 Slice는 선언할 때, 배열 크기를 지정하지 않는다. Go를 계속 공부하다보면, 배열을 사용하는 것보다 슬라이스를 더욱 많이 사용하는 것을 확인할 수 있다. 그만큼 슬라이스가 편하고 융통성있기 때문이다. 2. Array와 Slice의 차이 package main func main() { arr := [3]int // 배열 크기를 지정한 배열 arr2 := []int // 배열 크기를 지정하지 않는 Slice } Array : 크기를 지정하여 선언한다. Slice : 크기를 지정하지않고 선언한다.추가..