웹개발 (70) 썸네일형 리스트형 HTML Style + JS(JavaScript)를 통한 여러가지 색 박스만들기 예제 원래라면 box를 body에 태그들을 사용해서 box를 여러개 만들어야했지만, JS (자바스크립트) 를 사용하여 박스생성을 함수로 만들어 사용하게 되면 for문 만으로 여러개의 박스들을 만들 수 있음 이 때 colorList라는 항목을 추가해 background-color도 지정하여 박스마다 다른 색들이 적용될 수 있도록 하였다 수행결과 HTML 제어문 JAVA에서 사용한 for / while을 똑같이 사용가능 자료형 타입을 int 가 아닌 var로 사용하는것만 주의하면 됨 HTML 자료형 확인하기 수행결과 여기서 볼 것은 typeof 와 ==, ===의 비교연산자다 먼저 typeof null이라는 것도 object 타입이기 때문에, null이여도 타입인 object type을 확인할 수 있다. 또, x = 12; , y= '12'; 를 보게 되면 x는 숫자(number) 로 type이 정의된 것을 볼 수 있고 y는 문자열(string) 로 type이 정의된 것을 확인 할 수 있다. 그리고 ==, === 연산자의 차이는 ==는 x 와 y의 값만 비교해서 같은 12 라는 것으로 판단하여 true를 return하지만 ===는 x와y의 값 뿐만 아니라 type까지 비교해서 false를 return 하는것을 볼 수 있다. HTML 변수선언과 자료형 + Uncaught ReferenceError 수행 결과 여기서 Error가 뜬 것을 볼 수 있는데 Uncaught ReferenceError : 는 정의되지 않은 것을 호출 했을 때 발생하는 에러이다. 즉 위 코드에서 z는 선언되지 않았는데 호출을 했기 때문에 발생한 것이다. HTML JS(내부스크립트, onclick ) 함수사용 기본예제 box를 클릭하면 box 색상을 바꾸는 함수를 만들어서 사용 수행결과 HTML 외부 Script [JS] 불러오기 src > webapp > 경로에 같은 레벨로 js 폴더를 만든 뒤, 안에 .js확장자를 가진 파일을 만들어준다. 그 후 태그 안에 scrip를 src로 불러와주면 된다. 이 때, 경로와 확장자를 잘 써주어야함. js폴더 안에 있는 myscript.js 파일 [10분 테코톡] 🎨 신세한탄의 CSR&SSR SPA와 MPA SPA (SinglePageApplication) - 리액트, 앵글러 , 뷰와 같은 자바스크립트 기반 프레임워크를 사용하여 개발 된 하나의 페이지로 구성된 웹 어플리케이션 - ex) APP을 이용할 때 헤더는 고정되어있고, 메뉴를 선택하면 메인화면 부분, 혹은 클릭한 부분만 바뀌는 웹사이트 MPA (MultiPageApplication) - 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 새로 랜더링 하는 전통적인 웹페이지 구성방식 - 전환 시 마다 화면 깜빡임 CSR과 SSR SPA, MPA와의 관계 - 리액트, 뷰, 랭글러 등을 이용하여 SPA를 만들고 특별한 목적을 가지고 랜더링 방식을 변경하지 않는다면 자연스럽게 SCR을 사용하게 됨 - PHP, JSP등으로 .. [10분 테코톡] 🌳 나봄의 CORS SOP (Same Origin Policy) - 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식 - 출처란? CORS (Cross-Origin Resource Sharing) - 다른 출처의 자원을 공유 - 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제 CORS 접근제어 시나리오 ✔ 단순요청 (Simple Request) ✔ 프리플라이트 요청 (Preflight Request) ✔ 인증정보 포함 요청 (Credentialed Request) Preflight - 사전 확인 작업 - OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 확인 작업 - 요청이 가능하다면 실제 .. 이전 1 ··· 4 5 6 7 8 9 다음
