728x90
728x90
서론 이번 포스팅에서는 JS코드 상에서 if문을 줄여줄 수 있는 기본 연산자 5가지를 소개한다. 하지만 기본 연산자를 활용해 무조건적으로 if문을 줄인다고해서 가독성이 좋아지는 것은 아니니 미리 알아두고 필요할때 적절히 활용하도록 하자. 1. 논리곱(&&), 논리합(||) 연산자의 단락 평가(Short-circuit evaluation) (결과값이 false가 되는 표현식) && (임의의 표현식) Javascript는 && 표현식에서 좌항 표현식의 결과값이 false이면 우항의 표현식을 실행/검사하지 않는다. 그래서 위 예시를 보면, 좌항에 결과값이 false가 되는 표현식이 놓여있고 우항에는 어떤 임의의 표현식이 놓여있는데 우항의 표현식은 아예 실행되지 않는 것이다. 이와 같은 기능은 보통 값이 유효한..
서론 이번 포스팅은 Next.js의 버전이 12에서 13으로 업데이트되면서 발생한 Image 컴포넌트의 변경사항을 다룬다. 아직 구글에 돌아다니는 대부분의 Image 컴포넌트 자료가 12버전 이전의 자료들이라 13버전에는 사용할 수 없는 내용들이 많아 이렇게 간단히 포스팅으로 정리하게 되었다. Next.js v13.0.0 기준 v12.3.0 대비 변경사항 1. Image 컴포넌트의 를 감싸던 과 일부 Prop이 삭제됨 기존 Image 컴포넌트 내부에선 태그를 으로 감싸고 있었지만, 13버전에는 이 삭제되어 13버전에서 Image 컴포넌트를 사용하면 태그 하나만 랜더링된다. 그리고 13버전에서 삭제된 Image 컴포넌트의 Prop은 다음과 같다. layout objectFit objectPosition l..
서론 이번 포스팅에선 NGINX Proxy Manager과 CloudFlare로 같은 로컬 네트워크(공유기) 내 디바이스들이 동일한 도메인으로 개발 서버에 접근할 수 있도록 세팅하고 덤으로 SSL 인증서 적용법까지 소개하도록 하겠다. TL;DR CloudFlare에 개인도메인을 연결하고 A레코드 서브도메인으로 개발 서버 컴퓨터의 공유기 내 사설 IP주소(예: 192.168.x.x, 172.30.x.x)를 등록해놓은 뒤, NGINX Proxy Manager에서 해당 A레코드 서브도메인으로 들어오면 개발 서버가 실행 중인 로컬 포트로 포워딩 해주면된다. 이때 Forward Hostname을 "localhost"나 "127.0.0.1"이 아닌 CloudFlare에 등록했던 사설 IP주소를 기입해줘야 정상 작동..
서론 이번 포스팅에선 Javascript의 Pass by Reference(이하 by Ref.)와 Pass by Value(이하 by Val.)에 대한 이야기를 해볼까 한다. (예제 코드들은 Typescript로 작성되었지만, 큰 차이는 없으므로 참고하기 바란다.) TL;DR Javascript는 함수에 인자를 전달할때 무조건 by Val.로 전달한다. Object를 함수의 인자로 전달할 때도 by Val.로 전달되지만, "Objec에 대한 참조"를 Value로 하여 전달하기 때문에 Object를 함수로 전달하면 by Ref. 처럼 사용할 수 있다. Object를 대입한 a라는 변수를 함수의 인자로 전달하면 해당 인자를 by Ref. 처럼 사용할 수 있기 때문에, 함수 내에서 해당 인자의 속성 값을 수정..
서론 본 포스팅에선 필자가 크롬 확장프로그램을 개발하면서 겪었던 Interval 사용 문제에 대해 다뤄볼까 한다. TL;DR Chrome Extension manifest v3 서비스워커의 실행시간은 최대 5분으로 제한되므로 Interval을 사용하기 위해 setInterval을 사용하는 것보단 chrome.alrams의 create()와 onAlram.addListener()의 사용을 권장한다. chrome.alrams.create()로 생성된 Alram 객체는 단순히 알람의 이름과 시간간격만을 지정할 수 있기 때문에 setInterval처럼 callback 함수를 파라미터로 넘겨줄 수 없다. 그래서 Alram 별로 ID나 태그 등의 serialize가 가능한 인자를 넘겨주고 싶다면, 알람의 이름을 "..
1. 서론 Typescript는 타입선언 시 활용할 수 있는 여러가지 유틸리티 타입이라는 것을 제공한다. 유틸리티 타입은 어떤 임의의 타입을 제네릭으로 받아 여러가지 형태로 쉽게 변형할 수 있도록 만들어졌고 전역에서 사용 가능하다. 덕분에 간결한 코드로 타입 안정성이 보장된 인터페이스 설계가 가능하다. Typescript는 현재(2022.10.11 기준)까지 22가지 유틸리티 타입을 제공한다. 종류가 많기 때문에 여러 포스트으로 나누어 작성하려고 한다. 본 포스트는 이전 포스트에서 다루지 않은 나머지 유틸리티 타입들에 대해 다뤘다. 이전 포스트 바로가기 [Typescript] 유틸리티 타입 - 1 1. 서론 Typescript는 타입선언 시 활용할 수 있는 여러가지 유틸리티 타입이라는 것을 제공한다. 유..