[clo-or] 프론트엔드 1주차 미션 제출합니다. #2
Conversation
|
|
||
| h1 { | ||
| font-weight: bold; | ||
| color: rgb(0, 0, 112); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| body { | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .container { | ||
| padding: 20px; | ||
| border: 2px solid #bbbbbb; | ||
| border-radius: 50px; | ||
| } |
There was a problem hiding this comment.
자기소개 페이지에 CSS 속성이 조금더 다양한 요소가 들어가면 좋을거 같아여 다음 미션에서는 최대한 많이 넣어서 만들어봅시다!
| <h3>24-1</h3> | ||
| <ol> | ||
| <li>Matrix Lead</li> | ||
| <li>hongik GDSC Core Member (DevRel)</li> |
There was a problem hiding this comment.
별도로 명칭은 GDSC Hongik 23-24 DevRel Core Member 정도로 수정해둡시다
| <link rel="stylesheet" href="introduce.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> |
There was a problem hiding this comment.
다음번엔 명세에 조금더 자세한 요구사항을 적어놓을게여 자기소개 페이지에 조금더 많은 내용이 들어가면 좋을거 같네용
| switch (operator) { | ||
| case '+': | ||
| return a + b; | ||
| case '-': | ||
| return a - b; | ||
| case '*': | ||
| return a * b; | ||
| case '/': | ||
| return a / b; | ||
| default: | ||
| return "impossible"; | ||
| } |
There was a problem hiding this comment.
원래 기능 명세에 적혀있던건 각 사칙연산별로 함수로 구분하는거였는데 그래도 switch 문법 충분히 잘 이용하셧네용
| @@ -0,0 +1,23 @@ | |||
| function calculate(input) { | |||
| const [num1, operator, num2] = input.split(" "); | |||
There was a problem hiding this comment.
이렇게 구조할당 해도 정상적인 코드에서는 문제없이 굴러가긴 합니다! 다만 만약 띄어쓰기가 하나밖에 없는 등의 이슈가 있으면 바로 쪼갰을 때 문제가 발생할 수 있겟네여
사실 이런거 고려하면서 짜라고 낸 미션은 아니엿지만 요런거 생각하면서 코드 짜면 도움될거 같아서 남기고 갑니당
| document.addEventListener('DOMContentLoaded', () => { | ||
| setupButton(); | ||
| }); |
There was a problem hiding this comment.
코드가 매우 신박하네요...? React를 이용한 듯하면서 VanilaJS로 접근한 듯한... 코드군요
자바스크립트의 이벤트 관련 문법을 전반적으로 많이 사용한 듯한데 물론 알아두면 유용하긴 하지만, 실제 리액트 프로젝트에서는 사용하지 않을 가능성이 높으니 React의 "컴포넌트"라는 개념에 대해 더 배워보면 좋을거 같아요
Component가 어떻게 리액트 화면에 보여지고 동작하는가? 를 파악하는게 미션3의 목적이었습니당 2주차 미션에서도 많이 이용할 개념이니 추가적으로 공부를 하면 좋을거 같아여
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> |
There was a problem hiding this comment.
놀랍게도 여기는 정상적인 React 코드군요... React로 실행시켰을 때 코드가 정상적으로 돌아갈지가 의문이긴 하지만 위에 코드에서 그리 틀린 부분은 보이지 않네여
No description provided.