JavaScript21

• 

  [라이브러리] Sortable - drag & drop (multiDrag) MultiDrag MultiDrag Plugin 이 플러그인을 통해 사용자는 다른 리스트에 있는 항목을 선택하고 다른 한 항목으로 끌 수 있다. 일단 배치되면, 아이템들은 원래 순서대로 펼쳐지지만, 새로운 위치에서는 배치해준 그대로 나란히 펼쳐진다. multidrag는 사용자가 정렬 가능한 목록 내에서 한 번에 여러 항목을 선택하고 여러 목록 또는 동일한 목록 내에서 하나의 항목으로 끌 수 있다. Mount the Plugin 멀티 드래그는 정렬 가능한 JS의 플러그인이며, 정렬 가능한 모든 빌드에 포함되지는 않는다. 기본 Sortable.js 파일에서는 즉시 사용할 수 있지만, 모듈식 빌드에서는 기본적으로 마운트되지 않는다. 모듈식 빌드에서 마운트 하려면 다음코드를 사용하여야 한다. import { S.. JavaScript/기본 2023. 3. 15.

• 나쁜 자바스크립트 작성 습관 https://blog.gogrow.dev/say-bye-bye-to-bad-javascript-practices-5971688ba80a Say bye bye to bad javascript practices When we take our first steps into the wonderful world of programming, we get to see for ourselves what it does for millions of people. It’s… blog.gogrow.dev https://yozm.wishket.com/magazine/detail/1836/ 나쁜 자바스크립트 작성 습관과 작별하기 | 요즘IT 멋진 프로그래밍의 세계로 첫걸음을 내디딜 때, 우리가 하는 일이 수백만 명의 사람들에게.. JavaScript/기본 2023. 2. 3.

• 

  🔥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.

• 

  count countUp / countDown See the Pen Untitled by JIWON CHOI (@jiwonch) on CodePen. JavaScript/vue 2022. 8. 9.

• 

  Vue instance 생성 뷰 인스턴스 생성 뷰 인스턴스 new Vue(); var vm = new Vue(); console.log(vm); new Vue({ el: , //인스턴스 들어가는 곳 template: , // 화면에 표시할 요소(HTML, CSS) data: , // 뷰의 반응성이 반영된 데이터 속성 methods: , // 화면의 동작과 이벤트 로직을 제어하는 메서드 created: , // 뷰의 라이프 사이클과 관련된 속성 watch: , // data에서 정의한 속성이 변화했을 떄 추가 동작을 수행할 수 있게 정의하는 속성 }); Jiwon's develop moment JavaScript/vue 2022. 8. 9.

• 

  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.

• 

  Vue.js Vue.js MVVM패턴의 뷰 모델 레이어에 해당하는 화면단 라이브러리 양방향 라이브러리 데이터 변화를 라이브러리에서 감지해서 화면에 그려줌 --> 반응형 지원 *MVVM - 모델, 뷰, 뷰모델로 이루어진 패펀 *MVC 모델, 뷰, 컨트롤러로 이루어진 패턴 *MVVM MVVM은 뷰모델을 지원하므로 뷰가 필요한 데이터와 커맨드 제공 컴포넌트(블럭 같은 것) 간의 통신이 Vue, Angular는 양방향, React는 단방향 - 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음 - Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공 - 다른 프레임워크와 비교했을 때 상대적으로 가볍고 빠름 - 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구.. JavaScript/vue 2022. 8. 9.

• 

  변수 - let, var / 상수 - const / 지역변수, 전역변수 / 호이스팅(hoisting) 변수 '이름이 붙은 저장소' or '데이터를 저장하는 장소' 변하는 데이터(값)을 저장할 수 있는 메모리 공간 var, let, contst *var의 변수 스코프는 function 단위 *const/let은 block 단위 {}, const는 상수, let은 변수 var / let 변수를 선언하는 키워드로 리터럴 값의 재할당이 가능함 const 상수를 선언하는 키워드로 선언과 동시에 리터럴 값을 할당해 줘야함 (const x = 2;) 리터럴 값의 재할당이 불가능하고, 재할당, 재선언이 모두 불가능함 * var, let, const 정리 변수 범위(Scope) 변수 선언 특징 함수 레벨 스코프 var · 변수를 중복해서 선언할 수 있다. · 함수 블록내에서 선언하면 지역 변수 블록 레벨 스코프 let .. JavaScript/스터디(책 200제 포함) 2022. 8. 6.

• 

  기본 - 형식, 규칙, prompt, alert, confirm (vscode 설치) 자바스크립트란? 웹페이지를 동적으로 제어하기 위해서 고안된 언어이다. "웹 페이지에 생동감을 불어넣기 위해" 전체가 사람이라면 HTML - 뼈대 CSS - 생김새 JS - 움직임 자바스크립트의 강점 1) HTML/CSS 완전한 통합가능 2) 간단하게 처리될 수 있는 일은 간단히 처리 3) 모든 대표적인 브라우저에서 지원되고, 기본 언어로 사용됨 자바스크립트 이후의 언어? - CoffeeScript : 짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드 작성 가능 - TypeScript : 개발을 단ㅅ눈화하고 복잡한 시스템을 지원하려는 목적 ' 자료형의 명시화'에 집중해 만든 언어(MS사 개발) - Flow : 자료형 강제(TypeScript와는 다른 방식, Facebook 개발) - Dart : 모바일 앱.. JavaScript/스터디(책 200제 포함) 2022. 8. 4.