mbti를 만들면서의 트러블슈팅 및 정리 App.tsx 기존 route에서 해당하는 유형의 타입을 뽑아 url에 넣는 형식으로 해야 깔끔할꺼라 생각하여, path 설정을 바꿔보았다. Quiz.tsx 코드의 해당 로직에 필요한 result쪽의 데이터를 Quiz Component에서 불러오는 형식으로 진행해야 얼추 맞을꺼란 생각이 들었다. 기존의 로직에서는 코드를 배열에 저장하여, 최종결과를 계산하기 위해 논리적인 결과를 하지 않고, Result Component에서 해당 부분을 전부 해, 맞는 유형을 찾는 짓거리를 했었다. (결과만 빨리 보기 위해서.) Result Page에선 이전 코드를 기반으로 조건부로 렌더링 된 함수내에서 호출하는 되었다. 이 조건부 함수 호출 조합은 함수가 필요할 때 항상 호출되도록 보장하지 못할수있었다. 코드를 전부 뜯어내고 나서야, 변경 사항을 수신해주는 Hooks를 사용하여 모든 질문에 답변했는지에 대해 확인하고, 상태를 true로 설정한 다음 3초 지…

콘솔 출력 함수에 대해 알아보자. Go언어에서 사용하는 fmt package의 Console output function은 매우 많은 방법이 있지만, 그중에서 제일 유용하게 쓰이는 3가지를 알아볼 것 예정입니다. 이 문서는 Print, Println, Printf 함수들이 어떤 특징이 있는지 차이점을 중점으로 설명하겠습니다. 코드 상단에 를 선언함으로써 package를 사용할 수 있는데, 이는 C언어의 입/출력 함수인 printf와 scanf 함수같은 유사한 함수들을 형식화된 입/출력 함수를 사용할 수 있다는 뜻입니다. 쉽게 말해, Console에 입력 함수와 콘솔 출력함수를 사용하기 위해서는 무조건 fmt package를 import해야합니다. Print Print 함수는 개행을 하지 않기 때문에 문자열 “” 혹은 Back Quote 내에서 escape sequence인 ‘\n’을 입력해 개행해야한다. 밑에 코드는 연산결과를 웹브라우저에 출력하는 코드이다. Println Pr…

JEST 페이스북 팀에서 Jasmine 기반으로 만든 테스팅 프레임 워크이다. C-R-A로 만든 리액트 프로젝트에는 자동으로 적용이 되어있다. react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행하며, 컴포넌트의 props나 state를 조회하는 일은 없다. (컴포넌트를 리팩토링 하게 될 때에는 주로 내부 구조 및 네이밍은 많이 바뀔 수 있어도 실제 작동 방식은 크게 바뀌지 않는다. 이점을 중요시 여겨 컴포넌트의 기능이 똑같이 작동한다면 컴포넌트의 내부 구현 방식이 많이 바뀌어도 테스트가 실패하지 않도록 설계) 즉, react-testing-library는 구현 (Enzyme)에 중점을 둔 테스트보다는 사용자 행동 (react-testing-library)에 중점을 둔다. 2019.09.04일 기준 라이브러리가 바뀌었다. 아래의 명령어로 설치. 의 내용을 아래의 코드로 변경 해당 에 의구심이 있었는데, 보니까 벨로퍼트의 글에 잘 나와있더라. …

WebGL 이란? WebGL은 OpenGL을 기반으로 하는 JavaScript API / Library로 웹 브라우저가 추가 플러그인, 타사 플로그인 또는 브라우저 확장 프로그램을 설치할 필요 없이 브라우저에서 3D / 2D 그래픽을 렌더링을 도와준다. WebGL을 사용하면 브라우저를 통해 GPU를 사용하여 3D 그래픽을 HTML 페이지로 렌더링 할 수 있다. Three.js 아래 사이트는 다양한 개발 샘플이 있다. Three.js API 관련 사이트 Viewer API 참고 글 20 Open Source WebGL Frameworks WebGL 이란?