분류 전체보기

오늘은 플러터에 하단 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('./..

맥북 용량 확보를 목적으로 Cache 파일 일부를 건드렸는데 그 과정에서 이전에 잘 동작하던 API 요청 및 응답이 제대로 이루어지지 않았다. 그러면서 처음 마주하게 된 에러는`ssl.SSLCertVerificationError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:997)` 였다. 가장 일반적인 해결 방법은 certifi가 설치하는 것으로 해결된다고 한다. 하지만 이미 venv의 site-packages에 이미 포함되어 있었다. 또 다른 해결 방법(스택 오버 플로우에서 몇 백개의 추천 수를 받은!)은 Install Certificates.comman..

컴퓨터 공학의 꽃이자 많은 사람들이 어려워하는 CS 과목 중 하나인 '알고리즘'. 대부분의 기업에서도 서류 전형 다음으로 라이브 코팅 테스트를 진행할만큼 중요도도 올라갔으며 사람들의 관심도 또한 높아지고 있다. 아무런 알고리즘, 자료 구조에 대한 배경지식 없이 학부 1학년 때, 백준 온라인 저지를 통하여 알고리즘 문제를 접하게 되면서 자주 벽에 부딪히게 되었는데 시간 복잡도, 공간 복잡도, 빅오 표기법 등에 대한 이해가 많이 부족했던 것 같다. 정렬 알고리즘을 통한 예제들이 앞서 말했던 시간 복잡도, 공간 복잡도, 빅오 표기법에 대한 이해를 돕기 수월하며 동시에 알고리즘 문제에 대한 접근법을 배우기도 좋다고 느껴서 간단하게 정리하는 포스트를 작성하려고 한다. 정렬 문제(Sotring Problem) 알고..

필자를 비롯한 Flutter를 통한 Cross-Platform 개발을 시작하려는 사람들의 경우, Dart 언어도 함께 들어보았을 것이다. 몇몇의 경우, Dart와 Flutter의 출시 시기가 비슷하다고 생각하고 또 그렇게 알고 있는데 실제로 Flutter는 2018년, Dart는 2011년에 처음으로 세상 바깥으로 나오게 되었다. 그렇다면 이미 많은 프로그래밍 언어들이 있었고, 큰 주목을 받지 못했던 Dart를 어째서 Flutter의 언어로 채택하였을까? 프로그래밍 언어 Dart의 특징, 채택될 수 있었던 이유에 대하여 알아보도록 하자! Dart? Dart는 객체 지향 언어이며, Google에서 개발한 프로그래밍 언어이다. "JavaScript를 대체 가능한 Cross-Platform 프로그래밍 언어"를..

안녕하세요 여러분, 죽고 싶었지만 죽을 수는 없으니까 오늘도 하루하루 살아가고 있습니다. 많은 사람들이 모바일 프로그래밍 과목 듣는 걸로 알고 있는데 이번 기회에 알고리즘을 타서 저의 티스토리 블로그가 떡상하면 좋겠네요. 본론으로 들어가서 어떤 식으로 제가 여러분의 수고 과제를 도와드린다는 것인지 알아보도록 하죠. 일단 첫 번째로 제일 중요한 포인트 네트워크 실습을 하는 도중 Handler() 메소드를 사용하게 되는데 교안을 보게 되면 Handler 라는 메서드는 deprecated 되어 바꿔줘야 한다고 되어있죠? d...d....eprecated.. 이게 뭐노 (이래서 영어 2등급이어도 아무 의미 없습니다 아마도요) 구 선생님께 여쭤본 결과 deprecated는 '더 이상 사용되지 않는'이라는 뜻이랍니..