위코드에서 리액트 멘토링을 하고 돌아왔습니다.
제가 첫주차에 멘토링 했던 수강생분들은 이제 막 프론트엔드 개발자로써 발걸음을 뗀 1주차 개발자 분들이셨습니다.
프론트엔드를 준비했던 예전 제 모습도 생각나서 너무나도 좋은 시간이었는데요. 어떤 질문을 해오셨고, 제 답변은 어땠는지, 멘토링을 통해 제가 느낀 점과 배운점까지 작성해보겠습니다.
1. 멘토링 체계
위코드를 수료한 프론트, 백엔드 개발자들이 멘토로 들어와 현업과 취준에 있어 도움이 될만한 이야기를 위코드 수강생분들께 해주고 코딩에 관한 궁금증과 해결방법에 대해 소통하며 해당 개념에 대한 온전한 이해를 도출하는 것이 최종 목표로써 진행되었습니다. 학생분들의 자발적이고 주도적인 개발역량 발전을 위해, 답을 알려주는 멘토링이 아닌, 문제상황을 해결하기 위해 어떤 방법들이 있는지 유추해볼 수 있는 기회를 제공하는 멘토링으로 진행되었습니다.
그럼 어떤 질문들이 들어왔었는지 확인해보겠습니다.
2. Q&A
우선 이번에 받은 질문들은 1주차 개발자분들 즉, 개발에 첫발을 내딘 분들의 질문이기에, 질문의 난이도를 생각하기보다 이 질문을 왜 하셨을까 에 대한 생각을 우선적으로 해보면 좋을 것 같습니다. 질문은 온전한 이해를 통해 해결하는 것이 같은 질문과 문제상황을 마주하지 않을 수 있기 때문에 '온전한 이해' 가 키 포인트라고 생각하시면 되겠습니다!
Q1) 상위 컴포넌트에서 상수데이터에 map 함수를 돌리고 결과를 props로 하위 컴포넌트에 내렸습니다. 하위컴포넌트에서도 결과물에 map 함수를 더해서 실행시키니 제가 원하는 더해진 결과물이 아닌, 곱해진 결과물이 나오고 있습니다.
위 질문에서는 간단히 말하자면 [1, 2, 3, 4] 에 대해 map을 돌려 하위컴포넌트에 내리고, 결과물에 대해 하위컴포넌트에서도 [5, 6, 7, 8] 데이터를 map을 돌려, [1+5, 2+6, 3+7, 4+8] 의 결과물을 만들고 싶다 하셨습니다. 하지만 기존 방법대로 구현하니 [1+5+6+7+8, 2+5+6+7+8 ...] 모양의 결과물이 나타나고 있었습니다. 이 질문의 요점은 하위컴포넌트로 내려진 map함수의 결과물과 하위컴포넌트에서 곱해진 map함수의 결과물을 유추하고 계시지 못하다는 점이었습니다.
A1) 구현하신 로직에서 상위컴포넌트의 map함수 이후 console.log! 하위컴포넌트에서 진행된 map 함수 이후에 console.log! 중간중간 결과물를 console을 통해 확인하여, map함수의 진행과정을 확인할 수 있도록 조언하였습니다.
이후 수강생분을 찾아가 확인해보니, map함수 진행과정을 이해하시고 상위, 하위 컴포넌트의 데이터를 합쳐서 결과물이 곱해지는 문제상황을 해결하셨습니다.
Q2) 버튼안에 a태그? link태그? 스타일 적용이 안돼요! (a태그와 link 태그)
문제상황을 보여드리자면
<Button>
<a href=''> 이동! </a>
<Link to=''> 이동! </Link>
</Button>a 태그 혹은 Link 태그를 사용하여, 페이지를 이동하고 싶은데, a태그로 만드니 text에 밑줄과 color:blue가 적용됩니다.
a태그와 Link태그는 className을 넣을 수 없는 태그로 알고 있는데 어떻게 스타일을 적용할 수 있나요?
A2) "왜 className을 넣을 수 없는 태그 생각하실까요?" 그 이유는 snippets (자동완성)가 뜨지않아서였습니다.
태그에 className을 넣을 수 있다는 것을 실제 코드를 통해 알려드렸더니 문제를 바로 해결하셨습니다.
보여지는 도움을 의지하 스스로 해보고 안되는지 확인까지 해볼 수 있는 것이 좋겠다 라는 말씀을 드렸습니다.
Q3) position fixed인 컴포넌트와 메인 컴포넌트를 flex로 나누고 싶은데, fixed라서 메인 컴포넌트가 중앙정렬이 안됩니다.
nav에 적용되어있는 fixed 스타일에 의해 메인 컴포넌트와 nav가 나누어 정렬이 되지않는 문제점이 있었습니다.
그 이유는 fixed로 지정된 컴포넌트는 공중에 떠있다고 생각해야하기 때문에 main컴포넌트와 nav컴포넌트가 나뉠 수 없기 때문입니다. 이 문제점에 대해 수강생분은 메인 컴포넌트에 margin을 주고, 간격을 맞추려고 하셨습니다. 하지만 이 방법의 문제점은 '보는 디스플레이'가 모두 동일하지 않기에 적합한 해결방법이 아닌 것도 알고 계셨습니다. 다시말해, 데스크탑에서는 올바른 화면으로 보일지몰라도, 핸드폰으로 봤을 땐 일그러진 레이아웃이 나온다는 문제가 있었습니다.
A3) 와이어컴포넌트 제작
이 방법은 수강생분이 찾으신 방법이자 저도 추천드렸던 방법입니다. fixed로 떠있는 nav와 겹쳐서 같은 크기의 div태그를 와이어형태로 제작하여 nav와 main를 나란히 자리하게끔 만든 방법입니다.
<Nav style={{ width: '100vw', height: '80px', position: 'fixed'}} />
<div style={{ width: '100vw', height: '80px'}} /> //Nav 와이어프레임!
Q4) 변수명을 어떻게 지어야할지 모르겠어요. 지금 만든 변수명들은 중복되는 이름들이 너무 많아요.
A4 ) 변수명짓기는 개발자가 일하는 시간중에 가장 많은 시간을 투자하고 있다는 통계가 있을만큼 중요하고 어려운 문제입니다. 변수명은 해당 태그가 어떤 역할을 하는지, 어떤 레아이웃에 속해있는지 알 수 있어야합니다. 다시말해, 제 3자 개발자가 내 코드를 봤을 때, 어떤 역할을 하는 태그인지 알 수 있어야하는 것입니다.
<div className="box" /> //잘못된 변수명 짓기!
<div className="FeedIconBox" /> // 어디서 어떤 역할을 하는지! 옳은 변수명!
Q5) map 함수 정리해주세요! 써보고 싶은데, 어떻게 사용해야하는지 모르겠어요!
A5) 사실 저한테 설명을 듣기보다 공식문서와 잘만들어진 관련영상을 찾아보시는게 좋겠지만, 설명과 함께 간단한 작동원리를 설명드렸습니다. 배열을 만들고, 원하는 모양의 css와 태그를 구현하여 실제 적용하는 방법까지 보여드리며 설명하였습니다.
Q6) css nesting 이유와 깊어지는 댑스에 대한 고찰
위 질문은 nesting을 통해 유지보수의 장점을 가져가고 싶은데, 깊어지는 태그의 댑스들로 인해 css의 nesting의 댑스도 함께 깊어지니, 잘 하고 있는 것인지 모르겠다. 라는 질문을 하셨습니다.
A6) 우선 nesting에 대한 고찰을 하시는 것은 굉장히 좋은 출발이라는 말씀을 드렸습니다. "nesting을 하는 이유를 알고 계시고, nesting의 장점이 흐릿해지는 문제점에 대해 고민하시는 자세. 아주 훌륭합니다!"
해결방법에 대해서는 컴포넌트와 태그의 묶음을 나누어 댑스를 쪼개라! 라는 말씀을 드렸습니다. 커다란 컴포넌트를 한번에 제작하면, react에서도, css에서도 유지보수의 장점이 사라지기 떄문이죠!
Q7) vw,vh를 사용하여 반응형 css 제작하기
A7) 사실 위 질문은 Q3을 질문하셨던 수강생분께서 나중에 찾아와 질문하셨던 것입니다.
모든 디스플레이에서 '동일하게' 보여지도록 만드는 것은 어떻게 구현해야할까요? 전 그 질문에 대한 해답으로 'vw, vh' 크기단위를 알려드렸습니다. 이 키워드로 본인의 css구성 단위를 뒤집어 엎으시며, 행복해보이는 노동을 시작하셨습니다
3. 느낀 점
1주차에 받았던 질문들은 문제상황을 해결하고 싶으신 마음에 정답을 받으러 가져왔던 질문들이 대부분이였습니다.
하지만, 정답보다는 문제 해결을 키워드주고 주도적인 문제해결을 할 수 있도록 하였습니다. 학생분들의 성취감과 문제를 마주하는 것을 두려워하지않도록 해드리고 싶었습니다. 학생분들께 앞으로 더 용기있는 코딩할 수 있도록 응원하며 멘토링을 하도록 하겠습니다!
