여느떄처럼 코딩하고 있었는데, prettier 설정을 잘못 건드린건지 .svelte 에서만 prettier 가 적용되고, .ts 파일에서는 적용이 되지 않는 현상이 있었다. 일단, prettier 가 적용이 안되면 다음과 같은 명령으로 prettier 가 정상 작동중인지 확인해보자.npx prettier --write . 이 코드를 실행하니 아니나 다를까, 다음과 같이 에러가 발생했다. 에러를 보니 svelteSortOrder 에러이다. prettirrc 파일에서 저 옵션을 건드려주자.본문에서는 저 옵션을 scripts-markup-styles-option 로 수정하니 정상작동하였다. 그리고 방금 실행한 명령어를 다시 입력하면 다음과 같이 pritter 가 실행된다. 다시 코드를 작성하면 prettier..

NVM 이란? NVM 이란 Node Version Manager 으로, 여러 버전의 Node.js 를 설치해두고 편하게 관리할 수 있게 해주는 것이다. 설치 방법 brew install nvm # 혹은 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash PATH 설정 bash mkdir ~/.nvm sudo vi ~/.bash_profile # 아래 내용 추가 export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm [ -s "/usr/local/opt/nvm/etc/bas..

HTML 상에서 ' 같은 특수기호를 표시하려고 했는데 그대로 입력해서 적용하면 표시가 제대로 안되길래 한번 알아보았습니다. 일반적으로, HTML 에 특수 문자를 삽입할 때, & 기호와 ; 기호 사이에 숫자 혹은 문자를 입력해서 특수문자를 표시할 수 있습니다. 공백 문자를 표시하려면 를 사용해야 합니다. 이밖에도 특수문자를 표현하는 코드들을 알아보도록 하겠습니다. 자주 사용하는 HTML 특수문자 코드 표현문자 숫자표현 문자표현 설명 " " " 따옴표 & & & Ampersand > > 보다 큰 space Non-breaking space ⓒ © © 저작권 ® &­#174; ® 등록상표 ° &­#176; ° Degree sign ± &­#177; ± Plus or minus · · · Middle dot ×..

Next.js 로 프로젝트 개발 중에 일반적으로 태그 대신에 를 사용하곤 합니다. 태그 사용 시 기존에는 현재 탭에서 새로운 탭으로 이동했는데, 저는 새로운 탭에서 열게 만들고 싶었습니다. 현재 Next 13 이상 버전으로 개발 중이므로, 이를 기준으로 코드를 작성하려고 합니다. Next 13 Version 이상 import Link from 'next/link'; function MyLinkComponent() { return ( click! ); } export default MyLinkComponent; 기존 사용코드에서 target="_blank" 만 추가해주면 됩니다.

생명주기 (LIFE CYCLE)란? 컴포넌트가 연결되고 해제되는 등의 컴포넌트 생명주기를 말합니다. ex) 클릭해서 toggle 이 true 로 바뀌고, Child 컴포넌트가 출력될 때, 이 Child와 연결이 되었다라고 볼 수 있다. (Mount 되었다 라고 말한다.) 다시 클릭해서 toggle 이 false 가 되고, Child 컴포넌트가 사라질 때, 연결이 해제 되었다라고 볼 수 있다. (Destroy 되었다 라고 말한다.) toggle 버튼을 누를때 마다 toggle 라는 데이터가 변경되고, 그 데이터에 의해서 특정한 내용이 변한다. -> 반응성을 가진다.(화면이 갱신, 데이터 동기화(렌더링) -> before update (바뀌기 전) -> after update (바뀐 후) 로 볼 수 있다. ..

저번 시간에는 스벨트란 무엇인지, 그리고 스벨트 Template 설치에 대해서 알아보았습니다. 이번 시간에는 스벨트에서 사용하는 문법에 대해서 간단히 알아보도록 하겠습니다. svelte 기본 구성 기본적으로 하나의 svelte 파일 내에서 script 태그, html 태그, style 태그를 사용할 수 있습니다. Html 태그에서 {} 를 사용하면 js 문법이 사용 가능합니다. (선언적 렌더링 가능) 예시 코드 bind 데이터의 양방향 연결(양방향 데이터 바인딩) –단방향 바인딩 앞에 bind: 를 붙여준다. => ex) input 에서 값을 입력하면 다른 태그의 값도 바뀐다. on:input 과 value 로 묶어주는 역할을 bind: 하나로 수행 가능 // 일반적인 방법 {text = e.target..

혼자 개발을 진행하다가 progress bar 쪽에 사람이나 동물이 함께 달리는 애니메이션이 있으면 조금 더 포인트가 되지 않을까 싶어서 무작정 run animation 으로 구글링을 해보았다. 처음에는 gif 파일을 그냥 재생시켜야하나 싶었는데, 검색해서 보니 sprite-sheets 라고하는 옛날 종이 만화만드는 기법을 사용해서 animation 효과를 줄 수 있다는것을 발견했다. Sprite-sheets 란? sprite sheet 란 아래와 같은 그림을 말하는데, 일련의 동작들이 연속적으로 그려져 있는 그림을 말한다. 여기까지 왔으면 어떻게 애니메이션 효과를 줄 지 어느정도 감이 왔으리라본다. 그렇다! 해당 사진을 옆으로 한프레임씩 지나가게 만들어주면 우리가 볼 때는 달려가는 모습처럼 보일 수 있..

개요 스벨트는 빠른 웹 어플리케이션을 만들기 위한 도구로써, 흔히 F/E 3대 프레임 워크라고 불리는 React , Vue , Angular 와 같은 JavaScript 기반 프레임워크, 라이브러리와 비슷다. 스벨트는 Run Time 에서 코드를 해석하지 않고, Build Time 때 JavaScript 로 변환하여 실행 속도가 빠르다, 특징 리액트나 다른 웹 프레임 워크와 비교했을 때 문법이 상당히 간단하여 러닝 커브가 낮고 생산성이 좋다. 가상 돔 (Virtual Dom) 을 사용하지 않아서 가상 돔을 처리하기 위한 시간이나 메모리가 들지 않아 더 빠른 성능을 보임. 스벨트는 작업물을 Vanilla JS 로 변환 (컴파일) 하고, 그 결과만 동작하기 때문에 스벨트 자체는 브라우저 (런타임) 에서는 동..