[자바스크립트] 여행 준비물 점검 목록 만들기 여행 준비물 점검 목록 만들기 여행 준비물을 챙겼는지 점검할 수 있게 챙겨야 할 물건의 목록을 보여주는 프로그램을 만들어 봅시다. 작업순서 배열 만들기 챙길 물건 배열에 추가하기 추가한 내용 화면에 표시하기 챙긴 물건 목록에서 삭제하기 1. 빈 배열 만들기 사용자가 추가할 준비물을 담아 놓을 빈 배열을 만든다 var itemList = []; 1-1. 추가버튼 var addBtn = document.querySelector("#add"); addBtn.addEventListener("click", addList); // addBtn.onclick = addList; 라고 해도 됨 2. 입력한 준비물 목록 배열에 추가하기 빈 배열에 준비물을 추가하는 함수를 만든다. function addList() { v.. IT/자바스크립트 5년 전
[React] React.js (create-react-app 도구) 간단하게 설치하기 React js (create-react-app) 설치 설치 순서 node js npm yarn create-react-app 도구 visual studio code (에디터) git * 2~4번은 윈도우 cmd를 이용하여 설치 1. node js 설치 - https://nodejs.org/ko/ 에서 - 8.12.0 LTS 버전 설치 - cmd에서 node --version으로 설치 확인 - 개발 폴더 생성 ( 경로: C:\dev\react ) 2. npm 설치 - npm은 node js 패키지 매니저로, 모듈을 설치할 수 있게해준다. - npm은 node js 와 함께 설치된다. node js를 설치했다면 기본으로 설치되며, 따로 설치할 필요 없음 3. yarn 설치 - yarn 도구는 npm 문제점.. IT/리액트 5년 전
[npm] npm(node.js)이란? npm이란? npm은 Node Packaged Manager의 약자이며 node.js로 만들어진 프로그램을 간편하게 설치할 수 있도록 도와주는 앱스토어같은 것이라고 생각하시면 됩니다. npm은 node.js를 설치하면 자동으로 설치됩니다. 실제 프로젝트에서 npm기반 모듈(module)설치 & 제거 및 버전 관리 사용법 중요 프로젝트 초기에 각 모듈별 버전 관리를 철저하게 해야 나중에 꼬이지(side effect) 않는다. npm 설치 node.js 설치하러 가기 > 설치 확인하기 1. 윈도우키 + R 눌러 실행창 열고 cmd (command) 열기 2. command 창이 node -v 를 입력 후 엔터를 치면 3. commad 창에 node.js의 버전을 확인할 수 있다면 설치 성공! npm 주요 명.. IT/npm 5년 전
[자바스크립트] 08_랜덤 정렬 (shuffle) 랜덤 정렬 random sort 랜덤정렬을 숫자가 중복되지 않게 난수를 추출하는 방식으로 만들 수 있는 방법은 다양하다. 웹사이트를 테스트 서버에 구축 후 테스트를 수행하기 위해서 사용되는 Dummy 값들에 적용할 수 있다. 테스트 데이터에 적용하면 항상 다른 값들을 반환하기 때문에 테스트, QA를 수행하는데 있어 더 많은 case를 수행할 수 있다. 피셔의 예이츠 셔플(fisher's Yates shuffle) fisher의 yates 알고리즘은 노래의 랜덤 재생, 로또복권 번호처럼 무작위로 선택해 중복되지 않게 셔플 정렬하는 방식이다. 그림으로 알고리즘을 풀어본다면 다음과 같다. 1. 랜덤한 배열을 만들려는 변수 randArr 과 임시로 사용할 tmpArr 변수가 있다고 가정한다. 2. 임의로 숫자를.. IT/자바스크립트 5년 전
[자바스크립트] 알고리즘 빅오 표기법 (big-O notation) 빅오 표기법 (big-O notation) 이란? 빅오 표기법은 보통 알고리즘의 시간(Time) 복잡도와 공간(Space) 복잡도(complexity)를 나타내는데 주로 사용 된다. 알고리즘의 러닝타임에 상관없이 데이터나 사용자의 증가율에 따른 알고리즘의 성능을 예측하는 것이 목표이기 때문에 상수와 같은 숫자는 모두 1이 됩니다. O(1)의 시간복잡도 Constant time 입력데이터의 크기와 상관없이 언제나 일정한 시간이 걸린다. 가로축의 데이터 크기 세로축이 시간이라고 할 때 데이터가 증가함에 따라 성능의 차이가 없다. O(n)의 시간복잡도 Linear time 입력데이터의 크기와 비례해서 처리시간이 걸리는 알고리즘의 표현할 때 사용. n개의 데이터를 받으면 n번 루프를 도니까 n이 늘어날 때 마다.. IT/자바스크립트 5년 전
자바스크립트 연습문제(변수) 변수 Exercise1 변수명을 carName 값을 VolvocarName이라는 변수를 작성하고 Volvo 값을 지정하십시오. Create a variable called carName, assign the value Volvo to it. var = " "; Exercise2 x라는 변수를 작성하고 값 50을 지정하십시오. Create a variable called x, assign the value 50 to it. var = ; Exercise3 두 개의 변수 x와 y를 사용하여 5 + 10의 합을 표시합니다. Display the sum of 5 + 10, using two variables: x and y. var = ; var y = 10; document.getElementById("dem.. IT/자바스크립트 5년 전
[canvas] 움직이는 공 drawing loop 드로잉 루프 정의하기 매 프레임마다 캔버스에 그리는것을 지속적으로 갱신하기 위해서는, 계속해서 그리는 것을 반복하게 만들어주는 함수가 필요합니다. 이 함수는 매 프레임마다 위치를 바꿔주기 위한 몇가지 변수들을 포함합니다. JavaScript 타이밍 함수인 setInterval()나 requestAnimationFrame()를 이용하면 함수를 몇번이고 계속 반복해서 실행할 수 있습니다. 현재 여러분의 HTML파일 안에 있는 JavaScript중에 처음 두 줄만 제외하고 나머지는 모두 지워주세요. 지운 후에는 아래에 있는 코드를 추가해주세요. draw()함수는 setInterval를 통해서 10밀리초마다 실행됩니다. function draw() { // drawing code } setInterval(dra.. IT/캔버스 6년 전
[canvas] 캔버스 기초 canvas foundation (원그리기, 사각형그리기) 캔버스 구조 width와 height를 나타내는 속성을 가지고 있으며, 함수로는 toDataURL, toBlob, getContext 함수를 가지고 있다. 여기서 가장 기본적으로 사용해야하는 것은 바로 getContext 함수로 자바스크립트에서 canvas의 context를 가져와서 그 context에 그림을 그리게 되는 것이다. 먼저 html태그에서 canvas태그를 넣어보자. 그래픽을 렌더링하기 위해서는 JavaScript로 참조 할 수 있게 아래의 소스를 넣어줘야 합니다. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); 엘리먼트에 대한 참조를 canvas 변수에 저장하였습니다. 그러고 나서는 캔버.. IT/캔버스 6년 전
서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR) SSR 이란? Server Side Rendering 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 브라우저(클라이언트)에게 바로 보여줄 수 있다. 장점 SEO(serach engine optimization)을 쉽게 구성할 수 있다. 서버를 이용하여 페이지 구성 -> CSR보다 페이지 구성하는 속도는 늦지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다. 첫 렌더링 된 html을 브라우저(클라이언트)에게 보여주기 때문에 초기 로딩속도를 줄여줄 수 있다. 자바스크립트 파일을 불러오고, 렌더링 작업이 완료되기 전에 유저가 사이트의 컨텐츠를 이용 가능하다. 단점 모든 요청에 관해 필요한 부분만이 .. IT/웹 6년 전
