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

ES6 템플릿 리터럴 문법이란

`(백틱) 사이에 내용을 넣는 방식이다.

1
2
3
4
5
6

var ex1 = "더 이상 이런 식으로"  
var ex2 = "연결할 필요가 없다." 
var ex3 = "변수"
console.log(ex1+"내용을 플러스로"+ex2); 
console.log(`더 이상 이런 식으로 내용을 플러스로 연결할 필요가 없다. `); 
console.log(`$(ex3)는 이런식으로 내용 안에 넣어서 사용할 수 있다`); //변수 

Third party란!

회사에서 일을 하면서 가끔 써드 파티라는 말을 듣게 되는데, 완전히 다른 프로젝트에서도 심심찮게 이 단어가 나오자 대체 그게 뭔지 궁금해져서 알아보게 되었다.

Arrays.sort란?

자바에서 기본적으로 제공해주는 정렬 함수로, 배열이나 리스트를 정렬할 때 사용해. 따로 정렬 로직을 짜지 않아도 메소드 호출 한 번으로 오름차순 정렬을 할 수 있어 유용해.

개발 환경

사용한 파일 및 폴더 구조는 다음과 같다(파란색으로 표시되어 있는 파일들만 이번 단계에서 사용한 파일들이다). Thymeleaf를 사용하여 뷰 페이지를 구현했기 때문에 jsp가 아니라 html로 작성되었지만, 사용하는 문법은 똑같다.

컬렉션 프레임워크란?

좋은 건물을 짓기 위해서는 구조를 탄탄하게 설계해둬야 하는 것처럼, 프로그램을 개발할 때에도 사용되는 자료를 어떤 구조로 관리 할 것인지가 중요해. 그래야 프로그램의 기능을 보다 효율적이고 효과적으로 구현할 수 있거든. 이 때 사용하는 것이 자료구조 인데, 필요한 자료구조를 자바에서 미리 구현하여 제공하는 것을 컬렉션 프레임워크 라고 해.