데브힐러의 프로그래밍

설치 #yarn add node-sass $메인칼라 : #ff0000; .red { color: $메인칼라; } div.container h4 { color : blue; } /*sass문법 셀렉터 대신 쓰는 nesting */ div.container { h4 { color: blue; } p { color : green; } } .my-alert { background: #eeeeee; padding: 20px; border-radius: 5px; max-width: 500px; width: 100%; margin: auto; } .my-alert p { margin-bottom: 0; } //다른 색상의 ui가 필요하면? //sass의 복붙하기 문법 extend .my-alert2 { @extend..

설치 # yarn add styled-components import styled from 'styled-components'; let 박스 = styled.div` padding : 20px; `; let 제목 = styled.h4` font-size : 25px; color : ${ props => props.색상 } `; /*Detail function밖에 선언할 것*/ /*Detail function 안에 있는 태그*/ 상세페이지 혹은 상세페이지

설치: npm install react-router-dom@5 index.js 파일 import { BrowserRouter } from 'react-router-dom'; --태그를 BrouserRouter로 감싸기 ** HashRouter를 쓰는 경우 URL에 /#/추가됨 routing을 안전하게 하는 용도임 사이트 주소 뒤에 #이 붙는데 #뒤에 적는 것은 서버로 전달하지 않음 그래서 라우팅을 리액트가 알아서 잘 해줄 수 있다. BrouwerRouter의 경우 라우팅을 리액트가 아니라 서버에게 요청할 수 도 있어서 위험하다. 서버가 그런 페이지 없는데? 하고 응답할 수 있음. 그래서 서버에서 서버 라우팅을 방지하는 API를 작성해둬야한다. App.js 파일 import { Link, Route, Sw..

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '패션 옷가게']) let [따봉, 따봉변경] = useState([0, 0 , 0]); let [modal, modal변경] = useState(false); function 따봉up(i){ var newArray = [...따봉] newArray[i] = newArray[i] +1; 따봉변경(newArray); } function 제목바꾸기() { var newArray = [...글제목]; newArray[0] = '여자 코트 추천'; 글제목변경(newArray); } { 글제목.map(function (글, i) { return ( {글} {따봉up(i)} }>👍{따봉[i]} 2월 18일 발행 ) }) }

var 어레이 = [2, 3, 4]; var 뉴어레이 = 어레이.map(function(a){ return a*2 }) { 반복된UI() } function 반복된UI(){ var 어레이 = []; for (var i = 0; i

맥북 에러 해결법 $npx create-react-app blog $npm start 위의 커맨드를 실행하였을 때 맥북에서 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node\_modules' 에러가 뜨는 경우 폴더 수정 권한이 없다고 에러를 띄우는 것. 위의 에러는 /usr/local/lib/node_modules 라는 폴더에 수정권한을 주면 된다. $sudo chown \-R 맥북유저이름: 위에에러뜬경로 $sudo chown \-R $USER 위에에러뜬경로 혹은 sudo npx create-react-app blog VS Code extension 설치 Live Serv..

router 설치 $ npm install vue-router@4 router.js파일 import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: import해온 컴포넌트, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; main.js에 등록 import router from './router' createApp(App).use(router).mount('#app')

vuex 설치 npm install vuex@next --save store.js 파일 import { createStore } from 'vuex' const store = createStore({ state(){ return { name: 'kim', age: '20' } }, mutations: { 이름변경(state){ state.name = 'park' }, 나이변경(state){ state.age++; } }, actions: { getData(context){ axios.get('유알엘') .then((a)=>{ context.commit('setMore', a.data) }) } } }) export default store main.js에 store.js등록 iimport store fr..

전편에서 this는 '함수의 invocation(호출)을 위한 binding(바인딩)이며, 이는 call-site(함수를 호출한 위치)에 근거한다.' 라고 정의하였다. 2020/02/13 - [javascript&Node.js] - javascript의 this는 대체 무엇인가? ①편 본격적으로 this의 바인딩의 4가지 종류에 대해 알아보자. 1) Default Binding stand alone function invocation할 경우, 즉 global-scope(전역)에서 함수를 호출할 경우 this는 global object를 바인딩 한다. function foo() { console.log( this.a ); } var a = 2; foo(); // 2 마지막 줄 foo()함수의 호출의 장소,..

자바스크립트를 심층도 있게 다룬 You don't know js라는 책이 있다. 한국에도 번역본이 존재한다. 현재 해외 거주중이기에 높은 배송비를 물어가며 사기가 쉽지 않다. 저자가 친절하게도 본문(영어)을 전부 git hub저장소에 공개해놓았다. 현재 개발할 때 주 사용 언어가 js이다. node.js 나 클라이언트쪽 코딩을 하며 수많은 에러를 만났다. 당연히 쓰는 비동기 처리, this, scope&closure 등등 코딩에는 능숙해졌지만 원리나 개념에 대해 명확한 나만의 언어로 표현하기가 힘들다는 것을 알게되었다. 이를 계기로 You don't know js를 단원별로 공부하며 정리해 보았다. Object 단원- this란 무엇인가? this is a binding made for each func..