[TIL] Working Backwards

✅ 첫 워크샵🤣

우테코에서 교육을 하시는 메이커준님과의 워크샵을 진행했다. 입문단계에서는 무얼 해야하나 고민의 시간이 많은데 고민을 해결할 뾰족한 플랜을 짜기란 쉽지 않다. 하지만 그건 어제의 나의 이야기이다. 집단지성의 힘을 받아 다음주 월요일까지의 계획을 이미 짰기 때문이다😎
아마존에서 쓰이는 방법인 워킹 백워즈 방식, 아이디어에서 상품 고객순이 아닌 그 역방향으로 플랜을 짜는 것이다. 당장 다음주의 나 혹은, 3달 뒤의 프론트엔드 개발자의 나를 찍어놓고 역순으로 플랜을 짜는 것이다.
결론부터 이야기하면 다음주까지 모던 자바스크립트 튜토리얼을 보고 공부하기로 정하였다. 구체적인 양은 우선 해보고 조정해 나갈 예정이다.(현재로서는 1일 3챕터)

---

✅ html form tag

기본적으로 form 태그는 정보를 입력받는 곳이다. 즉, 받은 정보가 있다는 것은 가는 곳도 있다는 것이다. 여기서 client & server, request & response의 개념이해가 필요하다. 요청하는 방식에 따라 get post로 나뉘는데, 우선은 get은 url형태로 보낸다 정도로만 알아두고 마크업에 집중해보자.

	<form action="보내질곳" method="전송형태">
		<label for="인풋아이디">아이디</label>
		<input type="text" name="key" id="고유값">
		<input type="password" name="" id="">
		<button type="submit">Login</button>
	</form>

form으로 정보를 받아준다고 열어준뒤 받을 정보들의 특성에 따라 input을 넣어주고 label로 설명을 해준다. 주의할 점은password는 화면상에서 비밀번호 형태로 보여지기만 할뿐 암호화가 되어서 전송이 되는 개념이 아니다.

• action에는 고객으로 받은 데이터를 보낼 곳을 의미한다.
• for에는 설명을 해줄 해당input의 id가 와야한다.
• key라고 적어준 부분은 데이터 전송시 key&value로 mapping되어 보내지는데 그때 name부분이 키 값으로 들어간다.(라고 1차적으로 이해했다./?key=value&key=value 이렇게)

    <form action="" method="">
        <input type="date"><br>
        <input type="time"><br>
        <input type="range"><br>
        <input type="color"><br>
        <input type="radio"><br>
        <input type="checkbox"><br>
        <input type="file"><br>
        <textarea name="name" rows="8" cols="80"></textarea>
    </form>

다양한 정보를 받는 모습이다. 코드보다는 모습을 보는게 훨씬 이해가 쉽다.

• radio는 동일 name들 중 하나만 선택된다.(성별, 최종학력 등)
• checkbox는 다중 선택이 가능하다.

    <form action="" method="">
        <label for="myDevice">당신의 최애 스마트폰은?</label>
        <select name="device" id="myDevice">
          <option value="iphone">아이폰</option>
          <option value="galaxy">갤럭시</option>
          <option value="blackberry">블랙베리</option>
        </select>
        <button type="submit">선택</button>
      </form>

• select는 하위 option값 들이 드롭다운 되면서 선택이 가능하다.
• option의 value는 정보가 전송될 때 device라는 key의 value로 보내진다.

    <form action="">
        <fieldset>
        <legend>개인정보 제공 동의</legend>
        <label for="checkAgree">개인정보 제공에 동의하십니까?</label>
        <input type="checkbox" name="agree" id="checkAgree">
        </fieldset>
    </form>

• fieldset은 자식요소로 사용되는 요소들을 그룹화 할 수 있다.

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

위에서 말한 radio의 동일 name상에서 하나만 선택할 수 있도록 구현한 모습이다.

    <form action="" method="">
        <label for="python">Python</label>
        <input type="checkbox" name="언어" id="python" value="PYTHON"><br>
        <label for="javascript">Javascript</label>
        <input type="checkbox" name="언어" id="javascript" value="JAVASCRIPT"><br>
        <label for="c">C</label>
        <input type="checkbox" name="언어" id="c" value="C"><br>
        <button type="submit">sign-in</button>
    </form>

이처럼 checkbox는 동일 name에서도 다중으로 선택이 가능하다.

---

✅ 끝으로

• F12 -> Ctrl+Shift+P -> screenshot : 웹 스크린샷 명령_원하는 부분, 전체도 가능

당분간 많이 쓸 것 같아서 여기에도 적어둔다.
워크샵이 주를 이루었던 하루였다. 120명의 생각을 알 수 있는 기회는 흔치 않다. 나보다 높은 레벨의 사람의 마인드와 나와 비슷한 레벨의 마인드를 섞어서 보다보면 어느정도의 길이 트여지는 기분이다.
오티를 포함해도 정확히 3일째 되는 날이다. 아직까지 '나의 길'을 설정하고 달리는게 불안하지만 첫 글에서 말했듯이 별 수 없다. 답을 알고있다. 골인만 하자!!

"마지막 순간에 남들만큼 하려면 지금 많이 + 빨리 + 그리고 그냥 해야한다."