• 스타트업 지원은 원티드, 로켓펀지, 점핏 (사람인에서 만든 플랫폼)
  • 한재현 강사님 커리어 썰들었다
    부트캠프를 많이 들으셨는데, 어떤 학원은 국비지원을 받으려고 과정을 만들다보니 과정이 시작하기 직전까지도 강사님이 정해지지도 않고 실제로 w3schools.com 띄워놓고 스크린 리더마냥 읊어주는 곳도 있다고 하셨다 (그래서 스터디를 만들어서 직접 가르치기 시작...)
    두달쯤 되면 현타가 올 수있는데,주말에 따로 스터디를 하거나 어떻게든 도와주신다 했다

레퍼런스책 한 권 정도는 두자

  • 책을 정독하는 것보다도 필요한 부분만 찾아서 공부
  • 모던 자바스크립트 딥다이브(도마뱀)
  • 자바스크립트 완벽 가이드(코뿔소) ← 책이 베개두께이고 너무 어려워서 비추
  • 혹은 자바스크립트 중에서도 내용을 쪼개서
    모던자바스크립트(최신내용만), 객체지향에 관한 책, 자료구조와 알고리즘, DOM만 따로 다룬 책들도 있다( ex) DOM을 깨우치다)

초보용 책 추천

  • HTML&CSS 웹사이트 개발과 디자인 기초
  • 누구나 쉽게 배우는 자바스크립트(고양이)
  • 땡땡 따라하기 이런 책 비추, 오류가 많고 오타도 많다 (인프런이나 강의를 듣는게 낫다)

스터디 모임을 많이 해라!

ex)책 스터디, 리더가 주도 하는 스터디, 구성원들이 한번씩은 발표할 수 있는 능동적인 스터디

굉장히 많이 도움이 된다

 

  • 1세대 프론트 엔드 개발자 신현석님 블로그

https://hyeonseok.com/blog/306

 

HTML 코더, UI 개발자, 웹 퍼블리셔, 웹 개발자 - 신현석(Hyeonseok Shin)

web | 2006-11-26 웹 표준이 대두되면서 (X)HTML, CSS, Javascript 등을 담당하는 사람들의 중요도가 상승되고 이들을 업무를 정확하게 지칭하는 용어가 필요하게 되었다. 현재 이러한 롤을 맡은 사람들을

hyeonseok.com

프론트는 중간에 끼어서 바쁘다

HTML

HTML 5가 아니고 Living Standard라고 해야한다

 

SECTION

  • <Head>
  • <Body> 사용자에게 보여지는 부분
  • <Article> 연관된 주제가 없는 독자적인 내용 ex) 위젯
  • <Section> 그룹화에 초점

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related

 

HeadingsMap

To show, browse and audit (for accessibility and SEO) the headings structure

chrome.google.com

구조보기 편한 확장프로그램

https://poiemaweb.com/ 

 

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com

 

ol ul il

  • <ul> li가 3개이상 일 때
    ul이나 ol의 직계 자식태그는 반드시 li 이 들어가야한다! 
  • <di> <dt> <dd> 사전같이 정의할 때

이 요소들을 떨어뜨려 주고 싶을 때 <div>로 감싸주면 블록 레벨이기 때문에 간격이 생긴다

 

  • <p> 완결된 내용일 때 쓴다
  • <br> 완결이 아닌데 줄을 바꾸고 싶을 때
  • <pre> 코드에서 작성한대로 표현이 된다 (줄을 많이 띄웠을때 처럼)
  • <blockquote> 인용 블록
  • <cite> 출처
  • <q> 한줄일 때 
  • <hr> 내용이 구분될때 (구분선) p태그내에서 사용하지 말기
  • entity 엔티티 코드
    < &lt;
    > &gt;
  • <nav> 링크를 보여줄때

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

 

HTML Standard

HTMLLiving Standard — Last Updated 30 August 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are supp

html.spec.whatwg.org

홈페이지를 캡쳐해 구조를 나누는 실습을했다

은근 너무 어렵더라

 

몇명 하고싶은 사람 봐주고

4시부터 자습시간이 되었다

 

과제로 홈페이지 이미지를 두개 받았다

  • 비전공자 기준 연봉테이블
  • 선기수들 제주 웹 컨퍼런스 연사, 알잘딱깔센 책 집필
  • 개자이너, 디발자
  • 부트스트랩> 나중에 프리랜서 할 때 많이 사용
  • 제이쿼리 에이작스는 간단하게
  • 연봉 테이블에 따라 리액트와 바닐라JS를 쓸 수 있다
  • 우리는 뾰족하게 프론트엔드를 하자
  • 백엔드,디자이너가 한걸 이어주는게 프론트 엔드

  • 배운걸 구현하며 복습
  • 어떻게 고도화할 것인지 빨리 할 것인지

책추천
함께 자라기
구글엔지니어는 이렇게 일한다

영화추천
peaceful warrior

  • 하루 30분 바깥 햇빛쐬기 운동하기

'피드백' 이 중요한게 아니고
'피드백을 주고 받는 것' = '상대방을 기분 좋게 움직이게 하느냐' 가 중요하다

