[멋사🦁] 1주차(화) 워크샵, 마크업 클론 과제

멋쟁이 사자처럼🦁 프론트엔드 스쿨 1기 1주차(화) 회고 - November 2, 2021

너무 열의가 넘치는 나머지 금토일월 4일간 너무 달려서, 체력 분배를 해야겠다는 생각이 드는 오늘이다. 어질어질.. 😵 체력 관리도 능력이다 !

[ 워크샵 회고 ]

우아한 테크코스의 임동준 코치님이 워크샵을 진행해 주셨다 👏🏻
오늘 하루가 아니라 2번의 워크샵, 5번의 스프린트 회고까지 총 7번 뵙게 된다!

5명씩 팀 빌딩을 했고, 7번 동안 계속 같은 팀이라고 한다. 줌 수업 중간중간에 소회의실에 모여 이야기를 나누는 식으로 진행되었다. 구글 스프레드시트를 활용한 온라인 협업 방식이 내게는 신선했다.
우리 팀은 다섯 명 다 비전공자였지만 개개인이 노력을 통해 역량도 많이 발전했고, 개발 분야에 대한 지식을 많이 갖추게 된 사람들이었다. 나도 정말 더 열심히 해야겠다는 생각이 들었다 💪🏻
(체력 분배를 위해 공부와 휴식의 중간점을 찾는 것이 내게는 숙제일 것 같다ㅠㅠ 지금까진 모 아니면 도 식이었어서...)

대규모 멘토링이라고 하셨는데 정말로 한 명 한 명 코멘트를 주시는게 너무 대단해 보였다. 전달력도 좋으시고 엄청난 에너지가 느껴져서, 에너지 바닥인 나는 닮고 싶다는 생각이 들었다.
1차 워크샵 주제는 '워킹 백워즈(Working Backwards)' 방법으로 멋사 기간 동안 향상 시키고 싶은 역량 세 가지 설정이었다. 개개인마다 실천 가능한 역량별 액션 플랜을 정해 다음 스프린트 회고 때까지의 피드백 루프를 설계하는 것이 이번 워크샵의 목표였다. 액션 플랜에는 '시간' 처럼 측정가능한 지표가 들어가는 것이 좋고, (당장 개선하지 못하더라도) 사용자 입장에서 불편한 점 작성하기라는 플랜도 좋아보였다.

다른 사람들 플랜을 보면서 공부 방향에 대한 갈피를 못잡고 있었는데 이제 어느 정도 알 것 같아서 너무 좋은 시간이었다. 장점이 돋보일 수 있는 역량순 포트폴리오를 만들기 위해 스프린트 시간마다 Q&A 디테일을 채워나갈 것이라고 하셔서 앞으로가 너무 기대된다.

다만 걱정되는 것은 내가 모르는게 너무 많아서 앞으로 들이닥칠 새로운 지식들을 공부하고 체화하는 동시에 포트폴리오 관리가 가능할까 하는 것인데... 아직 상황이 안 와봐서 결국엔 틈틈이 공부를 더 해놓자! 라는 결론을 내렸다.

> 내가 정한 역량 목표와 액션 플랜 1, 2, 3순위

1. <협업 능력>
매일 잘 정리한 TIL 1개씩 - 다른 동기분들 TIL도 보고 배우기 (응원 댓글!)
2. <서비스 구현 능력>
JavaScript 공부 - 평일 30분 이상, 주말 2시간 이상
3, <문제해결능력>
코딩테스트 문제풀이 첫 도전!

코테는 주말에 도전해 볼거고, JavaScript 공부 자료는 오늘 좋은 정보와 자료들을 너무 많이 알게 되었다. (행복😊) 일단 평일 동안엔 하나만 파보고, 주말에 내게 맞는 자료들을 탐색해봐야겠다.

[ 공부 ]

워크샵이 끝나고 남은 2시간 동안 이호준 강사님께 수업을 들었다.

> 강의요약

• semantic HTML !! 재차 강조
• 웹 표준 지키기 "can i use", "Nu html checker" 활용
• <form>, <label>, <input>, <button>, <select> 실습 시간
• <form>의 동작 방식은 request와 response를 이해할 수 있어야 한다.
• <form>의 method 속성
  - get : submit 시 주소에 데이터를 입력하는 방식! password 등 중요 정보는 안된다. 주소가 유추 가능하면 좋지 않다.
  - post : 파일 및 보안이 필요한 데이터 전송

<form action="./010.html" method="get">
  <label for="id">아이디 : </label>
  <input type="text" name="아이디" id="id" />
  <label for="pw">패스워드 : </label>
  <input type="password" name="패스워드" id="pw" />
  <button type="submit">로그인</button>
</form>

• "<form>으로 묶인 태그들 중 <input>들의 data를 submit이라는 type의 <button>을 눌렀을 때 action이 가리키는 파일에 get이라는 method로 던져준다." (디코에서 동기분이 잘 정리해주셔서 가져옴 👍🏻)
• (+ 다시 정리) <input>의 data 값을 submit하면 get method에서는 action="./010.html"로 request를 보낸다. URL에 치는 것과 결과가 같다.
• <label>의 for 속성은 폼 컨트롤(<input>, <select> 등)의 id값과 대응해야 한다.
• <label> 역시 시맨틱 요소! 단순히 input 옆에 텍스트를 붙이지 말고 적극 활용하자.

<label for="male">남</label>
<input type="radio" name="성별" id="male" value="남" />
<label for="female">여</label>
<input type="radio" name="성별" id="female" value="여" />

• <input>의 type="radio" 로 여러 항목 중 하나만 선택(택1. 남/여 처럼)하게 만들고 싶을 때는 name 속성값을 통일시켜야 한다.
• <input>의 type="checkbox"는 여러 항목 중복 선택에 쓰인다.

<form action="./009.html" method="get">
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시</option>
  </select>
  <button type="submit">선택</button>
</form>

• 127.0.0.1:5500:/009.html?device=iphone
  IP:PORT:/파일?querystring
  &로 연결. #은 문서 내 id.

[ 과제 ]

어제에 이은 두 번째 마크업 클론 과제!

이번에는 코리아스타트업포럼 홈페이지를 보고 만들어보는 거였는데, 어제처럼 욕심내지 않고 최대한 시맨틱 태그 사용에 유의해서 작성해보았다.

어제도 나름 시맨틱 HTML을 짜본다고 엄청 노력한 거였는데...😥 오늘 재현 강사님의 클린 코드를 보고 머리를 한 대 얻어맞은 기분이었다. 이게 진짜 시맨틱한 코드구나 싶었다.
우선 <div> 사용이 하나도 없었다. 시각 장애인을 위해 <img> 태그에 alt 어트리뷰트로 스크린리더기가 읽을 수 있게 설명이 필요하다는 것, <h1>을 화면에서 표시되지 않게 하더라도 페이지의 제목 기능을 할 수 있게 적어둔다는 것 등...

아직 나는 멀었다,, 그래도 어제의 나보단 더 나은 오늘의 내가 되었다! 😊 주말에 시맨틱 HTML에 대한 정리를 스스로 해봐야겠다.

https://ddooyn.github.io/front-end-school/assignment/211102_markup-clone/