JavaScript

단순했던 첫 배포 파이프라인Kampus 프로젝트는 초기 Git Flow 를 따르자고 정했다. feature 브랜치에서 develop 으로 PR 을 올렸을 때 → Squash and merge → merge 후 remote branch 삭제기능 단위로 개발한 브랜치이기 때문에, 개발서버에도 기능 단위 커밋을 관리할 수 있다. 브랜치를 삭제하므로 merge commit 을 남길 필요가 없다. develop 브랜치에서 main 브랜치로 배포 돌릴 때 → Rebase and merge 모든 기능을 배포할때 병합한다. 특정 기능에서 문제가 발생했을 경우 롤백이 필요하다. merge commit 을 남길 필요가 없다. Git Flow : 초기에는 지키려고 노력했지만, 데모데이가 다가오며 많아지는 merge 와 배포..

이번에 PR #183, 블로그 글 🔥 린트 eslintrc.cjs -> eslint.config.js : Flat Config 업그레이드! 에서 eslint.config.js 를 제대로 도입하게 되면서, 프로젝트의 코드 품질을 일관되게 유지하고 팀원 간의 협업 효율성을 높이기 위해 husky, lint-staged, commitlint 세 가지 도구의 도입을 제안했다. github discussion 활용, 배포 회의때 동료에게 설명하였다. eslint 기반 Git Hook 품질 검사 도구 - Husky, lint-staged, commitlint · IT-Cotato 10th-Kampus-FE · Discussion #184이번에 PR #183 에서 eslint.config.js 를 제대로 도입하게 ..

Kampus 프로젝트는 유학생 커뮤니티 서비스이다. MVP 와 기능이 굉장히 다양한데, 에러 처리가 파악이 안되어서 어려움이 있었다. 백엔드에서 정의한 에러를 throw 해서 선언적으로 처리할 수는 없을까?공통 에러 처리 로직을 단순화 할 수 있을까?사용자 뿐만 아니라 개발자에서 어떤 부분(컴포넌트)에서 어떤 에러가 발생했는지 명확하게 알릴 수는 없을까? (빈화면 금지..) 위의 고민을 해결하기 위해 React 16 의 ErrorBoundary를 도입하게 되었다.#참고https://github.com/devlasbe/error-boundary?tab=readme-ov-filehttps://ko.react.dev/reference/react/Component#catching-rendering-errors-..

기존 서비스 개선 방향기존의 공유 형식은 브라우저 기본 url을 사용해 사용자가 직접 공유하거나, url copied 버튼을 통해 복사 기능을 제공하였습니다. 이에 따라 사용자 경험이 부족하다고 느끼게 되었습니다.다양한 공유 방법을 직접적으로 제공해주면, 함께 친구들과 공유하여 사용하는 서비스적 측면이 향상될 것이라고 생각하였습니다.카카오톡 소셜 로그인, 구글 소셜 로그인을 제공하는 싱크스팟 서비스 이기 때문에, 활용하여서 카카오톡, 이메일 공유하기 기능을 고려하게 되었습니다.추가로 많이 사용하는 인스타그램 서비스를 활용한 공유하기 기능도 고민하였으나, Meta에서 공식적으로 지원하는 적절한 API 가 없음에 따라 안타깝게도 제외하였습니다. 🚨 SEO 태그기존에 우리 링크를 카카오톡에 공유하면 아래처럼..

🙌문제설명△△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습니다. 만약 1번↔2번 끼리 겨루는 게임에서 2번이 승리했다면 다음 라운드에서 1번을 부여받고, 3번↔4번에서 겨루는 게임에서 3번이 승리했다면 다음 라운드에서 2번을 부여받게 됩니다. 게임은 최종 한 명이 남을 때까지 진행됩니다.이때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 번..

개념OSI 7 계층 : 네트워크 통신을 위한 표준 프로토콜 구조 정의한다. 상위 계층일수록 사용자와 더 가까운 기능을 제공한다.프로토콜 : 컴퓨터 네트워크에서 데이터 통신을 위한 규칙이나 약속을 의미한다. 이를 통해 다른 시스템끼리 상호작용할 수 있고, 데이터가 정확하고 일관되게 전송될 수 있도록 한다.OSI 7 Layer의 응용-전송-세션-표현-애플리케이션 계층 중 애플리케이션에 통신에서 사용되는 프로토콜이다. 여러 종류의 프로토콜 중HTTP 는 웹페이지와 데이터를 전송하는 프로토콜 이다.브라우저와 서버 간에 데이터를 주고받기위한 방식으로 사용하고 있다. 특징비연결성 Connectionless : 클라이언트와 서버의 연결을 지속하지 않고, 각 요청마다 새로운 연결을 잇는다.각각의 http 요청에 독립적..

로그인을 구현해본 개발자라면 경험해 본적 있을것!Web Storage 웹스토리지키/값을 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.브라우저에 저장해야하는 데이터, 즉 클라이언트에서 수시로 변경되는 데이터를 웹 스토리지에 저장하게 된다.DB 를 사용하지 않고, 데이터를 임시적으로 저장할때 사용하는 곳이라고 이해하면 된다.저장된 데이터가 존재할 뿐, 서버로 전송하지 않는다. 네트워크 트래픽 비용을 줄여준다.서버에 전송하는 법 : js로 스토리지의 데이터를 읽고, 명시적으로 서버에 전송한다.용량의 제한이 없다한번 저장하면 영구적으로 존재한다.보안적인 문제가 될 수 있다.LocalStorage, Session Storage 가 존재하며, 데이터의 지속성에 따라 제공된다탭/창 마다 공유할..

🙌문제설명경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다.예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다.경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가 서..

🙌문제설명Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다.Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다.Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요.☑️나의 풀이function solution(brown, yellow) { for(var y=3; y☑️배운 점