프로젝트

에러React 애플리케이션을 CRA를 이용하지 않은 프로젝트를 만들던 중 컴포넌트를 import 하던 중 아래의 사진과 같은 에러가 발생했다.에러 코드를 읽어보니 webpack 번들링 중 발생한 에러로서 import 해오는 주소를 절대주소로 가져오는 코드에서 발생한 에러 처럼 보인다.import Test from 'components/Test';import React from 'react';import { Route, Routes } from 'react-router-dom';function App() { return ( }> }> );}export default App; 위의 'components/Test' 에서 './c..

이전에 참여했던 가말다 프로젝트에서 소셜 로그인 기능을 구현한 경험이 있다. 별도의 회원가입을 하지않고 구글과 네이버, 카카오와 같은 외부 소셜 계정을 기반으로 간편하게 회원가입 및 로그인할 수 있어 많은 웹과 앱 어플리캐이션에서 사용하고 있다. 이때 사용했던 것이 OAuth 2.0 프로토콜을 사용하는 Naver Login API인데 오늘은 OAuth에 대해 알아보자. OAuth란? OAuth는 유저가 비밀번호를 제공하지 않고 다른 웹사이트 상의 유저의 정보에 대해 웹사이트 혹은 애플리케이션의 접근 권한을 부여할 수 있는 수단으로서 사용되는 접근 위임을 위한 개방형 표준이다. OAuth의 구성요소 구분 설명 Resource Owner 웹 서비스를 이용하려는 유저, 자원(개인 정보)의 소유주, 사용자 Re..

이전 글들 중 유지보수가 편리한 코드를 만드는 강좌의 정리글을 올린적이 있다. 내가 구현한 코드를 보던 중 너무 의존성이 강하게 묶여있는 코드를 발견해 이를 리팩토링 하는 기록을 남기고자 한다. 코드 const ShowPosition = ({ positions, tyleInfoSetFun, operatorImgData }: positionsInterface) => { const ePositions = positions.map(e => e.ePosition); // 객체형으로 선택됬는지 여부를 보관하기 const [selectedState, setSelectedState] = useState({ position: { duelist: false, recon: false, sentinels: false, co..

문제의 발단은 이러하다. 개발한 컴포넌트에서 필요 이상의 API 요청이 발생하는 것이 문제이다. 파악한 문제는 2가지 이며 천천히 문제의 원인과 해결 방법에 대한 설명을 작성하겠다. 1. API 요청 방식 이 문제가 가장 근본적인 원인이였다. 기존 코드는 특정 컴포넌트를 클릭하면 그 컴포넌트에 맞는 데이터를 요청하는 방식으로 설계했다. 그로인해 같은 데이터라도 다시 다른 컴포넌트를 클릭했다가 과거의 컴포넌트를 눌러도 같은 API 요청이 발생하게 된다. 이러한 방식은 다른 프로젝트나 컴포넌트 개발시 큰 데이터 혹은 서버의 상태에 따라 원활한 서비스 제공이 어려울 것이라 판단했다. 이 문제는 각각 API 요청을 하던 로직을 초기 렌더링시 다수의 데이터를 병렬로 요청해 처리하도록 했다. 기존 코드 // 해당 ..

이번 글을 단순 기록용으로 작성할 예정이다. 최근 가말다 프로젝트의 리펙토링을 하던 중 유저의 프로필 이미지가 불러오지 않는 오류를 발견했다. 처음에는 리펙토링 도중 새롭게 작성한 코드 때문인줄 알았다. 하지만 원인은 다른 곳에 있었다. 에러의 원인을 어떻게 찾았냐 하면.... 브라우저의 콘솔 창을 보고 알게 되었다. 최근 가말다 서비스의 도메인을 변경한 기록이 있다. 기존에 사용했던 도메인은 .site이었지만 새롭게 변경한 도메인은 .co.kr이다. 이미지 서버의 도메인도 당연히 변하게된다. 기존 http://gamalda.site:(이미지서버 포트)/(이미지 주소) 변경 http://gamalda.co.kr:(이미지서버 포트)/(이미지 주소) 그런데 이미지 서버에서 Client로 이미지 주소를 보내줄..

리펙토링을 진행하게된 계기 방치하고 있던 프로젝트가 있었다. 이 프로젝트를 진행할 때 꽤나 공을 들인 프로젝트였는데 코테준비다, 시간이 없다 등 지금 생각하면 배부른 핑개를 대며 프로젝트를 방치했었다. 하지만, 최근 원티드 프리온보딩을 통한 좋은 코드와 SOLID 원칙에 대한 강의를 듣고 프로젝트의 코드들을 전체적으로 살펴봤다. 지금 보니 아주 난장판이였다. import { ReactComponent as GamaldaSVG } from 'assets/svg/gamaldalogo.svg'; import naverLogin from 'assets/png/naver_login.png'; import { useEffect, useRef } from 'react'; import { Link } from 'rea..