팀 활동

  • 각오: 내가 소중하게 여기는 사람들에게 멋있는 사람이 되자
  • 목표: 수료후 2개월 이내로 사람들의 일상에 도움이 되는 회사에서 일을 하고싶습니다 현재 가고싶은 회사들(오늘의 집, 당근마켓) 기준으로 Job Description 을 확인해봤을 때, 멋사자 과정에서 접하지 못하는 Typescript가 있어 그 밖에 다니고 싶은 회사들의 JD를 확인하여 부족한 부분을 보완할 스터디를 열어 포트폴리오를 만들어 나갈 것 입니다

스타트업 투자 규모 확인/ 산업 별 기업 서칭할 수 있는 사이트

https://thevc.kr/

더브이씨 (THE VC) - 한국 스타트업 투자 데이터베이스

총 투자 건수 13,537건

thevc.kr

https://startupspace.kr/

스타트업스페이스 StartupSpace

2100개사 스타트업의 투자 현황을 한눈에

startupspace.kr

코드 라이언 시간


헬로 월드가 식상해서 하이~헤이치~아이~ 맫~몬스터~해봤다

 

<오전일과 class = "스프린트 회고 첫 시간">

 

회고 스프린트는 우테코(우아한 테크 코스) 프론트엔드 교육과정을 담당중이신 임동준 강사님이 진행해주셨다

 

함께, 밝게, 나답게 성장하는 ‘환경’을 만드는 메이커준입니다.

👋🏼 밝음의 아이콘 메이커준 초간단 소개

www.makerjun.com

 

여러분이 생각하는 개발자로서 성장을 잘하기 위해 무엇이 필요할까요?

꾸준함, 인내, 체력, 계속 공부하기, 확실한 목표, 피드백 받는거 두려워하지 않기, 깊이파기, 소통, 자기 반성, 끈기, 업계의 성장에 대한 고찰, 엉덩이 무겁게 오래 앉아 있기, 적극적인 자세, 유연한 사고, 질문하기, 자만하지 않기, 강철 손목, 비싼 의자, 알고 넘어가기

 

이런것들을 잘하고 있다는 것을 우리는 무엇을 통해 알 수 있을까요?

타인의 피드백, 기록, 롤모델과 비교, 결과, 테스트, 메타인지

 

노션페이지에 테이블을 만들어 일주일간 각자 배우고 느낀점을 회상했다

 

대체로 느끼는 게 다 비슷했다

 

특히 나는 무슨일이 있어도 TIL작성하기로 마음먹었다!

 

  1. 내가 생각하는 과정을 마무리했을 성장하고 싶은 목표 3가지 (구체적인 장면을 떠올리면서 작성)
  2. 해당 목표를 달성했음에도 불만족스러운 경우 2~3가지
  3. 해당 목표를 달성하지 못했지만 만족스러운 경우 2~3가지

 

목표를 좀 더 현실적이고 구체적으로 정할 수 있는 방법이라 좋았다

 

<오후일과 class = "한재현 강사님과 HTML Markup 실습">

 

Semantic 시멘틱

 

웹에이전트, 컴퓨터(검색엔진이)가 이해 할 수 있게 의미있는 마크업을 해야한다

 

시멘틱한 태그를 사용 할 경우 검색엔진이 사이트를 분석하기도 쉽다

 

https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko&visit_id=637979483710948537-736098899&rd=1 

 

SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google Developers

검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요.

developers.google.com

 

스크린리더가 마크업을 작성했을 때 어떤식으로 반응하는지 보면 좋다

 

(시각장애인들에게 너무 유용한 기능이다

세상을 이롭게 하는 코딩이라니 정말 멋지다)

 

큰 회사의 경우 내부적으로 접근성 관련 팀이 검사를 해본다고 한다

 

지난 시간과제는 삼성과 동물의 숲 페이지 섹션 나누기였다

 

반복해서 나오는 개념은

 

HTML 코드를 짤 때 필요없는 마크업 하지않기!

 

즉, 시멘틱한 마크업을 해야 한다는 것이다

 

면접시 분명히 이 코드를 왜 이렇게 짰는지 질문이 들어온다 한다

 

코드를 짜보고 난 뒤에 내가 짠 코드를 설명할 줄 알아야겠다

 

  • 섹션의 제목은 하나만 하는게 깔끔하다
  • 아티클은 다른 페이지에 나와도 어색함이 없는지 확인해본다 (페이지내에 의존성이있는가)
  • copyright 부분은 small 태그를 사용한다
  • 알림은 ul이 아니라 ol이다
  • 시간을 나타내는 tme 태그가 있다

모듈화=나중에 재사용할 수 있는 구조

 

나중에 페이지가 여럿생기거나 할 때에 큰 틀이 되어 줄 구조를 뜻한다

 

이제 VSCode로 대강작성해본다

음,따라가다가 놓쳤다ㅋㅋ

 

공부할 것

  1. 삼성 홈페이지 코드 작성해보기
  2. 지난번 과제들 다시 마크업

+ Recent posts