Missing "key" prop for element in iterator 엘리먼트 태그에 key 속성을 부여하라는 의미이다. 이 메시지는 우리가 배열을 통해서 Element를 처리할 때 흔히 마주칠 수 있는 에러 문구중 하나이며 꽤나 자주 볼 수 있는 문제임에도 불구하고 왜 그런지 모르는 사람들이 생각보다 많았고 이게 어떤 문제를 야기하는지 모르는 사람들이 정말 많았기에 자세히 풀어보려 한다. const Page = () => { const [getArr, setArr] = useState(['first', 'second']); return {getArr.map((item) => ( {item} ))} }; arr 이란 배열을 태그 내에서 재귀적으로 처리하고 있는 간단한 컴포넌트가 있다고 가정해보자...
React는 컴포넌트를 기반으로 재사용성을 통해 빠른 개발과 유지 보수를 용이하게 하고 컴포넌트(기능이든 뷰 단위든)별 독립적인 테스트가 가능한 장점이 있다. 근데 가장 큰 문제는 신입 개발자가 프로젝트에 긴급히 투입되거나, 너무 오래 방치해있던 프로젝트에 큰 대규모 유지 보수를 진행해야 하는 경우 이 컴포넌트가 어떤 컴포넌트인지 잊어버릴 때가 있다. 컴포넌트가 명확한 기능만 하고 간소화된 프롭들만 제공한다면 큰 문제는 없겠지만 프롭이 많고 복잡하게 구성된 컴포넌트를 보고 있자니 일단 차근히 코드 분석부터 시작해야 한다. 물론 개발 단계에서 미래를 생각하며 잘 구성된 컴포넌트는 이런 자원적 낭비가 없겠지만 현실적으로는 프로젝트 기간에 시달리며 작성한 코드들이 대단히 많을 것이다. 누구나 처음에는 잘 만들..
이 글을 읽기 전에 먼저 읽으면 좋은 글! 특정 각도에서 일정 거리의 좌표 구하기 각도의 단위, 라디안(radian)과 디그리(degree) 선형 보간법(linear interpolation) 특정 각도에서 일정 거리의 좌표 구하기 내 캐릭터 기준 30도, 50m에 있는 적을 감지하고 싶을 때는 어떻게 구현할 수 있을까? 바로 삼각함수중 코사인 함수와 사인 함수를 이용하면 쉽게 구할 수 있다. 코사인(cos) 코사인은 삼각형에서 hi-develop.tistory.com 각도의 단위, 라디안(radian)과 디그리(degree) 라디안(radian)과 디그리(degree)는 각도를 측정하는 단위이다. 디그리(degree)는 원을 360도로 나누어 정의한 각도의 단위이며 수학에서는 호도법을 사용하여 2π 라..
완성된 작업물은 여기! Simhansol-Box GitHub - SIMHANSOL/Simhansol-Box: 심한솔 박스 심한솔 박스. Contribute to SIMHANSOL/Simhansol-Box development by creating an account on GitHub. github.com 사실 한글 타이핑은 이미 라이브러리가 존재한다. 근데 라이브러리만 사용하면 재미가 없으니 직접 만들어보며 원리를 깨달아보고자 했다. 일단 가장 먼저 React 환경에서 만들어볼 것이기 때문에 컴포넌트로 개발할 예정이다. 컴포넌트에서는 문자열 타입의 children props을 전달받아 children의 문자열을 천천히 타이핑하는 기능을 담당할 것이다. // how to use 타이핑 예제입니다. 먼저 구..
