JavaScript 썸네일형 리스트형 [firebase] firebase 시작하기(1) firebase란 서버 없이도 간단하게 웹/앱 서비스를 만들 수 있게 도와주는 서비스이다. 시작하기에 앞서 크롬 브라우저, nodejs, vscode 가 설치되어 있는 가정하에 설치 과정은 생략하고 진행할 것이다. 해당 과정은 react, vue, angular 같은 frontend 프레임워크는 사용하지 않고 순수 html과 js로 진행했다. 구글에 firebase console이라고 검색하면 firebase를 시작할 수 있는 페이지가 나온다. 시작하기를 누른 후 프로젝트를 만들어 보자. 애널리틱스는 내 사이트에 사용자가 얼마나 접속했는지 통계를 내주는 건데 지금은 연습 단계 이기 때문에 쓸 필요가 없다. 애널리틱스를 쓰고 싶다면 사용해도 상관은 없다. 위 단계까지 끝났으면 기본적인 계정 인증, 데이터베.. 더보기 [javascript] 기명 함수와 익명 함수의 차이점 (feat. 호이스팅) // 기명(이름이 있는) 함수 // 함수 선언! function hello() { console.log("hello"); } // 익명(이름이 없는) 함수 // 함수 표현! const world = function() { console.log("world"); }; // 익명(이름이 없는) 함수 // 바로 실행이 필요할 때 사용 (function () { console.log("hello world"); })(); // 함수 호출! hello(); world(); 위 코드를 보듯이 익명 함수란 말 그대로 이름이 없는 함수를 뜻한다 여기서 알아야 할 것은 기명 함수는 함수의 선언이라 표현하고 익명 함수는 함수의 표현이라 표현한다 그렇다면 기명 함수와 익명 함수의 차이점은 바로 호이스팅에 있다 호이스팅이란 .. 더보기 [node.js] ESLint + Prettier + Airbnb 설정 하기 자바스크립트 개발을 하다 보면 문법 오류나 코드 정리로 인해 시간을 많이 소비한다. ESLint와 Prettier는 이러한 상황을 해결해 주는 도구들이다 Airbnb 란 ESLint의 순수 기능으로도 충분하나 다른 개발자가 미리 설정해놓은 config를 불러와서 적용할 수도 있다. 그중 가장 유명한 config 중 하나인 Airbnb 스타일 가이드를 적용해보려고 한다 이번 포스팅에서는 두 가지 도구를 간단히 살펴보고 Airbnb를 적용하는 방법을 알아보겠다. 에디터는 vscode를 기준으로 하겠다 우선 vscode 확장 프로그램에서 아래 두 가지를 설치해 준다 설치가 되었다면 우선 Prettier 먼저 적용해 보겠다 해당 프로젝트에서 커맨드 창을 이용해 아래 명령어를 통해 패키지를 설치한다 npm ins.. 더보기 [javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(3) 저번 글에서 게임의 시작과 종료를 구현했다 이제는 API를 이용해 단어가 정말 있는 단어인지 아닌지를 확인해서 게임의 기능을 구현할 것이다 우선 API 가져오기 위해 우리말샘이라는 API 제공 사이트를 이용한다 https://opendict.korean.go.kr/service/openApiInfo 우리말샘 - 오픈 API 서비스 소개 1. 우리말샘 오픈 API 서비스 소개 우리말샘 오픈 API는 검색 플랫폼을 외부에 공개하여 다양하고 재미있는 서비스 및 애플리케이션을 개발할 수 있도록 외부 개발자와 사용자들이 공유하는 프로 opendict.korean.go.kr 위 사이트에 접속 후 회원가입을 한 뒤 API KEY를 발급받아 주면 된다 API로 보낼 파라미터는 상세하게 설명이 되어 있으니 문서를 참고해.. 더보기 [javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(2) 이전 글에서 화면은 완성했기 때문에 이번 글부터는 javascript를 이용해서 기능을 넣어 볼 것이다 우선은 처음 게임이 시작할 때 주어지는 단어와 시간 그리고 점수를 화면에 그려 줄 것이다 index.html 이 있는 경로에 가서 js라는 폴더를 만든 후 game.js라는 파일을 만들어 준 뒤 index.html 에 js 파일을 추가해 준다 점수 : 저번 글에서 작성했던 html 파일 하단 부분에 game.js 를 추가해 주었다 그다음 game.js를 아래와 같이 작성한다 const startWords = ["우리말", "끝말잇기", "게임"] const index = Math.floor(Math.random() * 3) let word = startWords[index] const keyWord =.. 더보기 [javascript] API를 활용해서 컴퓨터와 하는 끝말잇기 게임 만들기(1) javascript와 API를 활용해 컴퓨터와 하는 끝말잇기 게임을 만들어 볼 것이다 위 동영상처럼 잘못 입력하면 재입력을 받고 맞는 단어를 말하면 다음 턴으로 컴퓨터로 넘어가며 내가 말한 단어의 글자 수 만큼 점수가 올라간다 시간이 초과 하게 되면 게임은 자동으로 끝이 난다 툴은 vscode를 이용할 것이고 우리가 만든 소스를 브라우저에 띄워야 하기 때문에 vscode에서 지원해주는 Live Server를 활용할 것이다 위 그림처럼 vscode에서 Extensions 에서 Live Server를 검색 후에 받아주면 된다 이것으로 기본적인 준비는 끝났으니 이제 화면을 먼저 그려 줄 것이다 원하는 경로에 가서 index.html 파일을 하나 만들고 그 경로에 css폴더를 만든 다음 index.css파일을 .. 더보기 이전 1 다음
