JavaScript/드림코딩5 드림코딩_자바스크립트_쇼핑몰 미니게임 클론코딩 [ 쇼핑몰 미니게임 클론코딩 ] 1. HTML / CSS 정적인 페이지 완성시키기 ellie와 내 코드를 비교한 결과 및 보완해야 할 점 - 일정한 수치값을 변수로 사용하여(통일성 있게) 재사용 한다. - 각각의 태그별 class를 거의 대부분에 사용하여 css를 적용시킨다. - 가로 세로정렬 모두 flex를 사용해 더 간편하게 정렬하였다. - 쇼핑 리스트 ul>li 하나를 먼저 구현해 놓고 추후 JS에서 동적으로 변경하였다. - section.class 사용하여 섹션을 구분한다. (div_con사용x) - div_con 감싸지 않고 바로 tag 사용(ex, 바로 ul>li사용, 간단한 프로젝트라 그런 것 같다.) 2. data폴더 안에 data.json 파일 생성하여 data 보관하기 JS에서 배열을 .. 2022. 4. 2. 자바스크립트 기초(ES5+)_비동기 처리의 시작_콜백(Callback) 이해하기(콜백지옥) [ 동기(Synchronous)와 비동기(Asynchronous) ] 1. 동기와 비동기 1) 동기(scynchrounous) : JS는 동기적이다 > hoisting이 된 이후부터, 코드가 우리가 작성한 순서에 맞춰서 하나하나씩 자동적으로 실행된다. *hoisting : var변수 또는 함수 선언이 가장 최상위로 올라가는 것 2) 비동기(asynchronous) : 언제 코드가 실행될지 예측할 수 없는 것을 말한다. 3) 콜백(callback) : 해당 함수 호출 시 지정된 콜백함수를 인자로 전달하여 지정 함수를 부르도록(call back)한다. -동기/비동기 // 1. 동기 : synchronous console.log("1"); console.log("2"); console.log("3"); // .. 2022. 3. 24. 자바스크립트 기초(ES5+)_유용한 배열(Array)함수 10가지(*중요) [ 유용한 배열(Array) 함수 ] 1. join() > 배열에있는 모든 아이템을 더해서 string으로 리턴함, 각각 구분자''를 통해 ,으로 구분하여 string으로 만들어준다. // Q1. make a string out of an array const fruits = ["apple", "banana", "orange"]; // answer const result = fruits.join(); const result1 = fruits.join("|"); // 구분자 '|'생성 console.log(result); console.log(result1); - 나 : toString() 사용, 차이가 무엇일까? 2. split() > 전달된 구분자''를 통해 string을 여러가지 문자열로 잘게 나뉘어.. 2022. 3. 23. 자바스크립트 기초(ES5+)_Array(배열)과 APIs [ Array 배열 ] 1. 자료구조 자료구조 : 비슷한 구조의 데이터들을 모아놓는 것이다. 자료구조와 Object의 차이점 : - object가 토끼와 당근일 경우 , 토끼와 당근들은 각각의 특징들이 있다. (property=귀 두개, 주황색, method=먹는다, 뛴다), object는 서로 연관된 특징과 행동들을 묶어놓는 것이다. 비슷한 타입의 object들을 묶어놓는 것을 자료구조라고 한다.(토끼들끼리, 당근들끼리 바구니에 담음) > 다른 언어에서는 동일한 type의 object만 담을 수 있다. but js는 유연한 언어(dynamic typed language)기 때문에 한 바구니 안에 다양한 type의 데이터를 담을 수 있다.(가능하긴 하지만 프로그래밍에 좋지 않다.) 자료구조와 알고리즘의 .. 2022. 3. 21. 자바스크립트 기초(ES5+)_반복문(loop)/ while / for / 중첩 반복문 [ Loop 반복문 ] - false가 나오기 전까지 계속해서 무한 반복한다. 1. while 반복문 > 조건을 먼저 확인한다. let i = 3; while (i > 0) { // i가 0보다 클경우 반복함 console.log(`while: ${i}`); i--; } 2. do - while 반복문 > 블록 먼저 실행한 후 조건을 확인한다. do { console.log(`do while: ${i}`); // 먼저 실행한 후, i--; } while (i > 0); // 조건을 확인하고 반복함 3. for 반복문 : for( begin(시작); condition(조건); step(스텝) ) > begin 1번만 실행 후, condition 확인하고 step 하는 과정을 반복한다.(condition이 .. 2022. 3. 18. 이전 1 다음 728x90 반응형
