시작하기 아마 javascript 개발 중 사용 빈도가 높은 코드가 console.log()다. console.log()를 사용하는 이유는 여러가지가 있지만 그 중에서 간단한 디버깅을 위해 제일 많이 사용하는 것 같다. 그런데 매번 console.log()를 처음부터 적기란 앵간 귀찮은 일이 아니다. 그래서 찾아봤다. 몇글자만 입력하면 console.log()가 자동으로 생성되는 방법을! 간단한 설정으로 코드 작성시 효율성이 높아진다😆 자동완성 단축키 추가 및 사용법 👉 파일> 기본설정> 사용자 코드 조각 👉 자동완성을 적용시킬 언어 선택 언어마다 자동완성을 설정 할 수 있다. 👉 "console.log print" : { ... } prefix는 자동단축키 약어를 설정 body는 위 자동단축키 약어를 ..

Express.js, 또는 간단히 익스프레스(Express)는 Node.js를 위한 웹 프레임워크의 하나로, MIT 허가서로 라이선스되는 자유-오픈 소스 소프트웨어로 출시되었다. 웹 애플리케이션, API 개발을 위해 설계되었다. Node.js의 사실상의 표준 서버 프레임워크로 불리고 있다. -위키백과- 역시 위키. 간단 명료하지만 핵심적인 설명! Express의 기본개념은 위키설명으로 대신하고 Express로 프로젝트 생성하는 방법을 찾아봤다. 이래저래 구글링을 통해 Express로 프로젝트를 구성하는 방법을 찾아보니 대표적으로 2가지로 나뉜다. Express를 설치하고 한땀한땀 필요한 구성을 직접 잡아가는 방법 express-generator를 사용해 프로젝트 생성하는 방법 express-generat..

