전체 글

문제 설명2021년 12월, 네 번째로 개최된 ZOAC의 오프닝을 맡은 성우는 오프라인 대회를 대비하여 강의실을 예약하려고 한다.강의실에서 대회를 치르려면 거리두기 수칙을 지켜야 한다!한 명씩 앉을 수 있는 테이블이 행마다 W개씩 H행에 걸쳐 있을 때, 모든 참가자는 세로로 N칸 또는 가로로 M칸 이상 비우고 앉아야 한다. 즉, 다른 모든 참가자와 세로줄 번호의 차가 N보다 크거나 가로줄 번호의 차가 M보다 큰 곳에만 앉을 수 있다.논문과 과제에 시달리는 성우를 위해 강의실이 거리두기 수칙을 지키면서 최대 몇 명을 수용할 수 있는지 구해보자. 입력H, W, N, M이 공백으로 구분되어 주어진다. (0  H, W, N, M ≤ 50,000) 출력강의실이 수용할 수 있는 최대 인원 수를 출력한다.예제 입력 ..

이번에 구현하고 있는 서비스에서는 카카오와 구글, 이렇게 두 가지의 OAuth를 지원하고 있다.나는 그 중에서도 카카오를 맡게 되었으나, 구글의 OAuth 플로우도 거의 동일한 것 같아 전반적인 OAuth에 대한 공부를 해보았다.프론트 단에서 처리하는 방법만 알기보다는, 서버에서는 어떤 과정을 거치는 지도 알아야할 것 같아서 백엔드를 담당하시는 분과도 이야기한 후 정리해보았다. 그렇다면 우선 OAuth가 무엇인지부터 알아보자 ! OAuth란?OAuth (Open Authorization)는 제 3자 애플리케이션이 사용자의 비밀번호를 알지 않고도 해당 사용자의 정보를 안전하게 접근할 수 있게 해주는 인증을 위한 개방형 표준 프로토콜이다.이를 통해 로그인 정보와 같은 민감한 데이터를 노출하지 않고도, 다른 ..

개발 환경에서는 잘 로드되던 작은 이미지 하나가 배포 환경에서는 로드되지 않는 문제가 있었다.스타일적인 요소여서 img 태그의 src로 넘겨주지 않고, css의 background 속성으로 처리해주고 있었는데 위와 같은 문제가 발생한 것이었다.  원인을 찾고 싶어서 우선 가설을 세워두고, 확인해나가면서 원인을 파악해봤다. 원인 추측1. 경로를 잘못 써주었다 !?간혹가다 파일명이나 경로의 대소문자를 변경하고 바로 반영이 되지 않아 적용이 되지 않는 경우가 있기는 하다.하지만 내가 사용한 이미지 경로의 대소문자만 변경한 적도 없고, 절대 경로를 통해서 import 하고 있었기 때문에 상대 경로로 인한 문제도 아니었다. 2. 파일 형식에 문제인가?이때 사용한 방식과 똑 ! 같은 방식으로 사용하고 있던 bacg..

기능적인 구현은 모두 끝이 났다.디자인도 같이 병행해서 개선하다보니, 생각보다 신경쓸 것들이 더 많았지만 그래도 마무리가 되고 보니 너무 뿌듯했다.하지만 본격적인 고민은 지금부터 시작이다. 내가 만든 웹 사이트가 성능적으로 얼마나 더 개선될 여지가 남았는지 잘 따져보아야 한다.구현했다 끝~! 하고 덮어놓고 보지 않으면 의미가 없지 않은가 !그래서 지금부터는 어떤 지점을 개선할 수 있을 지 한 번 리스트업 해보려고 한다. 1. 시작할 때 정한 컨벤션을 잘 지켰는가?함수의 정의 방식을 올바르게 사용하고 있는지네이밍 형식을 잘 지켰는지import , export 를 적절하게 하고 있는지 (export default)사용하기로 한 라이브러리를 통해 로직을 구현했는지폴더 구조는 올바르게 짜서 사용하고 있는지등 등..

프로젝트에서 아래와 같은 레이아웃을 사용하는 사이드 페이지들이 있다.페이지보다 더 앞에서 렌더링되어야 하기 때문에 모달을 렌더링 하듯이 usePortal을 사용해서 id="portal"인 DOM 요소의 하위 요소로 렌더링 되도록 했다. 그리고  SideBarHeader의 닫기 버튼은 공통으로 쓰이지만 SidePageLayout에 고정적으로 넣기는 어려웠다.그 이유는, 페이지의 종류의 따라서 그 페이지의 타이틀이 적히기도 하고, 케밥 버튼이 추가되기도 했기 때문이다. 그래서 나는 합성 컴포넌트로 SidePageLayout을 구현하기로 마음 먹었다 ! 합성 컴포넌트 (Composed Component) 란?컴포넌트 기반 아키텍처 핵심 개념 중 하나로,  작은 단위의 컴포넌트를 조합해서 복잡한 컴포넌트를 구성..

