react

비사이드 프로젝트를 진행하면서 10일 동안 프론트 개발부터 배포까지 전반을 맡았다. 그중에서도 가장 걱정 됐던 부분이 배포였는데, 그 이유는 예전부터 배포는 어려운 것이라는 이미지가 강했고, 비사이드는 네이버 클라우드 플랫폼을 활용하여 배포하기 때문에,자료가 비교적 적을것이라고 생각했기 때문이다. 하지만, 백엔드 개발자 팀원이 미리 서버를 구성한 상태에서 프론트배포만 하는 것은 생각보다 간편했고, 무엇보다 NCP의 이용자 가이드로 손쉽게 배포할 수 있었다. Putty를 활용하여 서버(linux) 컴퓨터에 접속하기 우선, NCP에서 컴퓨터를 빌렸고 환경을 구성했다면 내 컴퓨터에서 빌린 컴퓨터를 조작할 수 있어야한다. 그것을 도와주는 프로그램은 여러개가 있겠지만, 나는 PuTTY를 이용했다. Node 설치하..

Next.js 프로젝트를 진행하는 도중 난관에 부딪혔다, apis/ 폴더에서 동일한 Axios 함수를 호출하였는데 Client에서는 올바른 요청이 갔고, Server side에서는 axios에러가 발생하였다. ServerSide에서 이미 API통신 했었고, 이 에러가 났을 당시 우리 백엔드 서버의 이슈가 발생했었기 때문에 그것과 관계돼 있다고 생각했다. 하지만, 역시 프론트엔드의 문제였고 생각보다 단순한 이유였다. 먼저 우리의 Axios를 보면 로그인된 유저의 기본 헤더 값은 쿠키에서 가져온다. const AXIOS = axios.create({ baseURL: "", headers: { "Content-Type": "application/json", }, // withCredentials: true, ..

실행 화면 group과 ref, useFrame을 활용하여 자전하는 것과 같은 3D 애니메이션을 만들어 보았다. 가장 헤맸던 부분은 R3F의 기본으로 제공되는 카메라를 수정하거나 조작하고 싶었다. useThree훅을 활용하면 가능할 것 같았지만, 설명과 참고할 레퍼런스가 부족하여 카메라 조작을 어떻게 해야 할지 막막했다. 내가 해결한 방법은 react-three/drei의 카메라를 사용한 후 makeDefault 속성을 사용하는 것이였다. react-three-drei의 카메라는 three.js의 속성을 그대로 가지고 있었으며 컴포넌트로 제공되었기 때문에 ref를 통한 조작이 가능했다.

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는 이런 특성을 활용하여 코..