Lololol Lololol

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

사실 상상도 못했다. 개발자라면 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 코드 정렬 확장 프로그램으로 함께 사용하게 된다.

아래 코드를 하면서 궁금한 점이 생겼다. 왜 option에 value 속성이 꼭 있어야 하는거지? key값을 지정했으면 같이 받아오면 안되나? ==도시선택== {{ city.title }} {{ dong.dongTitle }} TCPSCHOOL의 답 http://www.tcpschool.com/html-tag-attrs/option-value 태그의 value 속성은 해당 옵션이 선택될 때 서버로 제출되는 값을 명시합니다. 태그와 태그 사이의 텍스트는 단지 브라우저가 드롭다운 리스트에 표시할 내용이며, value 속성값은 폼을 제출할 때 서버로 보내지는 값입니다. 만약 value 속성이 명시되지 않는다면, 해당 값은 요소 내의 텍스트로 자동 설정됩니다. 메소드에서 사용하기 위해서 지정해주고 받아주는 것 ..

빨간줄이 거슬려서 해결방법을 찾아봤다. A functional component that renders the matched component for the given path. Components rendered in can also contain its own , which will render components for nested paths. Eslint 관련해서 잡히는 거라고 한다. Vue 2.0에서는 루트 태그가 있어야 에러가 아니었다고 하는데 Vue 3.0에서는 없어도 돼서 사실 에러가 아니다 근데 Eslint는 아직 바뀐 내용을 모두 적용하지 않고 있어서 빨간줄이 가는 거라고 한다. 해결 Home | About 위의 코드를 루트태그로 감싸준다. 아래처럼 Home | About 성공! 펻펻

vue를 공부하면서 index.js에나온 주석에서 생긴 궁금증 // which is lazy-loaded when the route is visited. lazy-loaded란 무엇인가? 무엇? 페이지를 읽어들이는 시점에 중요하지 않은 리소스들의 로딩을 나중에 하는 기술 왜? 사용자가 웹페이지를 열면 전체 페이지의 내용이 다운로드 되어 렌더링된다. 사용자가 다운로드 한 모든 콘텐츠를 본다는 보장은 없다. 전체 사진 갤러리를 다운로드 했지만 사용자가 첫 페이지만 본 후 떠나면 메모리, 대역폭 낭비가 발생한다. 페이지에 엑세스할 대 모든 콘텐츠를 전부 로드하는 대신 필요한 페이지의 일부에 접근할 때 콘텐츠를 로드할 수 있는 기능이 있는데 Lazy Loading을 사용하면 사용자가 필요할 때만 실제 콘텐츠로 ..