개발자연습노트

오늘은 서버에서 바지 사이즈 데이터 가져와서그 갯수만큼 을 생성해봅시다. 그래서 다음처럼 코드짜놓고 시작합시다.   설명하다 맨 위에 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');})이렇게 코드짜면 될듯요 그럼 검은 배경 눌렀을 때 모달창이 잘 닫힙니다.  근데 이상한 점이 하나 있습니다.검은배경 뿐만 ..

이렇게 생긴 UI를 탭이라고 합니다.어떻게 만드냐면 그냥 UI 만드는 step 그대로 따라가면 완성입니다. 버튼3개, div 박스 3개 만들어두고버튼누르면 거기 맞는 div박스를 보여주면 끝입니다.    시간아까우니 디자인은 미리 해옴 설명하다  Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping  아무데나 복사붙여넣기하면 탭나옴 어떻게 만들었는지 설명하자면 1. 태그로 버튼 3개 만들었습니다.2. 태그로 박스 3개 만들었습니다.3. 제가 만든 orange 클래스명을 추가하면 버튼누른듯한 효과를 줄 수 있습니다 (매우편리) 4. 제가 만든 ..

문제 1. 스크롤바 100px 내리면 로고 폰트사이즈 작게 만들기 그런 재밌는 애니메이션을 만들어봅시다.  설명하다 .navbar { position : fixed; width : 100%; z-index : 5}.navbar-brand { font-size : 30px; transition : all 1s;}일단 상단메뉴는 상단고정하고 로고 폰트사이즈를 키운 채로 시작합시다.그리고 스크롤바를 100px 정도 내리면 폰트사이즈를 줄여봅시다.그럼 스크롤바를 얼마나 내렸는지 알 수 있어야겠군요        스크롤 이벤트리스너  window.addEventListener('scroll', function(){ console.log('안녕')});스크롤바를 조작하면 scroll 이벤트가 발생합니다.그..

함수 function 문법은- 긴 코드 짧게 축약해서 쓸 수 있고 - 파라미터로 기능업그레이드도 가능하다고 했습니다.- 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 그 자리에 퉤 뱉을 수도 있습니다.   함수안에서 쓸 수 있는 return 문법 함수 안에서 return이라는 문법을 사용할 수 있습니다.return 오른쪽에 아무거나 적으면 함수가 실행되고난 자리에 return 오른쪽에 있던 값이 뾰로롱 남습니다.  설명하다 function 함수(){ return 123}console.log(함수());그래서 진짜인지 확인하기 위해 함수() 실행하고나서 123을 남기라고 적었습니다.출력해보니 진짜 123 잘 출력되는군요. 이렇게 함수() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 r..

슬라이드되는 UI들을 캐러셀이라고 합니다.어딜가나 있는 UI 라서 한번 만들어봅시다. 버튼이 많아보이는데 다 한 번에 만들려고 하면 매우 어렵습니다. 그건 천재들이나 하는 것이고가장 간단한 1개 기능만 먼저 개발하면 쉽습니다.우린 쉽게 2번 사진 보여주는 버튼의 기능만 먼저 만들어봅시다.    one-way 애니메이션들어간 UI 만드는 법은 1. 애니메이션 시작 전 화면 만들기2. 애니메이션 종료 후 화면 만들기3. 언제 종료화면으로 변할지 JS 코드짜기4. transition 추가하기 이거 그대로 하면 된다고 했습니다.     1. 애니메이션 시작 전 화면 만들기 html css로 알아서 만들면 됩니다. css 실력이 가장 중요하겠군요.   ▲ 사진이 이렇게 슬라이드되어서 보이려면사진을 미리 어떻게 배..