211102 프론트엔드 스쿨 2일차

포트폴리오 워크샵 (임동준 코치님 - 우아한 테크코스)

09:00~15:50 진행

0. 목표

• Working Backwards 방법으로 역량순 포트폴리오 만들기
• 피드백 루프 설계하기
  
  

1. 진행 방식

• 5명 랜덤 편성 소규모 팀 회의
• Working Backwards 방법
  • Working Backwards가 뭘까? 추론해보기
    계획 → 목표가 아니라 목표 → 계획
  • 3개월 뒤 내 역량은 어떨까? 부터 생각해보기
    내가 지금 포트폴리오에 적을 수 있는 역량말고 적고 싶은 역량을 먼저 생각해본 뒤 계획, 피드백을 통해 실현하기
    
    

2. 질문

• Working Backwards란 단어를 들으면 어떤 느낌이 드나요
  • 추론하는 습관이 필요하다
• 좋은 포트폴리오란?
  • 내가 한 거 말고 잘하는 걸 적자
    어떤 걸 잘하기 위해 무얼 했고, 어떤 시행착오를 겪었는지 담기
• 내 포트폴리오에서 보여줄 '잘'하는 역량 3가지
  • 내 역량이 무엇으로 빛날지, 어떤 부분을 장점으로 삼을 것인지, 앞으로 할 거 말고 무엇을 잘하고 싶은지 정하기
• 역량을 정리하면서 어떤 점이 막연했는지, 다른 사람들이 쓴 역량을 보면서 배운 점은 무엇인지, 내가 작성한 역량을 갖췄다고 상상했을 때 구체적으로 무얼 해볼 수 있을지
• 선택한 역량을 어떻게 체크하고 피드백받을 수 있을까? (체크리스트 작성)
  • 사소한 피드백도 가능
  • 피드백을 반영할 수 있는 환경 구축이 필요하다
    
    

3. 액션 플랜

• 다음 스프린트(11/08) 전까지 실행할 계획을 1순위부터 3순위까지 정하기
  
  

4. 느낀 점

• 이번 워크샵을 통해서 스프린트 진행 방식이나 필요성에 대해 알게 되었다. 스프린트 자체가 처음이라 낯설었는데 팀원들이 적극적으로 의견을 내주시고 진행을 잘해주셔서 잘 따라갈 수 있었다. 협업의 세계를 살짝 맛 본 느낌이다.
• 내 머릿속 생각을 말로 꺼내고 글로 정리하는 데 시간이 걸리는 걸 느꼈다. 부유하는 계획들을 구체적으로 서술해서 정리해야겠다.
• 내가 설정한 역량을 어떻게 포트폴리오에 녹여낼 것인가에 대한 고민을 해봐야 한다.
• 이전에 만들어둔 포트폴리오 디자인을 그대로 쓰고 싶은데 괜찮을지 고민이다. 포트폴리오에 대한 진도가 더 나가면 피드백을 요청해봐야겠다.

수업 내용 (이호준 강사님)

16:00~18:00 진행
모든 내용 X
새로 알게된 내용, 헷갈리는 부분, 중요한 부분만 기재함

1. 폼 태그

• form 속성
  • action : 입력 값을 전송할 페이지를 나타냄
  • method : 폼의 데이터를 전송할 방법을 정의함
    • get : 웹 서버에 데이터를 요청할 때 사용, 주소에 데이터를 입력하는 방식
    • post : 파일을 올리거나, 보안이 필요한 데이터를 전송할 때 사용, 주소에 입력 내용이 나타나지 않도록 함
  • name : 폼 이름을 지정함
    
    
• form 타입
  • radio : 단일 선택
  • checkbox : 다중 선택
    
    
• label : 시각 장애인들도 폼을 사용할 수 있도록 해주는 시멘틱한 요소
  시멘틱 요소가 있으니 input을 설명하기 위해 p 쓰지 말 것

❌ <p>이름 : </p>
   <input type="text" name="name">

⭕ <label for="user-name">이름 : </label>
   <input type="text" name="name" id="user-name"> 

오늘의 TIP

1. 개발자도구를 이용한 전체 스크린샷
명령어 실행 - screenshot 검색 - 원본 크기 스크린샷

2.참고 링크
자바스크립트 코테 : http://paullab.co.kr/codefestival.html
mdn a attribute : https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
웹표준 체크 : https://validator.w3.org/nu/
사용할 수 있는 요소와 사용 불가능한 요소를 벤더사들이 직접 업로드하는 사이트 : https://caniuse.com/
포스트맨 : https://www.postman.com/

새로 알게 된 내용

• label이 시멘틱 요소인 줄 몰랐다 😢 p 태그로 input을 설명한 경험이 있다... 찾아서 수정하고 앞으로 주의하자!

과제

정식 과제는 아니지만 아래 링크 마크업하기!
https://kstartupforum.org/