정규표현식 (RegExp, Regular Expression)
- 문자 검색(Search)
- 문자 대체(Replace)
- 문자 추출(Extract)
생성자
- new RegExp('표현' , '옵션')
- nes RegExp('[a-z]' , 'gi')
const regExp = new RegExp('the', 'gi')
console.log(str.match(regExp))리터럴
- 표현/옵션
- [a-z]/gi
const regExp = /the/gi
console.log(str.match(regExp))=> 대부분의 경우는 리터럴 방식을 쓰나, 간혹 생성자 방식을 통해서만 유효하게 쓸 수 있는 패턴이 존재하기 때문에 두 개 다 공부하자!
메소드
- 정규식.test(문자열) - 일치 여부 반환
- 문자열.match(정규식) - 일치하는 문자의 배열 반환
- 문자열.replace(정규식, 대체문자) - 일치하는 문자를 대체
const regExp = /fox/gi
console.log(regExp.test('fox'))
console.log(str.matxh(regExp))
console.log(str.replace(regExp)) 플래그
- g : 모든 문자 일치(Global)
- i : 영어 대소문자를 구분 않고 일치(Ignore case)
- m : 여러 줄 일치(Multi line), 각각의 줄을 시작과 끝으로 인식
console.log(str.match(/\.$/gi)문자열에서 '.'을 찾고 싶을 때, '.'은 정규식에서 특정한 기능을 가지고 있기 때문에 그냥 정규식에서 사용하게 되면 이 마침표는 어떤 기능을 가지기 때문에 그 기능을 사용하지 않고 실제 문자로만 사용하겠다 라는 앞에 '\' 백슬래시를 사용해서 이스케이프 문자라고, (본래의 기능에서 벗어나 상태가 바뀌는 문자) 를 사용하고 $은 문장이 끝나는 지를 확인하는 기호이다.
패턴
1. npm 프로젝트 시작하기
npm init -y
npm install -D parcel
-
개발 서버 오픈하기 (진입점, 빌드명령)
-
파비콘 적용
-
브라우저의 기본 스타일 초기화
reset.css cdn을 검색해서 링크 타고 들어가서 link 태그 복붙
Goole Fonts
Roboto
Oswald
Codepen 사이트
로딩 애니메이션 참고 영상
Ch 14. API를 활용한 영화 검색 사이트
19. 로딩 애니메이션 추가
- 반응형 레이아웃을 위한 미디어쿼리도 참고
html 요소 구조를 만들 때는 js를 배우고 프론트엔드 개발자로 나아가기 때문에, 항상 데이터를 기반해서 사고하는 방식을 기르는 것이 좋다  -> 이런 예시가 대표적으로 html 구조를 일일히 작성하지 않고 데이터를 기반으로 해서 html구조를 출력한다.
깃허브에 배포 .parcel-cache나 dist, node_modules(npm install 한거) 부분은 git으로 버전관리를 할 때 무시
-
.gitignore 파일을 생성해서
-
개발서버
git init (깃으로 버전관리 시작)
git add . (현재 경로에서 버전관리할 파일들 추가)
git status (불필요한 파일이나 버전관리들이 잘 포함되고 포함되어있지 않은지 확인)
git commit -m "~~~"
git remote add origin http;~
git push origin main
(만약 main이 아닌 master로 버전관리를 한다면)
git branch -m master main
vercel 서비스를 이용하여 배포 (깃허브와 연동)
빌드 실패?
웹 사이트가 동작하는 원리
- 호스팅 서버에 우리의 프로젝트를 업로드함
- 일반적인 사용자가 그 서비스의 페이지를 보고 싶다고 요청을 한다면 호스팅 서버가 가지고 있던 css, js, html들을 사용자의 브라우저로 넘겨주고 그 브라우저에서 넘겨받은 내용으로 화면에 출력해서 사용자에게 보여준다.
- 단순히 호스팅 서버는 파일들만 주고받을 수 있다. 우리가 만든 로직들이 동작, 연산, 컴퓨팅 기능은 존재 X
그래서 우리가 영화 정보가 필요하다면 사용자가 호스팅 서버에서 가져온 것이 아니고 따로 이 호스팅 서버를 통해서 받은 js 코드를 통해서 OMDb API에 직접 요청을 해서 얘가 갖고 있는 자신의 데이터베이스에서 영화의 정보를 출여서 우리가 볼 수 있는 JSON 포맷으로 응답한다.
vercel은 기본적으로 호스팅 서비스이다. 우리가 깃헙과 프로젝트를 연결을 해서 npm run build로 만들어지는 dist라는 폴더를 가지고 있다가 사용자가 그 페이지에 접근하면 dist페이지에 있는 html 파일을 전달하고 사용자는 그 html에 연결되어있는 js나 css를 호스팅 서버를 통해서 추가적으로 가져올 수 있는 것이다.
### vercel 설치
-
npm i -D vercel
환경 변수 구성 및 최종 배포
환경 변수는 이 프로젝트가 동작하는 환경 자체에 변수를 만들어서 데이터를 담아놓고 그 환경에서만 데이터를 활용할 수 있는 방법이다.
-
패키지 설치
npm i -D dotenv -
root 경로에 추가
.env -
확장 프로그램
dotenv 설치(코드 하이라이팅)process라는 node.js의 전역 변수에서
-
로컬에서 작업을 완료하고 vercel 서비스에서도 환경에 변수를 가질 수 있도록 하려면?
vercel 서비스의 우리의 프로젝트에서 settings -> Environment Variables에서 Key -Value로 환경변수를 지정할 수 있고 그래야 프로젝트가 잘 돌아갈 수 있다. (아래에서도 정보 입력 키를 확인할 수 있다)
