준영의 지식 블로그 준영의 지식 블로그

객체 지향 프로그래밍을 할 때, 객체를 생성하는 대표적인 방법은 클래스를 이용하여 생성하는 것이다. 아래는 클래스로 Human 객체를 생성하는 코드이다. class Human { public String name; public int age; public Human (String name, int age) { this.name = name; this.age = age; } } Human randomGuy = new Human("simon", 10); Human randomGirl = new Human("marry", 12); 위 예시에서 알 수 있는 점은, 두 Human 객체가 서로 다른 이름과 나이를 가지고 있다는 점이다. 서로 다른 사람이니 각자만의 이름과 나이를 가지고 있는게 당연해 보인다. 여기서..

SQL 문법 플레이그라운드 링크: https://www.w3schools.com/mysql/trymysql.asp?filename=trysql_select_all MySQL Tryit Editor v1.0 WebSQL stores a Database locally, on the user's computer. Each user gets their own Database object. WebSQL is supported in Chrome, Safari, and Opera. If you use another browser you will still be able to use our Try SQL Editor, but a different version, usin www.w3schools.com 기본 문법은 아..

현재 회사에서 개발중인 서비스에서, 이미지를 크롭해서 업로드하는 기능이 아이폰 사파리에서만 작동하지 않는 오류를 발견했다. 문제의 원인은, 이미지를 크롭할 때 webAPI 인 canvas 를 사용하는데, iOS 사파리에서는 canvas의 픽셀 너비가 일정 크기를 넘어가면 캔버스를 그릴 수 없게 하는 스펙이 있었던 것이다. 그런데 현재 iOS 에서 제한하는 픽셀 크기는 약 4096x4096 인데, 내가 올린 이미지는 2000 x 2000 이 채 넘지 않았다. 그래서 캔버스를 그리는 로직을 재점검해봤더니, 크롭 영역만큼 캔버스 너비를 그리는 계산에 devicePixelRatio 라는 값이 포함되어 있었다. 이 값이 심상치 않아서 알아봤더니, devicePixelRatio 는 아이폰과 같은 고해상도 디스플레이..

Next.js 기반 프로젝트에서 외부 라이브러리를 설치한 컴포넌트를 로드하는데, 아래와 같은 에러가 떴다. 알아보니, 서버에서는 앞의 id 를 사용했지만, 클라이언트에 그려질 때는 뒤의 id 를 사용했다는 것 같았다. 그래서 크롬 개발자 도구에서 id 를 확인해봤다. 브라우저는 클라이언트로 알고 있었는데, 서버측의 id 를 보여주고 있는게 조금 이상했다. 이 부분은 나중에 좀 더 공부해보자. 아무튼, Next.js 의 렌더링 방식이 클라이언트 사이드 렌더링과 서버 사이드 렌더링으로 나뉘어있어서 생기는 문제라고 가설을 세웠다. 가설을 검증하기 전에, 우선 같은 에러를 마주한 사람이 있을 것 같아서 에러를 그대로 구글에 검색해봤다. 검색 결과, 내가 세운 가설과 비슷한 답변을 한 사람이 있었다. 요약하면, ..