웹 개발을 하다 보면 언제나 등장하는 두 갈래 길이 있습니다. 바로 API 요청을 처리하기 위한 Axios와 Fetch 중 하나를 선택하는 문제입니다. 둘 다 훌륭한 도구지만, “어떤 상황에서 무엇을 선택해야 하는가?”는 언제나 개발자들을 고민에 빠뜨리는 주제라고 생각합니다. 이번 글에서는 우리가 프로젝트에서 Axios를 선택하게 된 이유, 그 과정에서 겪은 기술적 고민과 결정을 정리해보려 합니다! Axios와 Fetch, 같은 목적 다른 방식Axios와 Fetch는 둘 다 HTTP 요청을 보내기 위한 도구라는 공통점이 있지만, 사용하는 방식과 제공하는 기능은 꽤 다릅니다. Fetch는 브라우저에 기본 내장되어 있는 API로, 별도의 설치 없이 사용할 수 있으며, Promise 기반으로 작동합니다. 가볍..

우리 팀은 이전에 Redux Toolkit을 사용한 프로젝트를 진행하면서 상태 관리에 대한 다양한 경험을 했습니다.  당시 프로젝트에서 Redux Toolkit은 전역 상태 관리에 강력한 기능을 제공했지만, 실제로 활용하는 과정에서 몇 가지 문제점이 나타났습니다. Redux Toolkit의 문제점1. Store가 크고 복잡해짐프로젝트 규모가 커질수록 Redux의 store 구조도 함께 비대해졌습니다. 상태와 데이터가 여러 slice로 분산되고 각 로직이 복잡하게 얽히면서, 전체 흐름을 파악하거나 디버깅하는 데 시간이 많이 소요되는 문제가 발생했습니다. 2. 상태 관리와 API 호출 코드가 지나치게 혼재됨Redux Toolkit에서는 상태 관리를 위한 slice 정의와 API 요청을 위한 비동기 로직(cr..

문제오리의 울음 소리는 "quack"이다. 올바른 오리의 울음 소리는 울음 소리를 한 번 또는 그 이상 연속해서 내는 것이다. 예를 들어, "quack", "quackquackquackquack", "quackquack"는 올바른 오리의 울음 소리이다. 영선이의 방에는 오리가 있는데, 문제를 너무 열심히 풀다가 몇 마리의 오리가 있는지 까먹었다. 갑자기 영선이의 방에 있는 오리가 울기 시작했고, 이 울음소리는 섞이기 시작했다. 영선이는 일단 울음소리를 녹음했고, 나중에 들어보면서 총 몇 마리의 오리가 있는지 구해보려고 한다. 녹음한 소리는 문자열로 나타낼 수 있는데, 한 문자는 한 오리가 낸 소리이다. 오리의 울음 소리는 연속될 필요는 없지만, 순서는 "quack"이어야 한다. "quqacukqauack..

문제세준이는 양수와 +, -, 그리고 괄호를 가지고 식을 만들었다. 그리고 나서 세준이는 괄호를 모두 지웠다. 그리고 나서 세준이는 괄호를 적절히 쳐서 이 식의 값을 최소로 만들려고 한다. 괄호를 적절히 쳐서 이 식의 값을 최소로 만드는 프로그램을 작성하시오. 입력첫째 줄에 식이 주어진다. 식은 ‘0’~‘9’, ‘+’, 그리고 ‘-’만으로 이루어져 있고, 가장 처음과 마지막 문자는 숫자이다. 그리고 연속해서 두 개 이상의 연산자가 나타나지 않고, 5자리보다 많이 연속되는 숫자는 없다. 수는 0으로 시작할 수 있다. 입력으로 주어지는 식의 길이는 50보다 작거나 같다.출력첫째 줄에 정답을 출력한다. 입출력 예시입력 155-50+40 출력 1-35 입력 210+20+30+40 출력 2100    풀이'use..

Vite를 이용해 프로젝트를 빌드하고 배포한 후, 실행해보니 ReferenceError가 발생했다.Uncaught ReferenceError: Cannot access '_u' before initialization at vendor-C-CSqHJx.js:9:18050  개발자 도구의 Sources 탭에서 vendor-C-CSqHJx.js:9:18050 위치로 이동해 오류를 확인해보니..  useInsertionEffect에서 에러가 발생하고 있었다. 일단 ReferenceError 에러란게 보통 let 또는 const 로 선언한 변수의 코드가 실행되기 전에 해당 변수를 사용했을 때 생기는 오류라고 알고있었다. 그래서 이 에러도 그런 비슷한게 아닐까.. 하고 추측하며 useInsertionEffec..

React Native 프로젝트에서 특정 화면을 렌더링하던 중 이상한 오류 메시지를 마주하게 되었다. Error while updating property 'borderTopLeftRadius' of a view managed by: RCTImageViewjava.lang.String cannot be cast to java.lang.Double 이 오류 메시지를 보니, borderTopLeftRadius 속성에 숫자(Double) 타입 값이 전달되어야 하는데, 문자열(String) 값이 전달되었기 때문에 발생한 오류로 보였다.그런데 문제는… 코드 어디에서도 borderTopLeftRadius 속성을 직접 사용한 적이 없다는 것이었다. 도대체 왜 이런 오류가 발생한 걸까? 🤔 문제 원인 분석에러 메시지..

이번에는 github actions로 CICD를 적용하는 과정에서 발생한 문제를 공유하려고 한다. 프로젝트 배포를 위해 AWS EC2 인스턴스를 사용하고 있으며, GitHub Actions로 SSH를 통해 EC2 서버에 연결한 뒤 빌드 및 배포를 자동화하고 있다.하지만 이 과정에서 환경변수가 제대로 적용되지 않아 발생한 문제를 겪었고, 이를 해결하는 방법을 찾는 데 시간이 좀 걸렸다.같은 문제로 고민하는 분들이 있다면 이 글이 도움이 되었으면 좋겠다. 😊 프로젝트 환경 및 배포 방식토큰 값 같은 민감한 정보를 보안상 환경 변수로 관리하는 것이 좋기 때문에 application.yml에 아래와 같이 환경 변수를 설정하였다.jwt: access: secret: ${JWT_SECRET_KEY} ..

문제여러 개의 쇠막대기를 레이저로 절단하려고 한다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자른다. 쇠막대기와 레이저의 배치는 다음 조건을 만족한다.쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓는다.각 쇠막대기를 자르는 레이저는 적어도 하나 존재한다.레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않는다.아래 그림은 위 조건을 만족하는 예를 보여준다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향이다.이러한 레이저와 쇠막대기의 배치는 다음과 같이 괄호를 이용하여 왼쪽부터 ..

문제여러분도 알다시피 여러분의 프린터 기기는 여러분이 인쇄하고자 하는 문서를 인쇄 명령을 받은 ‘순서대로’, 즉 먼저 요청된 것을 먼저 인쇄한다. 여러 개의 문서가 쌓인다면 Queue 자료구조에 쌓여서 FIFO - First In First Out - 에 따라 인쇄가 되게 된다. 하지만 상근이는 새로운 프린터기 내부 소프트웨어를 개발하였는데, 이 프린터기는 다음과 같은 조건에 따라 인쇄를 하게 된다.현재 Queue의 가장 앞에 있는 문서의 ‘중요도’를 확인한다.나머지 문서들 중 현재 문서보다 중요도가 높은 문서가 하나라도 있다면, 이 문서를 인쇄하지 않고 Queue의 가장 뒤에 재배치 한다. 그렇지 않다면 바로 인쇄를 한다.예를 들어 Queue에 4개의 문서(A B C D)가 있고, 중요도가 2 1 4 ..

문제정수를 저장하는 덱(Deque)를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.명령은 총 여덟 가지이다.push_front X: 정수 X를 덱의 앞에 넣는다.push_back X: 정수 X를 덱의 뒤에 넣는다.pop_front: 덱의 가장 앞에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다.pop_back: 덱의 가장 뒤에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다.size: 덱에 들어있는 정수의 개수를 출력한다.empty: 덱이 비어있으면 1을, 아니면 0을 출력한다.front: 덱의 가장 앞에 있는 정수를 출력한다. 만약 덱에 들어있는 정수가 없는 경우에는 -1을 출력한..