탐구소년

React 소개 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 2013년에 페이스북에서 만들었습니다. 리액트를 사용하면 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있습니다. 그리고 이러한 코드를 렌더링하여 웹문서 인터페이스를 만들게 됩니다. 리액트는 점진적으로 적용할 수 있도록 설계되어 있어 학습이 용이합니다. 다만 다른 낯선 기술을 배울 때와 마찬가지로 러닝 커브(learning curve)가 존재하므로, 초기 진입장벽을 잘 넘기는 것이 중요합니다. React 동작 원리 HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차라고 말할 수 있습니다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고..

안녕하세요 탐구소년입니다. 최근 유튜브를 시작해서 조금씩 영상을 만들고 업로드하는 중인데요. 유튜브 채널 하나를 운영하려고 해도 이래저래 알아둬야 할 것들이 많이 있더군요. 그 중에서도 꼭 알아두어야 해야 하는 것들 중 한 가지가 바로 채널에서 사용할 이미지의 사이즈입니다. 그래서 오늘은 유튜브 채널에서 사용하는 각 이미지 별 사이즈에 대해서 정리를 해보도록 하겠습니다. 유튜브 채널에 필요한 이미지 종류 - 채널아트 - 프로필 - 동영상 썸네일 채널아트 사이즈 채널아트의 경우, 유튜브를 볼 수 있는 모든 기기에 맞게 이미지가 표시되도록 2560x1440픽셀 이미지 하나를 업로드하는 것이 좋습니다. 단 기기별로 해당 이미지를 표시하는 영역이 차이가 있으니 이 부분을 주의하셔야 합니다. 아래의 이미지를 보시..

안녕하세요 탐구소년입니다. 인간만의 능력으로 여겨지던 "스스로 학습하는 능력"을 컴퓨터로 구현해내는 일(어쩌면 도전)을 머신러닝이라고 합니다. 우리말로는 기계학습이라고도 하죠. 많은 분들이 아시다시피 이 머신러닝 분야에 대한 관심이 날이 갈수록 뜨거워지고 있습니다. 그래서 저도 이쪽 분야에 관심을 가져볼까 싶은 생각이 조금씩 들고 있는데, 해서 오늘은 간단하게 머신러닝의 개념과 그 종류에 대해서 정리를 해보려고 합니다. 머신러닝(기계학습)이란? 기계학습이란, '기계가 일일이 코드로 명시하지 않은 동작을 데이터로부터 학습하여 실행할 수 있도록 하는 알고리즘 또는 그러한 알고리즘을 연구하는 일'을 의미합니다. 기계학습이 등장하기 이전의 기계들은 출시 전 개발 단계에서 개발자(사람)에 의해 등록된 알고리즘만으..

안녕하세요 탐구소년입니다. NODEJS는 자바스크립트 런타임으로써, 자바스크립트 어플리케이션을 만들 수 있는 적절한 환경을 제공해줍니다. 오늘은 NODEJS 설치 과정을 기록해두려고 합니다. 이미지 위주로 간단하게 남겨두도록 하겠습니다. NODEJS를 다운로드하기 위해서는 일단 아래의 링크로 이동하시는 게 먼저입니다. https://nodejs.org/ko/download/ 다운로드 페이지의 모습입니다. 사용자의 환경에 맞게 설치 파일을 다운로드할 수 있도록 되어 있습니다. 여기에서 각자의 환경을 선택해 다운로드를 진행하시면 되는데, 여기에서는 64비트 윈도우 운영체제 환경으로 진행했습니다. 그럼 다운로드 시작합니다. 설치파일의 다운로드가 완료되면, 그것을 실행시켜 바로 설치를 진행합니다. 첫 화면에서 ..

안녕하세요 탐구소년입니다. 오늘은 리스트나 튜플을 조작하는데 유용하게 사용할 수 있는 파이썬 내장 함수 map과 filter에 대해 정리해보도록 하겠습니다. [map] 먼저, map입니다. map은 기존 리스트 또는 튜플을 인자로 전달받아 하나의 iterable한 객체를 생성하여 반환해주는 함수입니다. 말만으로는 이해하기 애매한 함수이니, 바로 예제를 보도록 하겠습니다. 1 2 3 4 5 6 def even(num) : return num * 2 sample = [1,2,3,4,5] result = list(map(even, sample)) print(result) 사용자 정의 함수인 even은 인자를 하나 전달받아 인자의 값에 2를 곱하여 반환하는 역할을 합니다. 이 함수를 5번 줄에서 map의 첫번째..

