[Juyoung03] 프론트엔드 1주차 미션 제출합니다. #3
Conversation
| padding: 10px; | ||
| position: relative; | ||
| top: 10px; | ||
| /* border: 25px solid rgb(132, 132, 174); */ |
There was a problem hiding this comment.
border를 설정했다가 없앤 이유가 있을까요?
| /* background-color: rgb(151, 159, 162); */ | ||
| background: rgba(240, 199, 111, 0.3); |
There was a problem hiding this comment.
이번에 background와 background-color를 둘다 해보고 결국 그냥 background로 넘어가신 분들이 많은거 같아요. 한번 둘의 차이를 직접 알아보면 좋을거 같습니당
| <body> | ||
| <h1>자기소개서</h1> | ||
| <h2>내 소개</h2> | ||
| <div class="d"> | ||
| <img src="https://ecimg.cafe24img.com/pg901b47144436040/ticketmdshop/web/product/big/20240919/6f6d3433f11f40023b3f9c9fb9bdaffa.jpg"> | ||
| <div class="d d1"> | ||
| <p> | ||
| 이름 : 이주영<br> | ||
| 역할 : <button>프론트엔드</button><br> | ||
| 거주지 : 서울 강남구<br> | ||
| 생년월일 : 2003.10.08<br> | ||
| MBTI : <button>ISFP</button><br> | ||
| 깃허브 : <a href="https://github.com/Juyoung03">github.com/Juyoung03</a><br> | ||
| 좋아하는 음식 : 떡볶이<br> | ||
| 취미 : 영화보기, 야구<b>(두산)</b>보기, 산책하기<br> | ||
| 디스코드 닉네임 : iris031008 | ||
| </p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
전반적인 내용을 보니 다양한 코드도 사용하셨고 노션에 작성한 자기소개서 기반으로 하셧네요 좋습니당
다만 이렇게 표 형식처럼 나열하고 싶을 때 사용할 수 있는 HTML태그가 존재해요. 이거에 대해서 알아보시면 더욱 보기 편한 코드가 작성되지 않을까 싶습니당
| <!DOCTYPE html> | ||
| <html> | ||
| <body> | ||
| <script src="/mission2/calculator.js"></script> |
There was a problem hiding this comment.
calculator.js를 html로 따로 빼내서 실행시킨게 인상깊네요! "입력을 어떻게 받아야할까"에 대한 고민에서 나온걸로 보이는데 좋은 해결법입니당
There was a problem hiding this comment.
사실 이부분에서 node로 파일 실행시키려다가 문제 겪은 분들이 몇분계셔서 이렇게 실행하는 방법을 알려드려도 좋을거 같아용
| else { | ||
| console.log(div(x, y)); |
There was a problem hiding this comment.
물론 올바른 입력만 들어오기에 상관없겠지만 코드를 알아보기 편하게 하기 위해서라도 else보다는 else if로 가는게 나을거 같습니당
| function add(x, y) { | ||
| return x + y; | ||
| } | ||
|
|
||
| function sub(x, y) { | ||
| return x - y; | ||
| } | ||
|
|
||
| function mul(x, y) { | ||
| return x * y; | ||
| } | ||
|
|
||
| function div(x, y) { | ||
| return x / y; | ||
| } |
There was a problem hiding this comment.
function 키워드로 함수를 각각 잘 만드셔서 이용하셧네요! 앞으로도 리액트 컴포넌트를 만들다보면 자주 접하게 되는 형식일거라 다른 언어와 헷갈리지 않기 위해서 필요합니당
| <div> | ||
| <Button text={"안녕하세요."} /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <Button text={"반갑습니다."}/> | ||
| </div> | ||
|
|
||
| <div> | ||
| <Button text={"잘부탁드립니다."}/> | ||
| </div> |
There was a problem hiding this comment.
!!! props까지 이용해서 하셨네요 React에서 Props는 매우 중요한 개념이죠 props를 받아서 이를 이용하는 코드까지 짜시다니 완벽합니다
| return ( | ||
| <button | ||
| onClick={onClickButton} | ||
| > | ||
| {props.text} | ||
| </button> | ||
| ); |
There was a problem hiding this comment.
딱 제가 의도한 방식대로 작성하셧네요 +) props까지 이용한... 완벽한 코드입니다
No description provided.