본문 바로가기

프론트엔드 공부

 (134)
img 절대경로 설정시 Module not fout:Can't resolve '이미지경로' 터미널에 상단과 같은 컴파일 에러가 났을때 ! import 이미지 경로에 ./ 추가해주니 경로가 맞게 해결되었다 !!
기본브라우저 익스플로러에서 크롬으로 변경하기 제어판 > 기본프로그램 > 기본앱> 웹브라우저 > 크롬
정규식표현 패턴(표현) #패턴(표현) 정리 | 패턴 | 설명 | | ^ab | 줄(line) 시작에 있는 ab와 일치 | | ab$ | 줄(line)끝에 있는 ab와 일치 | | . | 임의의 한 문자와 일치 | | a|b | a또는b와 일치 | | ab? | b가 없거나 b와 일치 | {3} | 3개연속일치 {3,} | 3개 이상 연속 일치 {3,5} | 3개이상 5개 이하(3-5개)연속일치 [abc] | a또는 b또는 c [a-z] | a부터 z사이의 문자 구간에 일치(영어소문자) [A-Z] A부터 Z사이의 문자구간에 일치(영어대문자) [0-9] | 0부터 9 사이 문자구간에 일치(숫자) [가-힣] 가부터 힣 사이의 문자구간에 일치(한글) \w | 63개 문자(word,대소영문,숫자,_)에 일치 \b | 63개 문자에 일치..
정규표현식01(RegExp) *정규표현식의 역할 문자검색(search) 문자대체(replace) 문자추출(extract) *정규표현식 관련 세가지 사이트 regex101.com https://regexr.com/ regexper.com -다른 언어나 특정환경에서도 정규표현식을 쓸수 있는데, 자바스크립트에서는 동작 but 다른 환경에서는 동작x(혹은 그 반대의 경우) 도 있을 수 있으며 위 사이트에서 확인후 맹신치말고 다시 테스트해봐야한다. *정규표현식을 만드는 두가지방법 1.생성자함수2.리터럴방식 (보통리터럴은 {} 사용하여 객체 방식으로 데이터생성,정규표현식은 /) //1 const regexp1 = new RegExp("^abc"); //2 const regexpw = /^abc/; 예제 const str = ` 010-1234..
webpack 플러그인설치 npm i -D html -webpack-plugin으로 설치후 webpack.config.js에 require로 불러오기, plugins 구성옵션 만들기, npm run dev 시 로컬 포트가 부정확하게 나오므로 로컬포트 관련 구성옵션도 추가할것 //entry로 시작하여 js/main.js를 읽어들여서 //output으로 만들어내는데 그 옵션인 plugins로 경로를 index.html로 지정
webpack설치와 webpack.config.js npm init -y(package.json) 1.npm i -D webpack webpack-cli webpack-dev-server@next 으로 패키지 다운 2.package.json scripts 수정 webpack dev server로 개발서버 오픈하려면 폴더내에 webpack.config.js 함께 구성해야한다.(웹팩 구성옵션저장) 3.webpack.config.js는 브라우저x nodejs 환경에서 동작 해당 코드 작성 후 npm run build로 폴더네 파일 만들수 있다. *nodejs환경에서 적용되므로 import 대신 require와 module.exports 사용 entry는 파일을 읽어들이는 진입점, output은 결과물을 반환 __dirname은 nodejs에서 제공하는 전역모듈..
PARCEL babel npm 설치 및 추가플러그인 설치 바벨(컴파일러) : 최신 es6,7,8 문법 자바스크립트 코드를 es5로 코드 변환 (컴파일) 설치하기 폴더내에 .bablerc.js 생성후 다음과 같이작성(하단파일명은오타) autoprefixer 옵션등록과 동일하게 package.json에 해당옵션이 있다면 입력하지 않아도 ok 임의로 비동기식 async 문법을 main.js 파일에 적용 설치된 babel에서는 async를 지원하지않음 그래서 하단 플러그인 따로 설치 후 , .bablerc.js 파일에 plugin을 패키지 이름을 따로명시 하고 터미널에서 npm run dev 하면 개발자도구에서 화면과 같이 잘 출력된다.
PARCEL autoprefixer설치(벤더프리픽서) 벤더프리픽서: 공급업체 접두사 npm init -y로 pakage.json 설치 터미널창에서 npm i -D post css autoprefixer 설치후 package.json에서 browserslist 추가 (해당내용: 1%이하 의 마지막 2개 버전까지) 폴더내에 .postcssre.js 폴더 만들어줌.(번들러 변환 용도이기 때문에 common js(nodejs) 방법으로 작성 require(가져올파일) module.exports(내보낼파일) 코드간소화 npm dev run 하면 이런 경고창이 뜬다 ( postcss autofixer가 postcss 8버전이필요하다는 내용) package.json의 설치파일을 보면 postcss와 autoprefixer의 버전 차이때문이 원인으로 보인다 (자주있는문제..

티스토리툴바