써니스크립트 글쓰기

프로젝트에서 다른 곳에 있는 모듈을 불러올때상대경로를 사용해 불러오는것 보다 alias경로를 통해 불러오는 것이 가독성이 훨씬 좋다. // Beforeimport Button from '../../../components/Button';import { UserType } from '../../../../types/user';// Afterimport Button from '@/components/Button';import { UserType } from '@/types/user';이렇게 긴 상대경로를 짧은 별칭으로 대체하는 기능을 Path Alias라고 하는데이 기능을 사용하려면 프로젝트에서 별도로 설정을 해주어야 한다. 설정할때마다 그때그때 검색하며 세팅했더니 헷갈리는 부분도 있고 헤맸던 부분이 있어서..

오랜만에 바닐라 자바스크립트로 투두리스트를 만들던 중 완료여부를 표시하는 체크박스가 동작하지 않았다.클릭할때마다 이벤트가 1,3,7,15...번씩 중복 실행되는 현상이 생겨 콘솔창을 확인해보니투두항목을 업데이트 할 때마다 체크박스 요소에 이벤트리스너가 계속해서 추가되고 있었다. - 초기코드처음 렌더링할때 아래처럼 리스트를 순회하면서 직접 내부 동작 요소에도 직접 이벤트를 바인딩했다.이후 각 리스트에 변경이 있을때는 해당 li 요소를 찾아서 새롭게 바인딩 하고이벤트도 새로 추가하는 방식으로 만들었었다. const todoList = $('#todoList'); todoData.forEach(todo => { const li = createTodoItemElement(todo); // 각 li..

vue 프로젝트를 생성하는데 갑자기 명령어가 이전과 묘하게 다르다는 생각이 들었다.공식문서에도 두가지 버전이 있고 vue강의에서 나오는 명령어도 다르고 예전에 내가 봤던 강의를 되찾아봐도 또 다른 명령어로프로젝트를 생성하고 있었다. 전에 vue 공부를 처음 시작할때는 webpack이 사용되었던 것 같은데요즘 생성하는 프로젝트에는 vite를 사용한 프로젝트가 생성되길래 명령어의 차이인가 해서 이번 기회에 프로젝트 생성 명령어 차이를 알아봤다. 우선 현재 기준 공식문서에는 npm create vue, npm init vue 로 프로젝트를 설치하라고 안내되어있다.  npm 공식문서를 보면 init 명령어의 별칭(alias)이 create, innit 이라고 나와있어 같은 명령어임을 명시하고 있다.또한 npx ..

멀미날 것 같은 형변환 @-@ 숫자.toString() 이 문자형으로 바꿔주는 함수인줄 알았는데 문제를 풀다보니 원래의 기능은 따로 있었고, 숫자형으로 바꿔주는 Number(숫자모양의문자)처럼 문자형으로 바꿔주는 String(숫자) 메소드가 따로 있었다. 그래서 정리 정리! String(숫자) 우선 문자로의 형변환이 목적이라면 String(숫자) 를 사용하는것이 바람직하다. 괄호속 변수가 꼭 숫자가 아니더라도 이렇게 String으로 감싸준 요소는 모두 문자형으로 변환되서 string 타입으로 바뀌게 된다. 편견없이 문자 그자체로 바꿔줌 숫자.toString() .toString() 은 원래 진법을 바꿔주는 메소드다. 알고리즘 문제를 풀다보니 이 메소드만 사용하면 진법변환은 끝난다는것을 알게 됐다. 괄호 ..

html이랑 CSS랑 왔다갔다 하면서 수정하기 너무 힘들었는데! 창 분할하고 하나씩 띄워놓고 선택자 찾는게 최선인줄 알았는데! 이런 확장팩도 있었다.ㅎㅎㅎ 왜 이제알았지 CSS Peek 사용방법 선택자를 통해서 해당 CSS속성으로 바로 이동할 수 있다. 단축키 - ctrl + 선택자클릭 ( = F12) : css파일이 탭에 열리고 해당 선택자의 속성으로 이동됨 - ctrl + 마우스오버 : 해당 선택자에 적용한 css속성을 말풍선으로 볼 수 있다. - alt + F12 : 인라인으로 css속성 띄우기(편집가능) & (Eec 버튼으로 나가기) 이제 css에서 폭풍 스크롤 안해도 될듯

VS code를 쓰기 전에 파이참을 잠깐 썼었는데 그때 작업영역 우측에 내가 작성하는 코드들이 브라우저에 반영되는 상황이 실시간으로 보이는게 참 좋았었다. VS code에는 왜 그런기능이 없나 했는데 역시 있었다. 마켓플레이스에서 Live Preview를 설치하면 오른쪽 상단에 미리보기 표시 라는 버튼이 생긴다. 이것만 눌러주면 이제 작업창이 분할되고 vs code안에서 웹브라우저에 반영되는 상황을 실시간으로 볼 수 있다! 이거지!!! 열린 미리보기 영역 우측 상단을 열어주면 개발자도구도 확인할 수 있다. 굳굳

close는 예약어이기 때문에 식별자로 사용할 수 없다. 이것도 모르고 함수명으로 close 써두고선 왜 안되나 한시간동안 헤맸구나ㅠㅠ 콘솔창에도 별다른 오류로 안찍혀서 어찌나 힘들었는지... 애초부터 틀렸던 이벤트였어... 함수명을 더 구체적으로 바꾸니 바로 작동이 잘 된다. 비슷한것으로 close closed open opener 등등이 있다.. 내가 모르는 예약어가 이밖에도 더 많다는거..! 주의!

괄호 중첩 시 개수가 잘 맞는지 코드 끝에 ; 잘 사용했는지 여러 선택자를 선택하느라 , 를 쓰다가 마지막 선택자 뒤에 ,가 들어가 있지는 않은지 선택자:hover 사용 시 띄어쓰기를 한건 아닌지 선택자 우선순위가 밀린건 아닌지 (코드 작성 순서도 변경해보기) 한 줄에 몰아쓴 속성에 띄어쓰기가 아닌 ,를 넣은건 아닌지

1) API키를 입력한 자바스크립트 파일 만들기 파일명 : api_key.js const config = { myApiKey: " //API키 입력// " }; 2) html파일에 api_key.js 파일과 키를 사용하는 js.파일(weather.js) 연결(저장한 경로에 맞게) ** api_key.js가 먼저 불려와져야함!! ** 3) API키를 사용하는 js.파일에서 상수로 지정 후 불러오기. const API_KEY = config.myApiKey; 4) 깃허브에 api_key.js 제외하고 업로드. ( .gitignore 파일에 대해서는 아직 모름..)

이것은버튼 타입=버튼 임을 왜 기재해야하나 너무 잘 정리해 둔 글을 발견했다 https://nykim.work/96 버튼에 타입을 쓰는 이유 (button type="button") 프롤로그 가끔 이렇게 type을 명시한 버튼을 마주칠 때가 있는데 전 항상 궁금하더라구요. "아니 버튼이면 버튼이지 버튼 타입 버튼은 대체 뭐람" 그러고보면 비슷하게 타입을 명시하는 이라는 nykim.work (다 이해하지는 못했지만) 나중에 다시 보니 완전 이해가 되버렸다 :D 버튼 태그의 디폴트 type값은 button 이 아닌, submit 이기 때문. 단순 버튼인 button 태그에 type="button" 을 명시하지 않으면 form양식이 제출되어 불필요한 새로고침이 일어날 수도 있음. form 태그 안에서 제출용 ..