본문 바로가기

FrontEnd83

[ 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.
[ CSS ] :empty 아티클을 읽다가 CSS 선택자 중에 :empty 가 있다는 걸 처음 알았습니다. 저도 항상 첫번째 예시처럼 코드를 작성하곤 했었는데, CSS로 훨씬 더 간단한 코드를 짤 수 있었더라구요. 1. const Card = ({ children, header }) => { return ( {header && {header}} {children} ); }; 2. const Card = ({ children, header }) => { const headerRef = useRef(); useEffect(() => { const hasContent = headerRef.current?.childNodes.length > 0; headerRef.current.style.display = hasContent ? "blo.. 2024. 1. 29.
[ JavaScript ] 특정 값으로 배열 채우기 const arr = new Array(4).fill('a') // ['a','a','a','a'] arr.fill("b", 1); // ["a", "b", "b", "b", "b"] arr.fill("c", 2, 4); // ["a", "b", "c", "c", "b"] arr.fill(5.5, -4); // ["a", 5.5, 5.5, 5.5, 5.5] arr.fill(0, -3, -1); // ["a", 5.5, 0, 0, 5.5] 참고한 게시물 https://april.gitbook.io/learning-js/chapter-8./8.2/8.2.6 2024. 1. 16.
[ React ] useState vs useReducer useState state의 초깃값을 인수로 받는다. 길이 2인 배열을 반환한다.: state, setState(업데이트함수) const [state, setState] = useState(initialValue) useReducer 로 useState 구현하기 function reducer (prevState,newState) { return typeof nesState === ‘function’ ? newState(prevState) : newState } function init (initialArg:Initializer) { return typeof initialArg === ‘function’ ? initialArg() : initialArg } function useState (initialA.. 2024. 1. 15.

티스토리툴바