프론트엔드 개발자 기술면접시 나올 수 있는 몇 가지 질문에 대해 정리해 봄 http 와 https 의 차이 http 는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)의 약자로써, 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다. https 는 기존 http에 보안(security)이 추가된 것으로, 서버에서 브라우저로 전송되는 정보가 암호화되지 않는 http의 약점을 보완한 프로토콜이다. HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했는데, SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아주는 인증서 소프트..
판다스(pandas)란 판다스는 파이썬 언어로 작성된 데이터 분석 및 조작 라이브러리입니다. 판다스는 수치형 테이블과 시계열 데이터를 조작하고 운영하기 위한 데이터를 제공합니다. 이름에 판다(panda)가 들어가지만, 실제 동물인 판다와는 아무런 관계가 없다고 합니다. 판다스 데이터프레임 판다스의 데이터프레임은 2차원 배열 형태의 자료구조로써, 행 방향과 열 방향을 나타내기 위해 두 가지 종류의 주소를 사용합니다. 각각은 행 인덱스(row index)와 열 이름(column name)입니다. 데이터프레임 생성 및 조회 예제 판다스를 사용하기 위해서는 파이썬 환경에 판다스가 설치되어 있어야 합니다. 여기에서는 pycharm CE 에디터를 사용해서 예제를 진행하도록 하겠습니다. 프로젝트 인터프리터 설정으로 ..
안녕하세요 탐구소년입니다! 이번 게시글에서는 HTML/CSS/Javascript로 코드를 작성하여 웹 문서를 표시했을 때, 전체 또는 일부의 내용을 이미지 파일로 내보내는 방법에 대해 알아보도록 하겠습니다. 예상컨대 다양한 방법과 관련 라이브러리가 여러가지 경로를 통해 제공되고 있으리라 생각이 드는데요. 여기에서는 dom-to-image 라는 라이브러리를 사용해 목표하는 기능을 구현해보도록 하겠습니다. dom-to-image? 자바스크립트로 작성된 라이브러리로, DOM 요소를 벡터나 래스터 이미지로 변환하는 데 사용할 수 있습니다. filsaver? 파일 내보내기 기능을 구현할 때 곧잘 사용되는 라이브러리입니다. 적용 예 먼저 아래와 같이 html 문서를 작성해줍니다(이미지는 아무거나 사용해도 무관합니다..
파이썬 패키지인 turtle을 이용하면 그림을 그릴 수 있습니다. 이번 게시글에서는 turtle을 사용해 다양한 도형을 그릴 수 있는 코드를 소개할 것인데, 그 전에 선행되어야 하는 것은 거북이가 그림을 그릴 수 있는 환경을 만들어주는 설정에 대한 코드를 작성하는 일입니다. 일단 아래와 같이 코드를 작성해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import turtle # 각종 설정 player = turtle.Turtle() player.color("purple") #색깔 정하기(원하는 색깔 기입 가능) player.shape("turtle") #모양 정하기 player.speed(0) #속도는 숫자가 작을수록 빠름 screen = player.getscreen() ''..
안녕하세요 탐구소년입니다. 프로그래밍 언어를 공부해 본 경험이 있는 분이라면 누구나 컴파일러 또는 인터프리터라는 단어를 접해 본 일이 있으실 겁니다. 컴파일러와 인터프리터는 둘 다 프로그래밍 언어를 해석하고 실행시키기 위해 필요한 소프트웨어입니다. 예를 들어 대표적인 프로그래밍 언어인 C언어를 실행시키기 위해서는 컴파일러를 사용하고, 파이썬을 실행시키기 위해서는 인터프리터를 사용합니다. 이렇듯 두 소프트웨어는 비슷한 목적을 가지고 있는 소프트웨어인데요. 그러나 둘 사이에는 분명한 차이점 또한 존재하기 때문에, 그에 대해 잘 알아두면 추후 프로그래밍을 공부하는 데 분명 도움이 될 것입니다. 컴파일러 사전적으로 컴파일러는 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 프로그램을 말합..
자바스크립트의 배열 객체의 메소드 중에는 map()이라는 메소드가 존재합니다. map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해줍니다. map() 메소드의 기본형은 다음과 같습니다(출처:MDN). map() 메소드의 인자로는 배열의 각 요소를 처리할 콜백함수가 전달됩니다. 여기에서 콜백함수의 인자는 최대 4가지가 가능하지만, 주로 현재의 값(currentValue)과 인덱스 번호(index)가 많이 사용됩니다. 간단한 예제를 보겠습니다. 1 2 3 4 5 const animal = ["Rabbit", "Cat", "Dog"] animal.map(function(current, index){ console.log(current, index) })..
안녕하세요 탐구소년입니다. 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()의 모든 사항이 기본 사항대로 진행이 됩니다. 이때 기본 사항인 오름차순 정렬이 아닌 내림차순 정렬을 진행하고 ..