JS
프로그래머스 바닐라 JS 스터디 - 2주차
프로그래머스 바닐라 JS 스터디 - 2주차
2021.06.09시작 js코드를 작성하면서 기존에 알고있던대로 작성하다 굉장히 삽질을 많이했다. ❗️❗️ 그래서 구글링과 다른 사람들의 코드를 참조하며 과제를 수행했다. 📌 Component 단위로 작성하는 과정은 데이터의 갱신과 같은 Component간의 독립적이지만서도 연관되어 있는 부분이 존재한다면 이를 처리하기가 여간 번거로운것이 아니다. 여기서 오는 과정과 해결방법들에 대해 나는 어떻게 해결했는지, 다른 사람들의 코드는 어떤지 한번 살펴볼것이다. ✔️ 삽질1 삽질의 시작은 Component에서 데이터갱신에 대한 처리방법이다. todolist 데이터를 갱신처리하는 부분에서 newData를 handleSubmit안에 두고 값을 갱신했다. 이것은 나중에 한파일에 있었던 input Component를 분리하게 되면서 ..
프로그래머스 바닐라 JS 스터디 - 1주차
프로그래머스 바닐라 JS 스터디 - 1주차
2021.05.30시작 프로그래머스에서 참여형 유료 스터디로 바닐라 자바스크립트를 수강하게 되어 공부하며 미흡했던 내용을 정리하고자 합니다. Map vs Reduce Map의 경우에 Array.map((요소, 인덱스, 배열) => { return 요소 }); 실행하는 배열과 결과로 나오는 배열이 서로 다른 객체가 됩니다. 즉, 배열을 1대1로 매핑하게 되기 때문에 기존 객체를 수정하지 않는 메소드라고 정리할 수 있습니다. Reduce의 경우에는 Array.reduce((누적값, 현재값, 인덱스) => {return 결과값}, 초기값) 의 구조로 사용할 수 있습니다. 일반적으로 Reduce는 누적값을 구하는데 사용할 수 있지만, 데이터를 조회하며 리듀스 함수(콜백함수)를 실행합니다. 이를 통해 배열 형태에서 원하는 형태로 ..
express, babel 설치
express, babel 설치
2021.05.25npm i express npm은 패키지 관리 도구입니다. 프로젝트에서 요구하는 서버를 구현하기 위해서는 express 를 설치해 줍니다. express 설치 후, node_modules에서 express > lib 에서 package.json을 확인할 수 있습니다. dependencies 등등 확인해볼 수 있습니다. express의 package.json 파일의 scripts 부분 입니다. 보고 있는 이유는 scripts에는 어떤것이 정의되었는지 확인해보고자 했습니다. 또, dependencies 입니다. 이 express를 실행하려면 반드시 설치해줘야 하는 의존성 패키지들 이라고 생각하시면 좋을 것 같습니다. npm i 시에 package.json의 express의 버전을 package-lock.js..
Youtube 클론
Youtube 클론
2021.05.25니콜라 선생님의 Youtube 클론 강의를 시작합니다. node.js 사용법을 익히는데 목적이 있습니다. ㅎㅎ ! 시작부터 code 명령어가 안먹어서 vscode를 직접 띄워 줬습니다. vscode를 띄운 다음에, github으로 이동해서 코드 형상관리 레포지토리를 하나 생성하였습니다. 생성한 레포지토리와 연동하였습니다. git remote 명령어 참고 프로젝트가 비어있기 때문에 package.json을 만들어 프로젝트에 대한 기본 정보를 입력하였습니다. 실제 정보 기입을 다 한뒤에 package.json을 보면 그대로 들어가 있는것을 확인해볼 수 있습니다. index.js에 "Hello" 를 찍어두고 실제 terminal에서 찍히는지 확인해보았습니다. package.json에 scripts 를 추가해서..
JS06 :: 바닐라 JS 프로젝트(2)
JS06 :: 바닐라 JS 프로젝트(2)
2021.05.22이전 바닐라 JS 프로젝트에서 배경화면을 변경하여 나만의 앱을 생성해보겠습니다. 정적인 화면을 구성하는 index.html 에서 배경화면 처리를 위한 script를 등록하겠습니다. index.html에서 weather.js 를 등록해줍니다. index.html bg.js image는 총 3장을 준비하였습니다. 오리 3총사 image 객체를 생성하고 나면 css의 선택자 class를 포함시키고, body 태그에 해당 tag 를 prepend 하게 됩니다. body 안에 image 가 잡히게 됩니다. (css에서 z-index = -1 로 잡았기 때문에 현재 맨 뒤로 가있는 상태입니다.) 이 다음 코드인 weather.js 구현해야 하는데 현재 위치 좌표를 받아오지 못하고 있다. mac에서 위치 좌표를 설정..
JS06 :: 바닐라 JS 프로젝트
JS06 :: 바닐라 JS 프로젝트
2021.05.21바닐라 JS 공부를 시작하면서, 노마드 코더에서 제공하는 바닐라 JS로 크롬웹 만들기를 트라이 해보았습니다. Directory 구조 우선 가장 베이직이 되는 index.html 부터 살펴보겠습니다. html의 구조는 head, body 로 이루어져 있습니다. stylesheet에 포함되어 있는 index.css 로부터 css 값을 읽어와 html이 web의 DOM에 업데이트 하게 됩니다. index.html 보통의 경우에 아래와 같이 많이 사용하게 됩니다. HTML Foramt 여기서 div tag를 이용해 웹 상에 움직이는 시계를 트라이 해보겠습니다. 첫번째 구현 항목은 web으로 동작하는 시계를 만들어보는 것입니다. Redering 화면 ⏤ 1 위 렌더링 화면을 구성하기 위해서 아래 html, js를..
node.js restful api 서버 만들기 (with bigQuery)
node.js restful api 서버 만들기 (with bigQuery)
2020.08.25GET : 서버 자원 가져오기 POST : 서버 자원 등록하기 PUT : 서버 자원 치환 (업데이트 같은...) PATCH : 서버 자원 일부 치환 DELETE : 서버 자원 삭제 ㅡ. Express 서버 $ sudo npm i express-generator -g express PROJECT_NAME --view=pug cd PROJECT_NAME 후 npm i 로 모듈 설치를 진행합니다. 모듈 설치가 완료되면 ㅡ. app.js app.js 에서 app.use('/users', usersRouter) 부분이 localhost:3000/users 로 접속하면 usersRouter 의 페이지를 띄워주게 됩니다. users.js 코드를 아래와 같이 구성한다면 var express = require('expr..
JS04 :: webpack
JS04 :: webpack
2020.08.25Vue.js 와 같이 애플리케이션을 CLI로 사용하여 프로젝트 생성하면 자연스럽게 설치되는 모듈 번들러 입니다. ㅡ. 모듈 번들러란? 여러개의 파일을 하나의 파일로 묶어주는 라이브러리를 말합니다. 종속성을 파악해서 서로 엮어 있는 파일을 하나의 파일로 묶어주는 역할을 수행합니다. ㅡ. webpack을 사용하는 이유 1. 네트워크 병목현상 해결 2. 모듈 단위로 개발 가능 3. es6 버전 이상의 스크립트를 사용할 수 있습니다. ㅡ. 오래된 브라우저에서도 es6버전 이상의 자바스크립트 문법 사용이 가능해집니다. ㅡ. webpack 컨셉 1. Entry ㅡ. 종속성 그래프의 시작점을 의미합니다. 2. Output ㅡ. 번들을 저장할 위치를 지정할 수 있습니다. 3. Loader ㅡ. webpack이 이해할 ..
JS03 :: node.js 버전 관리
JS03 :: node.js 버전 관리
2020.08.25n 은 Node.js 버전을 관리해주는 플러그인입니다. $node -v 우선적으로 node 버전을 확인합니다. $ sudo npm install -g n n모듈을 설치합니다. node버전에 따라서 다음 3가지로 분류합니다. 1. 최신버전, 2. 안정버전, 3.LTS버전 1. 최신버전 $ n latest 2. 안정버전 $ n stable 3. LTS버전 $ n lts
JS02 :: hash map
JS02 :: hash map
2020.07.29ㅡ. Map 1 2 3 4 5 let newMap = new Map() //Map Object 생성 let key = 'key' newMap.set(key,'hi key') newMap.size //size newMap.get(key) //return key cs javascript에는 HashMap 이 따로 없으므로 Map을 이용해서 Hash map을 구현할 수 있습니다. 1 2 3 for(let key of newMap.keys()){ console.log(key) } cs 순회할때는 위와같이 쓰면 됩니다. *reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map
JS01 :: Javascript es6 환경에서 함수 module 하기
JS01 :: Javascript es6 환경에서 함수 module 하기
2019.06.01l.빠르게 시작하기 test1.js function testFunction(){ ... } let testVariable; module.export = { testFunction, testVariable } test2.js let testFunction = require('./test1.js').testFunction; let testVariable = require('./test1.js').testVariable; ll.모듈 Javascript에서 export 문은 함수, 변수를 다른 .js로 내보낼때 사용하게 됩니다. lll.설명 MDN 에서 나와있는 방법이 정석입니다. ES Module은 ECMAScript 의 표준입니다. 예전에는 CommonJS 을 사용했습니다. 현재 브라우저에서 가장 큰 특징중..