JavaScript 썸네일형 리스트형 일반스크립트와 모듈스크립트(전역스코프와 모듈스코프) 일반스크립트 일반 스크립트 예시 모듈이 아닌 일반스크립트를 따로 로드하여 실행한 경우입니다. 위 경우는 하나의 전역스코프를 공유하게 됩니다. 마치 한 파일에서 로드되는 것 같이 동작합니다. // data.js let foo = 10; //index.js console.log(foo) // 10 위 처럼 foo 에 접근할 수 있습니다. 각 파일의 최상위 스코프(함수 밖)에서 선언한 변수,함수 들이 전역 스코프에 등록되기 때문입니다. 📌 당연히 한 파일로써 동작하는것은 아닙니다. // data.js console.log(foo); //Uncaught ReferenceError //index.js var foo = 10; // var로 선언한경우는 window객체의 property로 등록됨 만약 아예 한 파일.. JavaScript 네이밍 규칙 변수 JavaScript 변수는 대소문자를 구분합니다. 따라서 소문자와 대문자가 있는 JavaScript 변수는 다릅니다. var name = 'Robin Wieruch'; var Name = 'Dennis Wieruch'; var NAME = 'Thomas Wieruch'; console.log(name); // "Robin Wieruch" console.log(Name); // "Dennis Wieruch" console.log(NAME); // "Thomas Wieruch" JavaScript 변수는 자체 설명적이어야 합니다. 변수에 추가 문서화를 위한 주석을 추가할 필요는 없습니다. // bad var value = 'Robin'; // bad var val = 'Robin'; // good va.. 변수 네이밍 기술 적절하게 변수명을 붙이는 것은 참으로 어려울 수 있지만, 적절하게 이름을 붙이는 것에 대한 보상은 그만한 가치가 있습니다. 다음과 같은 코드를 본 적이 있습니까? const convertObj = (x, y, z) => { const k = Object.keys(x) return k.map((key) => { return { [y]: key, [z]: x[key], } }); } 한 줄씩 읽으면 알아낼 수 있지만 변수의 이름을 적절하게 지정했다면 삶이 더 쉬웠을 것입니다. 특히 동적 타입 언어에서 좋은 변수 이름이 중요합니다. 정적으로 유형이 지정된 언어라도 좋은 명명 규칙을 사용하면 가독성이 향상된다는 이점이 있습니다. 몇 년 동안 제가 정한 이름 지정에 대한 몇 가지 일반적인 규칙을 공유할 것입니다... 파일 경로로 html을 접근할 경우, CORS에러가 나는 이유 간단하게 테스트 해보고 싶어서 index.html 파일과 index.js 파일을 만들고, 파일 경로로 index.html을 열었다. 안녕 import { HI } from './index2.js'; console.log(HI) 근데 아래와 같은 에러가 발생했다. Uncaught SyntaxError: Cannot use import statement outside a module script 태그에 module="type" 을 넣어주면 해결된다. 안녕 // 여기 근데 또 아래와 같은 에러가 발생했다. from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: .. ios safari에서 스크롤 하단에 있는 버튼(링크) 안 눌리는 이슈 body에 height: 100%를 주면 그 영역 밖에 있는 링크들은 포커스를 잃기 때문에 클릭이 안되는 이슈가 있다. body에 height: 100% 함부로 주지 말자,, 3일 삽질함 쓰바 vercel에서 gsap build 이슈 yarn.lock 제거 하고 push 하면 잘 됨 Vercel에서 정적 파일 사용하기 React Setting을 CRA로 하면 이슈가 없지만, zero base로 셋팅했을 경우 이미지를 절대 경로로 접근 못하는 이슈가 있다. /assets/img/a.png assets 파일 이름을 static으로 변경하면 절대경로로 접근 가능하다. 1) assets > static 파일 네임 변경 2) webpack에서 에셋 파일 복사(webpack.config.prod.js) const path = require('path'); const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'.. Next.js에서 운영배포시 console 제거 1) babel-plugin-transform-remove-console 설치 yarn add --dev babel-plugin-transform-remove-console 2) .babelrc 작성 { "presets": [ "next/babel" ], "env": { "production": { // 개발시 "development" "plugins": [ "transform-remove-console" ] } } } 추가로, next.js 12.0.0 버전 이후로는 next.config.js에서 간단하게 제거할 수 있다. https://nextjs.org/docs/advanced-features/compiler#remove-console 이전 1 2 3 4 ··· 12 다음
