좋았던 점
  • 깃허브 팀레포에 프로젝트를 열어 WTD를 적기 시작했는데
    이걸로 타임 트랙킹 중이다. 덕분에 내가 얼마나 시간을 과소비 하는지 느꼈고
    앞으로 계획을 수정해나가면서 개선의 여지가 보인다는 점이다
    일찍 일어나면서 직장인일때 갓생살던 아침 루틴을 조금 가져왔다
    그럼 뭐가 좋냐??? 기분이가 좋다
  • 하루에 하나씩이라도 이해가 가면서 알게되는 개념들이 있었다
    (정규표현식^ /gm, filter.length, promise, fetch,then, resolve, reject, pending, DFS, BFS, sort a-b)
  • 구글독스를 아침마다 민정님이 만들어주신다
    티스토리에 적던 TIL보다 다같이 적는게 더 좋은것 같다 
  • 손코딩을 해봤다. 쓰면서 이해가 가는 부분도 있었고 나는 생각보다 좋았다
    익명의 누구님은 손코딩을 극극타도 하셨지만 나같은 사람이 1~2회 쯤 해보는건 괜찮다고 생각한다
  • 간단한 내용이지만 그래도 영양가 있는 글을 썼다고 생각한다

 

아쉬웠던 점

  • 마의 수요일을 버티지 못하고 울적하게 잠들었다
    대체로 오후에 집중을 못하는 편이라 차라리 일찍 잠들기를 택하고
    목요일에 극단적으로 일찍일어나니까 수면시간은 비슷한데도 수업시간만 되면 대체로 졸렸다
  • 항상 구현에서 막힌다. 영어라 치면 읽고, 쓰고, 이해는 하지만, 스피킹은 안되는 사람처럼

 

다음 주 계획(+이번 주말)

  • 벤딩머신 처음부터 짜보기
  • 시간관리 최적화 시키기

 

<월요일> 자료구조와 알고리즘

지난번 특강에서 2기 선배 수빈님이 알려주신 구글 독스를 시작했다

원래도 다같이 들었지만? 수업을 더 다같이 듣는 느낌
내가 놓치는 부분을 다른 조원이 캐치 할 수 있어 좋은 방법인 것 같다
 
<화요일> 자료구조와 알고리즘, 알고리즘 스터디
아침에 좀 일찍 일어나서 운동하고 일기쓰고 영어회화하고 독서를 했다
직장인일때 5시에 일어나서 7시에 출근하던 시절 하던 짓인데
그때에 비해 지금 기강이 너무 헤이해져서 다시 해봤다 대신 엄청 짧게 한다
 
손코딩도 해봤다 분명 어제 머릿속에 들어온게 별로 없었는데 쓰다보니까 그럭저럭 이해가기 시작했다 뭐지?
 
알고리즘 스터디에서 윤정님의 도움을 받아 filter 식을 활용한 풀이를 이해 할 수 있었다
 

[프로그래머스 Lv.0] 각도기 문제로 알아보는 filter.length 써먹기

https://school.programmers.co.kr/learn/courses/30/lessons/120829 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞

developmentbirdfoot.tistory.com

^ 왠지 킹받는 이 기호는 정규표현식에서 부정의 의미이고,

끝에 /gm 은 개행까지 포함함을 의미한다는 사실을 알게 됬다

 

WTD로 하루 일과를 감시해보니, 알고있었지만 오후시간을 굉장히 많이 버리고있다

스터디가 아니면 움직이지 않는 이런 고질적인 문제는 아침시간을 더 잘 활용해보기로 생각해본다

 

<수요일> 트리, 깊스넢큐, 프레임워크와 라이브러리, 줴이쿼리

아침시간에 promise 공부를 했다

대박 집중 너무 잘되고, 이해잘가고, 하루의 시작은 좋았는데

오후로 갈수록 에너지가 없어졌다

저녁먹고 나니까 졸려서 이럴바엔 지금 자버리고 극단적으로 일찍 일어나보기로 한다

 

<목요일> 벤딩머신 JS, 알고리즘 스터디

아홉시쯤 잠들었더니 두시쯤 깼다 알람을 세시반에 맞춰놔서 그냥 더 잤다

일어나서 별안간 동생방가서 모기 잡아주고 하느라 일정은 계획한거보다 좀 지체됬다

똑같은 루틴하고 어제도 손코딩 과제가 있었어서 써봤다 손코딩 짱

근데 여덣시반쯤 되니까 나는 안졸린데 몸이 졸려하는 느낌이 확들었다

지금 안자면 수업때 엄청 졸거같아서 잠깐 잤는데 꿈을 엄청나게 많이 꿨다

 

맙소사 수업시간만 되면 너무 졸렸다 2시간은 더 잔듯? 근데 또 쉬는시간에는 잠이깸;;;

그리고 약간 만사가 귀찮아졌다 그래서 개인공부는 안하고 동생이랑 노닥거리다

알고리즘 스터디 시간이 되서야 공부를 했다 (스터디 하길 천만다행이다)

