프론트엔드 데브코스 TIL #DAY29

23.10.27

📚 오늘 공부한 것

• 배포하는 방법
• 깃허브 명령어
• XXS

😄 공부한 것

배포하는 방법들

AWS s3 + cloudfront

S3는 파일(js,html,png 등)만을 저장하는 서비스.
근데 s3만 쓰면 url이 그 서비스의 특정 도메인이 아니게 된다. 그래서 보통 앞에 CloudFront를 통해서 실제 접속을 받고, CloudFront는 들어온 요청을 S3에 보내서 파일을 꺼내온다.
404페이지 문제는 추가 지정을 통해 해결 가능!

github pages

만드는 방법
1. 깃허브아이디.github.io 를 이름으로 한 레포를 만들면, 레포 안의 코드가 이걸 주소로 하는 페이지로 제공됨 << 이걸 더 추천.. 2번은 한번더 링크가 들어가다보니까 귀찮아짐.
2. 특정 브랜치 gh-pages로 하면 위의 링크/프로젝트 이름 으로 배포가 된다.

Firebase

Netlify

Vercel

• 한국서버가 있어서 빠르다

과제로 만든 노션을 Vercel로 배포해보자 😆

기본 배포는 너무나도 간단하다
로그인(깃허브추천) → 본인 깃허브로 인증되었다면 배포할 레포지토리 선택 → 끝!

중요한것은 404 페이지 처리하기!

git checkout -b vercel
nano vercel.json

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

git add .
git commit -m "vercel setting"

그럼 이렇게 vercel 브랜치 푸시를 알아서 인식해서 배포한다.

깃허브 명령어

git checkout -b [새로운브랜치명]

새로운 브랜치를 만듦과 동시에 해당 브랜치로 이동

git chekout [브랜치]는 기존 브랜치에 대해서 이동이 가능한 것.

git push -u

여기서 u는 upstream을 뜻한다. 처음 레포지토리를 만들었을때 로컬 브랜치를 원격 브랜치에 연결시킬 때 쓰인다.

즉, 처음 로컬 브랜치에서 원격 브랜치에 푸시할때 git push -u origin [브랜치명] 을 명령하면, 이후 푸시부터는 git push만으로도 작업이 가능하다

git에서 origin이 뭘까

git 명령어로 git remote add origin ~ 등 당연하게 origin을 썼는데, 이게 무얼 가르켰던걸까?

답은 “원격 저장소의 별칭”이었다.

원격 저장소(깃헙 레포지토리)를 처음 만들면 디폴트의 브랜치인 main이 있을 것이고, 이 Origin은 그 브랜치를 가리킨다.

클론으로 원격 저장소를 받아온다면 해당 원격 저장소의 별칭을 origin으로 자동 지정한다.

과제를 수행한 폴더에서 git log 를 입력하면 다음과 같이 보인다.

초록색은 현재 내 브랜치 이름!
빨간색은 원격 저장소에서 커밋 위치

크로스 사이트 스크립팅 (Cross Site Scripting ,XXS)

https://developer.mozilla.org/ko/docs/Glossary/Cross-site_scripting

공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 진행하는 것을 말합니다 (참고)

웹사이트에 악성 스크립트를 주입하는 것이다. 리오 인해 쿠키나 세션이 해커에게 노출되거나 가로채질수있고, 변조나 악성 컨텐츠 삽입 등의 문제가 생길 수 있다.

• 원인
  • 서버 측의 입력값 검증 미흡
• 해커가 심은 악성 스크립트에 노출시키고선?
  • 사용자의 입력이나 정보가 탈취한다.
  • 피싱 사이트로 접근을 유도한다.
• 공격 유형
  • 저장형(Stored) XSS
    • 악성스크립트를 데이터베이스에 저장시켜 이를 요청할때 사용자 측에 등장한다
    • 서버에 저장되는 만큼 공격 대상이 크다는 위험
  • 반사형(Reflected) XSS
    • 사용자에게 악성스크립트 url을 전송하여 클릭하도록 유도.
  • DOM Based XSS
    • 악성스크립트가 DOM 영역에서 실행됨으로써 서버와의 상호작용 없이 브라우저 자체에서 실행되는 문제
• 대책 방안
  • 입력값을 검증한다! 스크립트에 쓰이는 < > 등이 입력될 경우 치환하는 등

    String searchWord = request.getParameter("searchWord");

    if (searchWord != null) {
      searchWord = searchWord.replaceAll("<","<");
      searchWord = searchWord.replaceAll(">",">");
      searchWord = searchWord.replaceAll("(","(");
      searchWord = searchWord.replaceAll(")",")");
    }

• • 위와 같이 문자열 치환을 적용하면 [웹 취약점과 해킹 매커니즘#7 XSS(Cross-Site Scripting) - ① 개념]ttps://blog.naver.com/sk_shieldus/222902533919)|작성자 SK쉴더스

🫡 느낀 점

배포는 주로 서버 담당 팀원이 했기에 무지한 점이 많았다. 프론트엔드 개발자도 어느정도 지식이 필요하고 위와 같은 방법으로는 충분히 배포할 수 있는 것이기에 배워야겠다!
강사님도 말씀하셨다싶이, 소소한 것을 만들었더라도 내 로컬에만 있는 것보다 배포해서 누군가가 써볼 수 있게 만드는 것은 의미가 있다!

---

🤔 오늘 회고

오랜만에 강의로 돌아왔다! 내용은 새롭고 배울게 많았지만 시간이나 난이도는 높지 않아서 잠깐 숨돌릴 수 있었다. 과제하느라 못했던 것들, 알고리즘, 커피챗 준비 등을 하고 나니 코어타임은 후딱지나갔지만..

앞으로의 강의에서도 그날 주제와 다르더라도 의문이 생기면 바로바로 많이많이 찾아보자! 그리고 적어두자!!

Try

노션과제에 돌아가야한다! 기한에 맞춰 제출한 것이지 100%완성한게 아니니깐 ㅠㅅㅠ 당당하게 만족할 수 있게 만들어보고 싶다
어떤 걸 고쳐야할지 내가 제일 잘 알고 있으니까 다시 의욕챙겨서 해야지~! '어떻게'를 모르겠다면 팀에 멘토님께 강사님께 많이 물어보자!