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

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

morning break

• 과제 같은 경우는 깃헙에 따로 repository를 만들어서 관리하자
• 벤딩 머신, 렌딩페이지, sns 과제들을 묶어서 관리하면 좋을 듯 만약 자신있는 거만 하나 따로 있다면 따로 관리해도 되고
• 벤딩머신(JS) 랜딩페이지(HTML, CSS) 각 구현 목적이 있는데 맞게 pin하고 다룰 것
• 페이스북 친구, 커뮤니티, 유튜브 채널이 어디에 집중되어 있는지 확인해보자생코보다는 더 깊은 커뮤니티를 찾아보자..!
• 어떻게든 귀동냥으로 듣는게 생기기 때무넹 아주 중요하다.
• 웹표준 관련 답변이 이상한 경우가 있었는데
  유튜브
  보다는 D2와 같은 대기업의 기술 블로그를 참고하자, 대중이 어렵다고 하는, 저명한, 두꺼운(?) 책도 좋고
• 해외 유명 책인데 번역돼서 들어오는 것들? 좋다.
• 공부할 때 참고하면 좋은 곳들 정리
  • 대기업 기술 블로그(D2)
  • 책
  • 깃헙 주소(유명한 개발자들)
• 개행의 목적이 먼저 정의 되어야한다.
  • 디자인 목적? → span
  • br은 디자인 목적으로 쓰이면 안된다.
• 코테 준비에 관하여
  1. 남들 다 한다고 우다다다 조급해 하지 말자. 취업해서도 계속계속 풀어야 한다. 2주 먼저한다고 달라질 건 없다.. 가볍게 시작하자! 처음하는 사람은 간단 강의 수박 겉핥기 보면서 하자 ㅎㅎ 감을 잡는 게 중요
  2. 알고리즘, 자료구조 로 풀 수 있는 건 6문제 중에서 4문제 정도충분히 앞의 것을 소화하고 진행하자! 멀리 보자(번아웃 노노)
  3. 나머지는 메모리 효율 문제다. → 이런건 같이 하는 것 추천
  4. OJ 많은 사이트들 중에서 각자에 맞게 골라 준비하자

     ---

     신한 / 배민 / ... → 난이도가 엄청 높진 않다. 메모리 효율까지 보지 않는다.

     ---

     코테 안보는 기업
  5. 네이버 / 카카오 / 삼성 ... → 코테 수준이 높다
  6. 코테를 안보는 곳 → 원하는 기업이 코테를 보는지 안보는지 확인JS 어필? → 프로젝트 단위의 어필이면 좋겠다.
  7. → 포트폴리오에 집중
  8. 깔끔한 README 정리..! 설명 잘 적어두자 느낀점까지잘 정리된 문서만 봐도 일을 어떻게 할 것 같다는 것이 느껴진다.
  9. 회고와 정리, 설명 계속 수정하기
  10. 개발중 발생한 문제, 해결한 방법 원인분석 등을 위주로 정리
  • 1년 전 제주도 85개 일자리에 15명 지원 ㅠㅠ
  • JS 효율적인 코딩을 했는가? 고민 했는가?
  • 서비스 되고 있는가?10명 접속할 때랑 1000명 접속할 때랑 JS 코드가 완전히 달라질 것임.
  • → 서비스를 운영하면서 느끼는 점이 개발할 때 느끼는 점만큼 중요하다.
• 정리를 잘 해서 임팩트를 주자
• 내가 정말 관심있고 승부를 보겠다 생각하는 사람은 양이 쌓일 것이고 양이 쌓이다보면 자연스레 질도 올라간다.
• bootstrap 어디까지 나갔는지?
• 더 배우고 싶다?
  • 제주더큰내일센터 - 150
  • SSAFY - 100
  • 42서울 - 120

과제가 있다 → AWS 가입

