MISSION1 / 최규민 #9
Conversation
There was a problem hiding this comment.
고생하셨습니다! 프로젝트를 내 생각대로 간단하게 구현할 수 있는 능력을 갖추기 위해서는 절대적인 시간이 필요하다고 생각해요. 주변의 도움을 받는 것도 중요하지만, 무엇보다 혼자서 다양한 시도를 해보는 시간을 충분히 갖는 것이 중요합니다. 이러한 과정을 통해 삽질하는 데에도 나름의 요령이 생길 거예요.
jsx파일에 style을 두면 파일이 복잡해진다고 생각하여 외부에 css 파일을 두어 스타일을 관리하였습니다.
해결과정에 한 가지 말씀 드려보면 디렉토리 구조나 컨벤션의 경우는 자유롭게 하셔도 된다 생각해요. 다만, style > style.css 의 요소가 MyCard 컴포넌트에 한정된 스타일 같아서
저라면 myCard.css 로 파일명을 변경하거나, components > MyCard > index.jsx, index.css 로 관련된 컴포넌트와 jsx를 폴더로 묶었을 것 같습니다ㅎㅎ
미션을 수행하면서 말씀드리고 싶은 내용을 최대한 공유해 보겠습니다. 미션을 시작하기 전에 몇 가지 말씀드리고 싶어요.
첫째, 제 리뷰에 반박하는 습관을 가져보세요. 물론 수용하는 자세도 중요하지만, 반박할 수 있는 능력도 필요합니다.
둘째, 질문할 준비를 해주세요. 어떤 부분이 어려운지, 어떤 조언을 받고 싶은지 모르겠다면, 어떤 시도를 해보았고 그 과정에서 어디까지 도달했는지 구체적으로 공유해주세요. 이러한 과정을 통해 자연스럽게 해결되는 문제가 있을 것이고, 그렇지 않은 문제도 있을 거예요. 해결되지 않은 문제들에 대해 과정과 함께 저에게 공유해주시면 제 능력에 닿는 한 최대한 답변드릴게요.
마지막으로, 다른 리뷰어들의 리뷰도 열심히 확인해보세요. 현업에서 개발 환경이 각자 다르고, 리뷰하는 관점도 다를 수 있습니다. 다양한 리뷰어들의 의견을 참고하면 여러 관점에서 코드를 바라볼 수 있는 시야가 생길 거예요. 화이팅입니다ㅎㅎ
| import "../style/style.css" | ||
| export default function MyCard() |
There was a problem hiding this comment.
import 구문과 export 구문은 간격을 두는 것도 좋을 것 같아요ㅎㅎ
| { | ||
|
|
||
| return <div className="container"> | ||
|
|
||
|
|
||
| <img src="src/components/IMG_9260.jpg" className="selfie"/> | ||
|
|
||
| <div> | ||
| <h1>26기 최규민</h1> | ||
| <p> | ||
| 안녕하세요!<br/> | ||
| 도넛 스터디에 함께 하게된 최규민입니다.<br/> | ||
| 만나서 반갑습니다 🤓<br/> | ||
| 리액트가 처음이라서 많이 낯설고 느리지만<br/> | ||
| 열심히 하겠습니다! | ||
| </p> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| } |
There was a problem hiding this comment.
prettier 적용해서 코드 포맷팅을 어느정도 맞추면 줄바꿈때문에 변경 이력이 추적되진 않을거에요ㅎㅎ
There was a problem hiding this comment.
| @@ -0,0 +1,19 @@ | |||
| .container{ | |||
There was a problem hiding this comment.
css 컨벤션 이라는 것도 있어요! 컨벤션은 컨벤션일 뿐 협업하는 사람과 맞추기만 하면 굳이 지킬 필요는 없어요ㅎㅎ
https://dev-l.tistory.com/11
| @@ -0,0 +1,19 @@ | |||
| .container{ | |||
| border: 5px solid darkgreen; | |||
There was a problem hiding this comment.
14번째 줄에서도 border를 사용하셨는데 속성 내부의 컨벤션은 일치했으면 좋겠어요!
ex) border: {border-style} {border-color} {border-thickness}
| border: solid darkgreen 5px; | ||
| width: 120px; | ||
| height: 90px; | ||
| border-radius: 50%; |
There was a problem hiding this comment.
position 변경 요소 따로, border 따로 응집되어있으면 좋을 것 같아요ㅎㅎ
1. 구현 모습
2. 해결 과정
3. To 리뷰어에게
안녕하세요!
저는 26기 최규민입니다.
제출이 늦어져서 죄송합니다. (변명을 하자면... 아직 리액트를 시작한 지 얼마 안 돼서 이 과제를 하는 데에도 부족함을 많이 느꼈습니다..! 주변 에코노 프론트엔드 분들께 도움을 받아서 차근차근 해내다보니 생각보다 시간이 많이 걸리더라고요 ㅠㅠㅠ. 다음부터는 미리미리! 더 열심히! 해서 과제 잘 끝마쳐보도록 하겠습니다!)
아직 많은 기능을 넣거나 복잡한 로직을 쓴 게 아니고, 저또한 학습이 부족하여 어떤 점이 어려운지, 무엇을 조언 받아야할지 잘 모르겠습니다!
그래서, 이 코드 리뷰 뿐 아니라 리액트, 혹은 프론트엔드 개발을 처음 시작하는 후배에게 해주고 싶은 조언을 해주신다면 무엇이든지 감사히 듣겠습니다! 바쁜 시간 내어 도움 주셔서 정말 감사합니다.