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

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

• 어제 클론마저 진행

• Figma 100% 화면에서 캡쳐해서 비교해보기

  → chrome 확장 프로그램 perfect pixel 이용해서 비교가 가능하다! 개꿀팁

  다만, liveserver등으로 해당 페이지를 서버에 올리고 실행 가능

• 확인 작업 등도 엄청 오래 걸리기 때문에 사실상 만드는 것은 전체 작업의 30%밖에 되지 않는다고 할 수도 있다(!)

• 엄청난 노가다..

• 반응형(!) - 보통 기준이 되는 폰 하나에 맞추는 편

• FE 개발이라 퍼블리쉬는 벗어났다! 기뻐해선 안된다. 다들 각자의 고충이 있는 것..

• 정해진 너비 외의 화면에서 레이아웃이 깨지는 문제?

  → 괜찮다. 원래는 좀 더 700정도로 tight하게

  반응형이라고 무조건 모든 사이즈에 대응하지 않는다.

  원하는 target device에 맞추면 되지 전부 다 잡을 필요 없다.

• block간 margin 줄 때 (특히 형제간) top이든 bottom이든 한가지 기준으로 쭉 잡아주는 게 좋다.

• 작은 사이트인데도 media query로 다 바꾸는데 폼이 많이 들었다. → 네이버, 다음 등이 모바일 앱 화면을 따로 만든 이유...

---

오후(13:00~18:00) 수업 by Wade

icebreak QnA

• [웹퍼블리셔 vs FE 개발자]

  요새는 뭐 웹에이전시 회사에서도 JS 잘 쓰는 사람 많다.

• 스스로 욕심을 내서 환경에 갇히지 말고 공부하고 발전하자 환경을 바꾸어 나갈 수 있다는 생각으로! 다 같이 똑같을 일을 할 때 누군가가 치고 나간다면 돋보일 수 밖에 없다.

• BE의 철학이 FE로 넘어와서 생긴 것이 Angular, React다. 점점 경계가 허물어지고 있다.

• 구현해서 보여주는 과제가 점점 많아지고 있다.

• 안정성을 위해 부모를 타고 들어가는 선택자

OOCSS(Objected Oriented CSS)

• OO?

  → 프로그래밍으로 구현해야하는 코드를 하나의 객체로 보는 것!

  데이터, 기능 단위로 보는 것

• 레고처럼 여러가지 모듈로 조합하도록 하는 방법론

구조와 스킨의 분리

• 구조 - width, height, padding, margin등 layout에 영향을 미치는 속성

• 스킨 - font, color, background, border등 layout에 영향을 미치지는 않지만 시각적 영향을 주는 속성들

컨테이너와 콘텐츠의 분리

• section, article, main, footer, header등이 container라고 부를만하다.

• 안정성을 추구한다면 Wade님처럼 부모를 타고 들어가는 css짜기

• 모듈화를 추구할 때 OOCSS처럼

SMACSS(Scalable and Modular Architecture for CSS)

• OOCSS가 좀 더 발전한 버전?

• 모듈

• sub_class 방식

• class로 해당 태그를 선택하는 방식

오늘의 삼천포

