일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Vue.js
- HOC
- MySQL
- express
- 자료구조
- App.vue
- JavaScript
- ES6
- mapGetters
- react
- event
- sass
- scss
- 자바스크립트
- 댓글달기
- 리액트
- vuex
- nodejs
- input
- State
- Vue
- TypeScript
- CSS
- webpack
- jsx
- v-html
- Wecode
- storybook
- Vue transition
- 쉬운설명
- Today
- Total
목록분류 전체보기 (238)
익명의 개발노트
NPM이란 무엇인가?? Node Package Manager 라고 부른다. 한마디로 node 로 개발에 필요한 모든 것을 NPM이라는 창고에서 보관을 하고 있다. 사용자는 개발에 필요한 부분들을 창고에서 꺼내서 내 컴에 설치해서 쓰는 식이다. 예를 들면, 서버를 만들어야한다. 좀 더 쉽게 만들고 싶다면 Express를 가져다 쓰면 되고. 추가적인 메소드같은 것을 쓰고 싶으면 underscore를 가져다 쓰면된다. 별거 없다. 조낸 큰 생태계라고 보면 좋을 듯.
1. express : npm 모듈중에 하나이며, Node Js 에서 서버 프로그래밍에 필요한 기능을 훨씬더 편하게 해주는 기능이 있다. 1) 일반적인 nodeJS 에서 서버 여는 방법. const http = require('http'); const hostName = '127.0.0.1';const port = 80; http.createServer((req, res) => { res.writeHead(200,{'Content-Type' : 'text/plain'}); res.end('Welcome');}).listen(port, hostName,()=>{ console.log(`Server running at http://${hostName}:${port}/`);}); 2) Express에서 서버를..
Node JS란 무엇인가? 자바스크립트로 만들어진 노드 JS는 크롬 V8 엔진으로 빌드 된 자바스크립트 런타임이다. 기본적으로 웹 브라우져에서 자바스크립트를 많이 썼지만, 노드 JS를 통해서 서버쪽에서도 자바스크립트로 프로그래밍이 가능해졌다. 그동안 웹에서만 실행가능했던 자바스크립트가 서버에서도 실행가는 하게 된 것. 서버를 알기 위해서는 먼저 인터넷의 동작방법에 대해 알 필요가 있다. 클라이언트 -----> 인터넷 -------> 서버 1) 기본적인 원리 => 클라이언트(사용자 , 갑)이 인터넷에 어떤 자료를 요청하면, 서버(주다, 을)는 원하는 정보를 찾아서 제공해준다. 2) 특징 인터넷은 지구라고 비유하면, 각각의 주소들은 나라, 집이 될 것이다. 주소는 HTTP를 이용해서 찾아갈 수가 있다. HT..
Complexity (=복잡도) Time complexity와 Space complexity가 있다. 복잡도를 설명하기위해서 Big-O notation을 이용한다. Big-O notation : Complexity를 설명하는 도구, 근사치를 가지고 이야기를 하기때문에 표기법 O(n) 이런식으로 표기된다. 1. Time Complexity. : 문제를 해결하는데 걸리는 시간과 입력의 함수 관계를 나타냄.(알고리즘에 사용되는 연산 횟수의 총량) 1) O(1) : 언제사용 ? array lookup, hash table insert, 하나의 키에 접근하는 방식. 2) O(logn) : 언제사용 ? binary search 할 때 3) O(n) : 언제사용? 배열을 포문에 한번 돌릴때. 4) O(nlogn) :..
리액트 JS는 프레임워크가 아닌 자바스크립트 라이브러리이다. 하는 일 : 유저인터페이스를 위해서 사용하는 라이브러리임. 나온 배경 : 기존 js, html, css를 활용해서 구성해도 되지만, 웹 자체가 페이지가 아닌 웹 어플리케이션으로 발전함에 따라서 많은 컴포넌트들을 관리해야하는데, 그런 부분들을 react에서 가상 DOM을 사용하여, 사용자로 하여금, 개발에 집중할 수 있게 해준 라이브러리이다. 일일이 DOM을 만져서 변경하기엔 해야할 일이 너무 많다. 설치는 https://github.com/facebook/create-react-app 페이스북 리액트 깃헙 참고. npx create-react-app my-app cd my-app npm start //yarn을 설치한 사람은 yarn start..
메모이즈라고도 불리운다. 기본 컨셉 : 한번불렸던거는 메모리에 저장해놓자. 재귀처럼 반복되는 결과를 메모리에 저장에서 다음에 사용시 같은 결과 나올때 결과가 빨리나오게 하는 기법.
숫자의 합계구하기. var output = sumDigits(1148);console.log(output); // --> 14 var output = sumDigits(-316);console.log(output); // --> 4 앞이 양수이거나, 음수일때 숫자의 합 구하기. 양수인 경우 그냥 다 더하면 된다. 음수의 경우, 양의 숫자가 어디서 시작하는지 확인해야한다, 1. 숫자인덱스[2]부터 양수다. 2. 숫자를 문자열로 변환한다. 3. 음수일때의 값을 미리 sum에다가 만들어 저장한다.. 4. 저장된 sum에다가 나머지수를 더해준다. 5. 최종값 리턴한다. var sum =0; var positiveNumStartIndex =0; var numToString = 숫자값.toString(); if(숫자값
알고리즘 객체에서 배열전환하기. { name: 'Holly', age: 35, role: 'producer'} 이런 객체의 값을 [['name', 'Holly'], ['age', 35], ['role', 'producer']] 이렇게 배열로 변경하기. 1. 객체의 key값을 배열 인덱스의 0번째에 넣어야함.2. 객체의 값을 인덱스의 1번째에 넣어야함. 마지막 값을 넣을 배열을 하나 만들어주자. var newArray =[]; 각 배열의 키,값을 순서대로 먼저 작은 배열에 넣어보자. for(var key in obj){ var smallArr =[]; smallArr.push(key); smallArr.push(obj[key]); //최종 배열안에 작은 배열을 넣자. newArray.push(smallAr..
JSON.stringify(obj)의 특징을 MDN에서 한번보자. 특징은 obj값을 문자열로 바꿔준다. 그럼 어떻게 바꿔주냐?! 1. 값이 객체나 배열이 아닌경우 1) obj가 number 인지, boolean 인지, null인지, string인지 확인해서 문자열로 바꾼다. 2. 값이 배열인 경우 1) 배열이 존재하지 않으면 빈배열을 반환한다(문자열된 빈배열) 2) 배열일 경우 배열안에 값이 number인지, string인지, 배열인지, 다른 값인지 확인해서 새로운 배열에 넣어준다. 3) 배열도 문자열로 바꿔줘야한다. "["+arr+"]"; 이런식 3. 값이 객체인경우 1) 객체의 속성이 존재하지 않으면 빈 객체를 반환(문자열된 빈객체) 2) 객체의 값이 string 인지, number인지, boolea..
getElementsByClassName의 원리 간단하다. MDN에서 기본 개념을 한번 보고 정리를 해보자. 결론은 클래스 이름을 가져온다. 그러면 어디서 가져올까? HTML이니깐 DOM에서 가져오겠지. document의 자식노드인 body를 찾으면 되고, body의 하위태그인 classList, childNodes를 찾으면된다. 정리하면, 1) body안에 있는 요소들 중에 className이 있는지 확인.2) 있다면 classList에 클래스 네임과 일치하는지 확인. 일치하면 새로운 배열에 담는다.3) 일치하는 배열중에 childNodes 존재하는지 확인 후 classList에 이름있는지 확인한다.4) 있으면 새로운 배열에 담는다.5) 배열을 반환한다. 기본 로직은 이렇다.