[TIL] 내일배움캠프 React 과정 2022.11.07

Today I Learned

• javascript 올인원 강의 듣기
• 웹페이지 수정하며 공부하기

 

javacsript 강의 공부한 내용

*프로그래밍 과정: 입력 -> 처리 -> 출력

 

*변수선언: let 변수이름 = 값

 

*기본형 데이터 타입: number, string(문자열), boolean(참거짓), null, undefined

  let name = null 비어있는 값을 할당

  let age =   변수 선언만 하고 값 할당은 x (undefined)

 

*산술연산자: + - / * % **

 

*증감연산자

let count = 1

const prePrice = ++count -> count=count+1 / prePrice=count

const postPrice = count++ -> postPrice=count / count=count+1

 

*대입연산자

a += b -> a=a+b

a -= b -> a=a-b

 

*비교연산자: < <= > >=

 

*논리연산자

  ll (or) 하나만 true여도 true 리턴

&& (and) 모두 true여야 true 리턴

! (not) true를 false로, false를 true로 리턴

 

*일치연산자: ===

const milkPrice = 4000
const jellyPrice = 2000
let totalPrice = milkPrice + jellyPrice
console.log(totalPrice)

console.log(`총 ${totalPrice * 0.8}원에 물건을 구입합니다.`)

 

*조건문: if, esle if, else

const distance = 3

if (distance < 2) {
    console.log('같이 가자.')
} else if (distance >= 2 && distance < 5) {
    console.log('택시를 타자.')
} else {
    console.log('기차를 타자.')
}

 

*for 반복문: for (begin; condition; step) { }

for (let number = 1; number <= 20; number++) {
    if (number % 2 === 0) {
        console.log(`${number}은 짝수입니다.`)
    } else {console.log(`${number}은  홀수입니다.`)}
}

 

*함수의 선언과 호출

function threeAvg(price1, price2, price3) {
    const avg = (price1 + price2 + price3) / 3
    return avg
}

const priceA = 1000
const priceB = 2000
const priceC = 3000

const avg1 = threeAvg(priceA,priceB,priceC)
console.log(`물건 평균가격은 ${avg1}원 입니다.`)

 

*클래스 선언과 메소드 정의, 객체 만들기

class cloth {
    constructor(color, size, price) {
        this.color = color
        this.size = size
        this.price = price
    }

    printInfo() {
        console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
    }
}

const shirts = new cloth('white', 'M', '50000')
const coat = new cloth('navy', 'S', '20000')

shirts.printInfo()
coat.printInfo()

 

*배열의 선언: const array = [1, 2, 3, 4, 5]

 

*요소 추가와 삭제

  array.push(6)

  array.pop()

 

*배열과 반복문

const priceList = [1000, 5000, 2500, 4000, 2000, 3500, 6000, 500, 1500, 8000]
let sum = 0

for (const price of priceList) {
    sum += price
}

const avg = sum / priceList.length
console.log(`합계: ${sum}, 평균: ${avg}`)

 

해결하는 경험

a 태그 밑줄, 색상 제거하기

주말에 고민하던 문제를 해결했다. 링크 걸었을 때 파란색으로 변하고 밑줄 생기는 효과를 CSS로 수정하려다가 실패했었는데 실패했던 이유가 CSS에서 .mititle > h1까지만 들어가서 그런 거였다. . mititle > h1 > a까지 들어가니까 해결되었다.

.mytitle > h1 > a {
    text-decoration: none;
    color: white;
}

 

width 설정 값 밖으로 튀어 나가는 문제

수정 전

수정 후

전체적으로 width 값을 1200px로 설정해 뒀었는데 수전 정 사진을 보면 하단에 빨간 박스가 오른쪽으로 10px 정도 튀어 나가서 나를 굉장히 불편하게 만들었었다.🤔 CSS 안에 따로 margin이나 padding 값을 설정해두지 않았기 때문에 원인을 알 수가 없어서 튜터님께 질문했었는데 부트스트랩으로 인해 코드가 보이진 않지만(?) padding 값이 15px로 설정되어 있었다고 한다. 그래서 container의 padding을 0px로 설정했더니 문제가 해결되었다.

.container {
    align-items: center;
    width: 1200px;
    padding: 0;
}

 

CSS에서 img 크기 일괄 조절하기

<img  width="200" height="200" src="https://upload.wikimedia.org/wikipedia/ko/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png">

원래는 짱구 캐릭터 이미지마다 개별적으로 height, width 값을 설정해주고 있었는데☝🏻 특정 div 안에 있는 이미지 크기를 일괄적으로 조절할 수 있는 방법을 알아냈다.

.mypage > figure > a > img{
    height: 190px;
    width: 190px;
    border-radius: 140px;
}

 

이미지 배치 수정하기

메인 페이지 최종 수정본. jpg

나는 디자인 감각이 없어서 이게 최선이었던 거 같다. 이전보다 디자인적으로 나아졌다기보다는 이것저것 부딪히며 공부하기 위해서 수정했다. 그래도 메인 페이지를 수정하며 CSS grid, 호버 기능, 그 외에도 정말 많은 부분을 배웠다. 호버 기능은 너무 쉬워서 깜짝 놀란 반면에 grid는 공부하느라 엄청 고생했다ㅠㅠ 이제 내일부터는 내 개인 페이지를 수정해봐야겠다.

 

CSS grid 공부하기 좋은 사이트 추천

https://blog.tommyzip.co.kr/code/css-basic-layouts-gridlayout-container-properties/

https://nykim.work/59

https://studiomeal.com/archives/533

 

 

느낀 점

오늘은 오전 발제 후 저녁 6시까지 자바스크립트 강의를 모두 듣고 저녁에는 개인 공부를 했다. 자바스크립트 강의는 클래스 선언 부분에서 약간의 위기를 맞이했지만 너무 완벽하게 이해하려는 마음을 포기하고 일단은 강의를 모두 들었다. 근데 팀 프로젝트와는 다르게 가만히 앉아서 강사님이 하는 얘기만 듣고 있으려니까 너무 졸렸다.😴 그래도 강의를 빨리 듣고 저녁엔 혼자 공부할 수 있는 시간이 생겨서 다행이라고 생각한다. 9 to 9 일정만으로도 체력을 다 써버리기 때문에 평일엔 도저히 공부할 시간이 나지 않는다.