• 본인이 본인 판단에 준비가 안되어있다고 느낀다고 해도 일단 부딪혀보자

  최소한의 준비란 포트폴리오 3개 정도면 최소한의 준비라고 생각한다.

  제출할 수 있는 github repository 3개 정도!

  클론코딩도 포트폴리오 쳐준다

  포트폴리오 예쁜 것도 중요하지만 그 안에 관점, 레슨런, 성장의 기록이 있으면 좋다.

  일단 사람이 없어서 지원을 하면 볼 수 밖에 없다.

  '어디 한번 보자' 라고 생각하고 접근하면 보다 수월할 것. '아니면 말고, 너네만 회사냐' 약간 이런 마인드

  우대사항에 뭔가 있다? → 그 회사에서 이걸 하고 싶다 정도

  자격 요건 : 이미 내부에서 하고 있는 것. 반드시 해야하는 것
  우대 조건 : 앞으로 하고 싶은 것. 하면 좋은 것!

  뭘 모르고 쓴 것 같은 자격요건은 조심하자 → 가서 고통 받을 가능성이 크다

  사수가 안좋으면 빨리 나오자..^^

  채용사이트는 딱히 추천하는 사이트가 있기보다는 그냥 다~ 하면 된다.

  이력서는 총알, 기관총 난사하듯이 난사해야한다.

  명확한 자격요건을 가진 채용회사! 회사의 수준이 나온다

  네임드 개발자가 진행하는 스터디 모임? 쪼렙? 무조건 지원해라

  적극적으로 참여하자 인맥을 늘릴 최고의 기회

  채용 공고 읽어가면서 포폴 전략을 세우자 숨겨진 의도를 읽기

  신입 공고에 집착하지 말자 경력자를 찾아도 지원해보자

  연봉은 회사 내규에 따름으로! ㅋ.ㅋ

  지원자격에 적힌 연차 자격은 회사의 희망사항이라고 생각하자!

  배민 - 인턴: 인생의 턴잉 포인트.. 인상적

  해당 팀의 애로사항이 우대사항에 적혀 있다.

  FE 개발 경험이 아니더라도 협업의 경험이라면 무엇이든 좋다.

  보통 화상면접에서는 피면접자의 수준을 떠보는 질문 정도를 던질 듯

  jumpit은 사람인의 it 개발자 채용 플랫폼

  FE 시장 React는 거의 필수인 것 같다.

  AppLike? mobile first로 개발된 웹페이지 같다면 좋겠지

  모집 공고를 봤는데 허술하다? 잘모르는 것 같다? 전공자만 뽑는다? 이러면 알아서 거를..^^

  필수자격요건에 의사소통 능력에 관한 이야기?

  약간 안되고 있다는 얘기일 수도..

  채용공고를 잘 해석하는 것도 중요하다

  상시 채용은 연락이 안올 가능성이 크다

  → 이미 인원이 다 있는데 퇴사할 경우를 대비 인재풀 등록 느낌

  마크업 개발의 중요성이 크다!!

  tailwind, bootstrap도 잠깐 해요.ㅎㅎ 해보면 별거 아니라서 능력치로 하나 가지고 있으시면 지인이 잠깐 개발 요청할 때 해주기 편합니다. 간혹 중요도가 떨어지고 빠르게 서비스 개발해야 할 때에도 사용하긴 해요. 제가 아는 대표님들은 사내 서비스 개발할 때에는 리소스 최소화를 위해 사용해요.

다시 수업

smacss

• state는 js에 종속적이다. 사용자 상호작용에 밀접
• 모듈이나 컴포넌트나 비슷한 개념
• 테마까지는 굳이 싶다.

BEM

• 기본 규칙 - id 선택자, 요소 선택자 권장X
• 클래스 선택자만 쓰는 이유? 가중치 계산을 원활히 하고 싶어서
• 클래스 naming에 진심인 편...
• class name을 봤을 때 뭘하려고 하는지 명확해야 한다.
• 의미를 중시하는 class 이름을 사용한다.
• block안에 element1 안의 element2여도 naming시 block_name__element2라고 쓰자 block_name__element1__element2가 아니고
• 모듈 방식으로 나눈다!
• modifier는 첫번째 클래스 이름으로 올 수 없고 block, element등의 클래스 이름이 오고 두번째 클래스 이름으로 와야한다.
• 현업에서는 회사마다 약속이 있다.

매니저님께서 제안해주신 오늘의 돌아보기

1. 나는 나답게 가고 있을까?
   ->지치지 않도록 내 호흡에 맞춰서 가고 있긴하다! 너무 돋보이지 않으면서 뒤쳐지지도 않게.
2. 나는 내가 계획세운 성장의 폭을 채우고 있을까?
   -> 매번 주어지는 과제들은 모두 해결하려고 했는데 다른 일들로 좀 마음이 흐트러졌다. 기본이 되는 HTML,CSS를 정말 능숙하게 다룰수 있도록 하자
3. 내가 생각하는 성장의 주요지표는 무엇이고, 나는 그것을 단계적으로 잘 짚어내고 있는걸까?
   -> 성장의 지표.. 뭘까 지금의 나로써드는 생각은 어제보다 좀 더 코딩에 익숙해진 오늘? 아직 정확한 지표도 정의내리지 못하는 걸로 봐선 잘 짚어내지 못하고 있는 듯 하다.
4. 내가 무리하고 있다는 신호는 어떤 것일까. 그리고 신호를 발견했을 때 내 마음과 몸을 위한 진정한 휴식은 어떻게 만들 수 있을까?
   -> 급격한 눈의 피로. 가벼운 산책, 하늘, 먼 산을 바라보기, 적절한 취침
5. 나는 어떨 때 안정감을 느끼고, 충분히 성장할 수 있을까? 그걸 동료들에게 공유해서 내게 유리한, 그리고 배려받을 수 있는 환경을 만들어보면 어떨까?
   -> 좋은 공동체 사람들 안에서 인정을 받을 때, 안정감과 성장을 이룰 수 있다. 구태여 말하기보다는 자연스럽게 느껴지도록 평소의 삶, 행동으로 보여주자