분류 전체보기

1. Recoil이란? Recoil은 Facebook에서 제작한 React를 위한 상태 관리 라이브러리입니다. Reocil 공식 홈페이지: https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org 프론트엔드에서 상태 관리를 매우 중요한 요소입니다. 상태 관리를 통하여 서비스나 프로그램의 동작을 예측 가능하도록 만들고, 버그를 줄이며, 코드를 더욱 효율적으로 작성할 수 있도록 도와줍니다. 2. 많은 상태 관리 라이브러리 중에 왜 Recoil을 사용할까? 최근 많은 React 프로젝트에서 Reocil을 통하여 상태 관리를 진행하는 것을 심심치 않게 볼 수 있는데, 제가 생각하고 적용해보며 느낀 선정 이유는 아래와 같습..

https://school.programmers.co.kr/learn/courses/30/lessons/42577 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 본 포스팅에서 다루는 문제는 위 프로그래머스 링크를 통하여 문제 확인 및 풀이가 가능합니다! 짧은 문제 분석 입력 값으로는 String List 타입의 phone_book이 주어집니다. ex) ["119", "97674223", "123"] phone_book 내부의 전화번호 중 한 번호가 다른 번호의 접두사인 경우가 있으면 false, 없으면 true를 반환합니다. ex) ["119", "119..

https://school.programmers.co.kr/learn/courses/30/lessons/17680 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 본 포스팅에서 다루는 문제는 위 프로그래머스 링크를 통하여 문제 확인 및 풀이가 가능합니다! 1. 정답 코드 function solution(cacheSize, cities) { var answer = 0; let cacheList = []; if (cacheSize === 0) // 캐시 사이즈가 없는 경우 -> 모든 경우에서 cache miss return answer = cities.leng..

오늘은 플러터에서 디자인 시스템을 효율적으로 관리하는 방법을 소개하려고 합니다. 특히 프로젝트 내에서 범용적으로 사용되는 TextStyle과 Color에 초점을 맞추어 글을 작성하겠습니다. 디자인 시스템이란? 디자인 시스템은 프로덕트 개발의 일관성, 효율성, 확장성을 보장하기 위해 필요한 시각적 요소(스타일, 구성 요소, 패턴, 가이드라인) 등을 정의한 것입니다. 디자인 시스템을 정의하는 법은 따로 정해져 있지 않기에 좌측처럼 디자이너가 직접 작성하여 공유하는 경우도 있으며, 우측과 같이 디자인 툴() 내부 기능을 통하여 정의하기도 합니다. 디자인 시스템에서 정의된 Text(세부 속성 및 명칭 포함) Figma 내부에서 정의된 색상 모음 이렇듯 자주 사용하는 TextStyle, Color 등을 프로젝트 ..

오늘은 플러터에 하단 sticky UI 패턴을 접목시킨 스크린 템플릿을 소개하려고 합니다. 최근 기업의 채용 공고 페이지 및 쇼핑 플랫폼에서 주요 기능에 대한 접근성을 높이기 위하여 이러한 UI 패턴을 활용하는 추세입니다. 1. Sticky UI란? sticky UI는 화면에 배치된 UI 요소가 스크롤에 영향을 받지 않고 사용자 시야에 고정되어 있는 디자인 패턴을 말합니다. 이를 통하여 사용자는 어떠한 상황에서도 주요 기능에 쉽게 접근할 수 있는 장점이 있습니다. 채용 공고 사이트의 '지원하기' 버튼 쇼핑몰의 '찜하기', '장바구니 미리담기', '재입고 알림신청' 버튼 이러한 sticky UI는 작은 화면 크기로 인하여 잦은 스크롤이 발생하는 모바일 환경에 주로 사용됩니다. 채용 공고 사이트에서의 '지원..

문제 상황(Problem) Vite + React 프로젝트를 nginx를 이용하여 배포를 진행하던 중에 아래와 같은 문제가 발생하였다. 해결 방법(Solution) 아마 나처럼 Nginx를 처음 사용하는 사람들이 같은 문제를 많이 겪을 것이라고 생각한다. ipv6의 사용을 하지 않는 서버의 경우에 nginx 기본 설치 파일 중 /etc/nginx/sites-enabled/default (deafault 파일 설정 파일) 내부에 있는 ipv6 관련 설정 부분과 충돌하여 문제가 발생하게 된다. 문제 해결 방법을 간단하게 적으면 아래와 같다. 1. default 사이트 설정 파일 "/etc/nginx/sites-enabled/default"를 파일 편집기를 통하여 연다. vi /etc/nginx/sites-e..

Problem (문제 상황) 서비스 출시를 앞둔 링링 서비스를 팀원들과 함께 테스트하던 도중, 미처 발견하지 못한 문제를 팀원 한 명이 말해주었다. 문제는 아이폰 사용자들에게는 익숙할 수 있는 Swipe Back Gesture를 통한 뒤로 가기 기능에서 발생하였다. 평소, 안드로이드를 사용하는 나에게는 에뮬레이터를 통한 테스트에서도 너무 당연하게 Swipe Back 제스쳐를 테스트 해보지 않았고 관련된 기능을 추가한 적이 없어서 코드 상에서 별도로 처리해두지 않았다. 그렇지만 Flutter 자체의 위젯이나 기능들이 높은 사용자 경험을 제공하는데, 이 Swipe Back Gesture 역시 기본적으로 내장되어 있었다. 위는 문제 상황에 대한 스크린샷으로 Swipe Back을 통하여 로그인 화면으로 돌아가는..

React + Vite에서 Pretendard 폰트를 전역적으로 적용하기 위하여 코드를 작성하였는데 해당 코드에 문제점이 있다는 것을 조금 늦게 발견하였다. 화면 상으로는 폰트가 정상적으로 적용된 것처럼 보이지만, 콘솔 로그를 살펴보면 'Failed to load resource' 에러가 발생하고 있다. 즉, 적용하고자 하는 폰트 파일들을 불러오는 단계부터 문제가 되고 있다는 뜻. 가장 먼저 해당 파일의 경로가 올바른지, 경로 작성에서 오탈자가 있지는 않은지 확인하였지만 별 다른 문제점은 없었다. 아래는 문제가 되는 코드의 일부이다. 문제 코드 const GlobalStyles = createGlobalStyle` @font-face { font-family: Pretendard; src: url('./..