IT 꿈나무 참다랑어

저는 스타트업에서 팀 내 유일한 프론트엔드 개발자이자 PM 역할까지 맡고 있습니다. 그러다 보니 코드를 짜는 것만으로는 해결되지 않는 고민과 문제들을 자주 마주하게 됩니다.이번 요금제 개편 프로젝트는 그 중에서도 정말 해결하기 어려운 문제였습니다. 단순한 UI 개선이나 기능 추가가 아니라, 서비스의 핵심적인 비즈니스 모델을 다시 설계해야 했기 때문입니다. 그리고 프로젝트를 리딩해야 한다는 부담감과 책임감도 그만큼 컸습니다.이 글은 그 과정에서 제가 겪었던 고민과 배운점을 기록하고, 비슷한 상황에 계신 분들과 나누고 싶은 마음에 쓰여졌습니다.🔍 프로젝트 개요: 왜 요금제를 전면 개편했는가?이번 프로젝트의 출발점은 명확했습니다.기존 시스템은 결제 관련 주요 키 정보를 프론트와 백엔드에서 직접 주고받는 구조..

📔시작하기 전에우리는 이 이슈에서 Queue 인터페이스 구현체 중 ArrayDeque와 LinkedList에 대해서 살펴보고자 한다. 사실 ArrayDeque와 LinkedList는 Queue의 구현체이기도 하지만 Deque의 구현체이기도 하다. Java에서 Deque 인터페이스는 Queue 인터페이스를 확장한 인터페이스로 “double ended queue”의 줄임말로 말 그대로 앞 뒤 모두에 삽입, 삭제가 가능하다는 특징이 있다. 이러한 특징을 기반으로 ArrayDeque와 LinkedList에 대해서 비교해보자.📖ArrayDeque와 LinkedList의 차이점먼저 ArrayDeque에 대해서 살펴보자. ArrayDeque는 이름에서 알 수 있듯이 배열을 기반으로 하는 Deque의 구현체이다. ..

기본 환경 yarn에서 cra template를 이용해 만든 프로젝트에 eslint 및 prettier를 설정해보려고 한다. 1) Prettier란? MIT license를 가진 code formatter 모듈입니다. Code format이란 줄 바꿈, 줄간격, 괄호의 위치 등 여러 가지 Style을 의미하며, Prettier는 이런 code style을 자동적으로 정리해 줍니다. **2) ESLint란?** ESLint란? ECMAScript Lint의 줄임말로, javascript의 표준을 다루는 협회가 바로 ECMA입니다. Lint는 유닉스 시절에 정적코드 분석 프로그램인 'Linter"에서 따온 이름입니다. 간단히 말하자면, **"Javscript 정적 분석 도구"**가 되겠군요. 이 도구..

시작하며 Vue와 React는 대표적인 Single page application(이하 SPA) 프레임워크로 Client Side Rendering(CSR) 방식으로 뷰를 만든다. 이와 대조적으로 PHP는 Multi page application(MPA)으로 Server Side Rendering(이하 SSR) 방식으로 뷰를 만든다. 과제를 수행하면서 CSR과 SSR의 차이를 이해하고 요청 시 발생하는 패킷을 분석해보려고 한다. SPA vs MPA MPA(Multi Page Application) 반면 MPA는 탭을 이동할 때마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 교체하는 식으로 작동하게 된다. SPA(Single Page Application) 하나의 페이지로 구성된 웹 애플리케..

문제 상황 노트북을 새로 받아 프로젝트를 위해 셋팅 중 yarn을 설치했지만 yarn 실행이 안되는 문제가 발생했다. Window 10 운영체제와 Vscode에서 발생한 문제임. node.js 다운로드 후 설치→ vscode에서 node -v 실행 시 version 잘 출력 됨. 하지만 npm i -g yarn (-g를 통해 글로벌 설치) 이후 yarn -v와 같은 명령어가 실행되지 않는다. 검색 결과 문제 해결 방식은 크게 두가지로 나뉘었는데 첫번째는 vscode Extension을 설치해 문제를 해결하는 방법 두번째는 window powershell을 통해 실행권한을 업데이트 하는 방법 이다. 1. VSCode Extension 설치 Extension에서 yarn을 검색하면 yarn과 yarn scr..

