본문 바로가기
[Javascript] import 시 오류 해결 방법 html로 작업시 반복적인 코드는 피하기가 쉽지않다. 예를 들어 header, footer, top 버튼 경우에는 각 페이지별로 다 들어가는데 매번 연결해주는 것도 번거롭다. 우회하는 방법으로 스크립트에서 ajax 방식으로 연결하는 방법이 있는데, 이 연결한 코드를 따로 layout.js 라는 파일로 가져가고 싶었다. 그래서 기존 common.js에서 덜어내어 layout.js 파일로 별도로 만들고 import 시키려 했으나, Uncaught SyntaxError: Cannot use import statement outside a module (at common.js:1:1) 이런 오류를 만났다. 모듈 밖에서는 import를 사용할 수 없다는 메세지 같은데, 그럼 layout를 연결시킨 common.j..
[CSS3] iOS object 떨림 현상 + 스크롤 바운드 해결 반응형 작업 후에 실제 기기로 테스트 했을 경우 부분적으로 달라보이는 현상이 있다.iOS로 테스트 중이였는데 스크롤시, 다음 이미지와 설명이 올라오는 모션을 코딩해둔 부분에서 미세하게 이미지 떨림현상이 발견되었다. AOS로 테스트할때에는 별다른 이상이 없었는데 역시... 더 꼼꼼히 봐야하는 환경.. 오른쪽에 미세한 버벅임 ㄷㄷㄷ구글링을 하다 Chapt GPT에게 물어봤는데 역시나 명쾌하게 해답을 해줬다.해당 버벅이는 대상인 img 태그에 아래와 같은 스타일을 먹여준다./* ? TODO IOS 이미지 떨림 현상 */.value .screen.m .imgs>li .imgs__bg { display: block; width: 100%; will-change: transform; backface-visibili..
[VSCode] 드래그 한 스타일만 포맷 변환하는 확장 (style-compressor) 확장 사용 예시프로젝트를 협업하다보면 CSS 포멧 스타일이 다를때가 있다. 지금 하고 있는 프로젝트 CSS 스타일은 한 줄에 한클래스의 스타일을 나열하는 Compact 형식이다. CSS/SCSS 포맷 종류에 대해서는 전에 게시해둔 글을 참고해도 좋다.https://jintrue.tistory.com/entry/SCSS-CSS-Format-%EC%A2%85%EB%A5%98%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC [SCSS, CSS] Format 종류에 관하여CSS 전처리기인 SCSS를 통하여 작업을 한 후 해당 SCSS 파일을 CSS로 컴파일하게 된다.이때 컨파일하는 CSS 파일 포맷 종류를 정할 수 있다.Format의 종류에는 Expanded, Compact, Compresse..
[Node.js] node -v 인식 안됨 nodejs 를 초기에 윈도우에 설치할때 잡아주는 기본 경로는 아래와 같다.C:\Program Files\nodejs 하지만 임의로 변경해두고 나중에 fnm(fast nodejs manger)나 해당 프로젝트 노드버전을 설치할때 node -v 이 명령어 자체가 인식이 안될 수도 있다.그래서 윈도우 시작 버튼에서 "오른쪽 마우스 > 시스템 > 고급 시스템 설정 > 시스템 변수" 를 통해 수정을 하거나 node를 제거하고 다시 설치하거나 해야한다.둘 다 해봤는데 시간 아끼려면 제거 후 재 설치를 추천한다. 제어판 > 프로그램 제거 ) node를 찾아 제거한 후 재설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript r..
[VSCode] Git Bash 사라짐 fnm를 설치하여 한 프로젝트를 로컬에 셋팅하던 와중에 VSC에 Bash창이 날라가버렸다...아마도 아래 명령어 때문인거 같은데eval "$(fnm env --use-on-cd --shell bash)" 환경변수 설정을 하려다가 더 꼬일꺼 같아서 VSC 의 settings.json 파일에 bash 경로를 정확하게 설정해 볼까한다. 우선 내 로컬에서 bash가 어디에 설치되어있는지 봐야하는데, 커멘드 라인에서 위치를 찾아보면which bash/usr/bin/bash로 나오므로 정확하게 알수 없다..보통 git을 설치하게 되면 C:\\Programs 폴더에 설치되므로 참고!나는 D 드라이브에 program이라는 폴더를 만들어서 설치했었다. {"terminal.integrated.profiles.windows..
[Node.js] nvm 대신 fnm을 써보자 nvm는 node version manger로서 프로젝트마다 노드버전을 달리할 때 프로젝트 별 맞는 버전을 그때그때 변환하기 쉽게 관리하는데 도움을 준다.최근에(?) 알게된 노드 관리자로서 fnm을 알게되었는데 nvm 보다는 속도도 빠르고 가볍다고 한다. 사실 차이를 잘 모르겠지만 nvm이랑 거의 비슷한거 같다. 프로젝트 중에 node version이 16.18.32 인 플젝이 있어서 새로운 로컬에 설치할 상황이 생겨 테스트겸 fnm을 사용해 보았다.1. fnm download# fnm 다운로드 및 설치winget install Schniz.fnm 2. fnm 으로 원하는 버전 설치fnm i 16.18.32 위와 같이 입력하면 윈도우 64비트일 경우, 아래와 같은 에러가 나올 것이다. Installing..
[VSCode] 알록달록 주석 색상 설정 1. 기본 설정기본 VSCode 안에 내장되어 있는 설정이다.간단하게 settings.json에 설정값만 입력해주면 바로 적용이 된다.우선 Ctrl + Shift + P 를 눌러 ">setting" 검색 후 "Open User Settings (JSON)"를 검색한다.   아래와 같이 설정값을 채워준다.{//......// 주석 색상 설정 "editor.tokenColorCustomizations": { "comments": "#2596be" },//......}원하는 주석 헥스값을 넣어주면 된다.  2. 기호에 따른 색상 설정주석 맨 앞에 어떤 기호가 오는지에따라 색상이 달라지는 플러그인이 있다.Better Comments
[SCSS, CSS] Format 종류에 관하여 CSS 전처리기인 SCSS를 통하여 작업을 한 후 해당 SCSS 파일을 CSS로 컴파일하게 된다.이때 컨파일하는 CSS 파일 포맷 종류를 정할 수 있다.Format의 종류에는 Expanded, Compact, Compressed(minify), Nested가 있다. 1. Expanded하나의 라인에는 하나의 속성이 존재한다. 가독성이 좋고 유지보수하기 쉽다. 하지만 코드줄이 많아저 로딩 속도가 느려질 수 있다..styled-example { width: 100vw; heght: 100%;} 2. Compact하나의 라인에 모든 속성이  존재한다. 여러 속성이 하나 라인에 존재하기 때문에 유지보수하기 어렵고 가독성이 부족하다..styled-example { width: 100vw; heght: 100%..

티스토리툴바