[brayden1102] 프론트엔드 1주차 미션 제출합니다 #5
Conversation
| <section class="first"> | ||
| <div class="photo"><img src="./얼굴사진.jpg" class="facePhoto"></div> | ||
| <article class="List"> |
There was a problem hiding this comment.
HTML 개념 정리하며 배우셧을 시멘틱 태그를 바로 사용하신게 인상깊네요 이 시멘틱 태그들을 잘 활용하면 더욱 의미있는 코드 작성하기에 유리할 거 같습니당
다만 아시다시피 div와 역할 자체는 같기에 급할땐 div로 대체해도 충분할거 같아용
| position: relative; | ||
| margin: 20px auto; | ||
| background-color: rgb(165, 238, 168); | ||
| border-radius: 2em; |
There was a problem hiding this comment.
CSS에서 굉장히 다양한 속성, 단위를 쓰시려고 노력한 흔적이 보이네요. 아래 CSS속성을 봐도 여러가지가 같이 있어서 공부하기에 매우 좋앗을거라고 생각이 듭니당
이 속성들 말고 Flex에 대한 내용도 알아보시면 좋을거 같아용
| const readline = require("readline"); | ||
|
|
||
| const rl = readline.createInterface({ | ||
| input: process.stdin, | ||
| output: process.stdout, | ||
| }); | ||
|
|
||
| rl.on('line', (input) => { | ||
| const calc = input.split(" "); // 공백 기준으로 입력 분리 | ||
|
|
||
| const a = parseInt(calc[0]); // 숫자 1 분리 | ||
| const symbol = calc[1]; // 연산자 분리 | ||
| const b = parseInt(calc[2]); // 숫자 2 분리 | ||
|
|
||
| // 사칙연산 수행 | ||
| if (symbol == '+') { | ||
| console.log(add(a, b)); | ||
| } | ||
| else if (symbol == '-') { | ||
| console.log(sub(a, b)); | ||
| } | ||
| else if (symbol == '*') { | ||
| console.log(mul(a, b)); | ||
| } | ||
| else if (symbol == '/') { | ||
| console.log(div(a, b)); | ||
| } | ||
| rl.close(); |
There was a problem hiding this comment.
인터페이스를 따로 만드셔서 진행하셨네요 멋지십니다...!
사실 저도 인터페이스를 통해 입출력하는 방식은 몰라서 어려웠는데 깔끔하게 잘 작성하셧네용 명세에 적힌 함수 관련 내용도 모두 잘 지키셧네요 좋습니다
| import Button from './Button'; | ||
|
|
||
| function App() { | ||
| const [message, setMessage] = useState(''); |
There was a problem hiding this comment.
useState의 경우 3주차 미션에 한번에 배울 계획이었는데 이미 충분히 잘 이용하고 계시는군요!
아래 코드도 보니 어느정도 리액트 강의나 책을 보고 계신게 아닐까 싶은 코드가 됐네여
| }; | ||
|
|
||
| return ( | ||
| <div style={{ textAlign: 'center', marginTop: '50px' }}> |
There was a problem hiding this comment.
style을 객체형식으로 이용하시는 방법도 좋습니당
이번 2주차 미션에서 CSS를 React에서 더욱 효율적으로 이용하는 방식도 배울 예정이니 styled component에 대한 내용을 이때 한번 공부해보면 좋을거 같아용
| const Button = ({ onClick, label }) => { | ||
| return ( | ||
| <button onClick={onClick}> | ||
| {label} | ||
| </button> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
prop에 대한 내용도 충분히 알고 계시는군요! prop에 대한 내용은 3주차 미션때 함께 나갈 예정입니당
별도로 이런식으로 onClick에서 함수를 전달하게 되었는데, Prop drilling이라는 개념에 대해서 알아보셔도 좋을거 같아용
No description provided.