내가 보려고 쓰는 기록

프론트엔드 특징 - 데이터 꺼내는 일이 매우 많음 array, object 둘다 복잡한 자료에서 원하는 데이터 꺼낼때 사용 Then, 걍 하드코딩하면 되는데 왜씀? 서버에서 html파일을 유저에게 보낼때 방법이 두가지 있음(유저가 웹사이트 열었을때) 1.server-side-rendering 완성된 html 파일 전송 서버가 html 다 만들어야해서 서버가 귀찮음 2.client-side-rendering(*요즘유행) 빈html파일 + 데이터 - 빈html 완성은 JS가 하도록 서버가 편함 서버가 보낸 데이터들을 html에 꽂아 넣는 것

✔ array 순서대로여러자료 저장 가능 [자료1, 자료2, 자료3 ...] var car = ['소나타',50000,true]; array에서 자료 꺼내기 var car = ['소나타',50000,true]; console.log(car[0]); array 자료 추가/수정하려면 var car = ['소나타',50000,true]; car[0] = '아반떼'; ✔ object key:value (자료이름 : 자료) 형태로 저장가능한게 장점(!key값 꼭 붙여야함) {key:value, key:value} *key부분이 자료라고 오해하는데 실제 오브젝트에 저장된 자료는 value! (key는 자료이름일뿐) var2 = {name : '소나타',price : 50000}; object에서 자료 꺼내기-키값으..

html 태그안에 몰래 정보 숨기기 가능 data-자료이름 = "값" Products Information Shipping Company User 몰래 숨겼던 자료출력 셀렉터.dataset.자료이름

모든 브라우저는 이벤트 버블링이 일어남 (이벤트가 상위 html로 퍼지는 현상) ex) 로그인하세요 위의 코드에서 white-bg를 클릭하면 클릭을 총 두번한 것 → white-bg + black-bg 위의 코드에서 h4를 클릭하면 클릭을 총 세번한 것 → h4 + white-bg + black-bg ★유용한 이벤트관련 함수들(이벤트이상하게 동작하는 것을 고칠수있음 ex)이벤트 버블링) 이벤트리스너의 콜백함수에 e 넣어주기 document.querySelector('.black-bg').addEventListener('click',function(e){ e.target;//유저가 실제로 누른것 e.currentTarget;//이벤트리스너 달린곳 this; //위와 같은뜻, this는 콜백함수에 e 안넣어..

for 반복문 비슷한 코드 복붙 안해도됨, 코드 반복실행 하는 것 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $('.tab-button').eq(0).on('click',function(){ // .eq(n) : 왼쪽의 n번째 $('.tab-button').removeClass('orange'); $('.tab-button').eq(0).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-content').eq(0).addClass('show'); }) $('.tab-button').eq(1).on('click',function(){ $('.tab-button').removeClass('o..

main() main 함수에서 코드 호출 모든코드는 main 함수안에 들어가야함 * ; 세미콜론 꼭!! 써야함 변수만들기 (두가지 有) 1) var키워드 2) 변수의 타입 명시 ▷ 정수 int ▷ 실수 double ▷ 맞다/틀리다 bool 문자 String 변수 값 바꾸기 var 쓰지 않고 바꾸고 싶은 변수 이름 = 바꾸고 싶은 값 입력

dart 특징 1. flutter, dart 둘다 구글에서 만들음 2. 구글에서 flutter를위해 dart를 최적화 할수있음 flutter 맞춤형 3. UI에 최적화 되어있음 4. 모든 플랫폼에서 빠름 5. 여러 CPU의 아키텍쳐에 맞게 변환해줌(IOS, Android, Windows, Linux, Mac으로 컴파일 할수있음) 6. 거의 모든곳에서 컴파일 가능 7. just-in-time 내가 쓴 코드의 결과를 바로 화면에 보여줌 8. null safety (프로그램을 안전하게 만들어줌)

window : document와 비슷한 의미, 현재 html 페이지를 의미 scroll 이벤트리스너 쓸때는 window 쓰기 ★ jQuery $(window).on('scroll',function(){}) ● 유저가 스크롤바를 얼만큼 내렸는지 알려줌(현재 스크롤바 위치 출력) (가로 스크롤은 scrollX) window.scrollY​ ● 한번의 스크롤로 y위치에 가기 ex) window.scrollTo(0,100) : 스크롤바 한번 내리면 위치 100으로 이동 window.scrollTo(x,y) ● 현재위치에서 y만큼 스크롤 해주세요 window.scrollBy(x,y) ★ jQuery $(window).scrollTop() ex) $(window).scrollTop():스크롤 양 $(window)..