개발일지

자바스크립트 자주 볼 수 있는 this 키워드에 대해서 알아보자 에서 this 키워드를 출력해보면 window{...} 라는 것이 출력된다. 또한 일반 함수 내에서 this 키워드를 출력해보면 function f(){ console.log(this); } f(); 여기서 Window 란 무엇일까? Window 란? Window 는 모든 전역변수, 함수, DOM 을 보관하고 관리하는 전역 객체이다. 우리가 흔히 사용하는 document.getElementById(), alert(), console.log() 이러한 함수들을 보관하는 보관소이다. 이 보관소는 하나의 큰 {오브젝트} 라고 생각하면 된다. 또한 코드를 짜며 전역변수들을 만들었을 때도 이 변수들을 window에 보관해준다. strict mode ..

브라우저 안의 여러 저장공간 크롬 개발자도구의 Application 탭에 보면 여러가지 저장공간이 존재한다 Local Storage / Session Storage ( key : value 형태로 문자 숫자 데이터 저장 가능 ) indexed DB ( 크고 많은 구조화된 데이터를 DB처럼 저장 가능, 문법 더러움 ) Cookies ( 유저 로그인 정보 저장 공간 ) Cache Storage ( html css js img 파일 저장해두는 공간 ) 개발자가 선택해서 사용하면 되는데 범용적으로 사용 가능한 Local Storage 사용해보자 Local Storage 는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB 까지만 저장 가능하다. Local Storage는 브라우저 재접속 해도 영..

서버란? 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램일 뿐이다. 네이버 웹툰 서버 : 유저가 웹툰 요청하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 요청하면 영상 보내주는 프로그램 서버에 데이터를 요청할 때 어떤 데이터인지 url 로 잘 기재해야하고 어떤 방법으로 요청할 것인지 결정해야함 (GET / POST 등..) GET / POST 요청하는 법 GET 요청은 서버에 있던 데이터를 가져오고 싶을 때 주로 사용하고, POST 요청은 서버로 데이터를 보내고 싶을 때 주로 사용한다. ( PUT, DELETE 요청도 있음 ) GET 요청 보낼 때 가장 쉬운 방법은 브라우저 주소창이다. 브라우저 주소창에 url 적으면 그 주소로 GET 요청을 보내준다. POST 요청 하고싶으면 태그 ..

Array / Object 자료형 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형들 배열 Array var car = ['소나타', 50000, 'white']; 다음과 같이 배열에 저장 가능 Object var car2 = { name : '소나타', price : 50000 }; 딕셔너리 처럼 사용 자료를 꺼내쓸 때는 car2[’name’] 또는 car2.name와 같이 사용할 수 있다. 실제 웹서비스 개발 2가지 방식 사용자가 사이트로 접속하면 HTML 을 잘 만들어서 보내주는 것을 웹서비스 라고 한다. HTML을 누가 완성하는지에 따라 개방방식의 차이가 존재 1. 서버에서 HTML을 미리 완성해서 고객에게 보내줌 이러한 방식을 server-side rendering 이라고 한다. 2. ..

UI 애니메이션 추가할 때 가능한 CSS 만으로 처리하는게 좋음 자바스크립트에게 너무 많은 일을 시키면 성능이 저하되기 때문 one-way UI 애니메이션 만드는 법 A 상태 → B 상태로 바뀌는 일방향 애니메이션 시작스타일 최종스타일 원할 때 최종스타일로 변하라고 코드 짜줌 transition 추가 각각 클래스로 만들어놈 fadeIn, fadeOut 애니메이션 만들기 .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 5; padding: 30px; visibility: hidden; opacity: 0; transition: all 1s; } 위와 같이 visibility 속성 h..

html 변경 document.getElementById(’hello’).innerHTML = ‘안녕’; (문서) (~의) (id hello:html 요소를 가져와라) (HTML 안) 안녕 버튼 .hide(), .fadeOut(), .slideUp() 등 여러가지 애니메이션 제공해줌