Javascript12

• 

  🔥component - 부품으로 정리 component - 부품으로 정리 SPA(Single Page Application)는 간단히 만들기 위함이지만, 규모가 커지면 복잡해진다. 이 때, “같은 종류의 처리를 하는 부분을 컴포넌트로 정리”하면 보기 좋고 이해하기 쉬워진다. HTML의 일부분을 오브젝트로 정리하는 것은 template 오브젝트를 사용한다. 그리고 오브젝트에 이름(컴포넌트 태그명)을 붙인 것을 “컴포넌트”라고 한다. // 준비된 컴포넌트가 표시된다. 컴포넌트 만드는 방법 전역 컴포넌트로 등록하는 방법 Vue.component('컴포넌트태그명', { template: 'HTML부분' }) 로컬 컴포넌트에 등록하는 방법 var 컴포넌트의 오브젝트명 = { template: 'HTML부분' } new Vue({ el: '#app',.. JavaScript/vue 2022. 12. 13.

• 

  4장 - 변수 4. 변수(Variable) 4.1 변수란 무엇인가? 애플리케이션은 데이터를 다루는데, 데이터를 입력(INPUT)받아 처리하고, 그 결과를 출력(OUTPUT)하는 것이 전부이다. CPU --> 연산, 메모리 --> 데이터 기억 컴퓨터는 CPU를 사용해서 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리의 집합체이다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어 들인다. 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다. 변수의 정의를 내려보면 다음과 같다. = 값의 위치를 가리키는 상징적인 이름 변수는 하나의 값을 저장.. JavaScript/모던 자바스크립트 딥다이브 - 스터디 2022. 11. 27.

• 

  [모던 딥다이브] 자바스크립트 2장 자바스크립트란? 2.1 자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정했다. 이로 인해 탄생한 것이 브렌덴 아이크가 개발한 자바스크립트이다. 자바스크립트는 웹 브라우저인 넷스케이프 내비게이터2에 탑재되었고, 모카로 명명되었다. 그해에 라이브스크립트로 이름이 바뀌었었다가 그해 12월 자바스크립트라는 이름으로 최종 명명되었다. 자바스크립트가 탄생한 뒤 얼마 지나지 않아 자바스크립트 파생 버전인 JScript가 출시되어 자바스크립트는 위기를 맞는다. 2.2 자바스크립트의 표준화 1996년 마이크로소프트는 자바스크립트의 파생 버전인 “JScript”를 인터넷 익스프롤러3.0에 탑재했다. 하지만 JScript와 자바스크.. JavaScript/모던 자바스크립트 딥다이브 - 스터디 2022. 10. 22.

• 

  [모던 딥다이브] 자바스크립트 1장 프로그래밍 1.1 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 프로그래밍에 앞서 해결해야 할 요구사항을 명확히 이해한 후 적절한 해결 방안을 정의해야 한다. 이때, 요구되는 것이 문제 해결 능력이다. 대부분의 문제는 복잡하며 명확하지 않을 수 있기에 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야한다. 즉, 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 해결 방안을 고려할 때, 컴퓨터의 입장에서 문제를 바라봐야 하는데, 이것을 컴퓨팅 사고이다. 컴퓨터는 상대적인 개념으로는 기준의 불명확하기 때문에, 좋다 등의 개념이 아닌, “현재의 높이보다 1px크게 조정하라, 50px로 조정하라” 등과 같.. JavaScript/모던 자바스크립트 딥다이브 - 스터디 2022. 10. 22.

• 

  Vue.js CDN / 설치(추후 추가) Vue.js https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org CDN 프로토 타이핑또는 학습 목적이라면, 아래 코드로 최신 버전을 사용할 수 있습니다. 프로덕션 환경인 경우 새 버전에서 예상치 못한 오류를 방지하려면 특정 버전의 빌드 파일을 추가하는것을 추천합니다. 기본 ES 모듈을 사용하는 경우 이를 지원 하는 ES 모듈 호환 빌드 파일도 있습니다. 다양한 데이터의 출력 {{ myText }} 숫자 {{ myNumber }} 부울형 {{ myBool }} 배열 {{myArray }} 오브젝트 {{ myObject }} {{ $data }} 위의 코드와 같이 안에 넣어준.. JavaScript/vue 2022. 8. 9.

