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)만 올 수 있도록 보장해주어야..
relative와 좌표평면 왜 absolute는 가장 근접한 relative를 기준으로 위치 조절이 될까? relative는 자식요소들에게 엘리먼트의 높이와 너비만큼의 좌표평면을 제공하고, absolute는 자신이 속한 평면 내의 절대 위치에서만 이동할 수 있기 때문이다. 부모 엘리먼트의 relative는 자식 내 모든 엘리먼트에게 자신의 높이와 너비로 구성된 좌표평면을 내준다. absolute는 top, bottom, right, left를 통해 평면 내부의 절대 위치로 이동한다. z-index z-index는 말 그대로 평면 상에서의 z축에 위치한 엘리먼트에 인덱스를 걸어주는 것이다. 인덱스가 높을수록 z값이 높아서 평면상 상단에 보인다. . 부모 요소의 relative가 있어야 좌표평면이 제공되므로..
Element.scrollHeight 특정 엘리멘트 컨텐츠의 높이를 픽셀 단위로 하여 값을 반환한 것으로, 화면에 보이지 않는 높이도 픽셀로 포함한다. 컨텐츠가 포함된 엘리먼트의 최소 높이와 scrollHeight은 같다고 볼 수 있는데, 수직 스크롤바 없이도 뷰포트에 모든 컨텐츠를 알맞게 표시하기 위해서이다. window.innerHeight 브라우저 화면 내부 높이를 픽셀로 치환한 것. 브라우저의 뷰포트 높이를 가져온다고 생각해도 된다. window.scrollY 문서가 수직으로 얼마나 스크롤 되었는지를 픽셀 단위로 하여 값을 반환한 것. 정밀도가 1픽셀보다 작아질 수 있으므로 반드시 정수값을 반환하지는 않는다. 출처: MDN https://developer.mozilla.org/en-US/docs/..
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으로 초기화되는 이슈가 있었으나, 팀원들과 함께 상의하여 문제를 잘..
Parameters 함수의 파라미터를 타입으로 만드는 유틸리티 타입이며, 특정 함수의 파라미터를 튜플로 반환한다. 특정 컴포넌트의 파라미터를 타입으로 뽑아낼 때 유용하다. 객체지향 설계 중 리스코프 치환의 원칙을 구현할 때 적극적으로 사용할 수 있을 것 같다. function testFn({str, num, arr}: {str: string, num:number, arr: T[] }, context: string) { return { str, num, arr } } type TestParameter = Parameters[0] const shadow = ({ str, num, arr }: TestParameter) => { return str }
컴포넌트의 재사용성을 위해 width, height에 고정값을 때려넣는 것은 신중해야 한다. 컴포넌트 내부에서 변하지 않을 스타일들은 사이즈에 px을 때려넣어도 아무 상관이 없지만 컴포넌트 자체를 담는 box 등은 부모 컴포넌트에 의해 사이즈나 위치가 변경될 수 있으므로 사이즈를 최대한 보수적으로 건드려야 한다. 픽셀을 절대값으로 때려도 되는 경우 위 컴포넌트에서 보이는 빨간색 바와 파란색 바의 width는 언제나 고정값일 것이다. 이러한 경우에는 width에 고정값을 때려넣어도 아무 상관이 없다. 동적으로 변하기를 원치 않는 값이기 때문. 컨테이너의 width는 보수적으로 건드리는게 좋다 만약 어떤 부모 컴포넌트에서 위의 컴포넌트를 호출했을 때 위 컴포넌트가 부모 컴포넌트의 절반만 차지하거나, 꽉 차는..
