워크샵'개발자로 성장하기'

강사님 : 임동준 aka.메이커준

좋은 포트폴리오란?

내가 한 거 말고 내가 잘하는 거를 어필해야함. 즉, 장점 어필
-> 내가 무엇을 잘하고 싶은지 역으로 생각해 보기.

내가 보여주고 싶은 나의 역량은?

1. 기술역량
   기본기 + 유지보수성이 좋은 코드
   -> 현업 상황과는 조금 다를 수 있다 하더라도, 포폴에서는 코드를 원론적으로 짜는 게 중요하다고 생각
   -> 코드는 한 번 짠다고 끝나는 게 아니라 계속적으로 유지보수를 해야하기 때문에 유지보수성이 중요하고 생각. 그리고 코드는 시간이 지나면 내가 짠 코드도 남이 짠 코드처럼 되기 때문에, 미래의 나를 위해서라도 유지보수성이 좋은 코드를 짜는 것이 중요하다고 생각.

2. 협업 능력 & 소통 능력
   소통 방식 & 갈등 관리 & 팀 내에서 본인의 역할
   -> 개발은 대부분의 경우 다수의 사람들과 함께 협업을 하게 됨. 그렇기 때문에 팀으로서 일하는 데에 익숙해져야하고 소통이 중요하다.

3. 소비자 니즈 파악
   명확한 주제를 가지고 있는지. 그리고 현실 가능성이 있는지 등
   -> 내가 만들고 싶은 걸 만드는 것도 중요하지만, 사람들이 필요로 하고, 실제로 쓰일 수 있는 서비스인지를 생각해야한다.

피드백을 위한 체크리스트

1. 나의 체크리스트

소비자 니즈 파악
1. 소비자 입장에서 실제 서비스를 사용해보고, 장단점 찾기, 개선할 점 찾기
2. 장단점과 개선할 점을 이용해 나만의 웹사이트 만들어보기
( 팀원들에게 공유하여 피드백 받기 )
3. 주변 지인에게 웹 서비스를 사용했을 때 느낀점을 물어보고 문서화해두기
4. 관심있는 분야 뉴스레터 읽고, 트렌드 파악하기 - 블로그 기록

2. 나에게도 도움이 될 체크리스트

소통 능력
1. 코드 리뷰 시간 갖기
2. 회의 진행시 회의록 작성하기
3. 피드백 받으면 문서화하기
4. 매일 수업 끝나고 회의하기 ( 20분 )
5. 블로그 댓글 달아주기 (응원, 피드백 )

기술 역량
1. 내가 짠 코드를 사람들에게 설명하는 시간을 갖는다.
2. 블로그에 기술 설명 글을 써본다.
3. 자바스크립트 책 정해서 읽기
4. 모던 JavaScript 튜토리얼 홈페이지 정독하기
5. 자바스크립트를 활용한 미니 게임 만들어보기
6. JS로 만든 미니게임을 리액트로 만들어보기
7. 하루에 백준 알고리즘 한 문제씩 풀어서 커밋하기 -> 이건 나중에
8. 자주 쓰이는 코드를 문서화한다.

첫 번째 액션 플랜 (~11.8)

1순위. 기술역량
1일 1포스팅 (in velog)

2순위. 협업 및 소통 능력
팀원들과 회의 진행 시, 회의록 작성하여 남기기 (피드백 주고 받기)

3순위. 소비자 니즈 파악
내가 관심 있고, 흥미를 느끼는 분야에 대한 뉴스레터를 찾아보고 구독하기,
그리고 가능하다면, 그 내용에 관련하여 블로그에 포스팅 하기

---

HTML

WHATWG URL's origin property

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

출처 https://nodejs.org/api/url.html#url

오늘 여기서 자세히 배운 건 query=string 부분이다. (#은 문서 내에서의 아이디.)
method="get" 방식으로 정보를 보내면, 서버는 파싱해서 여기에 대한 데이터를 찾아서 표시해주고, query=string 부분에 표시된다.

예를 들어, http://paullab.co.kr/?btable=notice&keyword=제주코딩 같은 경우는,
? 뒤에 btable=notice&keyword=제주코딩 이 query=string 부분이고,
btable:notice
keyword:제주코딩
이런 식으로 파싱된다.
get 방식은 url창으로 request를 보내는 것이라고 생각하면 쉽다.
즉, get 방식으로 데이터를 보내는 것은, 우리가 url을 치는 것과 같음.


그러므로 url에 나타나서는 안 되는 정보는 get 방법으로 보내서는 안되고, post 등 다른 방법을 이용해야한다. 대용량의 데이터 같은 경우도 post와 같은 방식으로 보낸다.

form 태그와 get

html의 form 에서 정보를 만들어 서버에 보낸다.

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

이 form에서는, 이 안에 있는 모든 input 의 데이터를 submit 타입의 button을 눌렀을 때, (action 부분에 있는) ./010.html로 (보통의 경우는 서버로) get 이라는 method를 통해서 보낸다는 것을 뜻한다.
데이터는 'name=우리가입력한데이터' 가 함께 보내진다. 즉, name이 없으면 url에 안 나타남.
label은 input이 무엇인지 알려주는 태그이다. label의 for과 input의 id가 맵핑된다.


위 코드대로면, 아래와 같은 form이 생성되는데,

아이디 : 패스워드 : 로그인
각각 vnfdusdl, 1234 를 치고 로그인을 하게 되면,
url에는 아이디=vnfdusdl&패스워드=1234 이렇게 나타남.

<input type="radio">

checkbox와 다르게, 항목 중 하나만 선택이 가능한 것.
같은 name 값을 가진 내에서는 체크가 하나만 가능함.

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

여
남
이 경우에는 위와 같이 여 와 남 중에 하나만 체크 가능하다.
그리고 이 경우에는, name=value 값이 데이터로 서버에 보내진다.
즉, 성별=여 혹은 성별=남 이 보내진다.

select 태그

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

위 코드는 아래와 같이 나타난다.

아이폰 갤럭시폰 LG폰 선택
name=value가 서버로 전달된다. 즉, /?device=iphone 등의 형태로 전달된다.

---

📢 오늘의 회고

오늘부터 매일 짧게라도 회고를 남겨보려고 한다 ㅎㅎ
워크샵을 통해서 내가 원하는 최종 목표에 나아가기 위해서, 어떤 작은 목표들을 세우고 그걸 매일 해나가야 하는지 피드백을 주고 받을 수 있었다. 덕분에 세부 목표를 좀 더 명확하게 설정할 수 있었고, 다른 분들의 이야기를 들으면서 자극도 받았고, 동기부여도 되었다. 그리고 집단 지성을 통해서 많은 꿀팁과 정보들을 얻을 수 있었고, 앞으로 3개월 간 함께 공부해나갈 좋은 팀원이자 동료들을 만난 거 같아 좋다. 서로 응원하고 도움을 주길 바라고, 각자 목표를 향해 나아가는 길이 덜 고되고 덜 외롭길 바란다!! 으쌰으쌰 💪


임동준 강사님이 회고에 관련하여 작성하신 글
https://blog.makerjun.com/improvement/retrospect