TIL 196

[TIL] 20230315 volta로 노드 버전 바꾸기/ vue attrs / boolean vs Boolean

1. node 버전이 안바뀌는 이유 한 프로젝트에서는 노드를 14버전을 써야해서 노드 버전을 바꿔야했다. 노드 버전을 바꾸어도 변경이 안되었는데 그 이유는 volta에서 노드를 잡고 있어서 그렇다 volta install node@14 이렇게 하여 해결했다. 2. vue $attrs https://hasudoki.tistory.com/entry/Vuejs-%EC%83%88%EB%A1%9C%EC%9A%B4-v-model-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B04-attrs-listeners [Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners) 2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (v..

TIL 2023.03.17

[TIL] 20230306 패키지 잠금/ vue setup / vue filter/react custom hook

1. package-lock.json / 패키지 잠금 package-lock.json https://oneroomtable.tistory.com/entry/packagejson-파일이란-무엇이며-어떤-역할을-할까요 패키지 잠금 https://www.daleseo.com/js-package-locks/ 패키지 잠금 파일 (package-lock.json, yarn.lock) Engineering Blog by Dale Seo www.daleseo.com 작업 시점에 따라서 패키지를 설치할 때 작업자마다 다른 버전을 설치하게 될 수도 있는데 package-lock.json에 명시가 되어있으면 모든 작업자가 같은 버전의 패키지를 설치할 수 있도록 보장받을 수 있다. 2. Vue setup https://kyo..

TIL 2023.03.07

[TIL] 20230208 next js/ firebase/ react context api

1. next js 회사에서 만들게 된 페이지가 next js 와 타입스크립트를 써서 공부를 해보았다. next-js + typescript 시작하기 https://velog.io/@arenacast/Next.JS-Typescript-시작하기 Next.js + TypeScript 시작하기 본 내용은 nextJS 와 nextJS + typescript 를 비교하기 위해 학습용 으로 작성되었습니다. 아래 내용대로 따라하시면 기본적인 세팅방법과 개발을 배우실 수 있습니다. 작업환경 OS : win10 Tool : vscode 기본 velog.io next의 _documnet와 _app에 대하여 https://merrily-code.tistory.com/154 Next.js의 _document와 _app에 대하..

TIL 2023.02.08

[TIL] 20230206 nextjs/ pwa 푸시알림/ 리액트 달력 라이브러리/ yaml

1. next js next js를 시도해보기전에는 또 학습하기 어려운 무엇인가를 학습해야하나 싶었는데 실제로 자습서가 매우 쉽게 되어있고 간편한 라우팅과 seo를 위한 프레임워크라서 편리하고 쉬웠다. 고도화해서 사용하는 방법은 더 알아봐야겠지만 마음속 장벽은 없어졌다..! https://velog.io/@devstone/Next.js-100-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-initialProps-webpack-storybook Next.js 100% 활용하기 (feat. getInitialProps, getStaticPath, getStaticProps, getServerSideProps, storybook) Next.js 섹시하게 활용해보기 velog.io..

TIL 2023.02.07

[TIL] 20221229 리액트 함수네이밍 규칙/ 자바스크립트 콜스택, 메모리힙 구조/ 리액트 불변성/ git stash / 탭 사이에 통신하는 법/ Broadcast channel api

1. 이벤트 핸들러 네이밍 함수명을 어떻게 정해야할지 고민돼서 찾아보았다. 알고보니 네이밍 규칙이 있었다. . ! https://blog.sonim1.com/220 [번역] React의 이벤트 핸들러 네이밍 (Event handler naming in react) 이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다. 이해의 편의상 의역이 들어가 있습니다.들 blog.sonim1.com https://sustainable-dev.tistory.com/101 리액트 이벤트 핸들러 네이밍 항상 리액트 이벤트 핸들러 네이밍에 대한 고민이 있었다. 작성하면서도 이렇게 ..

TIL 2022.12.29

[TIL] 20221214 javascript closure/ scroll fade in out 효과/ 2023 웹 디자인 트렌드

