[TIL]부트캠프 11/02

DaePyeongSeo·2021년 11월 2일
5

TIL

목록 보기
1/6
post-thumbnail
post-custom-banner

🥕우아한 테크코스 임동준 강사님의 워크샵 근데 이제 포트폴리오를 곁들인

오늘은 격주로 수요일마다 성장에 도움을 주시는 임동준 강사님의 첫번째 워크샵이다. 부족한 부분에대해 피드백을 주고 받는 스프린트 회고도 진행하시지만, 나아갈 방향에 대해 많은 정보를 워크샵을 통해 공유해주신다.


📑좋은 포트폴리오?

제일 중요한건 내가 포트폴리오를 통해 ''하는 역량을 보여주어야 의미가 있다는 점이다.
그러기 위해선 시야는 넓게, 전문성은 깊게 공부해야 되지 않을까..? 😂
물론 기본부터 ㅎㅎ;

끌어올릴 나만의 역량 우선순위

1. 효율적이고 유지보수의 용이성을 높이는 코드 리팩토링

  • 코드리뷰 꼭 하기
    왜why? 코딩할 땐 내가 실수한지 모른다. 오류에 유연하게 대처가 가능할 뿐더러 코드를 일관된 스타일로 깔끔하게 유지할수 있다. 다른 사람들의 코드를 보면서 배울 기회도 많이 얻을수 있다.

  • 재사용 가능한 모듈 개발
    자주 사용할거 같은 기능들을 모듈화하여 재사용하자. 하지만 중복 개발에 조심하자..

  • 별 의미없는 이름의 변수/함수 만들지 말자
    변수 만들때 외우거나 유추할수 있도록 만들어 버리는데, 나중에 까먹는다... 함수 만들때도 애매하게 이름 짓지 말고, 이 함수의 기능을 정확히 나타낼 수 있는 이름을 쓰자.

2. JavaScript & Markup역량

  • 능동적으로 피드백 받자.. 있을 때 잘하자 😅

  • 과제나 실습하고 남는 시간이나 주말에 부족한거 채우기.
    결국 많이 해야 익숙해진다. 시중에 좋은 강의 많으니까 잘 활용하기!

  • FE개발자 강사님이 직접 짜신 코드 보고 내 코드랑 비교하기


📝TIL

Form 태그

  • method로 get과 post가 있다. 요건 Java Spring 할때 진짜 지겹게 봤다 ㅋㅋ
  • action으로 입력 값을 전송할 페이지 설정
  • name으로 폼 이름 지정

input 태그

  • 사용자가 폼태그 안에서 입력할 수 있는 공간을 만들어 주고, 사용자에게 정보를 입력받는다.
  • type 속성에서는 text, radio, password, button 등을 지정 가능
  • name 속성값은 서버로 전송된다. *

label 태그

  • 단순한 input 태그를 설명하는 텍스트를 옆에 사용할 수 있지만, 웹 접근성을 위해 label 태그를 사용하도록 하자
  • for 속성의 값은 해당 레이블이 속한 폼 컨트롤의 id값과 일치시켜야한다. 왜why? 사용자가 클릭할 수 있는 영역이 늘어나서 쉽게 사용 가능하다.

select & option 태그

  • select는 드롭다운 리스트 박스를 생성하는데, 이 때 사용자가 선택해야 하는 리스트 박스의 아이템을 만들 때는 option 태그를 사용한다.

  <label for="myDevice">현재 사용하고 있는 스마트폰의 제조사를 선택해주세요</label>
  <select name="device" id="myDevice">
    <option value="iphone">아이폰</option>
    <option value="galaxy">갤럭시폰</option>
    <option value="nothing">LG폰</option>
  </select>

button 태그

  • 버튼태그의 타입 속성은 행동 방식을 설정한다.
  • submit은 클릭시 서버로 데이터를 전송한다.
  • 데이터 전송 안할려면 type을 button으로 설정하자
  • input과 button중에선 스타일 적용이 수월한 button을 사용하도록 하자

11월 1일 Markup 피드백

기존에 지저분 했던 태그를 전부 지우고, 시맨틱 태그로 바꾸었다.
1. 가운데 img와 설명란은 figure와 figcaption태그를 사용
2. footer 부분은 dl dt dd태그 사용 & 이때 dt class속성값을 다음과 같이 주어서 짝이 없는 dt를 화면 밖으로 밀어냈다.

.sr-only {
            position: absolute;
            left: -10000px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
  1. 최대한 div 태그 자제!

📆11월 첫째 주 목표설정(~8)

  1. 어제 실습으로 했던 Markup 페이지 다시 만들기
  2. 상황에 맞게 지향&지양 해야할 태그 항상 고민하면서 Markup
  3. 피그마 과제 수행 후 Github 커밋
  4. 주말 Udemy 블랙커피 Javascript 강의 듣고 실습 후, 블로그 정리 및 Github 커밋
  5. 주말 웹사이트 클론코딩
  6. 매일 블로그에 TIL 작성
profile
https://pyeongdevlog.vercel.app
post-custom-banner

0개의 댓글