체크박스 전체 선택, 전체 해제

웹 페이지를 만들다 보면 전체 체크 박스를 선택하거나 해제해야 하는 일이 은근히 많다. 상단의 체크박스를 누르면 거기에 맞춰서 전체 선택, 해제 되도록 처리해보자.

SVG 이미지로 라인 애니메이션 만들기

연속된 줄바꿈(엔터) 한 번으로 바꾸기

사용자가 Textarea에 너무 엔터를 많이 쳐 놓았을 경우나, 글을 복사해서 붙여넣었는데 엔터가 너무 많이 포함되어 있을 경우 등 여러가지 케이스에서 줄바꿈을 한 번으로 변경하고 싶어질 수 있다. 그럴 때 유용하게 사용할 수 있는 방법이다.

리액트에서 링크를 href 로 쓰면

이 이슈는 리액트로 만든 실습용 쇼핑몰 사이트를 Github에 배포해보는 연습을 할 때 발생했다.
기존에 이 깃 블로그를 사용하고 있었기 때문에 쇼핑몰 배포는 서브 리포지토리에서 해야 했고, 그럴 경우 경로는 내아이디.github.io/리포지토리주소/ 가 된다.
배포 후 메인에는 정상적으로 접속 할 수 있게 되었는데, 문제는 Nav에서 메뉴를 눌렀을 때 404 페이지가 뜬다는 거였다. 빌드에 시간이 걸려서 그런다는 말도 있고, package.json에 추가 설정을 해 주어야 한다는 말도 있었지만 내 경우에는 그게 문제가 아니었다.
이틀을 씨름하다 간신히 원인을 알아냈는데, 맥빠지게도 링크를 href로 걸어둬서 였다.

Log4j를 사용 중인 라이브러리를 확인해보자

올해 초 Log4j 보안취약점 때문에 온갖 사이트들이 난리가 났었다. 우리 회사에도 프로그램 내부에서 사용중인 Log4j의 버전 확인 및 문제가 된 버전 삭제 요청이 빗발쳐서 확인이 필요했다. 나는 Log4j 안 쓰는데? 싶어도 내가 사용중인 라이브러리 내부에서 Log4j 의존성이 포함되어 있을 수 있기 때문에 점검은 꼭 필요하다. 그럼 내 프로젝트에서 어떤 라이브러리가 어떤 jar를 사용중인지는 어떻게 확인 할 수 있을까?

innerHTML, innerText, outerHTML, outerText는 어떻게 다를까

• innerHTML : 지정한 요소의 태그를 제외한 안쪽 태그만 값을 가져오고 처리(자기 자신은 미포함)
• innerTEXT : 자기 자신을 미포함 한 텍스트를 변경한다.
• outerHTML : 지정한 요소의 태그를 포함하여 가져오고 처리(자기 자신 포함)
• outerTEXT : 자기 자신을 포함한 텍스트를 변경한다.

자바스크립트로 업로드 한 파일 확장자 체크하기

1

<input type="file" name="file1" onchange="checkFile(this)">

위와 같은 input 파일 입력폼에 들어온 확장자를 체크해보자.

CSS FLEX 연습 할 때 유용한 개구리 게임

FLEX는 다양한 속성들을 가지고 있어서 막 배운 직후에는 헷갈리거나 어디에 어떤 속성을 써야 할 지 생각나지 않는 경우가 있다. 그럴 때 FLEX의 속성들을 연습해 볼 수 있는 미니게임 사이트가 있다. 개구리들을 같은 색 연꽃잎 위에 올려주는 게임이다. 난이도 자체는 어렵지 않고, 여러 번 따라하다 보면 각 속성들의 특징도 쉽게 외울 수 있다.

웹폰트가 깨져서 보이는데 해결이 안 될 때

제목과 책 정보는 제대로 나오는데, 본문이 이상하게 깨져 보이는 경우가 있다. 그래서 font-smooth나 -webkit-font-smoothing 같은 걸 적용 해보기도 했지만 결국 똑같았을 것이다. 왜냐하면 그게 문제가 아니니까.

NullPointException이란?

null 때문에 생기는 exception이다. 객체의 값이 null인 걸 모르는 상태로 이 객체를 다른 곳에 활용하거나 값을 비교하려고 할 때 흔히 볼 수 있다. 다른 예외들에 비해 비교적 덜 무서운(?) 예외지만 그만큼 더 빈번하게 만나게 된다.