뇌 채우기 공간

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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..

인터렉티브 웹을 공부하다가 브런치 스타일을 한번 따라해보기로 했다. 결과는 아래 동영상이다. 여기서 내가 고려한 포인트는 아래와 같다. 1. 사진 배경을 덮으면서 콘텐츠가 올라가게 하기 2. 헤더 부분이 사진 영역에 있을 때는 투명했다가 스크롤을 하면 그대로 안보이고, 글 영역으로 가면 반투명 해지고 progress bar가 나타남 3. 헤더 부분 아이콘이 사진 영역에서는 검정이고 글 영역에서는 하얀색. 4. 페이지 높이에 따른 progress bar 만들기 (전체코드는 맨 아래에) html은 이렇게 짰다. 크게 메뉴, 이미지, 콘텐츠 부분으로 div를 두었다. 꽃이 끓는 풀이 사랑의 놀이 청춘 바이며, 힘있다. 피가 뼈 커다란 남는 갑 생생하며, 이 사람은 그들은 그리하였는가? 모래뿐일 피고, 같은 따..

새로운 프로젝트 세팅을 하면서 어떤 상태관리 라이브러리를 쓸까 생각을 해보았다. 그 전에는 쌩 리덕스를 쓰고 있어서 보일러플레이트 코드가 매우 많이 필요했다. 그래서 비교적 쉽고 보일러플레이트가 적은 recoil을 쓰려고 했는데 zustand가 인기가 더 많아지고 있고 업데이트와 버전 업데이트도 recoil보다 더 활발하여 zustand를 사용해보기로 했다. 결론적으로는 매우 쉬움 따봉 100개 드립니다. 보일러플레이트가 거의 없고, redux devtools를 사용할 수 있다. 1. 설치 yarn add zustand 2. store생성 // store.js import create from 'zustand' // create로 zustand를 불러옵니다. const useStore = create(s..

그동안 프로젝트에서 5버전만 쓰다가 새로운 프로젝트를 세팅하면서 6.3.0 버전을 적용해보려고 한다. 이 프로젝트에서 필수로 가져가야할 것은 중첩라우팅, 리다이렉트, 에러페이지 이므로 이것을 중점으로 포스팅 하겠다. 1. 설치 yarn add react-router-dom 2. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); 3. App.js (기본 규칙) 위에서..

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 ..

타입스크립트로 되어있는 리액트 프로젝트에서 prettier설정을 해서 자동 저장이 되게 하고 싶었다. 평소 하던대로 .eslintrc.json파일에 { "extends": ["react-app", "plugin:prettier/recommended"] } 이것을 추가해주었는데 에러가 났다. 다른 블로그에서는 아래를 설치해주라고 한다. npm install eslint-config-react-app or yarn add eslint-config-react-app 하지만 나의 문제는 이것이 아니었나 보다. 나는 .prettierrc.js파일을 만들고 module.exports = { printWidth: 125, bracketSpacing: true, jsxBracketSameLine: true, singl..

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..

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..