목록전체 글 (66)
우당탕탕 개발일지
JavaScript를 사용하여 HTML로 구성한 UI를 제어할 때 DOM을 변형시키려면, 브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해야한다. To-Do List 만들기 2차 3. Loading() 함수 만들기 3-3. innerHTML활용해서 html 삽입하기 ( 앞서 To-Do List 만들기 1차에서는 제이쿼리를 사용해서 html 코드를 삽입하였다. ) 1차 시도 getElementById() 메서드를 사용하여 id가 "htmlList"인 uj0791.tistory.com 'To-Do List 만들기'를 보면 getElementById() 메서드를 사용하여 HTML 요소에 접근한다. 이벤트 발생 시, innerHTML로 ..
Styled Components CSS-IN-JS의 대표적인 라이브러리 중 하나로, CSS와 같이 class, id, tag name을 가져와 쓰지 않고 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯이 사용하는 라이브러리이다. 즉, 리액트에서 UI단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하다. // for npm $ npm i styled-components 웹 이용자가 늘어나면서 디자인에 대한 요구가 커졌고, HTML을 꾸며주는 언어인 CSS가 등장했다. 하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식이 나타났다. CSS - IN - JS는 단어 그대로 자바스크립트 코드에..
metadata 작성 및 관리 모든 dependencies 일괄 설치 또는 업데이트 dependencies 추가, 업데이트, 삭제 스크립트 실행 패키지 퍼블리쉬 보안 검사 모든 패키지 매니저는 모든 중요한 메타 정보를 package.json에 저장하고, 각자 다른 형태의 lock 파일이 존재한다. lock 파일이란 매 설치시 결정적이고 예측가능한 특성을 보장하기 위하여, 각 버전의 정확한 의존성 버전을 저장하고 있는 파일이다. lock 파일이 없다면 매 설치마다 설치하는 버전이 달라질 수 있다. npm : node package management $npm install 또는 $npm i 명령어를 실행하면, package-lock.json이 생성되고 node_modul..
4. Delete() 함수 만들기 할 일을 삭제하는 'x' 버튼을 눌렀을 때 동작하는 함수이다. 4-1. index 가져오기 버튼을 클릭하였을 경우, 해당하는 todo의 number을 매개변수 index로 받는다. 4-2. ToDo 삭제하기 : filter 활용 filter 함수는 배열을 순회하며 조건에 맞는 원소들로 구성된 새로운 배열을 반환한다. 기존 ToDos의 배열을 모두 순회하며 index와 다른 number로 구성된 todo들을 배열에 저장한 뒤 ToDos에 저장한다. 4-3. View 재설정 ToDos가 재구성 되었으므로 Loading 함수를 호출한다. function Delete (index) { //1. index 가져오기 //2. ToDo 삭제하기 ToDos = ToDos.filter(..
고대의 웹 개발 방법 - HTML, CSS, JS를 각각 짜고 서버에 올림 현대의 웹 개발 방법 - 사람들이 JS 라이브러리를 쉽게 설치해주는 npm을 사용 JS 라이브러리를 모아놓은 플랫폼 npm 사용할 거면 bundle tools도 이용해야 함 ⇒ npm + bundle tools 문제1. node_modules 폴더 용량 매우 큼 문제2. import/require 문법은 브라우저 친화적이지 않음 의존하고 있는 라이브러리 파일( EX. JS )을 하나로 합쳐주는 작업 다 합치는 게 아닌 필요로 하는 것만 가져와서 용량 절약 ex ) Webpack, Rollup, Parcel 1세대 번들팩 : webpacks 콜드 - 스타트* 방식으로 개발 서버를 구동할..
3. Loading() 함수 만들기 3-3. innerHTML활용해서 html 삽입하기 ( 앞서 To-Do List 만들기 1차에서는 제이쿼리를 사용해서 html 코드를 삽입하였다. ) 1차 시도 getElementById() 메서드를 사용하여 id가 "htmlList"인 HTML 요소에 접근한다. 반환 값을 element 변수에 넣어준 뒤, innerHTML을 호출하여 element 뒤에 프로퍼티의 값을 넣어주려 했지만 오류가 발생했다. element에 값을 추가해주는 것이 아닌 값을 대입해서 발생한 문제였다. 즉, ToDos의 배열을 순회하면서 element의 값을 4번씩 초기화 해 준 것이었다. const element = document.getElementById('#htmlList'); ToDo..
[개념 참고 https://uj0791.tistory.com/5 ] To-Do List - JS 문법 ● 배열 : 데이터를 쉼표로 구분해서 대괄호로 묶어 나열해놓은 것 var seasons = ["봄", "여름", "가을", "겨울"]; ● 객체 : 값들을 그룹으로 묶은 데이터 모음 키(Key)와 값(Value) 을 한 쌍으로 정의하며 uj0791.tistory.com 1. to-do list 객체 배열 만들기 할 일 목록(ToDos) 을 배열로 구현하되, 체크 버튼이나 삭제 버튼을 눌렀을 때 키를 통해 처리하고자 할 일(newToDo) 자체는 객체로 구현하였다. 객체는 키(Key)와 값(Value)으로 값들을 묶는다. 할 일 객체는 number, content, check 키들로 구성되어 있다. num..
배열 : 데이터를 쉼표로 구분해서 대괄호로 묶어 나열해놓은 것 var seasons = ["봄", "여름", "가을", "겨울"]; 객체 : 값들을 그룹으로 묶은 데이터 모음 키(Key)와 값(Value) 을 한 쌍으로 정의하며 이를 속성(Proeprties) 라 부른다. 객체의 속성 값을 가져올 때는 객체 이름 뒤에 마침표(.)를 찍고 그 뒤에 속성 이름을 적는다. var kim = { firstName: "John", lastName: "Kim", age : 35, address: "Seoul" } 웹 문서에 있는 요소를 프로그램에서 사용하려면 객체 형태여야 한다. 예를 들어, 웹 문서에 3개의 이미지를 포함시켜야 한다면 Image 객체를 사용해서 똑같은 틀의 객체 3개를 찍어낸 다음 객체마다 원하는..