전체 글

프론트엔드 개발을 하다보면, UI 컴포넌트의 변화를 한 눈에 보고 싶을 때가 있다. 그럴 때 사용하기 좋은 것이 바로 스토리 북이다 !하지만, 정확히 이게 무엇인지 왜 사용하는 것이 좋은 지는 잘 몰라서 이번 기회에 알아보려고 한다. 주로 공식 문서의 내용을 참조해서 내용을 정리해보도록 하겠다 !스토리북 공식 문서 : https://storybook.js.org/docs 스토리 북(Storybook)이 뭐야?공식 문서의 소개글을 인용해보면,스토리북은 UI 구성 요소와 페이지를 독립적으로 구축하기 위한 프론트엔드 도구입니다.전체 앱을 실행할 필요없이 접근하기 어려운 상태와 엣지 케이스를 개발하고 공유할 수 있도록 도와줍니다. 이 말을 설명해보면, 애플리케이션 속에서 비즈니스 로직과 분리된 상태에서 UI를 ..

이전 게시글로 카카오톡 메시지 템플릿을 이용하여 카카오톡 공유하기를 구현해보았다.그런데, 아래의 비빔밥 이미지를 클릭했을 때도 "방명록 남기러 가기" 버튼을 클릭했을 때와 동일한 링크로 이동해야하는데, 서비스 도메인 링크로 이동이 되는 문제가 있었다.메시지 템플릿 설정에서는 이미지와 함께 링크를 넣을 수 있는 설정이 별도로 없었기 때문에 기획자 분의 의도에 맞게 메시지 템플릿을 수정하기로 했다. 미리 메시지 템플릿을 지정해놓는 방법 대신, 직접 클라이언트에서 템플릿 양식에 맞춰 공유하기를 구현하고자 했다.직접 커스텀하고는 싶은데, 방법이 헷갈리는 분들을 위해서 차근차근 설명해보려고 한다. 지금 우리에게 필요한 것은 듀얼 모니터 두 개의 창(링크)이다.   ** 카카오톡 SDK 설치 및 초기화 단계는 이전..

여러 서비스를 이용하다보면, 카카오톡으로 이를 공유하고 싶을 때가 있다.그런 순간 서비스들은 카카오톡 공유하기를 통해서 사용자가 공유할 수 있도록 기능을 제공하는데, 이때 첨부되는 정보는 공유 받은 사용자가 서비스에 새롭게 유입되는지, 안되는지를 결정하기 때문에 꽤나 중요하다고 생각한다. 그래서 나는 카카오톡 공유하기 기능을 통해서 사용자가 우리의 서비스를 널리 공유할 수 있도록 하려고 한다. 카카오톡 공유하기카카오톡 공유하기를 구현하기 위해서는, 우선 카카오 Developer에 내 애플리케이션이 등록되어 있어야 한다.https://developers.kakao.com/카카오톡 공유하기 문서만약 미리 등록해두지 않았다면 등록해두고, 등록하는 법은 내 애플리케이션을 누른 뒤에 차근차근 단계를 따라가면 충분..

문제 설명삼각형의 세 변의 길이가 주어질 때 변의 길이에 따라 다음과 같이 정의한다.Equilateral :  세 변의 길이가 모두 같은 경우Isosceles : 두 변의 길이만 같은 경우Scalene : 세 변의 길이가 모두 다른 경우단 주어진 세 변의 길이가 삼각형의 조건을 만족하지 못하는 경우에는 "Invalid" 를 출력한다. 예를 들어 6, 3, 2가 이 경우에 해당한다. 가장 긴 변의 길이보다 나머지 두 변의 길이의 합이 길지 않으면 삼각형의 조건을 만족하지 못한다.세 변의 길이가 주어질 때 위 정의에 따른 결과를 출력하시오. 입력각 줄에는 1,000을 넘지 않는 양의 정수 3개가 입력된다. 마지막 줄은 0 0 0이며 이 줄은 계산하지 않는다. 출력각 입력에 맞는 결과 (Equilateral,..

문제 설명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로 넘겨주지 않고, background로 처리해주고 있었는데 위와 같은 문제가 발생한 것이었다.  원인을 찾고 싶어서 크게 원인으로 예상되는 것을 뽑아두고, 찾아보았다. 원인 추측1. 경로를 잘못 써주었다 !?간혹가다 파일명이나 경로의 대소문자를 변경하고 바로 반영이 되지 않아 적용이 되지 않는 경우가 있기는 하다.하지만 내가 사용한 이미지 경로에 대소문자만을 변경한 적도 없고, 절대 경로를 통해서 import 하고 있었기 때문에 상대 경로로 인한 문제도 아니었다. 2. 파일 형식에 문제인가?이때 사용한 방식과 똑 ! 같은 방식으로 사용하고 있던 bacground-i..

기능적인 구현은 모두 끝이 났다.디자인도 같이 병행해서 개선하다보니, 생각보다 신경쓸 것들이 더 많았지만 그래도 마무리가 되고 보니 너무 뿌듯했다.하지만 본격적인 고민은 지금부터 시작이다. 내가 만든 웹 사이트가 성능적으로 얼마나 더 개선될 여지가 남았는지 잘 따져보아야 한다.구현했다 끝~! 하고 덮어놓고 보지 않으면 의미가 없지 않은가 !그래서 지금부터는 어떤 지점을 개선할 수 있을 지 한 번 리스트업 해보려고 한다. 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를 변경해줘야 하는 끔찍한 경험이 나를 기다리고 있었다.(쿼리 키만 바꿨을 뿐인데 늘어나는 파일 체인지...) 그..