탐구소년

개요 주피터 노트북(Jupyter Notebook)은 웹 브라우저에서 대화 형식 기반의 파이썬 코딩을 할 수 있게 해 주는 소프트웨어입니다. 이를 이용하면 파이썬 코드와 출력 결과를 정리한 ipynb 형식의 문서를 만들 수 있습니다. 여기에서는 windows 10 환경에서 주피터 노트북을 실행하고 사용하는 방법과 ipynb 형식의 문서를 저장하는 방법에 대해 정리해 보았는데, 이를 위해서는 아나콘다의 설치가 선행되어야 하니 이 점을 참고해주세요. 아나콘다 설치가 필요하신 경우 다음 주소로 이동하셔서 설치를 진행하시면 됩니다. => https://www.anaconda.com/products/distribution 주피터 노트북 실행하기 1. [윈도우 시작 메뉴] -> [Anaconda3 폴더] -> [A..

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 설치를 마쳤으니 환경변수 설정..

이전에 블로그에 네트리파이 사용법을 안내하는 글을 게시한 적이 있는데, 오랜만에 네트리파이에 접속해 보니 홈페이지가 리뉴얼되어 있었습니다. 이에 발맞춰 네트리파이 사용법에 대한 안내글도 리뉴얼하는 게 좋겠다고 판단해 이 글을 씁니다. 누군가에게는 도움이 되길 바라는 마음을 담아서... 네트리파이(netlify)? 네트리파이는 웹 호스팅 서비스입니다. 웹 호스팅이란 웹사이트를 올려놓을 인터넷상의 공간을 임대해주는 것으로, 이러한 서비스를 제공하는 웹 사이트는 무척 많습니다. 그 중에서도 네트리파이는 사용법이 무척 간단하고, 일정 수준의 용량까지는 무료로 이용할 수 있어 초보자들에게도 부담없는 서비스입니다. 네트리파이 서비스 이용 방법 네트리파이를 이용해 내가 만든 웹사이트를 호스팅하여 다른 사람들에게 배포..

심심해서 만들어 본 코드인데, 이것보다 더 좋은 방법이 분명히 있을 거라는 걸 느끼면서도 머리가 안 굴러가서 일단 이대로 올려봅니다. 블로그가 너무 오랫동안 놀고 있다는 사실에 약간의 압박감(또는 자책감)을 느꼈다고나 할까...? 마우스로 브라우저 화면 중 어딘가를 클릭하면, 그 위치에 잠시동안 잔상이 생겼다가 사라지는 프론트엔드 코드입니다. 마우스 클릭 시마다 잔상을 남기는 div.pointer 요소가 새로 생기고, 기존의 div.pointer 요소는 제거되는 방식으로 동작합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45..

Sass 설치하기 Sass 구문을 기반으로 작성된 코드는 Sass 전처리기와 컴파일러의 도움을 받아 CSS 파일로 빌드(build)됩니다. 따라서 우리의 개발 환경(PC)에는 Sass가 준비되어 있어야 하며, 여기에서는 이를 위한 방법 두 가지를 제안합니다. - Visual Studio Code 확장 기능 Live Sass Compiler 설치하기 (Visual Studio Code 설치 필수) - Sass 명령행 인터페이스 설치하기 (Node.js 설치 필수) 두 가지 방법 모두를 차례대로 설명할 것이지만, 둘 중 아무거나 한 가지만 진행 하셔도 됩니다. 앞으로 이 포스팅에서는 두 번째 방법을 기반으로 설명을 이어갈 예정입니다. Visual Studio Code 확장 기능 Live Sass Compil..

" Sass 는 기능이 뛰어나고 안정적인 CSS 확장 언어이다." - Sass team - Sass란 Sass에 대해 얘기하기에 앞서, CSS에 대한 이야기를 먼저 해야 할 것 같습니다. CSS는 그 자체로도 충분히 재미있고, 훌륭한 형식 언어입니다. CSS는 웹 콘텐츠를 위한 스타일시트 형식 언어로써 (대체 언어가 사실상 존재하지 않는다는 사실이 한 몫 했겠지만)오랜 기간 사랑 받아 왔고, 아마 앞으로도 오래도록 사랑 받을 것입니다. 그러나 CSS를 조금이라도 다뤄 본 경험이 있는 개발자라면, 특유의 치명적 단점에 대해 아주 잘 알고 있을 것입니다. 예상하고 계실 테지만, CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동일한(혹은 유사한) 코드를 재사용하기 ..

개요 자주라고 말할 정도까지는 아니지만, 명령 프롬프트나 터미널에서 명령을 입력했을 때 다음과 같은 오류가 발생하는 경우가 있습니다. 제 경우에 이것은 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이라는 건...!'하고 자신있게, 또 깔끔하게 답할 수 있는 경우가 그리 많지는 않은 것 같거든요. 머릿속에는 그게 뭔지, 어떤 개념인지에 대한 그림이 왠지 대충 그려지는 것 같은데, 막상 말로 표현하려니 어려운 느낌이랄까? 저역시 마찬가지고요 ㅎㅎ 그래서 이번 기회에 글로써 정리를 해두려고 하니, 필요하신 분들은 참고해보시면 좋을 것 같습니다. 내용 중 일..