[멋사 FE 스쿨] 16일차 리뷰

오전(09:00~11:50) 수업 w/ Wade

morning break

슬슬 취업 먼저하는 사람들이 생길텐데 너무 힘들어하지 말자. 사람을 뽑는 회사는 많고 자리는 많다!

실전 테크닉 수업 이어서

ir 테크닉

• phark method

• clip이라는 속성은 요소의 부분을 잘라주는 것인데, absolute position이 있어야만 작동한다. → 보이지 않게 잘라서

• 이미지 최적화? 쌤은 kraken optimizer 이용

  → 용량이 적으면 물론 렌더링도 용이함

• 이미지 자를 때 이용하면 좋은 사이트 https://bennettfeely.com/clippy/ → css를 마우스로 선택한대로 반환해준다.

• clip의 문제? → mdn 검색해보면 브라우저 호환은 굉장히 좋다. 하지만 deprecated .. 비추

  → 대신 clip-path가 새로 나온 것

• 우리나라만 유독 익스플로러 지원이.. 집착하는 경향이 있다 → 아마도 우리나라 explorer 의존도가 높은 편이라

• 네이버 blind에 margin -1px는 왜 있을까..?

  → 본인에 hidden 이데 왜..?

  네이버 면접 가서 이런 질문하면 좋게 보일 듯

  본인 깃헙, 포트폴리오 이런 곳에다가 margin -1px에 대하여!! 빨간 글씨로 강조해서 보여주기

  코드 하나, margin 1px 하나 허투루 보지 않는 사람이다!는 인식. 피곤해하는 사람이 있을 수도 있지만

CSS Sprite 기법

• 이미지 태그가 많으면 많을 수록 브라우저 로딩 시간이 길어질텐데 img 태그를 계속 쓰지 않고 이미지를 배치해서 한꺼번에 다운이 되도록 해주는 것

• 각각을 다운 받느니 한 이미지에 다 담아두고 다운 받는 것 이미지 '한 판'을 만드는 것

• sprite를 도와주는 사이트가 있긴 하다. css image sptrite 이런 식으로 검색 https://www.toptal.com/developers/css/sprite-generator/

  → 여기에서 각 아이콘, 이미지들의 위치까지 css 값을 반환해준다.

• image sprite를 사용하면 안되는 때는 언제일까?

  → 변경될 수 있는 이미지일 때는

  만든 이미지 자체가 너무 큰 경우가 있다. 용량을 절약하려고 쓴건데 sprite 이미지 자체가 너무 클 경우는.. 적당한 크기로 sprite를 하는 게 어떨까

• 모르는 질문에 대해서는 모르면 모른다고 하자!

• 폰트를 이미지화 하는 경우? 한번 쓰이고 안쓰일때

레티나 디스플레이 대응법

• 화면에 우리가 그리고하 하는 사이즈의 2배 이미지를 준비하자! 말이 좋아서 2배지 가로 세로 2배 해서 4배 이미지 이럴 경우 디자이너에게 요청
• 피그마에서 2배로 되는 게 그냥 늘리는게 아니라 제대로(?) 늘려준다.
• min-device-pixel-ratio! 레티나 대응
• 레티나 디스플레이가 아닌 경우는 일반 이미지가 다운 되도록 해주기

이후 실습

---

오후(13:00~18:00) 수업 w/ Licat

breaktime

• 자신감에 대하여 → 실무를 얼마나 많이 해봤느냐

  하지만 우리가 실무를 경험해보고 회사를 입사하느냐? 아니다

  따라서 1. 조급해하지 않기 2. 불안해하지 않기

  → 조급, 불안, 걱정도 다 에너지다. 에너지 쏟을 여유가 없다. 실력이 떨어진다 느껴도 시간이 해결해준다

한가지 사례

완전 비전공자 처음 학원 하셨을 때 2명 수강..ㅠ FE 개발 희망자

작은 회사 → 이스트소프트 → 네오플 → 외국계

회사를 옮길 떄마다 자신감이 는다. 연차가 쌓이고 열심히하면 기회가 온다. 시간이 해결해줄 것

걱정할 에너지조차 성장하는데 쓰기!!

• 기업에서 요구하는 능력치가 나에 대해서 전부 설명해주지 못한다. 그니까 기죽지 마!!

