탐구소년

2022년 여름 버전. 1. 다음 링크로 이동하여 jdk 설치 파일을 다운로드합니다. => https://www.oracle.com/java/technologies/downloads/ 2. 오늘(2022.06.24) 최신 버전은 18.0.1.1 이네요. 사용 중인 운영체제를 선택하고, 설치 파일을 선택합니다. (여기에서는 윈도우10 PC를 기준으로 진행합니다) 3. 설치 파일 다운로드가 완료되면 바로 이를 실행하여 설치를 진행합니다. 넥스트, 넥스트, 넥스트. 따로 설정할 것은 없으므로 창을 쭉쭉 넘겨가며 진행하면 됩니다. 완료까지 오래 걸리지 않습니다. 4. 설치가 완료되면 jdk가 설치된 위치를 파악합니다. 이 위치는 환경변수를 설정할 때 필요한 정보입니다. 5. jdk 설치를 마쳤으니 환경변수 설정..

개요 자주라고 말할 정도까지는 아니지만, 명령 프롬프트나 터미널에서 명령을 입력했을 때 다음과 같은 오류가 발생하는 경우가 있습니다. 제 경우에 이것은 gulp 버전 확인 명령어인 gulp --version을 실행했을 때 발생했습니다. 오류 메시지를 보면 알 수 있듯 이는 보안상의 이유로 발생하는 에러이고, 이러한 문제를 해결하기 위해서는 관리자 권한으로 실행 정책을 변경해주어야 합니다. 참고) 실행 명령어에는 밑줄을 그어 두었습니다. 절차 1. 윈도우 시스템의 파워셸(powershell) 앱을 관리자 권한으로 실행합니다. 2. 파워셸 명령행에서, ExecutionPolicy 명령어를 실행해보세요. 현재의 정책을 확인할 수 있을 것입니다. 그리고 UnauthorizedAccess 오류가 발생할 때의 정책..

이번 포스팅에서는 자바스크립트를 이용해 웹문서를 조작할 때 사용하는 메소드 중 append와 appendChild의 차이에 대해서 정리해보려고 합니다. 두 메소드 모두 어떤 요소에 자식 요소를 추가하기 원할 때 사용하는 메소드인데, 둘 사이에는 사소한 듯하면서도 중요한(?) 차이가 몇 가지 존재합니다. append vs appendChild 1. 대표적인 차이점은 두 메소드의 이름만으로 예측 가능한 차이입니다. append를 이용하면 요소에 노드 객체 또는 DOM문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있습니다. 2. 또 한 가지 차이점은, appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다는 점입니다. 이상입니다..

안녕하세요. 자바스크립트 예제 포스팅입니다. 마우스 커서로 특정 요소를 클릭하면 스크롤이 정해진 위치로 이동하는 동작을 구현해보았고요. HTML, CSS, JavaScript 순서로 하나씩 코드를 살펴보겠습니다. 코드가 무척 간단하므로 이해하기 어렵지 않으실 것 같지만, DOM에 대한 이해가 부족하신 분들에게는 다소 어렵게 느껴지실 수 있습니다(직접 해보지 않고 코드만 읽어 볼 경우에도 어렵게 느껴집니다, 꼭 직접 해보세요!). 해당 코드에 대한 설명은 제 유튜브에서 동영상으로도 만나보실 수 있으니 참고해주세요. 감사합니다. => https://youtu.be/r3G0U5fva1c HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 HTML 문서 1번2번3번 1 2 3 0..

안녕하세요. 이번 포스팅에서는 정말 친숙하면서도 왠지 어색한 '그 존재', DOM에 대해서 소개해보려고 합니다. DOM을 친숙하면서도 어색한 존재라고 표현한 이유가 있습니다. 웹퍼블리싱이나 프론트엔드 코딩을 하는 사람들에게 DOM은 단어(약어이긴 하나) 자체만 봤을 땐 무척 친숙한 단어이지만, 누군가가 '도대체 그게 뭔데?'라고 물어보았을 때 'DOM이라는 건...!'하고 자신있게, 또 깔끔하게 답할 수 있는 경우가 그리 많지는 않은 것 같거든요. 머릿속에는 그게 뭔지, 어떤 개념인지에 대한 그림이 왠지 대충 그려지는 것 같은데, 막상 말로 표현하려니 어려운 느낌이랄까? 저역시 마찬가지고요 ㅎㅎ 그래서 이번 기회에 글로써 정리를 해두려고 하니, 필요하신 분들은 참고해보시면 좋을 것 같습니다. 내용 중 일..

