[kkangmen] 프론트엔드 1주차 미션 제출합니다. #1
Conversation
|
강민님! 해당 PR의 제목을 "백엔드 자바"가 아닌 "프론트엔드"로 변경 가능하실까요? +) 내용 정리할 때 예시들도 함께 적으면 조금더 이해하기에 편할 거 같아요! 앞으로 계속 본인 레포지토리에서 Push하는 내용은 자동으로 이 PR에 들어오는 걸로 알고 있어서 남은 기간동안에도 꾸준히 PR 부탁드려요~! 저도 수시로 리뷰 남겨놓겠습니당 |
kkangmen
changed the title
mission1/introduce.css
Outdated
| .container { | ||
| width: 100%; | ||
| min-height: 100vh; | ||
| background: linear-gradient(135deg, #153677, #4e085f); |
There was a problem hiding this comment.
linear-gradient로 그라데이션 넣은거 너무 인상 깊었어요. 여기서 background와 background-color 속성의 차이점을 파악해보면 좋을거 같아요
mission2/calculator.js
Outdated
| const readline = require("readline"); | ||
|
|
||
| // readline 인터페이스 생성 | ||
| const rl = readline.createInterface({ |
There was a problem hiding this comment.
인터페이스를 만들어서 입력을 받는건 사실... 지금 수준에서 필요한 것까진 아니예요 그래도 이 문법/과정 이해하셨다면 큰 도움 되셧을거라고 생각합니다
이런 방식 말고도 JS에서 입력 받을 수 있는 방식이 있으니 나중에 prompt를 이용한 방식도 해보면 좋을거 같아요!
There was a problem hiding this comment.
사실 저도 저런 방식으로 입력받는걸 본적이 없답니다 허허...
mission2/calculator.js
Outdated
| rl.question("공백으로 구분된 두 정수와 연산자를 입력하세요: ", (input) => { | ||
| const parts = input.split(" "); // 공백 기준으로 입력 분리 | ||
|
|
||
| const num1 = parseInt(parts[0]); // 첫 번째 숫자 | ||
| const operator = parts[1]; // 연산자 | ||
| const num2 = parseInt(parts[2]); // 두 번째 숫자 | ||
|
|
||
| let result; | ||
|
|
||
| // 연산자에 따라 계산 | ||
| switch (operator) { | ||
| case "+": | ||
| result = num1 + num2; | ||
| break; | ||
| case "-": | ||
| result = num1 - num2; | ||
| break; | ||
| case "*": | ||
| result = num1 * num2; | ||
| break; | ||
| case "/": | ||
| result = num1 / num2; | ||
| break; | ||
| default: | ||
| console.log("error caused"); | ||
| rl.close(); | ||
| return; | ||
| } | ||
|
|
||
| console.log(result); | ||
| rl.close(); | ||
| }); |
There was a problem hiding this comment.
이 메서드 코드를 보면서 코드를 어떻게 짜야하는지 구조를 알고 계시는구나 하는 생각이 들었어요. switch문을 적용하신게 물론 명세에 맞지는 않지만 에러처리까지 되어있다는게 인상 깊네요.
mission3/src/App.js
Outdated
| <button> | ||
| <Link to="/Button">버튼</Link> | ||
| </button> |
There was a problem hiding this comment.
이 부분은 저번 세션 때 말씀드린 것처럼 수정하셨으면 추가적으로 Push하면 좋을거 같습니다!
mission3/src/App.js
Outdated
| <Routes> | ||
| <Route path="/Button" element={<Button />} /> | ||
| </Routes> |
There was a problem hiding this comment.
사실 이 내용은 2주차 미션 내용이라 이번에 공부하셨다면 이번 미션은 할만할거 같네용
추가적으로 React에서 useParam에 대해 알아보시면 조금더 기능을 확장할 수 있어요.
HTML 3강까지 정리