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

[멋사 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년전.. 절대 금지 한글로 부트스트랩 검색 하지 말자

이 페이지는 5년전.. 절대 한글로 부트스트랩 검색 하지 말자 반응형 이미지 → 키워드 기억

bootstrap vs tailwind

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

table → hover를 많이 쓴다.

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 플러그인

부트스트랩 + 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

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

오늘의 개인 액션 플랜

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

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

from http://devahj.tistory.com/125 by ccl(A) rewrite - 2021-11-22 22:59:05