대표님도 9번 떠...ㄹ...어지셨다공...

Bootstrap

여기에서 방법은 야생에서의 방법

• 페이지를 격자처럼 생각
• col-12개인 격자 모양으로 페이지를 생각
• 이래봬도 홈페이지 단가 비싸다
• 반응형 모바일로 최적화 되어 보이게 되게 되어있다. 굉장히 빠르고 편하게. 대부분의 언어와 잘 붙는다(?)
• 웹 표준을 지키는 사이트라면 bootstrap 안쓴다.
• bootstrap이면 하루만에 홈페이지 뽑아낼 수 있다.
• 한 줄에 12col보다 많으면 밑으로 빠진다.
• 주제가 바뀔 때마다 container 써주기
• 디자인이 바뀔 경우 새로운 row를 써주고
• 부트스트랩 탬플릿 구매가 보통 더 예쁘다

막간 여담

• 우리가 기업 정보를 어떻게 알지, 기업이 우리의 실력을 어떻게 알지 연결해주는 문구 등을 준비하는 게 고민이시라는..ㅎ 감동
• http://bootstrapk.com/ 이 페이지는 5년전.. 절대 금지 한글로 부트스트랩 검색 하지 말자
• 반응형 이미지 → 키워드 기억

bootstrap vs tailwind

bootstrap은 완성품을 모듈로 가져와서 쓰는 느낌이라면 tailwind는 아예 css를 만지지 않는다.

• table → hover를 많이 쓴다.
• select는 뒤에서 실무에서 쓰는 select를 써볼꺼다, arcodian은 쓰지마라
• 한번은 사용할 코드들을 모듈화로 정리된 페이지 한 개로 갖고 있는 것도 좋다.
• bootstrap은 누가봐도 썼다는 걸 알 수 있다.

중간 tip

• 명함을 많이 받아두자

• css 자신만의 자료를 따로 정리하는 것이 좋을 것 같다?

  → bootstrap은 보통 완성된 컨텐츠를 사서 그냥 쓰는 편 tailwind가 정리해놓은 거를 쓰는 느낌

• 포트폴리오를 bootstrap으로?? 당연히 no

• BE 주로 하다가 bootstrap을 만나고 신세계를 경험하셨다고

• alert는 image 삽입 등이 어려워서 alert 버튼이 따로 있다

• 메뉴도 사용하고 싶은거 복사해다 쓰셈

• bootstrap 뭐가 있나 종류만 파악하자 이해할 필요는 없다.

• bootstrap을 쓰면 페이지가 무거워지나?

  → css가 크기가 크지 않기 때문에 그리 무거워지는 건 없다.

• bootstrap의 가장 큰 단점?

  → custom, 수정하기 힘들다

(JS ;에 대하여 논쟁이 좀 있다.. 후에 다루자.)

• boostrap 10개 정도 사두면 많이 쓸 것

• 관공서 같은 페이지는 bootstrap으로 못한다. 병원 등도. 굉장히 낮은 버전의 브라우저까지 지원해달라고 하기 때문에 ... (어차피 빨리 만들 수 있기 때문에 시안을 bootstrap으로 하는 경우도)

• bootstrap도 라이센스 꼭 확인하기! 구매할 경우는 구매할 때 라이센스 증명서를 준다.

  • mit 라이센스
    • 가능한 것
      • 상업적 이용
      • 수정
      • 배포
      • 개인적 이용
    • 제약
      • 법적 책임 없음
      • 보증하지 않음
    • 조건
      • 라이선스 및 저작권을 고지할 것

중간 잡담

• 아무리 프리랜서여도 다 일을 어디서 받아올까?

  → 대자보가 주가 아니라, 직장 동료였던 사람에게 직장 동료였던 사람이 실력도 알고 인성도 아니.. 큰 프로젝트는 그런 사람 소개 시켜주고 싶음

• 10만원 대의 일에 BE까지 한다? 말도 안되는 일이다. 명심

• 개발 프로젝트에서 어느정도가 적정 단가인지도 알아보자

• 깃랩은 보통 외부와 단절된 내부에서 사용

• bootstrap사용한다고 해도 보통 로컬에 다운 받아놓고 함. cdn으로는 교육할 때나 쓰지

