설계의 필요성 재직중인 회사에 자사 쇼핑몰도 생기고 커머셜 커뮤니티도 생길 것 같다. 나중에 유지보수에 허덕이지 않으려면 사용할 라이브러리 채택, 디렉토리 구조 등 간단한 설계를 미리 해놓는게 좋을 것 같다. 회사가 요구하는 기능 구현의 양은 선형적으로 증가하고 있다. 행복한 상황이지만, 아무래도 프론트엔드 개발자가 나 혼자뿐인 만큼 책임 소재도 그만큼 막중해지는듯 하다. 물론 백엔드 개발자분께서 간간히 도움을 주시고는 있다지만 도움을 받더라도 도와주시는 분께서 큰 고민 없이 코드만 치실 수 있도록 해드리는게 내 역할이지 않을까. 아무튼 여러 필요로 인해 프론트엔드 설계에 대한 정보들을 이것저것 모으고 있다. 일단 정보를 착실히 모은 후, 내것으로 만들어서 개발환경에 잘 풀어내기 위해서다. 다행히 참고할..
iOS flutter 웹뷰 환경에서 구동중인 next.js 프로젝트의 a 태그를 터치했을 때, 화면이 전환되었음에도 불구하고 a 태그의 잔상이 0.5초 정도 남아있던 이슈가 있었다. https://github.com/pichillilorenzo/flutter_inappwebview/issues/1553 Problem with afterimage remaining when button is clicked in iOS · Issue #1553 · pichillilorenzo/flutter_inappwebview [o] I have read the Getting Started section [o] I have already searched for the same problem Environment Techno..
에러처리 프로그램은 컴퓨터에게 실행할 작업을 지시하고 그 작업을 수행하기 위한 명령어의 집합이며, 일반적으로 사용자의 요구에 따라 원하는 작업을 수행하도록 설계된다. 즉, 사용자의 요구(입력)에 따라 특정 명령어가 실행 되도록 하는 것이 프로그래밍이라고 정의할 수 있다. 만약 사용자들의 입력사항을 완전히 신뢰할 수 있다면 프로그램의 런타임 에러는 획기적으로 줄어들 것이다. 하지만 개발자들은 사용자들을 100% 신뢰할 수 없고 그래서도 안된다. 그러므로 사용자의 입력에 대해서는 유효성 검증, assertion 등 에러를 처리할 수 있는 방법을 강구해야 한다. 만약 사용자 입력에 대해 유효성 검증이나 에러 처리를 하지 않는다면 프로그램 내에서 사용되는 데이터의 일관성과 신뢰성이 무너지게 될 것이고, 이는 프..
PuTTY로 클라우드 컴퓨터 원격 접속 SSH (Secure Shell) 네트워크 상 다른 컴퓨터의 쉘을 사용할 수 있게 해주는 프로그램 혹은 프로토콜을 의미한다. 연결 이전에 서버 또는 사용자가 Key Pair를 생성한다. Key Pair는 공개 키와 개인 키 두 가지로 이루어진 한 쌍을 뜻한다. 공개 키(Public Key)는 .pub, 개인 키(Private Key)는 .pem의 파일 형식을 띄고 있다. 개인 키는 사용자(client)에게 제공되며, 보안이 필수적이다. 22번 포트는 SSH의 기본포트이다. https://library.gabia.com/contents/infrahosting/9002/ 가비아 라이브러리 IT 콘텐츠 허브 library.gabia.com 나중에 위 사이트를 한번 더 참..
아래 함수는 문제가 있다. 매개변수 startAt에 객체를 직접 할당해버리기 때문이다. 만약 remainDateCalculator에 let today = new Date('2023-12-13') 과 같은 Date 객체를 인수로 넣고 호출한다면 today 변수는 오염이 될 것이다. 이 함수에 Date 객체를 인수로 넣은 후 실행하게 되면 startAt.setDate(startAt.getDate() + 5)로 인해 파라미터 startAt 은 강제적으로 +5일이 된 Date 객체가 된다. 해결 방법 이러한 에러를 파라미터 차원에서 방지해주기 위해서는 remainDateCalculator(new Date()) 와 같이 호출해서 사용하거나, startAt은 무조건 원시값(string)만 올 수 있도록 보장해주어야..
1. next.js 인스톨 pnpm create next-app@version 필자는 typescript, tailwind 신봉자이므로 이 둘은 꼭 설치한다. 2. ESLint, Prettier 인스톨 pnpm i -D eslint-config-prettier eslint-plugin-tailwindcss prettier eslint-config-prettier는 prettier와 eslint의 충돌을 막기 위해 설치한다.. eslint-plugin-tailwindcss는 tailiwind 전용 린트 역할을 하는 플러그인이다. prettier는 모두다 아는(?) 그 포맷터이다. 설치 후 eslintrc, package.json, .prettierrc, .prettierignore에 스크립트 셋팅을 한다...
X축으로 스크롤링이 가능한 차트를 구현해야했다. 차트 라이브러리는 ApexChart를 사용했다. 많은 사람들이 사용하시더라. 스크롤링 기능은 아래와 같이 설계하여 구현했다. 차트 라이브러리에 종속된 자잘한 사용자 편의 기능도 구현이 필요했다. 태어난 해에 따른 차트 부분이 하이라이팅 되어야 했다. 사용자는 차트에서 자신의 나이가 하이라이팅된 부분을 바로 볼 수 있어야 했다. 차트에 하이라이팅되는 기능은 차트 라이브러리의 공식문서를 읽어가면서 어렵지 않게 구현할 수 있었다. 하이라이팅된 부분에 스크롤이 이동하는 것도 ref와 useEffect를 이용해 간단히 구현할 수 있었다. 다만 강제로 잡은 스크롤이 앱 환경에서는 의도치않게 x좌표가 0으로 초기화되는 이슈가 있었으나, 팀원들과 함께 상의하여 문제를 잘..
컴포넌트의 재사용성을 위해 width, height에 고정값을 때려넣는 것은 신중해야 한다. 컴포넌트 내부에서 변하지 않을 스타일들은 사이즈에 px을 때려넣어도 아무 상관이 없지만 컴포넌트 자체를 담는 box 등은 부모 컴포넌트에 의해 사이즈나 위치가 변경될 수 있으므로 사이즈를 최대한 보수적으로 건드려야 한다. 픽셀을 절대값으로 때려도 되는 경우 위 컴포넌트에서 보이는 빨간색 바와 파란색 바의 width는 언제나 고정값일 것이다. 이러한 경우에는 width에 고정값을 때려넣어도 아무 상관이 없다. 동적으로 변하기를 원치 않는 값이기 때문. 컨테이너의 width는 보수적으로 건드리는게 좋다 만약 어떤 부모 컴포넌트에서 위의 컴포넌트를 호출했을 때 위 컴포넌트가 부모 컴포넌트의 절반만 차지하거나, 꽉 차는..
소프트 네비게이션 next.js 앱은 네비게이션은 디폴트값으로 소프트 네비게이션으로 이뤄진다고 한다. https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating Routing: Linking and Navigating | Next.js Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook. nextjs.org 그런데 저놈의 소프트 네비게이션은 어떻게 선택할 수 있는 것이 아니다. 내가 하드한걸 원해도 불가능하다니... 오... 젠장 이 현상을 알아보느라 3시간을 할애했다. 발단은 이렇다. 특정 화면에..
react-quill https://quilljs.com/ Quill - Your powerful rich text editor Sailec Light Sofia Pro Slabo 27px Roboto Slab Inconsolata Ubuntu Mono Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any ne quilljs.com quill은 유명한 위지위그 에디터로 많은 사람들이 애용하고 있는 오픈소스다. react-quill 라..
