동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라질 경우 동일한 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가 완료되면 원래 프로젝트 저..

개념 배열 내의 모든 요소 각각에 대해서 map()의 return값을 적용시켜 새로운 함수로 만든다. foreach()처럼 배열의 length만큼 반복시켜 배열 값들에게 return값을 적용. Array.map(callbackFunction(elementValue, index, array) 1. elementValue 배열 내에서 현재 값 2. index 배열 내에서 현재 인덱스 번호 3. array 배열 length만큼 배열을 출력한다. 사용방법 let mapping = [1, 2, 3, 4, 5]; let remap = mapping.map(function(element){ return element * 10; }) console.log(remap); // [10, 20, 30, 40, 50] 출력 ..

개념 내부함수가 외부함수에 접근 할 수 있는 것을 클로저 라고 한다. 원래는 외부 함수의 실행이 끝나면 외부 함수가 소멸되어 내부 함수가 외부 함수의 변수에 접근할 수 없습니다. 하지만 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조 사용방법 const btn = document.getElementById('btn'); function increa(){ let count = 0; return function(){ count++; console.log(count) } } let add = increa(); btn.addEventListener('click',add); let add = increa() btn.addEventListener('cli..

개념 동일한 프로젝트를 수행하는 중 독립적으로 어떤 작업을 따로 진행하기 위해서 필요에 의해 만들어지는 폴더 폴더?! 를 브랜치라고 한다. 만약, 독립적인 진행 결과가 동일한 프로젝트에 필요한 부분일 경우 합병(merge)를 하여 동일한 프로젝트에 흡수 된다. branch 만들기 브랜치 생성 👉 git branch second branch생성 명령어는 git branch 이다. 명령어를 치고나면 아무것도 나오지 않는다. 잘 만들어진거다. 👉 git branch 만들어진 branch를 확인 할려면 또는 branch 현황을 볼려면 git branch명령어를 사용하면 지금까지 만든 branch를 볼수있다. *master(초록색으로 표시)가 된 의미는 지금 현재 master라는 branch를 사용(접속중)하고 ..

-Remote repository(원격 저장소) 개념 네트워크 상에서 다른 사람들과 협업을 할 수 있고 파일을 공유할 수 있는 저장소를 말한다. 원격 저장소의 종류로는 github, gitlab, Yobi 등이 있다. -Remote repository(원격 저장소)에 파일 올리기 1. 원격저장소 만들기 github에 접속하여 new repository를 클릭한다. 그러면 위 사진처럼 화면이 뜬다. repository name을 testing으로 정하고 public으로 설정 후 저장소를 만든다. 생성하게 되면 이런 화면이 나온다. 2. git remote add git remote add origin 저장소 url 위 사진에 …or create a new repository on the command li..

-git 폴더 생성 1. git init 개인 컴퓨터 작업폴더에 git 폴더 생성하기 관리하고 싶은 폴더에 git을 부른다. 반드시 필요한 명령이다. (git을 생성하는 명령어) -Working Directory → Stage Area (stage) 1. git add Working Directory(작업폴더) 에서 stage area로 보낸다. git add명령어 사용 후 git status명령어를 사용해서 보면 파일 이름이 빨간색에서 초록색으로 바뀐다. 초록색이 된 상태면 commit을 (stage area → local repository) 할 수 있다. 2. git add . Working Directory(작업폴더) 에서 stage area로 한번에 보낸다. -Working Directory ←..