본문 바로가기

전체 글

 (73)
[ES6 문법] 템플릿 문자열 (template string) Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 템플릿 문자열이란 - 문자열 안에 변수와 연산식을 혼합하여 사용하는 문자열 리터널 - 작은 따옴표('') 혹은 큰 따옴표("") 대신 백틱 (`) 을 사용해 문자열을 표현함 - 특수 기호 ${} 를 사용해서 변수 또는 식을 포함할 수 있음 템플릿 문자열과 기존 자바스크립트의 문자열 차이 기존 자바스크립트의 문자열 const string1 = "안녕하세요"; const string2 = "어서오세요"; const greeting = string1 + " " + string2;​ 템플릿 문자열 const string1 = "안녕하세요"; const string2 = "어서오세요"; const greeting = `${strin..
리액트 개발 환경 설치하기 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 설치 순서 노드 버전 매니저 (nvm) 로 노드제이에스 (node.js) 설치하기 yarn 과 create-react-app 설치 비주얼 스튜디오 코드와 플러그인 설치 노드 버전 매니저 (nvm) 으로 node.js 설치하기 node.js - 구글에서 공개한 소프트웨어 - V8 엔진을 기반으로 만든 자바스크립트 런타임 도구 > node.js 는 웹 브라우저가 아닌 컴퓨터 (또는 서버) 에서 자바스크립트를 실행할 수 있게 해줌 - npm 은 node.js 와 함께 설치가 된다 nvm - node.js 를 설치하거나 버전을 관리해주는 프로그램 NVM 설치하기 (window) window 1. 아래의 주소에서 nvm-setup...
React (리액트)에 대해서 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 리액트의 정체 프론트엔드의 프레임워크 중 하나 현재 주목받는 프레임워크 중 프레임워크 다운로드 현황 그래프에서 가장 우세한 프레임워크 페이스북을 개발할 때 사용한 기술이며, 공개 소프트웨어 가장 큰 특징은 "화면 출력에 특화된 프레임워크" 리액트의 장점 1. 컴포넌트로 화면 구성을 효율적으로 할 수 있음. 1. 컴포넌트 (component) 라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성 2. 컴포넌트를 구성하는 코드는 조립하기 쉬운 형태를 가지고 있기 때문에 원하는 화면을 쉽게 만들 수 있음 "컴포넌트를 만드는 과정은 레고 블록을 조립한다"라고 이해하면 쉬움 3. 가상 화면 기술을 도입하여 화면 출..
Sortable 컴포넌트 만들기 (drag and drop) 리액트 (React) 로 Sortable 컴포넌트 만들기입니다. 강의 보고 이해가 안가서, 복습할 겸 정리하는 글이다보니 정확도가 높지않을 수 있습니다. 그래도 구현은 했으니, 참고해주세요 https://www.npmjs.com/package/@imsmallgirl/sortable-list @imsmallgirl/sortable-list This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).. Latest version: 0.1.0, last published: 10 minutes ago. Start using @imsmallgirl/sortable-list in your proj..
[3] 자바스크립트로 투두리스트(todo-list) 만들기 + localStorage에 대해서 자바스크립트로 투두리스트 (todo-list) 만들기 3편입니다. 완성본과 HTML 과 CSS 는 1편에서 확인해주세요 1편 https://qowbtm45.tistory.com/44 2편 https://qowbtm45.tistory.com/46 기능 설명 (3편) 1. 새로고침해도 데이터가 저장될 수 있도록 하기 2.데이터마다 id, content, status 값 저장하기 local Storage (로컬 스토리지)에 대해서 - 데이터를 사용자 로컬에 보존하는 방식 - 데이터를 저장, 덮어쓰기, 삭제 등 CRUD (Create, Read, Update, Delete를 앞글자를 따서 만든 단어)가 가능 - 자바스크립트로 조작하며, 모바일에서 사용이 가능함 local Storage (로컬 스토리지) 와 쿠키..
[2] 자바스크립트로 투두리스트(todo-list) 만들기 자바스크립트로 투두리스트 (todo-list) 만들기 2편입니다. 완성본과 HTML 과 CSS 는 1편에서 확인해주세요 1편 https://qowbtm45.tistory.com/44 기능 설명 (2편) 1. router 기능 구현 2.카테고리 클릭 시 카테고리에 맞는 주소로 이동하게 하기 라우팅 (routing)에 대해서 - 출발지에서 목적지까지의 경로를 결정하는 기능 - 일반적으로 사용자가 요청한 URL 또는 이벤트를 해석 => 새로운 페이지로 전환하기 위해 데이터를 서버에 요청하고 페이지를 전환하는 일련의 행위 - 애플리케이션의 라우팅 경우에는 사용자가 task 를 수행하기 위해 어떤 화면 (view) 에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미함 브라우저가 화면을 전환..
[1] 자바스크립트로 투두리스트(todo-list) 만들기 자바스크립트로 투두리스트 (todo-list) 만들기 1탄입니다. 강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 어떻게 기능을 구현했는지를 보시는게 좋을 것 같습니다. (개발환경이 다를 것 같기에) 완성본 기능 설명 (1탄) 1. 할일 추가 2. 할일 수정 3. 할일 지우기 4. 할일 카테고리별로 필터링 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 * 모듈 번들러는 rollup 을 사용했습니다. 커스텀 설정은 제 github 에 있습니다. 기초 작업 스크립트는 ES6 클래스 문법을 사용했습니다. ( 저도 아직 ES6 문법에 익숙치 않아서 기능 구현에 중점을 맞춰서..
자바스크립트로 그림판 만들기 (+ 다운로드 기능) 강의를 보고 난 후 혼자 정리하는 느낌이라.. 조금 조잡하고 설명이 정확하지 않을 수 있습니다 HTML,CSS는 강의자료로 받았고, 기능만 구현했습니다. 완성본 기능 설명 1. 그림 그리는 기능 붓 크기 조절 가능 color-picker 기능 2. 지우개 3. 네비게이터 4. 되돌아가기 5. 휴지통 기능 (초기화 기능) 6. 그린 그림 다운로드 HTML 과 CSS 강의 자료이기때문에, 참고용으로 보시라고 캡쳐본으로 올립니다 기초 작업 스크립트는 ES6 클래스 문법을 사용했습니다. ( 저도 아직 ES6 문법에 익숙치 않아서 기능 구현에 중점을 맞춰서 설명합니다 ) 사용할 엘리먼트 변수 지정 MODE = "NONE"; // 클릭한 메뉴를 알아내기위한 변수 IsMouseDown = false; // 마우스를..

티스토리툴바