약 7주 간의 프로젝트를 진행하게 되면서 길지 않은 시간인 만큼 기술스택 선택에 많은 고민을 하게 되는 것 같다. 특히 상태 관리 라이브러리의 경우 Flux, Redux의 등장 이후 급격한 변화를 맞이했고 지금은 MobX, Recoil, Zustand, Jotai 등 너무나도 다양한 라이브러리들이 우리 앞을 기다리고 있다. 그래서 더 고민된다.. 도대체 상태 관리 라이브러리 뭘 써야되는거지..(결론 아직 안남 주의) 그럼 먼저 알고 있는 개념 먼저 생각해보자.. 상태 관리 라이브러리 도입 상태 관리 라이브러리를 왜 사용하는가? 단순히 React Hook만을 사용해서 상태를 관리할 경우 props drilling, 컴포넌트 간 결합도 증가 등의 문제가 발생할 수 있고 이는 유지보수에 대한 어려움으로 직결된..

[Gold IV] 이중 우선순위 큐 - 7662 문제 링크 성능 요약 메모리: 439256 KB, 시간: 2580 ms 분류 자료 구조, 우선순위 큐, 트리를 사용한 집합과 맵 제출 일자 2023년 12월 14일 23:24:54 문제 문제 설명 이중 우선순위 큐(dual priority queue)는 전형적인 우선순위 큐처럼 데이터를 삽입, 삭제할 수 있는 자료 구조이다. 전형적인 큐와의 차이점은 데이터를 삭제할 때 연산(operation) 명령에 따라 우선순위가 가장 높은 데이터 또는 가장 낮은 데이터 중 하나를 삭제하는 점이다. 이중 우선순위 큐를 위해선 두 가지 연산이 사용되는데, 하나는 데이터를 삽입하는 연산이고 다른 하나는 데이터를 삭제하는 연산이다. 데이터를 삭제하는 연산은 또 두 가지로 구분..

[Gold III] 세 용액 - 2473 문제 링크 성능 요약 메모리: 14224 KB, 시간: 164 ms 분류 이분 탐색, 정렬, 두 포인터 제출 일자 2023년 12월 13일 00:51:05 문제 문제 설명 KOI 부설 과학연구소에서는 많은 종류의 산성 용액과 알칼리성 용액을 보유하고 있다. 각 용액에는 그 용액의 특성을 나타내는 하나의 정수가 주어져있다. 산성 용액의 특성값은 1부터 1,000,000,000까지의 양의 정수로 나타내고, 알칼리성 용액의 특성값은 -1부터 -1,000,000,000까지의 음의 정수로 나타낸다. 같은 양의 세 가지 용액을 혼합한 용액의 특성값은 혼합에 사용된 각 용액의 특성값의 합으로 정의한다. 이 연구소에서는 같은 양의 세 가지 용액을 혼합하여 특성값이 0에 가장 가..

[Gold III] 괄호 추가하기 - 16637 문제 링크 성능 요약 메모리: 11640 KB, 시간: 76 ms 분류 브루트포스 알고리즘, 구현 제출 일자 2023년 10월 17일 14:31:24 문제 문제 설명 길이가 N인 수식이 있다. 수식은 0보다 크거나 같고, 9보다 작거나 같은 정수와 연산자(+, -, ×)로 이루어져 있다. 연산자 우선순위는 모두 동일하기 때문에, 수식을 계산할 때는 왼쪽에서부터 순서대로 계산해야 한다. 예를 들어, 3+8×7-9×2의 결과는 136이다. 수식에 괄호를 추가하면, 괄호 안에 들어있는 식은 먼저 계산해야 한다. 단, 괄호 안에는 연산자가 하나만 들어 있어야 한다. 예를 들어, 3+8×7-9×2에 괄호를 3+(8×7)-(9×2)와 같이 추가했으면, 식의 결과는 4..

전체 목차 0. 들어가며 1. 전형 일정 2. 자기소개서 작성 3. 코딩테스트 4. 면접 5. 마지막으로 0. 들어가며 싸피 교육이 시작된지 어언 3개월이 넘어가는 이 시점에 11기 모집이 시작했다는 소식을 듣고 관심이 있으실 미래의 싸피인에게 도움이 되길 바라며 이 후기를 작성합니다! 글 읽고 궁금하신 내용이 있다면 편하게 질문 주셔도 됩니다!(다만 코딩테스트 및 면접, 교육 과정 중 내용 관련해서 대외비로 인해 답변드릴 수 없는 사항들이 많습니다..) 이 글에서는 자기소개서, 코딩테스트, 면접 준비과정에 대해서 다루고 마지막에 짧게 1학기 교육을 듣고 있는 소감에 대해서도 이야기하려고 합니다! 그리고 입과 준비 과정에서 카카오톡 오픈채팅방의 도움을 많이 받았습니다! SSAFY로 오픈채팅방 검색하시면 ..