sort (a-b) 가 왜 오름차순 정렬인지 이해가 안갔는데 의문이 풀렸다

이것도 포스팅해야지

 

<금요일> 1만 시간, 회고

 

https://www.inflearn.com/course/30%EB%B6%84-%EC%8B%9C%EC%A6%8C4-%EA%B9%83%ED%97%88%EB%B8%8C

 

[무료] 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub - 인프런 | 강의

알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 GitHub 핵심 개념 책의 무료강의입니다. 해당 책과 Notion 링크도 무료로 다운로드 받을 수 있습니다. 비영리 프로젝트로 교재활용도 허락없이 가능합

www.inflearn.com

    • 얄팍한 코딩
    • 진유림님 깃&깃허브

  • git clone [url] .git폴더까지 다 가져온다
  • git pull 내가 이미 .git 폴더를 가지고 있고, 작업하고 있는 파일도 있는 상태
  • 수정
  • git add . : . 을 붙이는 이유는 바뀐내용 전부 add하겠다는 의미
  • git commit -m '메모'
  • git push

https://gitmoji.dev/

 

gitmoji

:truck: Move or rename resources (e.g.: files, paths, routes).

gitmoji.dev

CLI (Command Line Interface) : 코드로 치는 것

GUI (Graphic User Interface) : 클릭으로 하는 것

  • 회사 서버의 90%이상은 리눅스 환경
  • FE개발자들은 유저(개념) 보다는 개발자이기에 터미널과 같이 백지로 작업할 경우가 많다
  • 금융권 회사일 경우 VSC 사용하지 못하는 경우도 많다
  • 구글링도 개인적으로 해야 할 경우도 많다 ← 명령어로만 작업

나는 window라 git을 설치했다

(맥에는 기본적으로 깔려있다 최신버전을 깔아도 되지만 사용하는데 지장없음)

너 왜 갑자기 되냐??

git ignore은 추적되지않는다

  • $ ls   #폴더와 파일 볼 때
    $ pwd   #현재 폴더 알고 싶을 때
  • $ mkdir leehojun   # 폴더 생성
    $ cd ..                    # 상위 폴더 이동
    $ cd test                # test 폴더 이동
    $ cd baeggoose    # baeggoose 폴더 이동
    $ touch test.html   # test.html 파일 생성
    $ vi test.html         # 실무 vim을 사용합니다.
  • i
    ESC
    :wq!
    $ cat test.html
    $ cd ..
    $ rmdir baeggoose
  • $ git --version
    $ git config --global [user.name] (http://user.name/) "baeggoose"
    $ git config --global user.email [email@example.com](mailto:email@example.com)
    $ git config --list

웹 서비스 만들 때

  1. 기획자_ 서비스 기획
  2. 백엔드_ URL 구조
  3. 백엔드_ model 설계 : 게시판, 게시물 제목, 내용, 사진 등
  4. 디자이너_ 디자인
  5. 프론트엔드_ templates 작성 (HTML)
  6. model 설계한 것과 template연동
스프린트 회고

 페어프로그래밍

  • 10월 27일 : 19시 회고하고 페어프로그래밍
  • 주제 : 식당 메뉴판
  • 진행 방식 : 5분

페어 프로그래밍의 장점은 오류를 줄이는데 큰 도움이 된다

회고조 안에서 각각 2~3인으로 조를 3개로 나누어 우리조 공통의 주제를 정했다

또, 주말에 프로그래머스 문제 풀이도 페어프로그래밍으로 해보기로 했다

https://www.freecodecamp.org/korean/news/javascript-projects-for-beginners/#counter

 

초보자를 위한 40가지의 자바스크립트 프로젝트

프로그래밍 언어를 공부하기 가장 좋은 방법은 프로젝트를 해보는 것입니다. 누구나 쉽게 해볼 수 있는 40가지의 바닐라 자바스크립트, 리액트, 타입스크립트 프로젝트 튜토리얼을 만들었습니

www.freecodecamp.org

https://devfolio.kr/

 

DevFoliOh! - 개발자 토이프로젝트 모아보기 서비스

 

devfolio.kr

설문조사 Form

https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress

 

<progress> - HTML: Hypertext Markup Language | MDN

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

developer.mozilla.org

https://colorhunt.co/

 

Color Palettes for Designers and Artists - Color Hunt

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

colorhunt.co

https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

 

HTML Standard

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents that, if followed, are likely to lead to a user experience that closely resembles the experience

html.spec.whatwg.org

fieldset

legend

 

To do List

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

 

Data URIs - HTTP | MDN

Data URIs, 즉 data: 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 임베드할 수 있도록 해줍니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/click

 

HTMLElement.click() - Web API | MDN

HTMLElement.click() 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.

developer.mozilla.org

 

  • 비전공자 기준 연봉테이블
  • 선기수들 제주 웹 컨퍼런스 연사, 알잘딱깔센 책 집필
  • 개자이너, 디발자
  • 부트스트랩> 나중에 프리랜서 할 때 많이 사용
  • 제이쿼리 에이작스는 간단하게
  • 연봉 테이블에 따라 리액트와 바닐라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