[Project1~3/박규란] Colors, Hex Colors, Quotes

[gyulhana]

🌈 Colors | 구현 화면

👩‍💻 구현 내용

• 화면 중앙에 버튼 생성

main {
  width: 98vw;
  height: 98vh;
  display: grid;
  justify-content: center;
  align-content: center;
}

display: grid; 속성을 이용하여 구현

• 버튼 클릭 시, Hex Color Code 생성하여 background-color 변경

const colorPicker = () => {
  let targetColor = '#'
  const hex = '0123456789abcdef'

  const pickIndex = () => Math.floor( Math.random() * 16 );
  
  for (let i = 0; i < 6; i++) {
    const index = pickIndex();
    targetColor += hex[index];
  }

  return targetColor;
}

버튼이 클릭 될 때마다 colorPicker함수가 실행 되어 난수 값을 생성하며
이를 통해 생성된 Hex Color Code를 body 영역의 background-color 값으로 부여한다.

• 해당 색상의 Hex Code 콘솔 창에 출력

🌈 Hex Colors | 구현 사이트

https://hex-colors-gradient.vercel.app/

📝 Random Quotes Generator | 구현 사이트

https://random-quotes-generator-mu.vercel.app/

[limkhl]

리뷰가 늦어져서 죄송해요, 규란님..! 규란님의 깔끔하고 센스 넘치는 코드 잘 구경했습니다 🙇‍♀️ 랜덤 값 생성하는 함수와 모든 상태 데이터를 App.js에서 관리하는 방식으로 구현하셨군요! 그 덕분에 굉장히 코드가 깔끔하네요! grid css도 자유자재로 잘 쓰시는 것 같아서 인상적이었습니다 👍 다음 프로젝트도 기대할게요!

[limkhl]

• github에 올린 파일 끝에 ⛔ 요런 모양의 아이콘이 뜨는 이유는 마지막 줄을 개행을 하지 않아서 그런 건데요. 파일 끝에는 항상 개행을 해야한다고 해요. EOL(End of Line) 혹은 EOF(End of File)라고 하더라고요. 자세한 내용은 이 링크를 참고해보셔요.

[gyulhana]

오오 항상 그 의미가 뭐지?!! 하고 궁금했었는데 경희님 덕에 알아갑니다! 감사해요❤

[limkhl]

파비콘 추가까지...! 규란님의 세심함에 감탄하고 갑니다 👍

[limkhl]

• 랜덤 색상 코드 생성하는 함수 보고 이렇게도 할 수 있구나 하고 인사이트를 얻어 갑니다! 저는 16777215까지 난수를 만들고 16진수로 바꿔주는 방식을 사용해서 6자리보다 작은 자리수의 난수가 반환되는 경우도 생기더라고요. 규란님 방식은 꼭 6자리가 나오니까 더 깔끔하게 코드 구현이 가능한 것 같네요!

[limkhl]

앗, 이스터 에그를 숨겨 놓으셨군요 ㅎㅎㅎ 센스 넘치시네요 👍

[limkhl]

변수명 quotearea을 quoteArea와 같이 카멜 케이스로 작성해주면 더 좋을 것 같습니다! 👍

[gyulhana]

오 세심하게 봐주시다니 감사합니다! 다음엔 멋진 변수 컨벤션으로 돌아오겠습니다. 꼼꼼한 피드백 감사해요!

[limkhl]

width와 height를 100이 아닌 98로 지정해주신 이유가 궁금합니다, 규란님!

[gyulhana]

아 저도 이 부분이 궁금한데^_ㅠ 100으로 줘버리니까 갑자기 화면이 넘치는지 스크롤이 생겨버리더라고요 도대체 왜 그런 걸까요? 경희님 이유를 아시나요..? 이 지점에서 역시나 아직 CSS 부족한 부분이 많다는 걸 느끼게 되는 계기였습니다.

[limkhl]

body의 내장 스타일이 margin이 8px로 설정되어 있어서 스크롤이 생기는 것 같아요. 그런 기본적으로 내장되어 있는 스타일 때문에 레이아웃이 어그러지는 경우가 많아서 reset.css 같은 걸 이용해서 기본 스타일을 초기화해주곤 하는데요. 저는 요즘엔 귀찮아서 전체 선택자로 margin과 padding 정도만 0으로 초기화해서 씁니당..! 규란님 코드에선 우선 body만 margin: 0으로 초기화해주셔도 100vw, 100vh로 썼을 때 스크롤 안 생길 거예요!