티스토리 Markdown 인라인 코드블럭 테마에 따라 다를 수 있지만 현재 내가 적용한 테마에서는 인라인으로 코드블럭을 작성하면 일반 텍스트와 다를게 없이 표시가 된다! CSS편집으로 인라인 코드블럭을 꾸며보자! 인라인 코드블럭 꾸미기 스킨편집 이동 상단 Html편집 버튼 클릭 CSS버튼 클릭 적당한 위치에 코드 넣기 code { background-color: #F1F1F1; color: crimson; padding: 0.25rem; border-radius: 3px; font-family: "Consolas", "Sans Mono", "Courier", "monospace"; font-size: 0.75rem; font-weight: bold; }

Vuepress 란? 간단하게 정의 하면 "Vue기반으로 정적 사이트를 생성해주는 도구!" 정적 사이트의 자세한 개념은 넘어 가겠습니돠. 나도 잘 몰라서....😅 Vuepress 이 외 정적사이트 생성기는 1. Gatsby(React) 2. Hugo(Go) 3. Hexo(Javascript) 4. Jekyll(Ruby) 5. Gridsome(Vue) 6. GitBook(Javascript) 이 외에도 다양하게 있다. Vuepress프로젝트 생성하기 Vuepress프로젝트 생성방법은 총 2가지가 있다. Quick Start Vuepress프로젝트 생성과 동시에 기본적인 구조를 자동 생성해주는 방법 Manual Installation 직접 구조를 처음부터 만드는 방법 Manual Installation 방법..

Class 동적 바인딩 Vue로 Front 개발을 하다 보면 동적으로 Class를 추가 또는 삭제를 해야 될 때가 있다. JQuery는 잘모르지만 JQuery에서 addClass(), removeClass()와 비슷한 개념 이다. 딱히 어렵지 않아 예제를 보면 쉽게 이해할 수 있다. 문법 :class="{ '클래스이름' : '조건' }" 조건이 true경우 클래스이름이 바인딩 되고 false경우 바인딩된 클래스이름이 제거 된다. 기초 사용법 Class Bind 바인딩 👉 isBind값이 true경우 red클래스가 바인딩 되어 스타일이 적용되고 false경우 red클래스가 바인딩에서 해제되어 적용된 스타일이 사라진다. red는 아래 style에 정의 되어 있다. 👉 버튼을 클릭하면 setBind()가 실행..

동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라질 경우 동일한 component를 재사용하는 것이 효율적이다. 한 개의 component에 params로 구분해 데이터 값만 변경하면 된다. 그런데 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅을 한번 더 호출하지 않아 문제가 발생한다. 예를 들어 라우터 1로 렌더링 된 component는 다음 라우터 2가 랜더링 될 때 라이프사이클 훅이 호출되지 않아 component는 params가 바뀐지 몰라 created 등이 실행되지 않는다. 문제 해결 router-link 코드 라우터1 라우터2 👉 라우터1 라우터 1, 라우터 2는 home component를 같이 사용한다. component를 같이 사용을 하지만 사용자가 라..

OverloadingOverload의 사전적 의미는 "초과 적재", "과부하"이다.전혀 느낌이 오지 않는다. 무엇을 쌓는다는 건가?! Overloading을 한마디로 정의하자면!할 수 없다. 어휘력 부족......😿 그러니까. 그. 뭐냐. Um... Java에 class가 있다. class에 메소드를 만드는데 메소드 이름을 중복으로 여러 개 만든다.원래 메소드 이름이 중복되면 에러가 발생하지만 약간의 규칙을 준수하여 만들면 에러가 발생하지 않고 만들 수 있다. 이것을 Overloading이라 한다. 여기서 의문이 든다.왜 같은 이름의 메소드를 굳이! 여러 개 만들까?! Overloading 예제메소드 Overloadingpublic class Overloading { public int sumMeth..

유효성 검사 유효성 검사란, 한 문장으로 정의하자면 "데이터가 요구하는 형식(or 양식)에 맞는지 체크하는 검사를 뜻 한다." 가령, 회원가입 시 ID를 이메일로 가입할 경우 사용자가 작성한 값이 이메일 형식인지 아닌지 체크하는 것이다. 사용자가 vaild@naver.com으로 요청하면 상관없지만 "@" 없이 요상한 데이터로 요청한다면 걸러내서 가입을 못 하게 해야 한다. (당연히🥕 해당 이메일이 진짜 있는지 없는지 여부까지는 체크하지 않음!! JUST 형식 여부만 첵! 첵!) 그럼! 유효성 검사는 언제 할까?! 프론트와 백엔드 모두 검사를 해야 한다 WHY?라고 반문하면 아~주 디테일하게 대답할 수 없지만... 두 번 검사를 하니깐 안전하고... 확실하고.. 안전하니깐 보안에 좋을 것 같고... 등등 ..

먼저! 에러 원인을 직.독.직.해 하자면 "잘못된 바인딩 문" 라고 파나고가 해석해준다. 흠.. 잘못된 바인딩이라... 뭔 말?! 바로 구글링 해보니 "Mapper인터페이스 와 Mapper xml파일에 오타로 인한 경로 설정이 잘못된 경우 발생한다"라고 설명한다. 원인 Mapper Xml파일의 namespace경로 설정 문제 DAO와 Xml파일을 연결하기 위해 DAO에는 @Mapper어노테이션을 선언하고 Xml파일에는 namespace경로를 작성한다. 이때 namespace에 작성한 DAO경로가 틀린 경우 "Invalid bound statement (not found)" 에러가 발생한다. import org.apache.ibatis.annotations.Mapper; @Mapper public inte..

이벤트 버블링(Bubbling) 특정 영역에서 이벤트가 발생했을 때 이벤트가 해당 영역 상위로 전파되는 경우를 말한다. 1. html 구조 와 js에서 이벤트 만들기(버블링 예제) first second third const first = document.querySelector('#first'); const second = document.querySelector('#second'); const third = document.querySelector('#third'); first.addEventListener('click', function(){ console.log('first'); }) second.addEventListener('click', function(){ console.log('secon..

-HTML 1 2 3 1 2 3 table 표의 최상위 부모는 table태그이다. talbe태그 안에 tr태그와 td태그를 넣는다. tr 가로줄을 의미한다. 위 코드에는 tr이 2개가 있으니 가로줄 2줄이 생긴다. td 세로줄을 의미한다. 각 tr에 td가 3개가 있으니 가로줄(tr)에 3개의 칸(td)이 생긴다. html로 구조는 잡았으나 아직 css로 border를 넣지않아 표의 모습은 아니다. -CSS table{ border-collapse: collapse; } tr, td{ width: 100px; height: 100px; border: 1px solid black; } border-collapse: collapse table에 border-collapes: collapse를 하지 않으면 t..

-input type 종류 1. input type="text" 2. input type="password" 3. input type="submit" 4. input type="radio" 5. input type="checkbox" 6. input type="button" 7. input type="number" 8. input type="date" 9. input type="color" 10. input type="range" 11. input type="email" -checkbox에 click시 영역 숨기기 1. 최종 결과 2. HTML 숨기기 hide show show hide show show 숨기기 input 타입을 checkbox로 설정하고 label의 for속성을 input의 id값과 같..

-버전 관리 란 데이터의 과거와 현재 상태를 관리하는 것이다. RPG 게임을 하고 있다고 상상해보자. 게임 도중 어떤 불상사가 생길지 모른다. 몹이랑 싸우다가 죽을 수 도있고 전투에서 파티가 전멸하게 될 수도 있다. 하지만 게임을 저장하면서 진행한다면 죽더라도 저장 파일을 불러오면 되니깐 편안하게 게임을 진행할 수 있다. 또 다른 비유로는 대학 시절 리포트를 작성하던 걸 떠올려 봐도 좋다. 누구나 한 번쯤 리포트를 작성하다 예기치 못한 컴퓨터 오류 때문에 작성했던 리포트를 몽땅 날린 경험이 있다. 그런 일을 방지하기 위해 무엇을 했는가를 떠올려라. 아마 모두가 비슷할 것이다. 한 문장 한 문장 적을 때마다 저장하는 것이다. 이러한 모든 것이 버전 관리를 하는 예이다. -버전 관리 시스템이란 Version..

-기능 1. 단어 및 의미 추가 기능 2. 단어 및 의미 검색 기능 -HTML English Vocabulary Add search option -reset.css body{ margin: 0; padding: 0; background: lightgray; font-family: 'Noto Sans KR', sans-serif; } h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, label, ul, ol, li, img, input{ padding: 0; margin: 0; line-height: 1.3em; font-size: 16px; font-weight: normal; list-style: none; text-decoration: none; co..

Collaborator 개념 Repositories(프로젝트)를 생성한 master 이외에 다른 개발자들과 협업하기 위해 master가 push, pull을 할 수 있는 권한을 주는 대상을 Collaborator(협력자)라고 한다. Collaborator(협력자)는 master가 직접 추가를 해야 한다. Contributor(기부자)와 Collaborator(협력자) 차이 Contributor(기부자) Contributor는 pull, push 권한이 없다. fork를 하여 프로젝트를 통째를 자기 원격 저장소에 복사하고 clone 하여 원격 저장소의 내용을 자기 로컬 저장소에 저장한다. 이후, 코드 수정 또는 추가 등을 해서 다시 자기 원격 저장소에 push를 한다. push가 완료되면 원래 프로젝트 저..