hehehe

설치 npm i create-react-app npx create-react-app [폴더] npm start 배포 npm build npx serve -s build 컴포넌트 Header, Nav, Article import './App.css'; function Header(){ return WEB } function Nav(){ return html css js } function Article(){ return Welcome Hello, WEB } function App() { return ( ); } export default App; props import './App.css'; function Header(props){ return {props.title} } function Nav(prop..

TypeError: destroy is not a function - useEffect에서 함수가 아닌 항목을 반환하려고 할 때 발생한다. useEffect(()=> TestFunction()); useEffect(()=> { return TestFunction(); }); 아래와 같이 수정해주면 된다. useEffect(() => { TestFunction(); }); - async await를 사용하는 경우에 발생한다. useEffect(async()=>{},[]) 아래와 같이 수정해주면 된다. const TestFunction = async() => {} useEffect(() => TestFunction(),[])

Can't resolve 'fs' Next.js에서 caver-js를 사용하는 방법 https://forum.klaytn.foundation/t/next-js-caver-js/3665/2 최근에 올려주신 질문중에 해당 질문이 있었는데 삭제되어서 답변을 달지못하였습니다. 해당 이슈는 앞으로도 계속 등장할것으로 보여 아카이빙 목 forum.klaytn.foundation 공식문서에 따라 config 파일을 수정하고 실행했으나 정상적으로 동작하지 않았다. // next.config.js module.exports={ webpack5:true, webpack:(config)=>{ config.resolve.fallback={ fs:false, }; return config; } } TypeError: Canno..

.htaccess 디렉터리별로 설정을 변경할 수 있다. 설정 지시어가 있는 파일을 특정 문서 디렉터리에 두면, 그 디렉터리와 하위 디렉터리에 모두 적용된다. 주 설정파일의 와 같은 기능을 한다. .htaccess 파일 사용은 가급적 피해야 한다. - 성능 파일을 사용하도록 허용하면, 실제로 파일을 사용하지 않는 경우에도 아파치는 디렉터리마다 .htaccess 파일을 찾고, 문서를 요청할 때마다 읽어들이며 성능이 떨어진다. 또한 전체 지시어를 모으기 위해서 아파치는 모든 상위 디렉터리에서 .htaccess 파일을 찾는다. /www/htdocs/example 디렉터리에 있는 파일을 요청하면, 아파치는 아래 파일들을 찾아야 한다. /.htaccess /www/.htaccess /www/htdocs/.htacc..

nvm node.js 버전 관리자 / nodejs version manager 여러가지 node.js 버전이 필요할 경우, 운영체제 시스템에서 여러 버전의 node.js를 설치하고 사용할 버전을 쉽게 전환할 수 있게 도와주는 프로그램 -설치 $ brew install nvm 설치 후 터미널에 nvm 명령이 사용되지 않는 것을 볼 수 있다. nvm을 사용하기 위해서 환경변수 설정이 필요하다. - 설정 $ vi ~/.zshrc export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh $ source ~/.zshrc 아래 nvm 명령어를 통해 nvm 설치와 설정이 잘 완료된 것을 확인할 수 있다. // 설치되어 있는 버전 확인 nvm list nvm ls // 버전..

package-lock.json npm을 사용해서 node_modules 트리나 package.json 파일을 수정하게 되면 자동으로 생성되는 파일 파일이 생성되는 시점의 의존성 트리에 대한 정확한 정보를 가지고 있다. - package-lock.json이 존재하는 경우, npm install / npm i 의 동작이 달라진다. 더 이상 package.json을 계산하지 않고, package-lock.json에 명시된 의존 패키지들을 통해 node_modules을 만들어낸다. - 패키지 매니저가 신규 패키지를 설치하거나 기존 패키지를 갱신 / 제거 할 때마다 package.json과 자동으로 동기를 맞추어 주기 때문에 개발자가 파일을 직접 수정하면 안된다. - node_modules 없이 배포하는 경우 ..

npm ERR! code 1 node 버전이 node-sass 버전을 지원하지 않아 발생하는 오류이다. package-lock.json을 삭제하고 package.json에서 node-sass버전을 바꾸어주면 된다. node-sass version 참고 node-sass Wrapper around libsass. Latest version: 8.0.0, last published: 3 months ago. Start using node-sass in your project by running `npm i node-sass`. There are 12496 other projects in the npm registry using node-sass. www.npmjs.com

npm WARN old lockfile 낮은 버전의 npm으로 package-lock.json 파일이 만들어져서 일어나는 경고이다. lockfileVersion을 2로 변경해주면 된다.

% 부모의 크기를 100%로 잡고 값을 할당한다. px 각 디바이스마다 해상도가 다른 것을 고려해야 한다. vw, vh 사용자 화면의 크기를 파악하여 100으로 나누게 된다. vw는 사용자 디스플레이스의 넓이를 100으로 한 값이며, vh는 사용자 디스플레이스의 높이를 100으로 한 값이다. em, rem 폰트 사이즈 크기를 1로 기준하여 사용하는 크기이다. em은 부모의 폰트 사이즈를 기준으로 하고, rem은 html 최상위 요소의 폰트 사이즈를 기준으로 한다.

padding 요소의 안쪽 여백 영역 설정 .logo { padding-left: 70px; padding-right: 50px; padding-top: 30px; padding-bottom: 20px; } .logo { padding : 30px 50px 20px 70px; } /* 네 면 모두 적용 */ padding : 1em; /* 세로방향, 가로방향 */ padding : 5px 10px; /* 위, 가로방향, 아래 */ padding : 5px 0px 10px; /* 위, 오른쪽, 아래, 왼쪽 */ padding : 1em 0px 5px 10px;