react-query는 데이터 패칭과 상태 관리를 간편하게 처리할 수 있게 해주는 정말 좋은 라이브러리이다.이번 프로젝트에서도 react-query를 이용한 데이터 패칭을 하게되어서 열심히 사용해보고 있다. 현재 진행하는 프로젝트는 다른 분과 함께하다보니, 그 분이 특정 query-key를 통해서 데이터 패칭을 하고 있다면, 나는 그 쿼리를 무효화할 때 그 분이 어떤 query-key를 쓰고 계시는 지 열심히 찾아서 주워야하는 불편함이 있었다. like 헨젤과 그레텔... 이 뿐만 아니라 query-key를 변경해줘야 할 때도 그 쿼리 키를 사용하는 곳을 여기저기 돌아다니면서 query-key를 변경해줘야 하는 끔찍한 경험이 나를 기다리고 있었다.(쿼리 키만 바꿨을 뿐인데 늘어나는 파일 체인지...) 그..

기술 스택 선정 이유React vs Next.js SEO를 챙길 필요가 없음사용자 인터랙션 중심의 서비스대시보드를 통한 컬럼 및 카드 생성, 수정, 조회, D&D 등 사용자 인터랙션 중심의 서비스이기 때문에 SEO를 챙기는 것이 중요하지 않았을 뿐더러, Next.js의 이점 중 하나인 검색 엔진 최적화를 활용할 수도 없었고 앱 라우터의 서버 컴포넌트 등도 필요하지 않아 React로 진행하기로 했다. Tailwind vs Styled-ComponentsTailwind의 장점인 빠른 개발 속도 및 작은 번들 크기가 큰 이점이기에 마지막까지 고민을 하였으나, prop으로 동적으로 스타일을 변경할 수 있고, 기존 CSS의 @Keyframes을 그대로 사용할 수 있는 Styled-Components를 사용하기로 ..

이번에 (어느덧 한 달이 지난 시점이지만) 프로젝트 목록을 불러오는 로직을 작성하게 되었다.Next.js의 App router을 이용하기로 해서, react-query를 쓸지 안쓸지 팀원분들과 이야기를 나누어보았다.토론의 결과는 react-query를 사용하자는 것으로 귀결되어 무한스크롤 역시 react-query를 사용해서 구현했다. 구현 계획은 프로젝트 리스트의 가장 아랫부분에 div를 넣어두고, 이 요소가 보이는 순간 새로운 데이터를 패칭하는 것이다.그럼 바로 로직을 작성해보자. Intersection Observer 이용하기사용하려는 컴포넌트에서 intersectioin observer 설정을 해도 되지만, ProjectList.tsx는 데이터를 받아서 UI로 보여주는 UI컴포넌트이자, 여러 곳에..

우선 3주차 수업 회고를 마지막으로 주차별 회고를 올리지 않았다.거기에는 크게 세 가지 이유가 있다.강사님께서 준비하신 수업 커리큘럼을 그대로 올리는 것에 대한 조심스러움글로 정리할 수 없는 수많은 예외 상황과제를 수행하며 받는 피드백이 수업의 개념을 몸으로 마주하며 깨닫는 과정을 전달하기 어려움이러한 이유로, 수업에서 다루는 이론 개념들의 내용을 정리하여 공유하지는 않기로 마음 먹었다.스스로 강의를 복기하는 시간은 가졌지만, 오늘의 포스팅에서는 6주간의 빔캠프 과정을 회고해보려고 한다.강의 수강 이전의 나나는 CSS에 대한 개념이 아예 없거나, 원하는 디자인 시안을 구현하지 못하는 수준은 아니었다.여러 프로젝트와 프론트엔드 멘토를 통해서 주어진 디자인 시안을 구현할 줄 알았고, 간간히 내가 의도하지 않..

문제 상황분명히 react-query에서 client를 getQueryClient로 잘 가져오고 있는데 onSuccess가 제대로 동작하지 않는다...진짜 왜일까 진짜로...라고 생각하던 차!개발 일지를 작성하며 추측했던 몇 가지 요소대로 이유를 추려나가기로 마음 먹었다.이렇게 원인인 것 같은 부분을 점차 좁혀나가자, 결국엔 원인을 찾아냈다 하하 ! 아래는 문제 해결 전에 작성했던 코드이다.문제와 관련없는 부분은 생략했다'use client'function EditProfileModal({ openModal, handleModalClose, profileData }: EditProfileModalProps) { const queryClient = getQueryClient(); //이 부분이 올바르게 ..