나의 코딩일지

프로젝트 구조 변경하기

디벨롭을 해야하는데, 아무리봐도 프로젝트 구조가 거슬렸다. 일단 component부터 시작해서, 그 안에 도메인별로 폴더를만들어 놓은게 은근히 계속해서 신경쓰이게 만들었다. 그냥할까 고민하다가 리팩토링 결정~   페이지 정리도 안된 상태에서 도메인을 넣어버리니까 페이지 이름변경하는게 뭔가 전체적으로 힘들었다. 특히 두명이서 각자 페이지를 작업하다보니 login과 signin처럼 못보고 직접 만드는 경우도 많아서 단일화해줘야했다. 심지어 로그인페이지는 login이고 회원가입페이지는 signup인 난리도 피워놨다.const RoutesList = [ { path: Paths.Landing, element: }, { path: Paths.Login, element: }, { path: Paths.Re..

댓글 달아줘요1. Redirect URL이 백서버를 향하는 경우  Redirect URL이 백서버를 향하는 순간, 프론트 => 백 => 구글 => 백으로 향했기 때문에, 구글에서 백으로 리다이렉트 되는 시점에서 프론트와 연결이 끊긴다고 볼 수 있다. 따라서 토큰을 발급한 후에 토큰을 담아 리다이렉트를 시켜주어야 한다. 만약 추가정보를 입력하지 않고 구글의 code만으로 유저 생성이 가능하다면, 그대로 로그인 성공을 할 수 있다. 다만 그렇게 되면 로그인 요청을 하면 무조건 생성이 된다는 단점이 있다.2. Redirect URL이 프론트를 향하는 경우Redirect URL이 프론트로 리다이렉트되는 경우, 백서버와의 HTTP 통신으로 요청과 응답이 가능하다.처음에 잘 협의해야하는 이유이게 생각보다 서로의 입..

request은 application/json으로, images는 image/jpg, image/png으로 Content-type을 지정해주고 form-data를 통해 전달해달라는 요청을 받았다. 근데 아무리 해봐도 Blob 없이 Content-type을 지정해주는 방법은 없었다. const formData = new FormData(); formData.append( "request", new Blob([JSON.stringify(payload)], { type: "application/json" }) ); if (image && image.length > 0) { const file = image[0]; const imageBlob = new Blo..

??: 배포 해주세요.나: vercel...??: 저희 도메인 쓰십시다.나: vercel.??: 이미지 추가하고 싶어요나: vercel + s3나: 백엔드분들이 cs 뭔가 잘알던데, 백엔드를 내가 해보겠따..!??: 클라우드 때문임. 클라우드 공부ㄱㄱ사실 지금까지 인프라에 대해서 크게 관심이 간 건 아니었다. VM아니면 vercel로 대충 배포하면 알아서 해주기 때문에, 나는 애플리케이션에만 집중하면 될거라고 생각했다. 하지만 HTTP 완벽 가이드를 읽으면서 계속이해된다기 보다는 그냥 텍스트를 읽는 경향이 강해졌다. 백엔드를 직접 만들어보면 되지 않을까 싶어서 그냥 기본적인 서비스와 컨트롤러로 CRUD만 구성해보기도 했지만, 백엔드를 만들 줄 안다고 해서 통신 과정을 이해할 수 있는 건 아니었다. 아직 ..

CSS Custom Hightlight APIJavaScript를 사용하여 범위를 만들고 CSS와 함께 해당 텍스트의 범위를 스타일링하는 API텍스트 편집기에서 오타, 문법 오류, 구문 오류 등 강조 가능 현재 Firefox 외의 브라우저에서 지원한다. 적용 방법1. Range 생성하기JavaScript의 Range 객체를 사용하여 시작 범위와 종료 범위를 설정한다.const parentNode = document.getElementById("foo");const range1 = new Range();range1.setStart(parentNode, 10); // 10번의 위치(offset)부터range1.setEnd(parentNode, 20); // 20번의 offset까지 range1const ..

컴파운드 컴포넌트 패턴을 사용해보고, 비즈니스 로직 분리하는 것 때문에 몇번을 갈아엎었던 모달 컴포넌트다. 하지만 z-index 관점에서 한번 더 리팩토링을 해야한다. 모달을 어디서 불러야하는가? 현재 모달의 위치일단은 React의 컴포넌트 루트인 아래에,ReactDOM.createRoot(document.getElementById("root")!).render( }> ,); 라우팅되어 아래에,const router = createBrowserRouter([ { path: "/", element: , errorElement: 잘못된 접근입니다, children: [ ..

처음에 배울 때 가장 많이 사용하는 리액트로 배우게 되었고, 이후에는 자연스럽게 혹은 당연하게 리액트의 상태관리 라이브러리나 Next.js에 관심을 갖고 배워나갔다. 그러다가 react-hook-form을 사용하면서 상태관리가 완전한 답이 아니라는 것을 알고 나니, virtual DOM도 완전한 답이 아니겠다는 생각이 들었다. 게다가 사실상 페이지 라우팅만 있고, 데이터의 변화로 리렌더링 필요가 없는 이 프로젝트는 굳이 리액트를 쓸 필요가 없었다. 그러면, 리액트 외에 뭘 선택해야하는가?React와 Vue리액트와 뷰는 컴포넌트 기반이며, Virtual DOM 방식을 사용하는 점에서 같다. 모두 웹 UI를 작은 컴포넌트 단위로 구성하여 재사용과 확장성을 이용하여 개발이 가능하다. 또한 Virtual DOM..

Date 객체라고는 그냥 변수명에 대한 생각도 안한 상태에서 getFullYear 호출안하고 쓰던 자바스크립트 시절이나 getMonth() + 1 안해줘서 급하게 추가했던 기억뿐이라서 date 어렵다고 난리인건 다른 사람들 이야기였다. 늘 그렇듯이 내가 안 쓴거뿐이다~const formatDateTime = (date) => { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const ..

컴포넌트를 작성하다가 여러 util 함수를 만들었는데, 뭔가 다른 개발자분들도 쉽게 쓸 수 있게 인자랑 결과를 포함해서 알려주고 싶었다. 물론 다른 사람의 코드를 열심히 읽는게 중요하긴 하지만, 그냥 편하게 가져다 쓰게 하고 싶은 util 함수도 꽤나 많았다. JSDoc으로 어떤 함수인지, 어떤 인자를 받는지 알려주고는 있었지만, 부족함이 있었고 구구절절 다 쓰면 주석이 너무 커졌다. 그래서 처음에는 주석으로 따로 빼야하나 생각했다. 공통 컴포넌트를 스토리북으로 공유하면서 이해가 편해졌던 것처럼, 코드만으로 설명을 해주고 싶었다. 사실 스토리북도 결국 테스트를 위한건데, 이게 테스트라는 것을 인지하지 못해서 꽤나 고민을 많이 했다. 어쨌든 util 함수를 테스트 코드를 통해 상황을 알려주고 해당 상황의 ..

form 내부의 데이터를 하나씩 상태관리하던 첫번째 프로젝트를 보다가, 하나의 객체로 관리하는 방식으로 변경했던 다음 프로젝트를 보면서, 더 좋은 방법이 있는데 내가 놓치고 있는게 아닐까 하는 생각이 들었다. 그때도 이런 생각을 했던건지 다음 프로젝트를 보니, react-hook-form을 통해 좀 더 쉬운 방법으로 상태관리를 하고 있었다. 하지만 코드를 보면 볼수록 이 라이브러리의 취지를 전혀 모르고 그냥 단순히 타입용으로만 사용하고 있는 것 같다는 생각을 했다.  아~ 타입추론 편하다~ 이게 이 라이브러리의 효용이라고 생각하고 그렇게 까지 좋은지 모르겠던데? 라고 생각했던 지난날,, 그래서 이번에 더 잘 사용해볼까 싶어서 react-hook-form을 다시 사용하고, 비제어라서 사이드이펙트가 없다는 ..