쌓고 쌓다

CSS 삽입 방법 1. 배경 색상 내용 글자 색상 => color 내용 + 색상코드 R G B로 각각의 색깔이 포함된 정도를 16비트로 2자리씩 표현하여 사용할 수 있다. 내용 R(16진수 da는 10진수로 218) G(70은 10진수로 112) B(d6는 10진수로 214)가 포함된 색상이다. 글자 정렬 => text-align 제목 줄 간격 => line-height 안녕하세요. 반갑습니다. 밑줄 => text-decoration 안녕하세요.저의 이름은 홍길동입니다. 폰트 설정 => font-family 안녕하세요. 홍길동입니다. 글자 크기 => font-size 안녕하세요. 홍길동입니다. 글자 굵기 및 폰트 스타일 => font-weight 및 font-style 안녕하세요. 홍길동입니다. 글자 그..

REPL 자바스크립트를 컴파일하지 않고 콘솔을 통해 코드를 즉시 실행할 수 있었다. 노드도 비슷한 콘솔을 제공하는데 REPL(Read Eval Print Loop)이다. 윈도에서는 명령 프롬프트에서 node를 입력하고, VS Code에서는 터미널을 통해 실행 가능하다. 콘솔에서 node [자바스크립트 파일경로]로 실행한다. Ctrl + c 를 두번 누르거나 .exit를 입력하여 종료함. 노드는 브라우저의 자바스크립트와 다르게 코드를 모듈로 만들 수 있다. 모듈? 특정한 기능을 하는 함수나 변수들의 집합. 노드에서는 CommonJS 모듈 또는 ECMAScript 모듈을 사용한다. CommonJS 모듈 var.js const odd = '홀수입니다.' const even = '짝수입니다.' module.ex..

플레이 화면 API를 써보고 싶어서 행맨 게임을 만들어 봤습니다. 확실히 비동기 처리를 잘해야 문제없이 돌아가더라고요... 단순히 데이터를 가져와 쓰는것이 아닌 가져오는 데 걸리는 시간과 그 이후의 과정들을 잘 연결하는 게 문제였습니다. 그 외에도 많은 고비가 있었다... 1. 단어를 가져오는데 시작 버튼을 클릭을 연속으로하면 두 개의 단어가 붙어 구성되는 문제가 있었다. 시작 버튼을 클릭하면 데이터를 가져올때까지 시작 버튼을 비활성화했다. 2. 문자열로 제공받은 단어를 이용하면 문자 하나하나를 다루는데 불편함이 있어 배열에 담는 과정을 포함함. 3. 데이터를 가져오는데 시간이 걸려 그 전에 단어를 가져온 것처럼 실행이 될 때 문제가 있어 비동기 처리함. 위의 두 과정은 아래에서 다룸. 주요 기능 및 구..

구조 분해 할당 구조 분해 할당을 사용하여 객체와 배열로부터 속성이나 요소를 쉽게 가져올 수 있다. candyMachine 객체 const candyMachine = { status: { name: 'machine1', count: 5 }, getCandy() { this.status.count-- return this.status.count } } candyMachine의 getCandy, status.count 속성을 같은 이름의 변수에 대입한다면 아래의 코드로 작성한다. var getCandy = candyMachine.getCandy var count = candyMachine.status.count 이것을 구조 분해 할당 방법을 이용하여 아래와 같이 작성이 가능하다. const { getCand..

폼 양식 사용자가 키보드 또는 마우스로 데이터를 입력하거나 선택할 수 있는 서식을 뜻한다. 텍스트 입력 이름: 비밀번호 입력 비밀번호: 라디오 버튼 이메일 수신 : 예 아니요 하나만 라디오 버튼을 누르게 하려면 이름(name)을 동일하게 하여 그룹으로 묶어주어야 한다. checked 옵션은 초기에 선택된 상태로 설정할 수 있다. 체크 박스 분야 선택 분야1 분야2 분야3 라디오와 달리 중복 선택이 가능하다. 파일 업로드 파일 업로드 버튼 이름 : value 속성은 버튼에 표시되는 텍스트를 설정한다. type 속성이 submit인 저장 버튼을 누르면 'insert.php' 페이지로 이동한다. php 파일을 이용하여 DB에 저장할 수 있다. + 태그 태그로 버튼을 생성할 수 있고 태그로도 생성 가능하다. 이..

오디오 속성 설명 src 오디오 파일명(경로) 설정 controls 화면에 플레이어 표시 autoplay 자동 재생 loop 무한 반복 비디오 속성 설명 src 비디오 파일명(경로) 설정 width 너비 height 높이 controls 화면에 플레이어 표시 autoplay 자동 재생 loop 무한 반복 순서 없는 목록 (Unordered List) 내용1 내용2 내용3 글머리 기호가 기본적으로 점으로 나온다. CSS를 이용해 글 머리 기호를 변경하거나 아이콘 이미지로 사용 가능하다. 순서 있는 목록 (Ordered List) 내용1 내용2 내용3 각 목록의 앞에 항목의 순서를 의미하는 일련번호가 붙는다. 하이퍼링크 태그를 이용해 텍스트나 이미지 등 요소에 링크를 걸어둘 수 있다. 이것을 이용하여 다른 ..

행맨 게임을 만들기위해 API를 이용해 랜덤 단어를 가져오는 부분을 알아보고 있었다. 그런데 통신하여 단어를 가져오는건 잘 되는데 출력을하면 undefined만 뜨는것이다... 여기에 2가지 문제를 겪었고 이해했다. 처음 API를 써보는거라 바보 같았지만 꼭 짚고 넘어가야할 부분이였다. 첫번째 문제 async function getPuzzle() { axios.get('https://puzzle.mead.io/puzzle?wordCount=1') .then((result) => { console.log('성공:', result.data.puzzle) return result.data.puzzle }) } getPuzzle().then(console.log) then으로 가져온것을 출력해보아도 잘 나오지만..

비동기 처리의 필요성 function fetchUser() { // 10초 걸림 return '홍길동' } const user = fetchUser() console.log(user) 사용자의 데이터를 가져오는 함수 fetchUser가 있다고 하자. 이것이 처리되는데 10초가 걸린다고 가정하면. 자바스크립트는 동기적인 처리를 하기 때문에 fetchUser가 끝날 때까지 머무르게 된다. 이후에 웹 페이지 UI를 표시하는 코드들이 있다면 10초가 걸리는 동안 사용자는 텅텅 빈 페이지를 보게 된다. 그래서 비동기적인 처리를 위해 promise를 사용한다. Promise 적용 function fetchUser() { return new Promise((resolve, reject) => resolve('홍길동'..