bootstrap editor

→ 소스코드를 손대지 않고 마우스 클릭으로만 페이지를 만들 수 있는 사이트도 있다.

대표님이 돈 버셨던 스택

• 부트스트랩 + php + mysql
• 부트스트랩 + 워드프레스 → 최고 가성비가 너무 좋다. 워드프레스 db 테마가 너무 잘 되어 있다.*
  부트스트랩 + Django → 헤비하면 장고 쓰고
  부트스트랩 + Node
  워드프레스는 DIVI 테마와 Pods 플러그인
• 개발 단가표를 다 써두고 하자
• 잘 만들어진걸 두고 새로 만들지 않는다
• bootstrap datepicker
• 한국 IT계에 대한 인식이 좋다.
• 대형개발사는 무거워진다 따질 필요 있지만 그 외에는 사실 ㅎㅎ
• 대형 개발사는 보통 자기 회사만의 바퀴를 갖고 있다. 있는 것들은 새로 만들지 않는다.

summernote

→ 한국인들이 만든 사이트 펄-럭 but bootstrap5를 지원하지 않는다 ㅠ.ㅠ adios..

toast editor(그저 찬양..)

• 최고.. 대표님은 이거밖에 안쓰신다고
• 이걸 대적할만한 애가 안나올 것
• 강의자료, 메일 등을 보낼 때 사용 지사항이나 사용자들이 게시판에 글쓸수 있게
• 인프런 UI 에디터 등이 다 toast editor로 되어 있다.
• 암튼 최고다 토스트에디터

select picker

• data-token 흥미롭 → 정말 많이 사용

중간 잡담

• 90% 이상 실패하는 프로젝트??

  → 학사정보시스템 주어진 기간 내에 끝낼 수가 없다. 성공사례를 거의 못봤다.. mooc service development

Tailwind

vs tachyons

• 아예 css를 건들지 않게 된다.
• https://tailwindcss.com/docs/padding
• 너무 좋은데..?
• 우선 div로 다 작업한 후에 태그 수정하는 방향으로 작업

---

저녁(19:00~21:00) 스프린트 회고 w/ 메이커준

• 정신없이 바쁘다면 해야할 일의 우선순위를 제대로 못하고 있는 거다.
• 더 중요한 것 먼저 효율적 루틴을 꾸준히

오늘의 팀 회의 질문

• 역량의 네이밍을 좀 더 구체화 할 것은 없는지

• 내가 그 역량을 채우기 무엇을 했는지

  → 질문 답변보다는 함께 소통하는 시간..ㅎ

• 멋사 과정이 마무리 됐을 때 역량을 10점이라고 한다면, 지금 점수는? → 4점

  → 배워서 실력이 늘 수 밖에 없는 커리큘럼인걸 아니깐 근데 지금도 html, css 많이 배웠고 그래서 4점

• 나침반을 만드는 과정 → 과거의 나침반을 꺼내보자!
• ex. 뱉어내는 output이 더 많았던 강의? input이 더 많았는지 output이 더 많았는지 점검할 것
  • 내 경험, 다른 사람들의 경험 노하우 비교해보면서 이야기해보는 시간.
  • 차이를 만드는 키워드를 생각하면서 3번째 스프린트 시간까지 달성할 액션플랜 짜보기

깨알 QnA

• 코드리뷰는 대화다. 리뷰어와 리뷰이
  • 리뷰이는 어떤 부분을 신경을 썼는지 중점적으로 봐줬으면 좋겠는지 알려주면 상호간에 도움이 된다.
  • 너무 많은 양의 코드는 리뷰어도 부담이 되기 때문에 적당량 요청하기
  • 작은 단위로 자주 반복될 수 있게끔 왔다갔다 핑퐁을 자주 하는 것이 좋다.

오늘의 개인 액션 플랜

1. JS 100제 초반 50문제 풀기(가능하다면 스터디 등을 꾸리거나 참여해서)
2. github TIL을 md문서로만 디렉토리, 내용 등 다시 정리하기
3. 매일 10분 회고로 방향성 매일 수정하기

→ 점점 액션 플랜이 구체적으로 작성 되어 가는 것 같다! 매일매일도 짧게 짧게 구체적인 계획들로 채워나가자!