전체 글 (47) 썸네일형 리스트형 Dream Coding | 쇼핑몰 미니 게임 만들기 3편 / fetch 우선 큰 틀부터 짜보자. 저장한 데이터를 불러와서 -> loadItems() 프로미스가 리턴이 되면, 전달받은 items가 디스플레이에 보여지고, -> displayItems(items); 버튼을 클릭했을 때 필터링 되는 것을 볼 수 있다. -> setEventListeners(items) loadItems은 json 파일로부터 데이터를 동적으로 받아 올 것이다. 쉬운 방법은 바로 fetch를 사용하는 것. fetch('data/data.json') 이렇게 fetch를 쓰고 경로나 url을 입력해주면 된다. 데이터를 성공적으로 받아오면 response라는 오브젝트를 전달해준다. response는 바디와 헤더, 코드 성공 유무나 페치의 url등이 들어있다. 바디안에 우리가 받고자 하는 데이터가 들어있다. .. Dream Coding | 쇼핑몰 미니 게임 만들기 2편 / JSON 데이터를 저장할 때 JS안에 저장하는 경우가 있는데, 좋은 경우는 아니다. JS는 비즈니스 로직을 담당하는 곳이다. 때문에 코드가 들어있는데 데이터와 코드가 같이 있는건 좋은 방법이 아니다. 그래서 미니게임 클론코딩은 json파일을 따로 만들어 둘 것이다. json은 오브젝트와 굉장히 유사한 아이이다. items이라는 배열에 각각의 아이템들이 들어있는 형태. 각각의 아이템은 또 다른 오브젝트이다. 때문에 key와 value로 구성되어 있다. 미니 게임 클론코딩에서는 데이터가 티셔츠, 바지, 스커트가 해당된다. 아이템이라는 배열안에 티셔츠인지, 남성복인지, 여성복인지, 사이즈, 색상등의 key와 그 값인 value를 가지고 있는 데이터들이 있다. Dream Coding | 쇼핑몰 미니 게임 만들기 1편 / HTML, CSS 요즘 도움을 많이 받고 있는 유튜브 Dream Coding에 있는 미니 쇼핑몰 게임(?) 클론 코딩을 해봤다. 게임이라고 하기에는 애매하지만, 바닐라JS로 기본적인 동작을 할 수 있는 프로젝트다. 이런 식으로 되어있는 모바일 형태의 쇼핑몰 UI. nav부분의 버튼을 클릭하면 상의, 바지, 치마 그리고 색깔별로 분리되어 나오는 것을 구현할 수 있다. 우선, 마크업부터 진행을 해봤다. 로고, 카테고리, 그리고 아이템으로 나눌 수 있다. header안에 로고와 nav를 넣었다. 그리고 main에 아이템들을 넣어놨다. 위에 코드를 보면 img가 없는데, css background: url로 적용하는 게 익숙해서 css로 구현을 해봤다. 그래서였을까..... 로고와 nav까지는 잘 됐는데, 아이템 부분에서 새로 .. JavaScript(ES6)| async와 await 그리고 유용한 promise APIs syntactic sugar - 기존에 존재하는것위에 간편하게 쓸 수 있는 api async & await clear style of using promise 1.async 동기적으로 실행이 되면 위 사진 처럼 함수 호출을 인식하고 함수를 읽는데 만약 10초가 걸리는 식이면 10초후에 리턴되고 그 리턴되는 값이 출력되기때문에 만약, 그 뒤에 웹페이지 ui를 표시하는 기능이 있다면 사용자는 10초동안 빈 화면을 보면서 기다려야하는 상황이 발생한다. 때문에 오래걸리는 일은 비동기적으로 처리할 수 있어야 한다. 저번 시간에 비동기로 사용했던것이 promise. Promise에서 resolve나 reject값을 설정하지 않으면 위 사진 처럼 pending상태로 출력이 된다. Promise는 꼭 resolve나 .. JavaScript(ES6)| Promise 개념/활용 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트. Promise is a JavaScript object asynchronous operation. :자바스크립트안에 내장 되어 있는 오브젝트. :asynchronous(비동기)를 사용할 때 콜백함수 대신 유용하게 쓰임. state: pending -> fulfilled or rejected : 진행중->완료 or 파일을 찾을 수 없거나 네트워크에 문제가 생길때. Producer vs Consumer :데이터를 만들어내는 Producer vs 소비하는 Consumer 1. Producer -when new Promise is created, the executor runs automatically. promise를 만드는 순간, 우리가 전달한 exec.. JavaScript(ES6)|콜백 이해하기 (feat. 콜백지옥) JavaScript is synchronous. :(자바스크립트는 동기적이다.) Execute the code black by orger after hoisting. :(hoisting이 된 이후부터 우리가 작성한 순서에 맞게 하나씩 동기적으로 실행된다는 말) hoisting: var, function declaration :(hoisting이란, var나 function같은 함수 선언들이 자동적으로 제일 위로 올라가는 것) 위 사진 처럼 작성한 순서대로 출력되는 것을 볼 수있다. 이것을 hoisting이라고 함. *비동기적인 실행방법 setTimeout같은 함수를 사용하면 비동기로 가능하다. console.log('2')를 1초뒤에 나타나게 함수를 지정해두면 콘솔에 순서에 상관없이 출력이 된다. set.. JavaScript(ES6)|JSON 개념 정리와 활용방법 HTTP(Hypertext Transfer Protocal)- 클라이언트와 서버를 연결해주는 것. AJAX- 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술. XHR- 브라우저 API에서 제공하는 오브젝트중에 하나. 이것을 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있다. fetch()API- 최근 브라우저 API에 추가된 간편하게 데이터를 주고받을 수 있는 것. (ex에서 사용할 수 없음) XML- 마크업 언어중에 하나. (요즘에는 많이 사용하지 않음) JSON(JavaScript Object Notation)- 요즘에 많이 쓰는 브라우저 API. -Object {key: value}로 이뤄져 있음. -텍스트를 기반으로 한 가벼운 언어. -프로그램 언어와 상관없이 대부분의 언.. JavaScript(ES6)|유용한 배열 함수 10가지 Q1. make a string out of array :배열을 스트링으로 출력. A1. join join을 이용해서 배열을 스트링으로 출력한다. 구분자에 아무것도 쓰지 않아도 자동으로 ,로 구분됨. 구분자에 ^을 넣으니 ^로 구분되는 것을 볼 수 있음. Q2. make an array out of a string :스트링을 배열로 출력. A2. split split을 이용해서 배열로 출력한다. ('구분자', 리밋)으로 리밋은 앞에서부터 나오는 값의 갯수를 설정한다. 옵션이기때문에 필수로 작성할 필요는 없다. 반면, '구분자'가 없으면 " "이 안에 모든 값이 출력되기때문에 꼭 구분자를 입력해야 한다. Q3. make this array look like this: [5, 4, 3, 2, 1] :주어진 .. 이전 1 2 3 4 5 6 다음