이번 포스팅에서는 HTML 요소 공통 속성인 textContent와 innerText의 차이에 대해서 정리해보려고 합니다. 그놈이 그놈같아 늘 헷갈리지만, 그 차이에 대해 생각하려 하기 보다는 외면하고 넘어가는 경우가 많은 속성이 바로 이 두 속성인데, 사실 그 차이를 알아보려고 열심히 구글링을 해 보아도 시원하게 '이거다!'하고 차이를 알려주는 자료를 찾기가 쉽지 않은 것 같습니다(개인적인 생각이지만). 저 또한 마찬가지 였지만, 스택오버플로우를 뒤지다가 나름대로 시원한(정말?) 글을 보게 된 것 같아 반가운 마음에 정리를 해보게 되었습니다. 저 자신이 편하게 두고두고 볼 수 있도록 짧게 리스트업 하는 형식으로 정리해두려 합니다. 또한 새로운 사실을 알게 되면 계속적으로 업데이트하도록 하겠습니다. te..

안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 스톱워치 구현하는 방법에 대해 정리해보도록 하겠습니다. 해당 코드에 대한 설명은 제 유튜브 채널에서 동영상으로도 만나보실 수 있으니 참고해주세요. => youtu.be/a01-IPc57Rk 목표 다음에 이미지와 같은 스톱워치를 웹페이지 상에서 구현하는 것이 목표입니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 스톱워치 스톱워치 00:00:00 START STOP RESET 12행 : container 는 스톱워치의 전체 영역을 표시합니다. 15행 : 분, 초, 미리초 단위의 숫자를 각각 span 태그로 묶어 분류해주었습니다. 17행 - 19행 : 각각의 버튼을..

안녕하세요. 이번 포스팅에서는 웹브라우저 환경에서 자바스크립트 코드를 작성할 때 써먹을 수 있는 유용한 메소드, setInterval과 clearInterval에 대해서 간단히 정리해보도록 하겠습니다. setInterval setInterval 메소드는 일정한 시간 간격마다 함수를 반복 실행할 수 있도록 해주는 타이머 메소드입니다. 사용 방법은 아래와 같습니다. 1 setInterval(반복_실행할_함수, 반복_주기_ms_단위로); 보이는 바와 같이 메소드의 첫 번째 인자로는 반복 실행하고자 하는 함수를, 두 번째 인자로는 반복 실행할 주기를 정수 값으로 전달해주면 됩니다. 이 때 주기는 미리세컨즈(ms) 단위입니다. 다음은 실제 사용 예입니다. 1 2 3 setInterval(function(){ co..

안녕하세요. 이번 포스팅에서는 자바스크립트(라이브러리 미사용)를 이용해 디지털 시계 구현하는 방법에 대해 정리해보도록 하겠습니다. 자바스크립트를 막 공부하기 시작한 초보자들에게 적합한 소규모 프로젝트 성격의 예제입니다. 목표 웹페이지에 위와 같은 모습의 단순한 시계를 표시할 것입니다. 처음 페이지가 열렸을 때는 페이지가 열린 시점의 시간이 표시되고 시계가 멈춰있습니다. 그러다 GO 버튼을 누르면 GO 버튼을 누른 시점에서부터 시간이 흐르기 시작합니다. 그러다 STOP 버튼을 누르면 다시 시계가 멈춥니다. 코드 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 디지털 시계 만들기 STOP GO 12 : 클래스가 clock인 div 요소가 실제 시계 역할을 ..

HTML 문서에서 이미지를 표시하기 위해 사용하는 img 태그에는 src라는 속성이 있고, 이 속성은 속성값으로 표시할 이미지 소스 파일의 위치 정보, 즉 url을 입력받습니다. 이번 포스팅에서는 이 src 속성에 url을 지정하는 몇 가지 방법에 대해서 소개하도록 하겠습니다. img 태그의 src 속성에는 다음과 같은 유형의 url들을 지정할 수 있습니다. 1. 상대경로 2. 절대경로 3. 웹서버 주소 각각에 대해 알아보겠습니다. 상대경로 상대경로는 이미지를 표시할 HTML 문서의 위치를 기준으로 이미지 소스 파일의 위치를 인식하는 방식입니다. 상대경로를 지정하기 위해서는 다음의 기호들을 적절히 사용해주어야 합니다. / : ~에 있는 . : 이미지를 표시할 HTML 문서의 위치 .. : 상위 폴더 예를..