1. 수강생분들의 진도
2주차되신 학생분들은 '첫 통신' 을 이뤄냈습니다.
답답함과 어려움을 느낄 수 있는 과정인데, 호기심과 성취감으로 이를 극복해내신 분들이 많이 계셨습니다.
태풍이 오는 바람에 많은 수강생분들이 남아계시진 않았지만, 받았던 질문들을 살펴보겠습니다.
2. 받은 질문
Q1 ) 카테고리를 만들기 위해 이미지와 제목으로 이루어진 상수데이터에 map 함수를 돌려봤는데, 이미지와 제목이 같은 선상에 배치가 안돼요.
A1 ) 위 질문에 대한 요점은 display 형태 파악을 간과하셨다는 점입니다.
flex-direction columns 으로 적용시킨 부모영역에서 div로 상수데이터의 이미지와 제목을 나열하셨는데, div의 display 기본 속성은 'block' 입니다. 때문에, div가 가진 영역안에는 다른 태그의 배치가 불가능하게 되는 것입니다.
이를 해결하기 위해 display 속성을 변경하여 해결할 수 있도록 도와드렸습니다.
개발자 도구를 보고 어떤 태그에 어떤 속성이 적용되어있는지 확인해가며, 원하는 스타일을 완성해내셨습니다.
Q2 ) 댓글기능을 구현했는데, 유저의 프로필이미지와 닉네임을 통신으로만 받아와야하는건가요? mock데이터로 사용해도 되는건가요?
A2 ) 이 질문은 프론트엔드와 백엔드의 역할에 대한 고민을 하셨다는게 느껴졌습니다.
먼저, 통신에 대비한 더미데이터로써 활용한 방법으로 mock데이터의 역할과 이점에 대해 설명을 드렸습니다. 그리고 통신으로 유저닉네임과 이미지를 받아와야하는 이유도 알려드렸습니다. 로그인한 유저의 정보를 통신으로 받아와야 동적으로 유저의 닉네임, 이미지를 띄울 수 있다는 요점과 함께 통신에 관한 전반적인 지식을 전달하였습니다.
Q3 ) css에 nesting으로 스타일을 작성했는데, 어떤 요인으로 스타일이 적용되지않아요!
A3 ) nesting은 유지보수에 적합하고, 스타일의 적용위치를 파악하기에 유리합니다. 하지만 nesting의 순서가 꼬이거나 휴먼에러로 스타일이 적용되지않으면 해당 태그의 자식태그들 까지 적용이 되지않는 특징이 있습니다.
이 질문을 하러오셨던 학생분도 어느 태그까지는 스타일이 적용되는데, 자식태그로 파고들어가니, 개발자도구에 스타일이 적용되고 있지않다는 것을 확인하였습니다. 그럼 두가지를 확인해야합니다. 위에서 말했던 nesting 오류와 휴먼에러입니다. nesting에 이상이 있는지 확인해보니 문제가 없었습니다. 이후 className, 혹은 css의 이름에 오류가 있는지 확인해보니 className에 오타가 확인되었고, 이를 수정하니 모든 스타일이 잘 적용되었습니다.
이 질문을 통해 수강생분께 문제를 고치는 것보다 문제의 요점을 파악할 수 있는 기회로 삼았으면 좋겠다는 말을 전달하였습니다. 휴먼에러는 쉽게 일어날 수 있고, 누구든 실수할 수 있는 영역이라는 것을 기억해주셨으면 좋겠습니다!
Q4) promise 사용방법을 알고 싶어요!
A4) 처음 이 질문은 저도 공부가 필요한 영역이라, 수강생분께 양해를 구하고 공부를 한 뒤에 답변을 드렸습니다.
promise는 비동기적 코드진행을 위해 사용하는 함수입니다.
promise는 기본적으로 콜백함수를 인자로 받습니다. resolve와 reject를 받는데, resolve는 함수연산에 성공했을때, reject는 연산에 실패했을 때 실행됩니다. promise 함수를 생성하고 사용할 곳에서 then, catch, finally를 통해 비동기 함수를 핸들링할 수 있는 것입니다.
3. 느낀 점
실제 통신을 경험해보고 개발자로써 합을 맞춰본 수강생분들이 개발에 더욱 흥미를 느끼셨으면 좋겠다는 마음이 듭니다.
다양한 매서드와 함수를 경험하여 자신만의 코딩 스타일을 만들어나가실 수 있도록 열심히 돕겠습니다.
48기 파이팅!
