개발자연습노트

1. DOM 이라는 말이 자주 등장합니다. 책보고 검색하고 그러면 맨날 DOM이라는 용어를 남용하는데 그게 뭔지 알아봅시다.Document Object Model 이라는 뜻인데 그냥 설명하면 이해가 안되니 배경설명부터 갑니다.   자바스크립트는 HTML 조작에 특화된 언어라고 설명드렸습니다.그런데 자바스크립트가 어떻게 HTML을 조작할 수 있는지 원리를 생각해본 적이 있습니까. 생각해보면 HTML과 자바스크립트는 다른 언어입니다.그래서 자바스크립트에선 이런 html을 직접 해석하고 조작할 수 없습니다.  자바스크립트는 이런건 못알아듣습니다.그런데 어떻게 HTML 태그들을 알아보고 조작할 수 있는 것일까요?  자바스크립트가 HTML 조작을 하기 위해선 HTML을 자바스크립트가 해석할 수 있는 문법으로 ..

array 정렬하는 법 array 자료는 순서개념이 있다보니 정렬도 가능합니다.그냥 문자 가나다순으로 정렬하려면 .sort() 붙이면 되는데 숫자정렬은 이렇게 코드짜면 됩니다. 설명하다 var 어레이 = [7,3,5,2,40];어레이.sort(function(a, b){ return a - b});console.log(어레이);이러면 숫자순으로 잘 출력됩니다.근데 왜 저렇게 코드짜면 숫자순 정렬이 되는지 알고싶지 않습니까코드 동작원리 이런걸 알면 나중에 응용도 쉽게 가능하기 때문에 sort() 동작원리를 알아봅시다.  어레이.sort(function(a, b){ return a - b}); 1. a, b는 array 안의 자료들입니다.2. return 오른쪽이 양수면 a를 오른쪽으로 정렬해줍니다.3...

서버란? 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램입니다.  근데 그냥 데이터달라고 떼쓰면 주는게 아니라서버에 데이터를 요청할 때는1. 어떤 데이터인지 url로 잘 기재해야하고2. 어떤 방법으로 요청할지 결정해야 (GET/POST 등)데이터를 보내줍니다.   예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면https://comic.naver.com/webtoon/list?titleId=783054 여기로 GET요청하면 보내줍니다.예를 들어서 독립일기라는 네이버웹툰을 보고싶으면https://comic.naver.com/webtoon/list..

오늘은 서버에서 바지 사이즈 데이터 가져와서그 갯수만큼 을 생성해봅시다. 그래서 다음처럼 코드짜놓고 시작합시다.   설명하다 맨 위에 pants 라는 변수를 하나 만들고 서버에서 보낸데이터라고 가정해봅시다.pants 데이터 갯수만큼 을 생성하고싶으면 어떻게 해야할까요? 반복문 쓰면 될 것 같은데요    설명하다 ▲ 반복문 쓰면 해결될듯요 pants.length 만큼 반복해달라고 하면 됩니다.근데 이거보다 조금 더 쉬운 반복문을 알아봅시다.      forEach 반복문  array 자료 뒤에 붙일 수 있는 forEach() 라는 기본함수가 있습니다.이것도 반복문임 설명하다 var pants = [28, 30, 32];pants.forEach(function(){ console.log('안녕')});이렇..

select 들어간 폼을 만들어봅시다 아무데나 붙여넣기하고 시작합시다 (Bootstrap이 설치되어있으면 이쁘게 나옴) 설명하다  상품선택 모자 셔츠 는 이랑 똑같은데사용자가 고를 수 있는 선택지를 드랍다운 메뉴로 제공하는 입니다. 선택지는 으로 넣으면 됩니다.  - 태그도 선택시 input, change 이벤트가 발생합니다.- 태그도 .value로 유저가 입력한 값을 가져올 수 있습니다.     셔츠고르면 밑에 더 보여주기  ▲ Q. 유저가 셔츠를 선택하면 하단에 95, 100 을 선택할 수 있는 박스가 등장하려면 코드 어떻게 짜면 될까요?동적인 UI 만드는 법은 다 알테니 알아서 자바스크립트로 짜봅시다.            어떻게 만들었냐면 UI 어떻게..

첫째 상품명을 뽑는 법을 알아봅시다.  설명하다 var products = [ { id : 0, price : 70000, title : 'Blossom Dress' }, { id : 1, price : 50000, title : 'Springfield Shirt' }, { id : 2, price : 60000, title : 'Black Monastery' }]; ▲ 어렵게 생긴 자료도 console.log 해보면 쉽게 출력할 수 있다고 했습니다. console.log(products) 해보면 [{ }, { }, { }] 이렇게 나옵니다.  그냥 array 안에 object 3개가 들어있을 뿐입니다.그래서 저기서 내가 원하는 자료를 뽑고 싶으면 시작 기호만 잘 보면 됩니다.[ 이거는 array라..

Array 자료형  여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형입니다.  var car = ['소나타', 50000, 'white'];대괄호를 열고 자료를 콤마로 구분해서 집어넣으면 됩니다.그럼 여러 자료를 엑셀처럼 저장가능  var car = ['소나타', 50000, 'white'];console.log(car[1]);array 자료에서 데이터 뽑을 땐 대괄호를 뒤에 붙이면 됩니다.[x] 라고 쓰면 x번째 자료를 출력해줍니다.  var car = ['소나타', 50000, 'white'];car[1] = 60000;console.log(car[1]);array 자료를 수정하고 싶으면 등호 이용해서 수정하면 됩니다.자료 추가도 됩니다.그래서 결론은 여러 자료를 변수 하나에 저장하고 싶으면 ..

직접 자바스크립트 코드를 처음부터 짜기 귀찮으면남들이 만들어놓은 라이브러리를 사용해도 됩니다.UI 개발도 마찬가지로 복사 붙여넣기식으로 멋진 UI 개발이 가능합니다. 그렇다고 복붙식으로 포트폴리오를 만들면 개발실력이 아니라 복붙실력이 어필됩니다.       1. Swiper 캐러셀 (이미지슬라이드되는거) 만들고 싶으면 직접 코드 짜도 되겠지만좀 이쁘게 아니면 쉽게 여러기능을 만들고 싶으면 Swiper 라이브러리 써도 됩니다.호환 잘되고 이미지 lazy loading 이런 것도 되고 터치/드래그도 됩니다.  https://swiperjs.com/get-started#use-swiper-from-cdn여기가서 튜토리얼 그대로 js 파일, css 파일을 다운받아서 첨부한 뒤에html css js 예제코드 복사..

모달창 배경을 누르면 닫히는 기능을 추가해봅시다 앞선 강의에서 모달창을 하나 제작해서 띄워봤습니다. 근데 모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해봅시다.  설명하다  모달창 내용 ▲ 모달창 HTML은 대충 이런 식으로 코드가 짜여있고모달창 오픈할 때 show-modal 클래스명을 넣어서 오픈했다면    document.querySelector('.black-bg').addEventListener('click', function(){ document.querySelector('.black-bg').classList.remove('show-modal');})이렇게 코드짜면 될듯요 그럼 검은 배경 눌렀을 때 모달창이 잘 닫힙니다.  근데 이상한 점이 하나 있습니다.검은배경 뿐만 ..