개발

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를 통한 조작이 가능했다.

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에 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 폴..

노마드 코더님의 CSS Layout 마스터클래스 Clone코딩을 진행하던 중에 호기심이 생겨서 찾아보았다. 다른 웹페이지를 클론 코딩하는 도중 header 부분을 클론 코딩하면서 문제가 생겼다. 나는 header를 포함한 모든 부분을 하나의 그리드로 구현하고 있었는데 header 스크롤바가 내려가도 항상 저 위치에 있어야 된다는 점을 늦게 확인했다. 처음에는 position : fixed를 해봤지만 아래와 같이 CSS가 엉켜버렸다. Nav바 부분을 gird에서 빼고 새로해야하나 고민하다가 방법을 찾아보았는데 position : sticky라는 방법을 알게 되었다. 결론부터 말하면 나의 문제를 해결할 수 있었다. header를 포함한 모든 사진들이 같은 Grid 안에 있지만, position : stick..

React App을 설치 한 후 실행을 하자마자 예외가 발생하였다. React 실행을 잘 됐지만 뭔가 찝찝한 이 에러를 확인 해보기 위해서 온 구글을 뒤져보았다. 대표적인 해결책들로는 아래와 같이 있었다. Node.js 버전 불일치 -> 재설치 npm swr 설치 node_modules 삭제 후 재설치 모두 해봤는데 안돼서 포기할려던 찰나 코딩애플이라는 강의사이트의 나와 똑같은 사람의 문의를 통해 해결할 수 있었다. 나의 문제는 파일 경로의 #이 있었던 것이였다. 다른 폴더에 설치하니 놀랍게도 실행 될 수 있었다. 왜 #이 붙어서 오류가 나는지는 모르겠지만 그냥 작업폴더에는 특수문자를 안써야겠다고 절실히 느꼈다.