어느날 z-index가 적용이 안되는 문제가 발생해서 원인을찾다보니 stacking context라는 이론까지 도달하게되었다 내가 정리한내용을 살펴보자 아래에 나올 내용에 대해 이해한대로 간략하게 정리해보자면 stacking context -> html elements를 쌓기위한 자료 (z-index를 적용한 elements에서부터 시작) stacking order -> html elements를 어떻게 쌓을지에 대한 정책 1. z-index를 적용하는순간 stacking context가 만들어진다 2. html document의 모든 elements는 document내에서 다른 element 보다 앞에 있거나 뒤에 있을 수 있다. 이것이 stacking order 3. z-index는 position ..
next12 버전 -> next 13 app directory 로 변경하면서 발생한 오류이다 useRouter는 SSR할때 사용가능하지만 해당컴포넌트는 CSR로 설정되어있다 (최상단에 use client 선언) 여기서 페이지 이동을 하고싶으면 useNavigation을 사용해야한다 import { useRouter } from 'next/router' 이놈을 import { usePathname, useRouter } from 'next/navigation' 이놈으로 바꿔주면 된다 끝
문제발생 개발중에는 적용되던 폰트가 빌드 후 적용안됨 문제 분석 빌드하게되면 폰트, 이미지, svg 파일들은 .next/static/media 폴더안으로 들어가면서 절대경로로는 찾을 수 없게된다 해결방법 오류발생코드 오류 해결 코드 차이점이 보이시나요? 폰트 받아오는 경로를 절대경로 -> 상대경로로 수정 하면 해결됩니다 끝
1. 내가 보려고 만든 국내 IT 기업 기술 블로그 20개 1) kakao Tech · 카카오의 기술 블로그로, 카카오 서비스를 만드는 개발자들의 실제 개발 사례를 중심으로 기술과 노하우를 전달합니다. 이벤트와 오픈소스, 채용 정보도 확인할 수 있습니다. blog https://tech.kakao.com/ 2) 쿠팡 기술블로그 · 국내 온라인 쇼핑 사이트 쿠팡의 기술블로그입니다. 쿠팡 글로벌 개발팀이 쿠팡을 만들고 진화시키면서 배운 점과 얻은 교훈을 비롯해 다양한 테크 관련 이야기를 전달합니다. https://medium.com/coupang-engineering/kr/home 3) WATCHA 팀 블로그 · 국내 OTT 서비스의 대표 주자 왓챠의 팀 블로그입니다. 개발, 테크, 기술이 가장 메인 주제입..
MariaDB MariaDB 데이터베이스 비밀번호 변경방법 다른개발자들과 로컬 테스트db 비밀번호 통일이 안되어있어서 비밀번호 통일하면서 찾아봄 root 계정 DB 비밀번호 admin으로 바꾸는 명령어 - 끝 길게 설명하고싶지만 설명할 것도없다 simple is best
React.js __ { Object(...) is not a function } React 사용중 Object(...) is not a function 라는 오류를 만났다 ( 이런유형의 오류만나면 구글링하다 하루 다갈수있음) 오류를 보면 const history = useHistory(); 이 한줄이 문제란 무책임한 오류한줄을 보고 구글링을 시작한다 구글링 시작하자마자 맨위에 나오는 블로그에서 해결방법을 찾았는데 제리조셉 형님께서 2020년 3월 9일에 남겨주신 한줄의 글에 난 구원받을수 있었다 react-router-dom 대신 react에서 useHistory를 가져오고 있었다? import 똑바로 했나 내코드를 보러가보자 헿 제리조셉 형님과 같은 실수를 하고있었다 use는 react지 라는 고정관..
쇠질하듯 타겟포인트만 간단하게 포스팅 npm-check-updates package.json의 dependencies 와 devDependencies 에 기록된 각 패키지들의 버전을 현재기준 최신버전으로 바꿔준다 설치방법 npm 라이브러리 설치하듯이 설치하면된다 (전체 라이브러리를 관리하기위한 목적이므로 범위는 -g) 사용법 CLI로 ncu를 입력하면 업데이트할 목록확인가능 CLI로 ncu-u를 입력하면 dependencies 와 devDependencies 의 패키지들이 최신버전으로 변경 변경사항을 적용하려면 npm install 실행하여 변경사항 적용 더보기 실제 솔루션에서는 라이브러리 하나하나 버전바뀌는거에 아주민감하기에 그냥 최신 트렌드 공부하는 토이프로젝트에나 적용할만하다 3줄요약 npm ins..
무지성으로 활용하는 React Hook에서 componentWillUnmount() 기능 사용하기 React에는 useEffect라는 어마무시한 Hook이 있다 혼자서 아래 3가지 기능을 다 담당 1. componentDidmount 2. componentWillunmount 3. componentDidUpdate 지금 이 포스팅에서는 2번째로 서술한 componentWillunmount 요녀석에 대해서 알아보자 useEffect(() => { console.log('컴포넌트 나타나면 실행될 함수 구현'); return () => { console.log('컴포넌트 사라지면 실행될 함수 구현'); }; }, []); 저 함수를 Modal, Popup, Tooltip 등등에 넣어보고 창을 열었다 닫았다하면..