FrontEnd/others18 [ Vue ] computed vs watch (feat. method ) Nuxt(Vue)로 만들어진 프로젝트를 React로 마이그레이션을 하게 됐습니다. 러닝커브가 React 보다 낮다고 들었던 Vue, 전 헷갈리는 개념들이 너무 많더라구요. 그 중 하나가 바로 이 둘입니다. computed 와 watch, 둘 다 값이 바뀌면 실행되는 함수들인데, 무슨 차이가 있어서 이렇게 구분되어 있는 것일까요. (공식문서에도 둘을 비교하는 페이지가 있습니다. https://v2.vuejs.org/v2/guide/computed#Computed-vs-Watched-Property ) computed 일단, computed 가 무엇일까요? 빠른 이해를 위해 공식문서의 예제를 가져왔습니다. (저는 (vue v2의 공식문서)[https://v2.vuejs.org/]를 보고 있습니다.) {{ m.. 2024. 3. 14. [ Storybook ] 왜 스토리북을 써야 할까？ 새로운 프로젝트를 시작하는데, 스토리북 도입에 대해 고민해봤습니다. 당연히 사용하는 게 안 하는 것보다 좋지만, 시간이라는 자원은 한정적이기에 스토리북을 통해 얻을 이점이 시간을 투자할만큼의 가치가 있는지를 따지게 됐습니다. 고뇌를 하던 중, 피그마를 통해 대략적인 디자인을 확인했을 때, 두둥, 탁! 스토리북을 사용해야 한다. 라고 생각했습니다. 혼자하는 작업에 도입을 하는 거면 이렇게 이야기는 끝났겠지만, 당연히 아니겠죠？ 개발을 할 때 이미 컴포넌트로 나눠서 관리를 하는데, 굳이 스토리북 까지 사용해야할까？ 라고 생각할 수도 있습니다. 왜 스토리북을 쓰는 게 이로울까? . . . 1. 디자이너와 개발자의 소통이 수월해지고, 시간도 절약할 수 있다. 스토리북은 UI 컴포넌트를 독립적인 환경에서 그려볼 .. 2024. 3. 8. 맥북 세팅하기 - 어플리케이션 매번 초기 세팅할 때마다 인터넷 서칭하는 게 귀찮아서 한 번에 정리해서 올려봅니다. 이러면 다음부터는 그냥 블로그에서 복붙만 하면 되겠죠? ㅎㅎ 상세한 설명은 첨부된 링크를 확인하면 됩니다! 이 게시물은 맥북 프로 M1을 기준으로 합니다. 😃 . . . ✔️ m1용 homebrew 설치하기 https://brew.sh https://whalec.io/mac/homebrew-설치-및-사용-방법/ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/컴퓨터유저네임/.zprofile 이렇게.. 2024. 3. 8. 백준 자바스크립트 컴파일 에러 계속 컴파일 에러가 나서 왜 그런가 했더니 return 해서 그런거였다. 답안은 그냥 return 없이 console.log(답안) 하면 되는 거였다. 아 그리고 그 외에도, input값을 가져올 때 import fs = require('fs') var input = fs.readFileSync('/dev/stdin').toString().split(' '); 이렇게 해서 input 을 가져와야 하더라. 참고 https://velog.io/@imysh578/%EB%B0%B1%EC%A4%80-NodeJsJavascript-%EC%9E%85%EB%A0%A5%EA%B0%92-%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95 2024. 1. 13. [ TailwindCSS ] tailwind.config.js 커스텀 스타일 만들기 테일윈드에는 기본적으로 theme이 정의가 되어 있는데, 디폴트 값을 변경하거나, 새로운 스타일을 추가하고 싶을 때 tailwind.config.js에서 정의내려주면 된다. 디폴트 값⬇️ https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js 디폴트 값을 변경하고 싶으면, 즉 덮어 쓰고 싶으면, theme 안에 바로 추가해주면 된다. //tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { theme: { screens: { sm: '480px', md: '768px', lg: '976px', xl: '1440px', }, colo.. 2024. 1. 4. [VSCode] VSCode 단축키 shortcuts 2023. 12. 24. 이전 1 2 3 다음