• 팀프로젝트는 꽤나 규모가 크다. DB 모델링. 잘라서 여러개를 하느냐. 큼지막하게 하나를 하느냐 사이에서
• → 큰거 하나 하기로 결정
• 짧은 시간이니 그래도 개인 프로젝트 100%를 목표로..!
• bootstrap 짧게하는 이유는 bootstrap으로 페이지 짤 일이 많이 없을 거임 우리 과정에서

실습

• th, button이 태생적으로 중앙정렬을 해주는 듯
• → 정렬을 바꾸려면 padding을 손 봐주면 될 듯
• padding이 너무 다름으로 더러워진다면 디자이너와 이야기를 해봄이 좋다..
• 스크롤 디자인 변경하는 것도 상당히 복잡하기 때문에 정리가 필요하다.
• 구현 과제라면 padding 값 다 다른 것도 의도한 거일 수도 있으니..? 다 그대로 써주자. 대신 그런 회사는 거르는게 좋을수도 ㅎㅎ🤪
• 엄밀하게 CSS하기 보다 즉흥적으로 하신 경우가 많았는데 bootstrap 같은 걸로 자동화 되니깐 → 사람마다 스타일이 다르겠지만
• 조은님 강의가 섭외가 됐다는.. 충격😨
• 스터디가 최고다..! 해커톤도 참여하고
• 잘하는 사람 코드를 손으로 한번 써보는 게 어떨까
• html이든 css든 코드 짤 때 일관성 있게 짜자
• 미디어 쿼리 등에서 기기 너비 정하고 하는 것은 회사 컨벤션으로 있을 거임.https://material.io/design/layout/responsive-layout-grid.html#breakpoints
• 참고

---

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

• 조은님 타자도 엄청 빠르시고 독특하신 분..?!ㅋㅋ
• 코뿔소 책 스터디의 기억 600페이지가 넘는..ㄷㄷ 엄청 어려워서 비추
• 객체지향 자바스크립트의 원리 책도 좋다 → 절판..ㅠㅠ

로그인 모달 이어서

• 요소의 높이는 되도록이면 설정하지 마라 정말 설정을 해야하는 경우 아니면내부콘텐츠 종속적으로 만들어주자 부모의 높이는 자식들의 높이의 합이다.
• → 안에 있는 콘텐츠를 꼭 생각해줘라. → 유연한 웹을 만들기 위해
• 이미지에 position absolute로 많이 줬는데 같이 있는 a 태그는 img를 모른다.즉, a 안의 img만 옮기지 말고 a를 옮겨라
• → 가장 큰 문제는 focusing이 안된다는 거 이러면 접근성에 문제가 생긴다. 조금은 보이시는 시각장애인 분들께는 focusing 기능이 매우 중요하다.
• inline요소에 position absoulte나 float을 주면 자동적으로 display block이 들어가기 때문에 따로 줄 필요 없다. 중복이다.
• span을 써야하는지 p를 써야하는지 strong을 써야하는지 em을 써야하는지그 문단 안에서 강조하고 싶은거? → strong인용문? qhtml은 근본적으로 문서 작성 프로그램이다. 작가가 판단해서 중요한지 덜 중요한지
• 태그에는 각각의 의미가 있다.
• 긴 인용문? blockquote
• 덜 중요하면? em
• p → 문단

ex. 자동차: 바퀴로 굴러가는 기계 → 이런 문장이 있다면?

<p><strong>자동차</strong>: 바퀴로 굴러가는 기계</p>

꾸미거나 의미없이 사용하는 것은 div, span

