분류 전체보기

SSAFY에서 프로젝트를 진행하면서 Three.js에 관심이 생겼다. Three.js를 활용한다면 기존의 웹에서 조금 더 인터랙티브한 웹을 만들 수 있을 것 같았기 때문이다. 하지만, Three.js를 공부하기에는 한국어로 잘 정리된 레퍼런스가 많지 않았고 특히, React에서 Three.js렌더링을 도와주는 React-Three-Fiber는 더욱더 자료가 없었다. Three.js를 리액트 프로젝트에서 조금 더 잘 활용해보고싶어서 나름대로 공부하고, 공부한 것을 정리해보고자 한다. 아래의 코드는 1분코딩님의 Three.js 강의를 바탕으로 React-Three-Fiber로 내가 구현한 코드이다. import { Canvas, useFrame, useThree } from "@react-three/fibe..

react의 다양한 라이브러리들을 사용하다 보면 ref가 사용되는 것을 많이 볼 수 있다. 항상 ref는 어떤 기능을 하는 것인지 궁금했었기에 useRef와 ref에 대해 찾아보았다. 우선 JavaScript에서 getSelector, getElementById를 통해서 HTML 태그 (DOM)을 선택할 수 있다는 것은 알고 있었다. 하지만 나는 React에서는 이런 문법을 사용하기보다는 직접 그 태그 안에서 코드를 작성했기 때문에 리액트는 Dom Selector를 사용 안 하는 줄 알았지만, useRef가 이런 기능을 도와주고 있었던 것이다. 그렇다면 언제 useRef와 ref를 사용하는 것일까? 나는 외부의 DOM을 활용하여 다른 DOM의 상태에 영향을 주고 싶을 때 ref를 사용한다고 생각했다. 즉..

프로젝트를 진행하면서 캐러셀을 만들어야 하는 이슈가 있었다. React에 slick과 같은 다양한 캐러셀 라이브러리가 있기 때문에 라이브러리를 사용하려고 했지만, 커스텀하는 것이 하나같이 쉽지 않았고, examples에서 내가 원하는 디자인들은 없었기 때문에 직접 구현을 해보려고 생각했다. (구현도 정말 쉽지 않았다.) 우선 내가 구현하는 캐러셀의 간단한 요구명세를 작성해보겠다. 캐러셀은 한번에 최대 세 개 요소까지 볼 수 있다. 선택된 요소는 가장 중간에 있어야 하고, 크기도 다른 요소에 비해 커야 한다. 첫 번째 사진은 항상 중간에 위치해야 한다. Infinity / Auto Scrolling은 필요하지 않다. 선택된 요소에 따라 하단에 값들이 달라져야 한다 (사진상에는 확인되지 않음) 이동할 때 애..

{errors?.email?.message || errors?.passwordConfirm?.message || errors?.extraError?.message} REACT를 공부하면서 JS 문법 중 &&연산자와 || 연산자를 활용하는 것을 많이 봤고, 그런 코드들이 깔끔하고 멋져 보여서 한번 정리를 해야겠다고 생각했다. 일단 내가 알고 있는 지식으로는 '&&'는 AND 연산자이고 '||'는 OR 연산자이다. 즉, and 연산자는 비교하는 두개의 값이 모두 true일 때, true를 반환하기 때문에 첫 값이 false라면 뒤에 값을 확인하지 않아도 false를 반환한다. or 연산자도 비슷하게 두 값 중 하나의 값이 true라면 바로 true를 반환한다. JS 특히 REACT는 이런 특성을 활용하여 코..

React 작업 파일들을 새로산 노트북에 옮길려고했지만, 리액트 폴더에 들어가지 못하는 오류?가 발생하였다. 깃에서 위와같이 폴더가 생성되었으며, 접근할 수 없는 폴더가 되었다. 사실 React 폴더가 아니더라도 하위폴더안에 .git 폴더가 있으면 이와같은 현상이 일어난다. React는 .git폴더를 자동으로만들기 때문에, 특히 이런 현상이 자주발생하는 것 같다. 해결 방법은 간단하다. 원하는 폴더안에 .git 폴더를 삭제하고 다시 커밋한다면 진행이 될 것이다. 만약 .git 폴더를 삭제하고 커밋해도 같은 현상이 일어난다면 캐쉬를 삭제해주어야 한다. 이 것에 대한 해결방법도 간단한데 문제가있는 폴더에서 아래의 코드를 작성해주면 된다. $ git rm --cached . -rf 노트북을 바꿔서 .git 폴..

이 문제를 봤을 때, 플로이드 와샬로 풀 수 있을까 고민했지만 tc의 개수가 5개, N의 크기가 500인 것을 보고 플로이드와 샬을 포기하고, 음의 가중치라는 점에서 벨만 포드 알고리즘을 시도했다. 벨만 포드 알고리즘이 익숙지 않아 많이 헤맸던 문제이지만, 이 문제 덕에 벨만 포드 알고리즘을 한번 더 정리할 수 있었다. 벨만 포드 알고리즘은 다익스트라와 같이 최단 경로 문제를 푸는 알고리즘이지만, 차이점은 변과 변 사이에서 음의 가중치를 가질 수 있다는 점이고 바로 이 점이 훨씬 더 빠른 다익스트라보다 벨만 포드 알고리즘을 사용하는 이유이다. 왜 다익스트라는 음의 가중치를 가지지 못할까? 음의 가중치가 있는 경우 음의 순환(계속 가중치가 최솟값으로 갱신되는 경우)이 있다. 다익스트라는 가중치의 합을 최솟..

이 문제는 문제 제목에서부터 MST 문제라는 것을 알려주고 있다. 당연히 나는 MST 알고리즘 중 내가 알고 있는 Prim알고리즘을 통해 풀었고, 아쉽게도 시간 통과를 하지 못하였다. 잘 모르는 크루스칼 알고리즘을 공부해봐야 하나 생각하며 백준 질문게시판을 둘러보았는데, 프림과 힙을 사용해서 풀었다는 사람들이 많아서 조금 충격을 받았다. 나의 다른 MST 풀이를 보면 알겠지만 나는 프림 알고리즘은 세 가지 구조를 가지고 문제를 해결한다. 1. 현재 내가 갈 수 있는 곳 중 최소 비용으로 갈 수 있는 곳을 찾는다 2. 최소로 갈 수 있는 곳을 등록한다. 3. 새로 등록한 곳에서 또 더 갈 수 있는 곳을 찾는다. 이렇게 할 때, 힙을 어디서 사용하지라는 아이디어가 쉽게 떠오르지 않았다. 하지만, 결국 프림 ..

이 문제는 백준 키순서에 내가 적어놓은 예시와 거의 유사한 문제였다. 문제집 커리큘럼에 따라 한 문제를 풀기 위해서는 선행되어야 하는 문제(진입 차수)가 있고, 이 문제는 그 순서대로 문제를 풀 때 어떤 순서대로 풀어야 할지를 묻는 문제이다. 여기서 하나의 추가조건이 있는데 가능하다면 쉬운 문제 (인덱스가 작은 문제)를 먼저 풀어야 한다. 나는 이 부분에서 조금 헷갈렸는데 이 문제가 원하는 것은 2번 문제(선행 문제가 1인 문제)와 3번 문제(선행 문제가 없는 문제)가 있다면 1-2-3 순서로 문제를 풀어야 한다. 즉, 선행 문제가 있다 하더라도 문제의 난이도는 인덱스가 결정한다. 위상 정렬과 문제만 이해했다면, 쉽게 풀 수 있을 것이다. 우리에게는 자동으로 인덱스를 정렬해주는 힙이라는 무기가 있기 때문..