안녕하세요! 이번 포스팅에서는 Visual Studio Code(이하 VSCODE)에서 리액트 앱을 개발할 때 무척 유용한 기능인 리액트 컴포넌트 기본 템플릿 자동완성 기능을 추가하는 방법에 대해 안내하도록 하겠습니다. VSCODE의 기존 사용자임을 가정하고 안내 진행하겠습니다^^ 시작 1. VSCODE 좌측 아이콘 메뉴 중 'Extensions'를 선택합니다. 확장기능을 설치하고자 할 때 선택하는 메뉴입니다. 여기에서 'reactjs code snippets' 라는 확장기능을 검색합니다. 2. Reactjs code snippets 를 찾으셨다면, 설치해주세요. 리액트JS snippet(토막글, 짧은 글)을 포함하는 확장 기능으로, 이를 이용하면 리액트 개발시 사용할 snippet을 커스터마이징할 수 ..
안녕하세요! 이번 포스팅에서는 웹 호스팅 서비스 netlify(네트리파이)를 이용해서 내가 만든 웹사이트를 배포하는 방법에 대해서 소개해보겠습니다. 시작하기에 앞서, 관련 내용에 대해서 글로 되어있는 포스팅을 보는 것보다 동영상을 통해 학습하기 원하시는 분들은 제 유튜브 동영상 링크를 미리 소개할테니 참고해 주세요. => youtu.be/hXuTQm1FVic 웹 호스팅이란? 웹 호스팅이란 웹사이트를 올려놓을 인터넷상의 공간을 임대해주는 것입니다. 내가 만든 웹사이트를 내 컴퓨터에 저장만 해 놓으면 나 말고는 아무도 볼 수 없습니다. 따라서 사람들에게 내 웹사이트를 공개하고 싶다면 웹 서버의 일부 공간을 할당받아 그곳에 내 웹사이트 자료를 올려놓고 사람들이 거기에 접근할 수 있게 해야 합니다. 이때 웹 서..
안녕하세요. 오늘은 웹문서에 바닐라 자바스크립트 코드를 추가하여 무한스크롤을 구현한 예를 기록해보려 합니다. 스크롤이 최대치(콘텐츠의 끝)까지 내려가면 자바스크립트 코드에 의해 새로운 콘텐츠가 생성 및 추가되는 방식으로 구현한 코드입니다. HTML, CSS, 자바스크립트 코드를 차례대로 살펴보고, 마지막에 전체 코드를 공개하였습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 무한스크롤 1번째 블록 2번째 블록 section 태그에는 두 개의 div 가 포함되어 있는데, 각각에는 class="box"가 추가되었습니다. 이 box 요소가 무한하게 추가될 요소입니다. 스크롤을 내리면 내릴수록 section의 하위 태그 개수가 증가할 예정입니다. CSS 1 2 3 4 5 6 7 8 html..
안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 이용하면 버튼 없이 손가락만으로 움직일 수 있는 이미지 슬라이더 구현이 가능합니다. 그럼 바로 코드를 볼텐데, 참고로 코드 구성은 index.html + styles.css + script.css 세 가지입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Slider for mobile SWIPE! 태그는 단순히 이미지 네 장을 포함하고 있는 블록 영역을 만드는 것 외에 특별한 사항이 없습니다. 이미지는 제가 개인적으로 보관하고 있는 제 개인 ..
안녕하세요! 오늘은 라이브러리 없이 적은 양의 자바스크립트 코드만으로 간단한 이미지 슬라이더를 구현해보았습니다. 이미지 슬라이더 구현하는 방법이야 한트럭이지만, 그 중에 한 가지 방법으로써 '이렇게도 하는구나~'하는정도로 참고해주시면 감사하겠습니다. 그럼 HTML, CSS, JS 순으로 코드를 보겠습니다. 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 25 26 27 Simple Slider SIMPLE SLIDER PREV NEXT 제목을 나타내는 h1 태그와 이미지 네 장을 품고 있는 div 태그들, 그리고 button 태그 두 개를 작성해주었습니다. 스타일시트는 styles.css 파일을, 자바스크립트 코드는 script.j..
안녕하세요! 곧 자려고 하는데, 잠들기 전에 가볍게 자바스크립트 타이핑 효과 구현하는 방법 포스팅해봅니다. 비어있는 h1 태그를 만들고, 거기에 글자가 써지는 효과를 구현해 보았습니다. 좀 더 실감나는 효과를 만들기 위해 CSS로 간단한 애니메이션 효과도 적용해봤습니다. 코드는 index.html / style.css / script.js 세 파일로 구성되어 있습니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 repl.it 웹문서에 필요한 기본적인 구조에 CSS파일(style.css)과 JS파일(script.js)을 추가해주었습니다. 표시되는 태그는 h1 하나 뿐인데, 이마저도 아무것도 쓰여있지 않습니다. 스크립트 및 스타일시트 적용을 위해 class를 "text"로 지정..
개요 안녕하세요. 오늘은 자바스크립트 스크롤 애니메이션 라이브러리인 WOW.js의 사용법에 대해 정리해보려고 합니다. 다양한 종류의 애니메이션을 제공하는데다 사용법도 무척 간단해 개인적으로 강력 추천하는 라이브러리입니다. 그럼 바로 시작하도록 하겠습니다. 설치 WOW.js 의 메인 페이지로 이동합니다. 링크를 클릭 : wowjs.uk/ 그러면 위와 같은 페이지가 나타나는데, 여기에서 좌측 상단에 표시되는 메뉴 중 GITHUB 을 클릭합니다. 그러면 새 탭이 열리고 라이브러리를 다운로드할 수 있는 깃헙 저장소가 나타납니다. 깃헙 저장소 페이지를 보면 Code라고 적힌 초록색 버튼이 보이는데, 이를 클릭하면 박스가 하나 열립니다. 이 박스의 맨 아래에는 Download ZIP 이라는 메뉴가 있습니다. 이를 ..
백엔드 학습을 하시는 분들은 이런 식의 실수를 가끔씩 하시죠. (여기에서 백엔드 학습이란 : 노드, 스프링, 장고 등의 서버 프레임워크 학습) 1. 명령 프롬프트 또는 터미널에서 명령어를 실행하여 포트 사용 2. 명령 프롬프트 또는 터미널을 그냥 닫아버림(포트는 여전히 연결중) 3. 서버 프로그램 수정 후 다시 포트 연결을 위한 명령어 실행 4. 뭐여 이거 ㅠㅠ 왜 안되는겨 5. 위 과정을 반복 6. 이 길은 내 길이 아닌겨.. 이런 경우 대부분의 시스템에서는 다음과 같은 종류의 에러 메시지가 나타납니다. "port already in use" ...네! 포트가 이미 사용 중이므로 포트에 연결하지 못하는 것입니다. 이 경우 해결 방법은 두 가지 정도입니다. 1. 실행 중인 포트를 연결 해제한 후 연결 시..
안녕하세요 오늘은 몽고디비 설치 절차에 대한 게시글을 작성해보려고 합니다. 이미 오래 전에 작성해 두었는 줄 알았는데 없더라고요(당황했음). 그래서 작성해봅니다. 일단 제일 먼저 몽고디비 홈페이지로 이동합니다. www.mongodb.com/1 그러면 위와 같은 모습이 나타납니다. 몽고디비 설치 및 사용을 위해 메뉴 항목 중에 Software에 속해있는 세부 항목 Community Server를 선택해주겠습니다. Community Server로 진입하면 오른 편에 위와 같은 박스가 하나 보입니다. 다운로드 가능한 버전을 제시해주고 있는데, 제시해주는대로 다운로드를 진행하시면 됩니다. 초록색 버튼을 클릭. 설치를 시작합니다. Next. 참고로 진행 과정에서 각별히 주의해야 할 항목은 딱히 없습니다. 그러므로..