• 

  문서 객체 모델 (DOM) 문서 객체 모델 - Document object Model의 약어로 DOM이라고도 함 - 웹 문서를 로드할 때, 브라우저는 구성 요소들을 객체화하여 트리 구조의 DOM 생성 - HTML DOM은 HTML 구성요소들을 획득, 변경, 추가, 삭제하기 위한 표준 - HTML 문서를 브라우저에서 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄 위의 HTML의 문서 객체 구조를 그림으로 표현하면 다음과 같이 트리 구조로 되어있다. 즉 그림을 거꾸로 뒤집으면 나무가 가지를 뻗은 모양과 비슷하다. 여기서 html 태그는 뿌리(root)를 의미한다. 이 뿌리로 부터 가지처럼 뻗어나가는 것을 노드라고 한다. DOM의 기능 1.HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 .. JavaScript/기본 2022. 6. 29.

• 

  객체 (최소, 최대 평균) 객체 안에 메소드로 값을 한번에 받아오기 시나리오 성적 리스트를 받아서 세가지를 처리한 다음에 결과를 리턴한다. 입력: 성적리스트를 받는다. --> 파라미터 처리: 세가지 함수를 차례로 호출한다. --> 리턴이 온다. 리턴: 받은 세가지 결과를 리턴한다. 순서: 최소값, 최대값, 평균값 최소값 최대값 평균값 객체 안에 메소드 JavaScript/기본 2022. 6. 29.

• 

  객체 (생성자) 위에서 document.write를 써주었기 때문에 밑에서는 document.write를 써주게 되면 마지막에 undefined가 뜸. undefined 뜨지 않게 하기 위해서는 document.write를 쓰지 말아야함./ JavaScript/기본 2022. 6. 24.

• 

  객체 객체 자바스크립트의 기본타입은 객체이다. 객체는 이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이라고 할 수 있다. 프로퍼티의 값으로는 함수가 올 수 있는데, 함수값이 들어 있는 프로퍼티를 메소드(method)라고 한다. 객체는 { }를 이용해 만들 수 있고 '키:값' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있다. 서랍장 안 파일은 프로퍼티, 파일 각각에 붙어 있는 이름표는 객체라고 생각하면 쉽다 생성 기본적으로 쓰이는 방법은 밑에와 같다 var 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ... }; 예제 var car = { //객체 선언 type:"Fiat", // 키:값 model:"500", color:"white" }; 생성 방법 1,2,3 //1 .. JavaScript/기본 2022. 6. 24.

• 

  자바스크립트 참고 사이트 https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info https://developer.mozilla.org/ko/docs/Web/JavaScript JavaScript | MDN JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 developer.mozilla.org https://www.w3schools.com/js/default.asp JavaScript Tutorial W3Schools offers free online tutori.. JavaScript/기본 2022. 6. 23.

• 

  따라하기 - 햄버거 메뉴 만들기 따라하기 See the Pen 햄버거 메뉴 만들기 by JIWON CHOI (@jiwonch) on CodePen. 참고 사이트 https://designer-ej.tistory.com/entry/Navbar-%ED%96%84%EB%B2%84%EA%B1%B0-%EB%A9%94%EB%89%B4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%981-Html-CSS-JS [Navbar] 햄버거 메뉴 애니메이션1 - Html, CSS, JS ⭐햄버거 메뉴 애니메이션 1 2nd bar는 투명하게 사라지고, 1st, 3rd bar가 회전하며 X표시. See the Pen ExNKxGR by Eunji Jeon (@emcjrl) on CodePen. body { display: flex.. web_dev 2022. 6. 1.

• 

  따라하기 - 배경 눈 내리는 효과 연습 See the Pen Snow by JIWON CHOI (@jiwonch) on CodePen. 참고 사이트 web_dev 2022. 6. 1.