BLOG/JavaScript (16) 썸네일형 리스트형 [React] 안녕, 리액트! 반가워 :) 제이쿼리처럼 대부분의 회사들이 사용한다는 리액트...프론트 언어는 초창기 막 나온 vue만 접해봐서 리액트의 시장을 잘 모르기도 했고 꼭 해야하나? 라는 생각을 했었다. 하지만 대부분의 회사들은 리액트를 많이 사용하더라..... (구인 공고 보면 기본 리액트..) 그래서 올 해는 리액트 마스터로 거듭나기 위해서! 접해보기로 했다. 가볍게 웹사이트 codesandbox.io/ 에서 리액트를 접해보았다. (리액트라 쓰고 사이트홍보 같은 느낌..) 사이트를 들어오면 첫 화면이 이렇게 나온다. 어쩌다 알게 된 사이트인데 프론트 언어 테스트 하기 좋은 사이트 같다. 나중에 앵귤러 공부할 때 사용해봐야지.. 나는 리액트를 사용하려고 하기 때문에 첫번째 리액트를 클릭하며 된다. 클릭 하고 나면 기본적으로 셋팅이 된다.. [node.js] 설치하기 구글에 node js 칩니다. 첫 번째 검색결과를 클릭하면 됩니다. 귀찮으신 분들은 아래 링크를 통해서 들어가면 됩니다 :) nodejs.org/ko/ 그럼 이렇게 다운로드 페이지가 나오는데, 최신버전 보다는 안정성이 있는 버전으로 받아주세요! 계속 누릅니다. 계속 누릅니다. 동의 클릭 위치 변경 필요없으면 설치를 누르시고, 위치 변경이 필요하다면 설치 위치를 클릭해 위치 설정을 하시면 됩니다. 설치중.... 설치가 완료되었습니다. 닫기를 눌러주세요 :) 이제 설치가 정상적으로 되었는지 확인하시려면 터미널을 열어주세요! 터미널에 node -v를 입력하면 버전이 나오는데 만약 나오지 않으면 정삭적으로 설치가 되지 않으신거니 다시 한번 더 설치하시면 될 것 같습니다. 즐코되세용 ;) [node.js] some some는 최소 1가지라도 조건이 맞으면 true를 반환한다. 'use strict' const arr = [ 1, 2, 3, 0, -1, -2 ] const res = arr.some( key => key < 0 ) // 최소 1개라도 0보다 작다면 true console.log(res) // true 반환 위 예제를 보면 arr배열에는 음수가 포함되어있다. some은 0보다 작은 아이가 1개라도 있는지 확인 후 있다면 true를 반환한다. [node.js] Set 과 has set은 중복되지 않은 자료구조이다. 'use strict' const test = new Set() // set은 중복되지 않은 자료구조 test.add(1) test.add(2) test.add(1) test.add(3) test.add(2) console.log(test) for(const item of test) { console.log(item) } const ret = test.has(3) // boolen타입으로 반환 has는 속해 있는지 없는지 찾는 것 const ret2 = test.has(0) console.log(ret) console.log(ret2) add를 사용해 set 배열에 1,2,1,3,2 값을 넣는다. 그럼 set 배열에는 { 1, 2, 3 } 이라는 값이 생긴다. -> .. [node.js] 오브젝트 병합 assign vs spread 오브젝트 병합하는 방법으로는 2가지가 있다. 1. assign 2. spread es6이후에는 spread를 많이 사용한다. 두가지 차이를 확인해보자. 첫 번째 assign 사용했을 때, // assign 연산자 const obj = { title: "111 assign 연산자 title" } const newObj = { name: "222 assign 연산자 name" } const assign = Object.assign({}, obj, newObj) // (객체배열로 {}, 합칠 오브젝트1, 오브젝트 2) console.log( assign ) 이렇게 한 후 콘솔을 보면 { title: '111 assign 연산자 title', name: '222 assign 연산자 name' } 라고 출력이 나.. [node.js] nodemon node로 작업하다보면 결과값이 어떻게 나오는지 확인할 때, node .\test.js 이런식으로 터미널에 쳐서 확인을 한다. 작업할 때마다 매번 저렇게 확인하는 것도 귀찮기도하고.. 저장할 때마다 라이브로 확인하고 싶을 때 nodemon을 사용한다. 설치할 때는 터미널에 npm i -g nodemon 해서 설치하면 된다. npm i -g nodemon 그럼 전역적으로 nodemon이 설치된다. 실시간 작업 확인화면 nodemon 홈페이지 https://nodemon.io/ nodemon nodemon reload, automatically. Nodemon is a utility that will monitor for any changes in your source and automatically res.. [node.js] Event Loop 기초 nodejs를 사용함에 있어서 맨 첫줄에 'use strict'를 사용한다. 도대체 'use strict'는 무엇일까? 'use strict'는 Strict Mode의 선언방식이다. 이 문구는 안전한 코딩을 위한 하나의 가이드라인이라고 생각하면 된다. 그렇다면 Strict Mode는 무엇인가? Strict Mode는 코드에 더 나은 오류검사를 적용하는 방법이다. - 장점 3가지 흔히 발생하는 코딩 실수를 잡아내 예외를 발생 시킴 상대적으로 안전하지 않은 액션 발생을 방지해 줌 정확하게 고려되지 않은 기능들을 비활성화 시킴 이쯤으로 uset strict 의 설명을 생략하며 추후 정리된 글로 올릴 생각이다. 자바스크립트 es6 이후부터는 변수 const, let을 사용할 수가 있다. 'use strict' .. [node.js] node.js 시작 새해 맞이 node.js 정복을 목표로 2020년의 스터디의 스타트를 시작했다. 1일 노드강의 1~3강의 듣는 것을 목표로 하며... 'use strict'// 스트릭트 모드 // 객체 생성 const obj = { title: '타이틀입니다.' } /* function isEmptyObj() {// 객체가 비어있는지에 대한 테스트 함수 if (obj.title) {// obj 객체에 title이 있는지 // 객체가 있다면 true return true } eles { // 없다면 false return false } } */ // es6 리팩토링 = 위의 주석 함수와 똑같은 기능을 하고 있음 const isEmptyObj = () => obj.title ? true : false isEmptyObj().. 이전 1 2 다음