• div 안에 i? 어느 상황인지에 따라 다를 것 같다.
• → i 태그에 semantic한 의미가 있는데 단순 아이콘으로 사용하면 안될것 같다.
• 각 태그의 semantic이 나름 정리되어 있는 w3chttps://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/
• https://www.w3schools.com/tags/default.asp
• id 이름 정해줄때는 camel case로 하시는 편
• a tag 링크 비활성화시 #none 반대파가 있으시다고만약 none이라는 id가 있으면 어떡하려고 → 만에 하나까지 고려하는 사람..ㄷㄷ 매우 논리적
• querystring이 추가돼서일 수도 있겠다
• 대신 → javascript:void(0) (undefined를 반환하는 함수)
• 프로그래밍은 협업!
• img의 크기만큼 가지게 할 거면
• screen reader로 탐색을 할 때 로그인 또는 회원가입 바로 옆에 x가 있으면 밑에를 다 읽고 다시 위로 올라가야하는 불상사가 발생. 그래서 다 읽고 창을 닫을 수 있도록 마크업 순서로는 마지막에 넣어주자
• 로그인 모달창 같은 것 뜰 떄 배경 블러 처리되는 것을 dim 처리라고 한다.
• input과 label을 이용해서 없애준 input 대신 label 이미지에 체크박스 이용할 때
• → 형제 선택자 + 를 이용해서
• 웹접근성에서 유명하신 야무님
• https://euid.dev/#/
• 오늘 실습처럼 input 요소를 가리고 label로 보여주면 접근성을 위해서 focusing 작업을 추가로 해줘야한다.
• outline-offset은 border와 outline 사이 공간 설정
• 인식의 용이성을 위해서 테두리가 보이도록 해주자 색깔도 확실히 구분이 되도록 해주자
• outline은 border가 커져도 요소를 밀어내지 않는다.
• 하루를 다 잡고 접근성을 팔지, SEO까지 다룰지 고민 중

실무 테크닉 수업

• custom input, select
  • select box에서 화살표? 없앨 때는 appearance: none으로일일이 스타일하면서 하기에는 불편하니까
  • → 이럴바에는 직접 ul등으로 만든다.
  • 사파리처럼 안먹는 사이트는 벤더프리픽스를 달아줘야 한다.
• → 디자인 개성을 위해 input이나 select를 커스텀해준다.
• IR 테크닉
  • 지원되는 브라우저 확인 시 좋은 사이트 → caniuse
  • text-indent로 밀어버리면 추가로 렌더링 한다는 이야기들이 있다..
  • → 하지만 추가적인 렌더링에 의한 속도저하에 대한 자료를 아직 보지는 못했다...
• 다음 같은 사이트에서도 html 내부 style로 디자인 주는 경우도 있는데 이유?
• → 만약 네트워크 문제로 CSS 다운 받지 못하는 상황이 생길 경우를 대비해서
• width, height를 0으로 주면 스크린리더는 읽지 못한다.
  • display: none을 해버리면 브라우저도 아예 존재를 알지 못하게 된다.
• ir-wa는 요새 카카오에서 밀고 있는 것. 대체이미지로 바꾸고 글씨도 보이게어떻게 해서든 사용자에게 정보를 전달하겠다는 의지..!
• → 이미지 로딩이 실패해도 글씨로 볼 수 있도록
• 왜 개발자의 길로..? 게임을 만들어보고 싶어서.. 모바일은 좀 쉽지 않을까 싶었으나..ㅎㅎ 꿱
  • 게임 개발자가 되고 싶다는 사람에게 다시한번 생각해볼 것을 권하고 싶다. 게임에 대한 비전 자체가 좀..
  • 100% 망한다는 게임을 1년 가까이 야근했는데..
  • 출시하고 1달만에 서비스 종료..
  • 정말 만들고 싶은 게임이 있다면 기획자로 취업을 하던지 1인 회사로 가던지
  • 절대로 개인적으로 원하는 게임은 만들 수 없다.
• 어떤 사람이 롱런?
• 가서 눈치를 잘 보자. 이 회사가 망할 회사인지 흥할 회사인지 각이 나온다. 특히 똥을 치워야 하는 회사가 정말 많은데, 치우기만 하면 안되고 뭔가 만들어야하는데. 똥이 반복되는 회사 자체 서비스를 만드는 회사를 가라