Lololol Lololol

사용할 폴더로 들어간다 npm init 아래와 같이 나오는데 이름을 정해주면 된다. 나머지는 일단 다 엔터 package.json파일이 생긴다 (내가 쓰는 패키지-남의 소스코드) 몇버전 어떤걸 썼는지 기억하기 위해 vue 설치 npm install vue 이제 스크립트 안씀 웹팩 설치 npm i webpack webpack-cli -D //웹팩이랑 웹팩cli를 설치한다. //-D 혹은 --save-dev를 통해 개발용으로만 설치하겠다 같은 폴더에 webpack.config.js파일을 생성 // node에 module을 만든 것 이렇게 만든 모듈을 웹팩 처리를 하는데 사용됨 웹팩 설정을 넣으면 됨 module.exports = { // 대표가 되는 파일 entry: { // 하나로 합쳐질 파일의 이름 ap..

컴포넌트 재사용을 하는 경우에 대부분 같은데 가끔 다른게 나오는 경우가 있다. 댓글은 달리는데 댓글 다는 사람과 내용, 날짜가 다른 것 처럼 메뉴도 같은 모양이지만 글자 내용이 달라지는 것 처럼 props를 사용해서 차이를 줄 수 있다. props사용 아래와 같이 같은 기능을 하는 컴포넌트에 시작 단어를 다르게 주고 싶다면 컴포넌트를 쓰는 쪽에서 startWord를 넣어주고 컴포넌트를 정의하는 부분에서는 startWord를 받겠다 그리고 word는 this.startWord로 받아준다. Vue.component('word-relay', { // 전역 컴포넌트 template: ` ... `, props: ['start-word'], data() { return { word: "this.startWord"..

그저께 집수리를 바짝 마치고 저녁늦게 코딩을 시작했다. 두 시간만 하고 잔다는게 두 시간밖에 못자버리는 상황이 왔는데 아니 자의로 두 시간만 잤다고 하는게 맞겠다. 푹 빠져서 하다보니 공부끝 알람이고 뭐고 무시하고 그냥 쭉 이어서 하게 됐던 것 조금이라도 자놔야 다음 날 제정신에 코딩하겠다 싶어서 억지로 잠들었다. 알람에 맞춰 일어나고 또 한참 진행하고 중간완성을 했는데 집 수리를 마무리하느라 이후에 한참 작업했다. 그리고 오늘.. 새벽부터 일어나서 대청소 시작. 윗층 아랫층 손걸레질로 바닦을 청소하는데 신호가 왔다. 손목 작작쓰라고 집 수리 하느라 쓰고 컴퓨터 하느라 쓰고 청소하느라 쓰고 쉴 틈이 없었던 거다. 이제 내 자산이 될 부품중 하나인데 관리를 잘 할 필요성을 느꼈다. 한국에서 버티컬 마우스 ..

과제 코드 리뷰를 받았고 수정했다. 첫 번 째 수정이지만 그 안에서 얼마나 많은 것을 배울 수 있는지 깨닫게 되었다. 주변에 아무것도 없는 담쟁이 덩쿨은 땅에서 흩어져 높이 올라가지 못하는데 작은 나무막대라도 세워준다면 위로 빠르게 타고 올라간다. 이번 첫번 째 코드리뷰를 받고 수정하므로 전봇대를 타고 성장을 한 덩쿨과 같은 기분을 느꼈다. 고민하는 재미에 빠졌고 이리 저리 수정해보는 재미에 시간가는 줄 모르는 새에 아주 많은 걸 배우게 되었다! 다음 리뷰 할때까지 뷰공부 다시 하자!

사실 상상도 못했다. 개발자라면 css도 변수로 관리해야죠. 이 짧은 도움말이 정신을 번쩍 들게 했다. 나는 왜 이걸 시도도 안해봤을까? 한땀한땀 장인 정신으로 작업하는건 공부할때는 좋았지만 결국에는 더 효율적인 방법을 사용하는게 당연지사 css에서 변수 사용 시작합니다. 코드와 마찬가지 같은 모양 혹은 색 등을 가진 구조도 나중에 그걸 바꾸고 싶으면 하나하나 다 해주기 너무너무너무 귀찮다. 변수에 담으면 한 코드만 수정하면 된다. 최상위 선택자를 사용해 적용한다. :root{ /* 여기에 변수를 만들어 주세요*/ } 대쉬 두개를 사용해 변수를 만들 수 있다. :root { --link-black: #222222; } 이 변수명을 필요한 곳에 var를 사용해지정한다. .link_button { ... c..

용도에 맞는 코드 사용 { event.preventDefault(); }} > + 클릭가능 한 걸 만드려면 앵커 태그에 preventDefault를 사용하지 말고 span이나 div 태그에서 mouse cursor를 변경해 용도에 맞게 사용한다. 삼항 연산자를 많이 쓰는건 좋지 않다(사망 연산자) 주의 공부한 흐름이 있으니 순서대로 따라하지 마시오! e.target.value.length > 0 ? setIsValid(true) : setIsValid(false); 아래 함수로 바꿔주었는데 const isEmpty = e => { if (e.target.value.length < 0) { setIsValid(false); } else { setIsValid(true); } }; 확실하게 사용자의 눈에 보..

JSX문법에서 return문을 상요할때 소괄호를 사용해야한다. const App = () => { return( ); }; 최상위 엘리먼트로 감싸주면 소괄호를 빼도 된다. jsx에서 반환해야 하는 값을 인식하기 때문이다. return문 바로 뒤에 적어야 한다. 다음행에 작성하려면 소괄호를 기재해서 값들을 묶어주어야 한다. const App = () => { return HI }; // 안됨 // const App = () => { // return // // HI // // }; 중괄호가 있다면 return문이 있어야만 반환을 한다. 그런데 화살표 함수는 괄호로 감싸진 부분이 return이 된다. return문을 작성하지 않아도 된다는 말 () => ___ 이 형식은 ()=>{return문}과 같은 의미..

lint 혹은 linter는 코드의 오류나 버그가 있는지 확인하고 정해진 규칙을 잘 지키고 있는지 확인하기 위해 사용하는 도구이다. 즉 코드의 오류나 버그등을 미리 점검하기 위해 사용하는 툴이다. 협업할때 코딩규칙(코딩컨벤션)을 정해서 가독성을 높이고 개발 효율을 높이기 위해 사용할 수 있다. 오타에 대해서 빨간줄이나 표시로 알려주게 되는데 vue하면서 어제 하루 애먹었던 eslint가 그게 맞는 것 같다. 이렇게 만나니까 반갑네 JS를 사용한다면 Js Lint나 ES Lint를 사용할 수 있고 VSCode 사용시 Prettier 코드 정렬 확장 프로그램으로 함께 사용하게 된다.