[Front-end🦁] #14 쿨찐 테스트🆒

프로 유투바 조코딩 님의 수업을 듣는 날이었다!!! 부트스트랩을 이용해서 프로젝트 하나를 진행하고, 배포 수익화 등등의 과정을 거쳤다. 부트스트랩으로 디자인을 쉽게 넣는게 꽤나 재밌었다!!

1. 쿨jjin 테스트

마크업을 잡고, 부트스트랩을 이용했다. 부트스트랩은 클래스를 미리 만들어둬서 웹을 만들기 편하게 해주는 프레임워크인데, 디자인이 나온 페이지가 아닐 때 사용하기 엄청 편할 것 같다!!

꿀팁✨

- 기본적인 reset 기능은 들어 있어서 필요한 것만 더 찾아 쓰면 된다!!
-
- margin-top 주지 않고 class="mt-5" 이런 식으로 추가하면 디자이너들이 만들어놓은 적절한 간격이 떨어진다!!!
-
- vw, vh 단위를 쓸 때는 min-width, min-height 로 UI 깨짐을 방지하자.
-
- 크롬 개발자 도구 꿀팁! 가끔 속성을 바꿨는데 적용이 안되면 새로고침에 우클릭 하고 캐시 비우기 및 강력 새로고침!
-
- 부트스트랩에서 이미 만들어진 예쁜 디자인을 갖다 쓰는게 .. 너무 혁신적이었다...

JavaScript 맛보기

// 이런식으로 js로 html element에 접근할 수 있다.
document.getElementById('id')
document.getElementsByClassName('class')[0].checked

<input onclick="result()"> <!-- 클릭되면 result라는 함수를 실행. -->

js는 용량이 커서 받아오는데 시간이 걸려서 페이지 로딩이 끝나고 입혀지는게 맞으므로, html body 가장 밑 단에 script 태그를 넣자. defer 같은 속성도 사용 가능. async 관련 속성

2. 배포, 수익화

1. 배포 - netlify

2. 아이콘 붙이기 - favicon
   16*16 으로 만들어서 프로젝트에 이미지를 넣고, favicon이 떠야하는 모든 html 파일에 link tag로 된 문구 넣기!

3. 도메인 구입

4. SNS에 공유하기 - addthis 에서 커스텀 한 후, 코드를 붙여넣으면 생성된다.

5. 광고 붙이기 - 카카오 애드핏

6. 검색 최적화 - naver search advisor
   • robots.txt 추가하여 사이트 등록.
   • sitemap 추가하기. generator를 안쓰고 직접 만들어도 된다.

7. 검색 순위가 올라가는 기준: 외부 - 역링크, 방문자 수 ... 내부 - 시멘틱 마크업, 메타태그 ...
   sitecheckup 에서 내부적인 요소들을 확인해준다.

8. DNS 서버를 netlify로 등록. 알아서 관리 해준다!!

3. JS Challenge

📥 function 📤

// function 다 써야됨. 인자 자료형 필요X
function sayHello(nameOfPerson, age) {
  console.log("Hello my name is " + nameOfPerson);
  return age
}
//
// object 에 함수 주기
const player = {
    name: "ddot",
    sayHello: function(otherPersonName) {
        return "hello! " + otherPersonName
    }
}
console.log(player.name);
player.sayHello("sooyoung");

• function 인자 1개인데 10개 보내면 앞의 값 부터 인자 개수만큼 알아서 사용

🐈conditional🐈‍⬛

// prompt: 사용자에게 입력 받아옴. 요즘은 안 씀. 직접 모달을 만들어서 쓰자.
const age = prompt("How old are you?"); // 항상 string
typeof 변수; typeof(변수);
parseInt(age); // return 숫자 or NaN (Not a Number)
//
if(!isNaN(age)) {}
else if(age < 18 || age > 50) {}
else if(age >= 18 && age <=50) {}
else if (age === 121) {} // === 3개.

• 문법만 보면 C랑 엄청 먼데 ; 찍어야하는게 나중에 ; 안 찍어서 오류 엄청 날듯...

• list, object는 const 여도 안의 요소는 수정 가능. 아예 새로 대입하는 것만 불가능.

• for문은 C와 같으나, list 나 string에 해당되는 for...of(element), for...in(element 안의 property까지) 같은 문법이 더 있다.

4. 느낀점

확실히 마크업이나 CSS 는 약간의 스타일의 차이일 뿐 다 비슷하다는 것을 느꼈다. 물론 반응형 같은 경우는 사이트를 만져봐야 알 수 있지만, 대강 사이트를 보면 아 대충 이렇게 했겠구나 하고 구조 정도는 알아볼 수 있는 단계가 된 것 같다. margin, padding 같은 것들은 정확하게 만들려면 값을 많이 바꿔봐야 하긴 하지만 js도 빨리 배워서 제대로 동작하는 사이트를 만들고 싶다.