안녕하세요 탐구소년입니다. HTML로 웹문서를 만들 때 태그를 사용하면 데이터를 입력할 수 있는 양식을 만들 수가 있습니다. 이 양식에 입력된 데이터를 사용자가 서버 프로그램으로 전달하게 되면, 해당 서버가 그것을 처리할 수 있습니다. 이번 포스팅에서는 사용자가 직접 서버의 역할까지 수행할 수 있도록, HTML 웹문서에 자바스크립트 코드를 추가하여 폼에 입력된 데이터를 처리해보도록 하겠습니다. 사용자가 폼을 통해 몇가지 데이터를 입력하고 제출을 하면, 제출된 데이터를 화면 상에 출력하는 흐름으로 코드를 작성해 볼 것입니다. 먼저, 다음과 같이 HTML 코드를 작성하여 간단한 양식을 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ..

안녕하세요 탐구소년입니다. 오늘은 파이썬 리스트 관련 함수, 즉 메소드 중 하나인 sort()의 사용법에 대해서 정리를 해보려고 합니다. sort()는 이름 그대로 파이썬 리스트를 정렬해주는 함수입니다. 여기에서 정렬이란 일정한 규칙에 따라 나열하는 것을 의미합니다. 인자를 전달하지 않고 sort()를 호출하게 되면, 기본적으로 오름차순 정렬이 이루어집니다. 코드 1 2 3 numbers = [3, 2, 1, 5, 4] numbers.sort() # 오름차순 정렬이 진행된다(기본 사항). print(numbers) 결과 1 [1, 2, 3, 4, 5] 인자를 전달하지 않았을 경우에는 sort()의 모든 사항이 기본 사항대로 진행이 됩니다. 이때 기본 사항인 오름차순 정렬이 아닌 내림차순 정렬을 진행하고 ..

안녕하세요 탐구소년입니다. NodeJS로 서버를 제작할 때는 유용한 패키지를 많이 사용할수록 간결하게 필요한 기능을 구현할 수가 있습니다. 다양한 패키지 중에서도 passport라는 이름의 패키지는 사용자 인증과 관련된 기능을 제공하는 유용한 패키지인데, 일 때문에 passport의 간단한 예제가 필요해져서, 필요한 최소한의 기능만을 구현한 예제를 만들어봤습니다. 혹시나 passport 예제가 필요하신 분들이 참고하시면 좋을 것 같아서 블로그에 올려봅니다. 여기에서는 일단 passport가 대략 어떤 것인지에 대해서, 그리고 node 앱이 대강 어떻게 구성되는지에 대해서는 어느 정도 알고 계신 분들이 본다고 가정하고 코드 위주로만 올리도록 하겠습니다. 먼저 프로젝트 폴더의 구조는 다음과 같습니다. 뷰는 ..

안녕하세요 탐구소년입니다. 최근엔 일이 바빠 마치 블로그가 없는 사람처럼 지내는 시간이 이어졌었는데, 이제 좀 여유가 생겨 블로그 글 게재를 다시 시작하려 합니다. 이번 글에서는 전자책 코딩을 할 때 특정 영역만 글자 크기가 커보이게 만드는 방법을 알려드리려고 합니다. 간만에 쓰는 글이다 보니 가볍게 몸풀기 수준의 내용으로 준비했습니다. 일단 본문을 표시하는 HTML 코드가 아래와 같다고 가정하고 시작하겠습니다. 간단한 코드이므로 설명은 생략합니다(위 코드가 어려우신 경우, 블로그의 다른 글을 참고하시면 좋을 것 같습니다^^). 코드를 전자책 뷰어로 본 결과는 위와 같습니다. 배경색은 눈에 띄게 하기 위해 일부러 조금 푸르게 만든 것이니 신경쓰지 않으셔도 됩니다(원래는 하얀색입니다). 여기에서 두번째 줄..

안녕하세요 탐구소년입니다. 노드JS를 교육할 일이 생겨서 각종 패키지를 테스트하는 중인데, 오늘은 여러가지 패키지 중 morgan을 테스트하다가 왠지 블로그에 남겨두고 싶은 마음이 생겨서 글을 작성합니다. morgan 패키지는? morgan은 로깅(logging)에 도움을 주는 미들웨어입니다. 로깅이란 무슨 일이 어디에서 일어났는지를 기록하는 것을 의미합니다. morgan 패키지 설치 1 npm install morgan morgan 적용 방법 morgan은 클라이어트와 서버의 응답 사이에 존재하는 미들웨어이므로, 아래와 같은 코드를 적절한 위치(루트 이벤트 리스너 전)에 적용해주면 됩니다. 1 app.use(morgan("tiny")) 위와 같은 코드를 적용하면 아래와 같이 최소한의(?) 로그를 남길 ..