profile
백엔드와 프론트엔드를 사랑하는 현 마크업개발자(퍼블리셔)입니다 :) 자바스크립트, React, Python을 공부하고 있습니다.
post-thumbnail

[리액트(React) 스터디] - npm과 npx, 컴포넌트 제작(props), state, 이벤트(bind, setState)

npm(Node Package Manager)node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해 관리하고 배포한다.python - pip 같은 친구!nodejsnode.js 사이트에서 node.js installer를 다운로드 한다.window라면 git

2020년 4월 28일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - weather.js(API이용해서 현재 위치, 날씨 구하기)

👉 html 코드👉 js 코드// coord : 좌표const API_KEY = "449e1de2026658b7c7a2066d20fb0fce";const COORDS = "coords";function saveCoords(coordsObj){ localStor

2020년 4월 27일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - bg.js(배경 랜덤으로 설정하기)

👉 html 코드👉 js 코드👉 내가 코드를 작성한 순서1\. 사용 할 객체를 변수로 선언한다.2\. init 함수를 만든다.작동함수들을 만든다.✍ genRandom()Math.random() : 임의의 수 발생Math.random() \* n : 0 ~ n 사이

2020년 4월 27일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - toDo.js(투두리스트 받기)

👉 html 코드👉 js 코드👉 내가 코드를 작성한 순서사용 할 객체를 변수로 선언한다.init 함수를 만든다.작동함수들을 만든다.사용자가 input창에 아직 아무것도 입력하지 않았다면! "js-toDoForm"이 보여진다.✍ loadToDos()localStor

2020년 4월 27일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - greeting.js(사용자 이름 받기)

👉 html 코드👉 js 코드👉 내가 코드를 작성한 순서사용 할 객체를 변수로 선언한다.init 함수를 만든다.작동함수들을 만든다.✍ loadName()study by. MDN읽기 전용 localStorage속성은 사용자 로컬의 Storage객체에 접근하게 해줍니

2020년 4월 27일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - 바닐라JS로 크롬 앱 만들기(momentum clone) - clock.js(시계 만들기)

👉 html 코드👉 js 코드👉 내가 코드를 작성한 순서사용 할 객체를 변수로 선언한다.init 함수를 만든다.작동함수들을 만든다~👉 setInterval 사용하는 방법👉 setInterval 사용했던 이유시계를 만들었다. 웁스! 여기서 문제가 발생했는데, 시

2020년 4월 22일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - classList

Element.classList : 읽기 전용 프로퍼티!공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.classList.add(String) : 지정한 클래스 값을 추가. 만약 추가하려

2020년 4월 17일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - DOM(Document Object Model) Function, Event, Event Handler(=Event Listener), If/Else, And/Or

DOM(Document Object Model)한 페이지에서 자바스크립트로 선택한 건 모두 객체이다.문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스.1\. html이나 body와 같은 htm

2020년 4월 17일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]Review - 자바스크립트 정의, Variable(변수), Array(배열) & Object(객체), function(함수), 템플릿 리터럴(Template literal)

프론트엔드 개발의 핵심! only one 프로그래밍 언어.전 세계 브라우저에서 쓰이고 웹, 앱 등등 활용할 수 있는 범위가 넓음ES5, ES6.. 등등의 업데이트 버전이 많지만 일단 신경쓰지 말고 바닐라 자바스크립트 스터디에 우선 집중할 것!Create : 생성Init

2020년 4월 16일
·
0개의 댓글
post-thumbnail

[리액트(React) 스터디]'props'로 컴포넌트에게 값 전달하기

props는 properties의 줄임말이다.어떠한 값을 컴포넌트에게 전달할 때 사용한다.App.js

2020년 4월 14일
·
0개의 댓글
post-thumbnail

[리액트(React) 스터디]JSX(JavaScript XML)에 대해 알아보자!

JSX(Javascript XML)는 문자열도, HTML도 아닌 실제로는 JavaScript를 확장한 문법이다.React “엘리먼트(element)” 를 생성한다. React-JSX 소개리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 babel이 JSX를 Java

2020년 4월 14일
·
0개의 댓글
post-thumbnail

[리액트(React) 스터디]리액트 컴포넌트

React설치를 완료하고, 이제 React 컴포넌트를 만들어보자.'src'디렉토리에 'Hello.js'라는 파일을 만들어보자.Hello.js파이썬 문법이랑 매우 비슷하다. import.. from ...갑자기 '마이레시피'프로젝트가 떠오르네..App.js컴포넌트는 일종

2020년 4월 14일
·
0개의 댓글
post-thumbnail

[리액트(React) 스터디]React를 사용해보자! React 설치방법

Node.js: Webpack과 Babel같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져있다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js를 설치해야 한다.Node.js 설치Yarn: Yarn은 조금 개선된 버전의 npm(node pack

2020년 4월 14일
·
0개의 댓글
post-thumbnail

[리액트(React) 스터디]'React'에 대해 알아보자! - react를 처음 경험하는 나의 react는..?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리ㄴ 공식홈페이지에서는 React를 이렇게 정의하였다."인터페이스(영어: interface, 문화어: 대면부, 결합부) 또는 접속기는 사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 일시적 혹은 영속적인

2020년 4월 7일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]자바스크립트 맛을 보다.

벨로퍼트와 함께하는 모던 자바스크립트 - 패스트캠퍼스 온라인강의를 마쳤따..제이쿼리의 늪에서 벗어나 이제는 꼭 자바스크립트를 잘 활용해야지 했던 굳은 의지로 시작했다.스파르타코딩클럽에서 파이썬을 조금 배웠던지라 자바스크립트의 문법들 중 익숙한 것들도 있어 반가웠다.새로

2020년 4월 1일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]프로토타입과 클래스

객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해줍니다.유의해야 할 점 !1\. 객체 생성자를 사용 할 때는 보통 함수의 이름을 대문자로 시작하고, 2. 새로운 객체를 만들 때에는 new 키워드를 앞에 붙여주어

2020년 3월 26일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]배열 내장함수

배열 내장함수 : 배열을 다룰 때 유용한 내장 함수우선 for문을 사용하면for (let i = 0; i < superHeroes.length; i++){ console.log(superHeroesi);}superHeroes.forEach(hero => { c

2020년 3월 25일
·
2개의 댓글
post-thumbnail

[자바스크립트 스터디]반복문, 반복문과 배열, while, for ~ of, for ~ in, continue&break, 연습문제

for문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다.for(let i = 0; i < names.length; i++){ console.log(namesi); // 찍히는 값 = 멍멍이 야옹

2020년 3월 25일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]배열, 배열에 새로운 항목 추가하기

배열은 여러 개의 항목들이 들어있는 리스트와 같습니다.배열을 선언하고 나서, n번째 항목을 조회하고 싶을 땐 => objectsn;찍히는 값 = push (배열 내장함수)

2020년 3월 25일
·
0개의 댓글
post-thumbnail

[자바스크립트 스터디]객체(비구조화 할당, 객체 안에 함수 넣기, Getter&Setter함수)

더 알아보기 - 생활코딩// 2// 객체 - 비구조화 할당(객체 내부에서 밖으로 빼와서 선언)// function print(hero) {// const { alias, name, actor } = hero;// const text = ${alias}(${nam

2020년 3월 19일
·
0개의 댓글