1. 자바스크립트 클로저 예전에 면접볼 당시 공부해도 이해가 안되던 클로저 이 블로그 정말 이해 쉽게 잘 정리해주심 https://www.daleseo.com/js-closures/ [자바스크립트] 클로저(closure) 바로알기 Engineering Blog by Dale Seo www.daleseo.com 2. 스크롤 시 fade in, fade out 효과 https://coolcssanimation.com/element-fade-out-on-scroll/ Element fade out on scroll Element fade out on scrollby Nick Ciliak on January 23, 2021 Fading an element out on scroll is a subtle effec..

TIL 2022.12.14

[TIL] 20221129 next js 13

1. React 서버 컴포넌트 https://tech.kakaopay.com/post/react-server-components/ React 18: 리액트 서버 컴포넌트 준비하기 | 카카오페이 기술 블로그 공식 릴리즈 전인 리액트 서버 컴포넌트에 대해 알아보고 준비해 봅니다. tech.kakaopay.com 2. Next 13 https://beta.nextjs.org/docs Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 3. remix https://remix.run/docs/en/v1/tutorials/blog ..

TIL 2022.12.01

[TIL] 20221128 리액트 스크롤 이벤트, 브런치 스타일 웹 사이트

1. 구찌 사이트 아주 인터렉티브 하고 재밌다. https://marmont.gucci.com/ GG Marmont | Borse Donna | Scopri la Collezione | Gucci marmont.gucci.com 2. 브런치 클론 브런치에서 https://brunch.co.kr/@wellend/86 이 페이지를 보면 뒷 배경이 가리면서 스크롤이 올라간다. 이건 뒷 배경을 position: fixed로 하고 content부분을 relative로 주면 된다. 아주 쉽다. 브런치에서 메뉴가 사라졌다가 나오는거랑 로딩바 등등 따라해보고 블로그에 남기도록 하겠다. 3. 리액트에서 스크롤 이벤트 사용하기 useEffect(() => { window.addEventListener("scroll", l..

TIL 2022.11.29

[TIL] 20221124 react에서 canvas사용하기/ 여러가지 css효과/ ui ux 공부법

1. react에서 캔버스 쓰기 노마드 코더의 그림앱 만들기 강의를 듣고 나서 그것을 리액트로 바꾸어보았다. 코드 : https://github.com/leehyeonj/meme_maker/tree/master/meme_maker GitHub - leehyeonj/meme_maker Contribute to leehyeonj/meme_maker development by creating an account on GitHub. github.com 기능은 - 브러쉬 굵기 바꾸기 - 브러쉬 색상 바꾸기 - 지우기 - 리셋하기 - 텍스트 추가하기 - 이미지 불러오기 - 그린 이미지 저장하기 추가로 - 스포이드 기능(참고) - 마우스 커서 모양 바꾸기 다음번에 디자인을 예쁘게 바꿔봐야겠다. 2. pallax sc..

TIL 2022.11.24

[TIL] 20221123 불렛저널/react에서 canvas쓰기/ 직장생활 꿀팁

1. 불렛저널 https://www.youtube.com/watch?v=x38NvCuGuXQ 이 영상을 어느날 봤다. 우와 보기만 해도 번거로워!! 이러고 끝. 하지만 어느날 나태하게 누워있다가 아 나도 그 불렛저널을 한번 써볼까? 하고 벌떡 일어나 다이소에 가서 공책을 사왔다. 지금은 불렛저널을 쓴지 3일차. 신기하게도 이 페이지를 채우고 싶어서, 체크 리스트를 검정색으로 칠하고 싶어서 하루종일 부지런하게 움직이게 된다. 내가 여기 적어놓은 것들은 뭐든지 다 이룰 수 있을 것 같은 자신감이 생긴다. 2. 노마드 코더 canvas https://nomadcoders.co/javascript-for-beginners-2/lobby?utm_source=free_course&utm_campaign=javasc..

TIL 2022.11.23