도담도담

사실 딱히 완성된 상태는 아니고 혼자 공부할 겸 인터넷 참고하면서 작업하던거라 많이 미흡하다. 손봐야 할게 많기는 한데 일단 올려두고 추가사항은 천천히 추가해 나가련다. 기본 틀형식은 bootstrap에서 참고해서 사용했다. (text 박스가 추가는 되는데 삭제는 아직 구현 못한 상태) 기본 틀이 되는 HTML 내용을 입력하고 드레그해서 넣어보세요 + - Todo Doing Done 기능 적용해주는 JS function drag(target, food) {//드래그 시작시 호출 할 함수 food.dataTransfer.setData('Text', target.id); }; function drop(target, food) {//드롭시 호출 할 함수 var id = food.dataTransfer.getD..

업무 보다가 개인적으로 한번 만들어보면 좋겠다 싶어서 시작했었다. 유튜브 같은거 참고하면서 만들었는데 많이 엉성한 상태이긴 하다. 드롭다운(dropdown)형식은 bootstrap에서 참고해서 사용했다. 쌍방향 입력이라던가 같은 국가일때 안나오게 하는 등의 기능이추가적으로 필요할듯 HTML USD USD KRW THB 달러 = KRW USD KRW THB 원 JS /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function fromFunction() { document.getElementById("from-currency-list").classList.toggle("show")..

처음엔 이 두개가 크게 다를거 없이 비슷한 것들인 줄 알았었는데, 작업하다가 보니 경우에 따라 == 를 사용하는 경우도 있고 === 를 사용하는 경우도 있는데 그 결과가 다른경우들이 생겨서 차이가 뭔가에 대해 알아보았다. 일단 한줄 요약으로는 ===가 더 세분화 된 내용까지 같게 해야한다고 이해할 수 있을 것 같다. 가장 확인 하기 쉬운 방법으로는 개발자 모드(F12)를 켜서 확인해보는 방법일 듯 하다. 위와 같이 a 는 문자열 형태를 가진 1 이고, b는 숫자 형태를 가진 1로 구분되어있다. 이걸 == 로 비교해 보면 이 a 와 b 를 확인할 때 그 값이 이 둘이 '같다' 라고 나온다. 그런데 이걸 === 로 비교해 보면 이 둘의 값이 '다르다'라고 표현한다. 이를 참고하면 == 와 === 의 차이점이..

visual studio code 단축키 Ctrl + X 커서 위치 행 삭제(잘라내기) Ctrl + Shift + K 커서 위치 행 삭제 Ctrl + Shift + Enter 커서 위 행 빈줄 생성 Ctrl + Enter 커서 아래 행 빈줄 생성 alt + (↑)화살표 행을 위로 이동 alt + (↓)화살표 행을 아래로 이동 Ctrl + alt + (↑)화살표 커서를 위에 추가(다중선택) Ctrl + alt + (↓)화살표 커서를 아래에 추가(다중선택) Ctrl + / 한줄 주석처리 Ctrl + K → Ctrl + C 블럭 주석 처리 Ctrl + K → Ctrl + U 주석 삭제 Alt + Shift + A 블럭 주석 처리 Ctrl + Shift + [ 커서 영역 접기 Ctrl + Shift + ] 커서..

부제: div 여러개 만들기 + div 속성담아 만들기 visual studio code 에서도 템플릿 자동완성 기능이 있다. 많은 사람들이 이미 알 수도 있는 내용이지만 정리겸 적어본다. 1. html 포멧 생성 ! 만 쳐주면 바로 탬플릿이 옆에 보여지는데 바로 enter 나 tab을 눌러주면 기본 html 포멧이 완성된다. 2. 태그생성 + 여러개 생성 원하는 태그를 글자 그대로 적어주고 enter 나 tab을 치면 자동으로 완성된다. -> * 숫자 를 하게되면 그 숫자만큼 태그를 생성해준다. 3. 다중 태그 생성 태그명 > 태그명 > 태그명 등을 사용해서 여러 종류의 태그를 내부로 이어서 생성할 수 있다. 태그명 + 테그명 + 태그명 등을 사용해서 여러 종류의 태그를 한번에 생성해 낼 수 있다. 4..

다른 툴사용하다 왔으면 VS code 에서 tab 쓰는게 잘 안되서 불편했을텐데 (내 얘기) tabout 을 받고나면 그런 불편했던 부분들이 많이 해소된다. 꼭 받아서 쓰시길.. extention 으로 가서 tabout 이라고 치면 밑에처럼 나오는게 있는데, 이걸 설치하면 된다. 이게 설치되고 나면 세미클론( ; ) 따옴표 ( "" ) 괄호 ( () ) 등에서 Tab을 통해 글자가 쭉밀리는게 아닌 그 뒤로 자동으로 찾아가준다.

인터넷 보고 따라했던 방법이긴 한데 우선 정리해본다. 1. Node.js 설치 (mac이면 mac으로 받겠지만 사실 맥은 내가 안써서 잘 모름 ) https://nodejs.org/ko/download/ 2. VS Code 왼쪽 메뉴에서 Code Runner 와 Live Server 를 받는다. Code Runner: Javerscript 연동 확인을 위해 Live Server: 웹 브라우저에서 확인을 위해 3. 우선 원하는 위치에 작업폴더를 생성한다. 4. Javascript 작동 확인은 js 파일을 만들어서 콘솔로 작동되는지 출력해서 확인 코드실행은 (ctrl + alt + N) 5. 웹브라우저에서 작업내용을 확인하기 위해서는 html 파일을 만들어서 이렇게 실행해보면 이렇게 웹브라우저에 글씨가 출력..

일하다가 표현식을 아냐는 말을 들었다. 잘 몰랐다. 그래서 알려주시는거 듣고 인터넷에서 보면서 일은 처리했는데 그러면서 배운거 정리해두려고 한다. 단순패턴 /~~/ 내부에 있는단어를 글자 그대로 인식한다. 예를들어 /패턴/ 이라고 표현을 하면 "패턴"이라는 단어가 포함되 내용들에 반응하는것이다. - 정규 표현식 패턴이 뭐에요? - 너 생활 패턴이 어떻게 되? 하지만 "패 턴" 이라던가 "pattern", 혹은 "페턴" 이라는 식으로 조금만 달라지게 되더라도 반응을 하지 못하게 된다. 그래서 특수문자를 사용해서 여러 경우의 수를 대비하는 방식을 주로 취한다. 특수문자를 사용한 패턴 /~~/ 내부안에 특수기호를 사용하여 글자의 반응 할 수 있는 경우의 수를 늘린다. 예를들어 /패턴/ 을 똑같이 표현할 때 특..