탐구소년

안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄우게 되면 화면의 가운데에 모달창을 노출시키고 나머지 부분은 검고 투명한 배경으로 처리하는 경우가 많이 있는데, 이를 위한 코드를 소개해드리겠습니다. HTML 1 2 3 4 5 Hello, this is modal window 위 코드에서 class="model__background"에 해당하는 div 태그는 배경을 지정하기 위해 마련한 태그입니다. 그 안에 들어 있는 class="modal__box" 영역이 실제 모달창을 표현할 영역이 되고, 이 박스에 어떤 콘텐츠를 구성하냐에 따라 모달창의 모습이 달라집니다. 참고로 모..

자바스크립트에는 Math라는 내장 객체가 존재합니다. 이 내장객체는 랜덤으로 숫자를 반환받을 수 있는 메소드 random() 을 제공하는데, 여기에서는 이를 기본으로 1부터 45 사이의 숫자 6개를 반환받는 로또번호 추첨하기 스크립트를 작성해보도록 하겠습니다. 1 2 3 4 5 6 7 8 const number = [] while(number.length

백엔드 학습을 하시는 분들은 이런 식의 실수를 가끔씩 하시죠. (여기에서 백엔드 학습이란 : 노드, 스프링, 장고 등의 서버 프레임워크 학습) 1. 명령 프롬프트 또는 터미널에서 명령어를 실행하여 포트 사용 2. 명령 프롬프트 또는 터미널을 그냥 닫아버림(포트는 여전히 연결중) 3. 서버 프로그램 수정 후 다시 포트 연결을 위한 명령어 실행 4. 뭐여 이거 ㅠㅠ 왜 안되는겨 5. 위 과정을 반복 6. 이 길은 내 길이 아닌겨.. 이런 경우 대부분의 시스템에서는 다음과 같은 종류의 에러 메시지가 나타납니다. "port already in use" ...네! 포트가 이미 사용 중이므로 포트에 연결하지 못하는 것입니다. 이 경우 해결 방법은 두 가지 정도입니다. 1. 실행 중인 포트를 연결 해제한 후 연결 시..

안녕하세요 오늘은 몽고디비 설치 절차에 대한 게시글을 작성해보려고 합니다. 이미 오래 전에 작성해 두었는 줄 알았는데 없더라고요(당황했음). 그래서 작성해봅니다. 일단 제일 먼저 몽고디비 홈페이지로 이동합니다. www.mongodb.com/1 그러면 위와 같은 모습이 나타납니다. 몽고디비 설치 및 사용을 위해 메뉴 항목 중에 Software에 속해있는 세부 항목 Community Server를 선택해주겠습니다. Community Server로 진입하면 오른 편에 위와 같은 박스가 하나 보입니다. 다운로드 가능한 버전을 제시해주고 있는데, 제시해주는대로 다운로드를 진행하시면 됩니다. 초록색 버튼을 클릭. 설치를 시작합니다. Next. 참고로 진행 과정에서 각별히 주의해야 할 항목은 딱히 없습니다. 그러므로..

안녕하세요! 오늘도 CSS 애니메이션 예제를 하나 만들어봤습니다. 이러한 효과를 어떻게 부르는지 정확히 알지 못해서 007효과라고 표현했는데, 구현한 효과는 다음과 같습니다. ...네! 펭귄군 캐릭터가 배경 이미지로 지정된 영역을 남색 영역이 덮고 있는 상태에서, 투명한 원이 왔다갔다 하면서 원에 해당되는 부분만 배경 이미지가 노출되게 만든 애니메이션 효과입니다. 영화 007 시리즈의 오프닝과 느낌이 비슷하여 '007 효과 애니메이션 구현하기'라 이름 붙여봤습니다(정확한 이름 아시는 분 알려주세요...). 여기에 필요한 프로그래밍 언어는 HTML과 CSS인데, 각 코드는 다음과 같이 구현하였습니다. 1 2 3 4 5 div 가 세 번 사용되었고, 각각의 class를 통해서 역할을 구분하였습니다. cont..

안녕하세요! 오늘은 심심풀이로 CSS 애니메이션을 활용해 타이핑 효과를 구현하는 코드를 작성해보았습니다. 표시하고자 하는 텍스트를 미리 정해 둔 상태에서 시작해야 하므로 가정 먼저 다음과 같은 HTML 코드를 작성해주어야 합니다. 1 00000 정말로 초간단한.. 숫자 0 다섯개입니다. 숫자 0 크기를 기준으로 한 글자의 크기를 정할 예정이므로 0 외에 다른 문자는 사용하지 않았습니다. 목표는 이 숫자들이 하나씩 타이핑되는 것처럼 보여지는 페이지를 만드는 것입니다. 그럼 다음, CSS 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @keyframes typing{ from{ width: 0; } } @keyframes cursor{ 50%{ border-color: t..

프론트엔드 개발자 기술면접시 나올 수 있는 몇 가지 질문에 대해 정리해 봄 http 와 https 의 차이 http 는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)의 약자로써, 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다. https 는 기존 http에 보안(security)이 추가된 것으로, 서버에서 브라우저로 전송되는 정보가 암호화되지 않는 http의 약점을 보완한 프로토콜이다. HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했는데, SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아주는 인증서 소프트..

C언어 기본 자료형의 앞에는 경우에 따라 unsigned 라는 키워드를 붙여 사용할 수 있습니다. 여기서 unsigned란 '부호가 없는'이라는 의미인데, 이에 대해 간단히 예를 들어가며 정리해보도록 하겠습니다(초간단 주의!). 데이터의 표현 방식 자료형이란 언어가 데이터를 표현하는 방식으로써, 자료형마다 값을 표현하는 방식과 표현할 수 있는 값의 범위가 서로 다릅니다. 가령 int라는 자료형을 사용한다고 하면, 표현할수 있는 값의 범위는 다음과 같습니다. => int 자료형이 표현할 수 있는 값의 범위 : –2,147,483,648 ~ 2,147,483,647 int 는 4바이트 만큼의 메모리 공간을 차지하는 자료형입니다. 바이트는 8개의 비트가 모여 형성되는 단위이므로, int는 32비트 자료형입니다..

판다스(pandas)란 판다스는 파이썬 언어로 작성된 데이터 분석 및 조작 라이브러리입니다. 판다스는 수치형 테이블과 시계열 데이터를 조작하고 운영하기 위한 데이터를 제공합니다. 이름에 판다(panda)가 들어가지만, 실제 동물인 판다와는 아무런 관계가 없다고 합니다. 판다스 데이터프레임 판다스의 데이터프레임은 2차원 배열 형태의 자료구조로써, 행 방향과 열 방향을 나타내기 위해 두 가지 종류의 주소를 사용합니다. 각각은 행 인덱스(row index)와 열 이름(column name)입니다. 데이터프레임 생성 및 조회 예제 판다스를 사용하기 위해서는 파이썬 환경에 판다스가 설치되어 있어야 합니다. 여기에서는 pycharm CE 에디터를 사용해서 예제를 진행하도록 하겠습니다. 프로젝트 인터프리터 설정으로 ..

리덕스(redux)는 자바스크립트 어플리케이션을 위한 상태 관리 프레임워크입니다. 그리고 리액트 리덕스는 리액트 컴포넌트의 상태 관리를 위한 리액트 전용 리덕스입니다. 이를 사용하면 리액트 컴포넌트들이 리덕스로부터 데이터를 읽고 리덕스 스토어를 통해 데이터를 관리할 수 있게 됩니다. 리덕스를 사용해 상태값을 변경하는 과정은 다음과 같은 흐름을 따릅니다. 각각의 객체가 각자의 역할을 순서대로(그러나 대개 비동기적으로) 수행합니다. 이번 글에서는 각 파트마다 어떤 역할을 수행하는지에 대해서 소개하도록 하겠습니다. 뷰 뷰(view)는 리액트의 컴포넌트의 의미합니다. 리액트 컴포넌트로부터 상태값의 변경이 시작되고, 변경된 값을 최종적으로 표시하는 역할 또한 리액트 컴포넌트가 담당하게 됩니다. 액션 리액트에서 상..