어제의 나를 밣고 일어나길..!
좋았던 점
  • 국취제때문에 전날 이동하느라 저녁시간도 날렸는데, 버스에서 알고리즘 스터디에 참여해서 그나마 시간을 덜 버렸다 (버스에서 인강을 찾아봐도 되지만 멀미가 심해서 폰을 잘 못본다ㅠ)

 

아쉬웠던 점

  • 열심히 살려다가 말았다
  • 수업집중 1도 안되서 리액트 혼자 쥐똥만한 속도로 복습중;
  • 지금 쓰면서 안건데 저번주 계획을 1도 신경안쓰고 있었네 저건 언제하냐;

 

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

  • 정신차리기..

 

<월요일>

 

 

 

<화요일>

 

 

 

<수요일>

 

 

<목요일>

 

 

<금요일>

 

놓친부분 공부해야지ㅠ

 

좋았던 점
  • 깃허브 팀레포에 프로젝트를 열어 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만 시간, 회고

 

FE 신입 개발자 최수빈 연사님

  • Google Docs 활용
    실시간 질답가능, 나의 속도 및 난이도 객관화
  • 키워드를 반만 가져가기
    생활코딩, 코딩애플로 가장 어려웠던 큰 개념 하나만 가볍게 복습

프로젝트

  1. 목표설정
    구글폼으로 설문
    목표 구체화, 기술 스택에 대한 왜?, 부담감이나 원인 파악
  2. 안전한 피드백
    시각화
    선택권
    피드백에 대한 피드백
    '우리'로의 환원
  • 주변 동료의 장점을 내 장점으로 '손민수'
  • 깃허브 위키에 문서화
    문서화가 중요하다 (모든 활동을 문서화 잘 해놓을 것)
  • 자바스크립트 딥다이브 공부해야겠다
  • 기술 면접에서 얇은 답변 여러개보다 딥한 답변 몇개가 낫다
    질문의 의도를 파악할 것 ex) let, var 차이 호이스팅
  • 블로그 글의 질을 높이는 방법
    문제 : 어려운 개념, 궁금한 주제를 '이유'와 함께 전개
    해결 : 깨달은 점(결과)를 서술하기 보다, 깨달아 가는 과정 자체를 기술
    학습 : 어떤 것을 배웠고, 다음에 시도해 볼 점
  • 기업규모, 취업기간, 연봉, 세부조건, 최종 목표
    코드리뷰 문화가 있는지, 어떤지
    빠른 성장 가능성, 배울 수 있는 환경

인터렉티브 웹페이지 실습 1분코딩 유준모 대표님

https://next.junni.co.jp/

 

Junni is...

アイデアとテクノロジーで、世界をもっとハッピーでワクワクしたものに。ジュニのものづくりの理想を少し、覗いてみませんか?

next.junni.co.jp

three.js 3D JavaScript Library

Node.JS

어우 어려웠다

 

Naver SmartEditor 개발, 프론트엔드 채용 담당, 네이버 프론트엔드 책임 리더 우상훈 연사님

FE개발자의 역할과 성장을 위한 이야기

  • 비판적인 사고
  • 리액트를 썼다면 왜 리액트를 썼는지
    ex) 어떤 문제를 해결하기 위해 리액트를 썼는데, 생각보다 안 좋았다.
    다음엔 이런 프레임워크를 써보려고 계획하고 있다
  • 사용자의 문제를 해결하기 위해 치열하게 고민한 해법으로 적절한 기술을 활용하여 시장이 원하는 시점에 제품으로 출시하는 개발자
  • 반복적으로 노력한 근거가 있어야한다
    → 좋은 개발자로 성장하기 위해 XX 프로젝트를 진행했고 GitHub에 주기적으로 커밋합니다
  • React 를 Y 년간 사용했어요 → XX 프로젝트의 YY한 특성을 극복하기 위해 React 를 사용했습니다
  • X년 동안 다른 분야에서 전문가로 활동했고 개발자로 전향했습니다 → X년 동안 Z,Y 프로젝트의 성공을 위해 XXX 의 노력을 했고 QQQ의 성과를 거두었습니다. 이제 새로운 산업을 경험하기 위해 개발자로 전향했습니다
  • 네이버가 원하는 신입 개발자의 모습 : 탄탄한 기본기를 바탕으로 빠르게 기술을 습득하는 분
    컴퓨터 사이언드가 단단해야한다.
  • 컴퓨터 공학 중 브라우저에 굉장히 필요한 부분, 자바스크립트의 이벤트 메모리를 이해하는 부분 같은 경우 하나하나 뽀개볼 자세가 필요하다
  • 자신감과 과장은 다르다. 어차피 다보인다
    메타인지 필요
  • 내가 팔로워형이라면 리더형들을 든든하게 받쳐 줄 수 있는 능력
  • 신입의 깃허브 코드 : 기본적인 요구사항을 잘 지키고 있는가를 중점
    코드가 동작하고 기본적으로 구현해야할 것들이 구현하고 있는가
    팀 컨벤션을 지키는가, 비효율적인 로직이 있나,없나
  • 조엘 온 소프트웨어
    좋은 코드, 나쁜 코드
    You don’t Know JS 2종 
    테스트 주도 개발💖 
    클린 코더
    클린 아키텍처
    Data-driven UX 

좋았던 점

  • 알고리즘 스터디를 시작해 멧돌을 굴리기 시작
  • 멋사 동료분들의 번개강의를 듣고나서 이해가 잘됨
  • 소풍

 

아쉬웠던 점

  • 그치만 내가 짜라고 하면 못짠다
    이해는 했지만, 알고 있다고 할 수 없다
  • 호르몬의 영향으로 감정 조절 실패
    (원인 : PMS, 놓아버린 운동, 영양제 안 챙겨먹음 ,
    결과 : 우울해서 뭘 할 수가 없음 그날 공부는 조짐. 일단 자야함)

 

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

  • 깃 & 깃허브 책 서평 제출
  • 퀄리티 있는 글 포스팅 해보기

 

 

<월요일> 비동기, TS 회의, 알고리즘 스터디 회의

우리 파트에 다른 분 내용이 추가되서 겸사겸사 수정할 부분도 같이 회의했다그래도 우리 파트는 거의 마무리 된 듯해 다행이다

 

오후 10시에 알고리즘 스터디 방향성에 대한 회의를 했다

빠르게 하기 팀과 천천히 하기 팀으로 나뉘어서 오프 스터디땐 공통 문제 1개씩 풀어오는 걸로 했다

나는 일단 알고리즘이 주가 될 짬이 아니라 천천히 하기로 했고,

일단 프로그래머스 Lv.0 화,목 주2회 21:30분마다 10개씩 하기로 했다

는 목요일에 특강도 있고 금요일엔 피크닉이 잡혀있어서 수요일에 하기로.

 

시험삼아 피자 나눠먹기 문제를 해봤는데, 처음 문제를 이해하는것도 살짝 헷갈렸다;

고민해보고 각자 풀이해봤는데 여러모로 알게된 점들이 많아서 좋았다

<화요일> 비동기 fetch, 알고리즘

드디어 알고리즘 문제를 풀어 봤다

진짜 쉬운 문제부터 어제 푼 문제도 다시 혼자 풀어보고 재밋어서 9개정도 풀었다

아직 로직보다 문법을 익히는 수준이긴하다

 

<수요일> 알고리즘 스터디

예정대로 9시 30분에 알고리즘 스터디했다

각자 어려웠던 문제 2개 뽑아서 얘기했다

 

<목요일> 테킷데이Node.JS, 이력서 특강

괴로운 테킷 데이

일단 따라하는 Node.JS 강의를 수강했다

저녁특강으로 개인 이력서 피드백 시간이 있었다

노션보다 웹사이트로 따로 만들고 싶어서 난 아직 제출하지 않았다

다른분들 이력과 피드백을 보는 것만으로도 지난번보다 도움이 되는 시간이었다

네이버 블로그는 지금 거의 방치중이지만, 나름 꾸준히 쓰고있는 티스토리 기술 블로그는 방향성을 다시 생각해 볼 수 있었다

끝나고 자취방에 올라왔다 밤이 되니까 날씨가 진짜 추워졌더라 가을 가디건 한번 제대로 못입어보고.. 돌려줘요 내 가을!

 

<금요일> 한강 피크닉

난 펭도리                                                     

점심에 저렇게 먹고 오후 활동중에도 운영진분이 아이스크림을 사주셔서 또먹고

배가 불러서 세빛섬쪽에서 더 머물다가 포토이즘에서 네컷 사진 찍었다

이날 사진을 그냥 엄청나게 많이 찍었다

회고조와 더 돈독해지는 즐거운 시간이었다ㅎ

7시부터는 3조와의 2차가 있었다

 

극I라 이런 자리 정말 어색하고 기빨리는데 비슷한 사람들끼리 모여서 다들 술들어가고 자리 돌아가며 반모해서 그런지 재밌었다

3차로 또 다른 사람들이 있는곳으로 갔는데 (이제 조원들도 막 섞여서 불분명)

교대 쪽이라 자취방이랑 가까워졌다 ㄱㅇㄷ?

 

는 갑자기 속이 안좋아져서 기회를 틈타 다른 분들 일부 나갈때 껴서 금방 나왔다

남자친구가 이것저것 사주고 데려다줬다 (까스활명수는 만병통치약이야!)

 

<토요일> 산책, JS특강

늦잠자려고 했지만 일찍 깨버렸고~ 오랜만에 자취방 세탁기도 돌리고

아점먹고 산책했다 바람은 시원한데 햇빛은 쨍쨍했다 빨래널고 인천왔다
 
돌아와서 잠깐 쉬고 저녁에 JS 기초 특강이 있었다
앞으로 주말마다 오후 7시~10시 까지는 특강이 있을 예정이다 왕 신난다
 
<일요일> 오프라인 알고리즘 스터디, 스터디카페 데이트

공통 문제는 문제에 대한 이해와 어떻게 로직을 짤것인가에 대한 구상정도는 했지만코드를 구현하는 것 까진 해내지 못했다

다른분들 코드를 보니까 일단 접근 방식도 완전 다르고 한 분이 여러가지 방법으로 푸신걸 보여주셨는데,이걸 이해하는 것도 한번에 되지는 않았었다

다시 질문하면서 이해가 가는 부분도 있었지만 완벽하게 안다고 표현할 순 없다

생각보다 시간이 오래 걸려서 문제 하나 하니까 대관시간이 끝났다 ㅋㅋ?

다음주는 더 레벨이 높은 문제를 공통문제로 선정했다 아주 흥미진진하다

점심은 규카츠 먹고 스터디카페에 짱박혀서 4시간 있었다

(+ 로직은 맞는데 변수 때문에 삽질한 시간이 많아서 조금 아쉽다. 시간을 좀 더 효율적으로 쓸 필요가 있는 듯)

저녁은 거의 3년만에 유가네 닭갈비를 먹었다

테이블 키오스크?라고 해야하나 아무튼 주문이 전자화되서 격세지감을 느꼈다

 

<월요일> 스프린트 회고, 페어 프로그래밍 회의, 동료 특강

메이커 준님의 스프린트 회고시간

페어 프로그래밍에 대해 예시를 보여주셨다

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

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

 

저녁에 3조의 ㅈㅇ님이 This 와 Prototype에 대해 특강해주셨다

무려 논스톱으로 2시간 가량...

 

<화요일> 객체지향프로그래밍, 생성자, 프로토타입, 알고리즘 스터디, 동료 특강

놀랍게도 어제 특강들은 내용이 수업시간에 귀신같이 나와서 수업을 따라가기 수월했다

9시 30분부터 알고리즘 스터디에서 각자 어려웠던 문제를 2개정도 찝어봤는데 난 3개나 어려웠다ㅋㅋ

우리가 문제를 정할 때 정답률이 높은 순으로 정렬해서 보는데, 문제 정답률이 많이 떨어져서 순위가 뒤로 밀렸었다. 어쩐지

10시부터 11시 45분까지 우리조 ㅈㄱ님이 프로토에 대해 강의해주셨다 아주 성황리에 진행됐다

 

<수요일> 우울해져서 일찍 잘..

려고 했는데 (한번 우울해지면 걷잡을 수 없는편, 자고일어나야 괜찮아진다)

회고 블로그도 써야하고 잔디도 심어야하고, 무엇보다 감정에 휘둘려서 할일을 못하는게 또 싫어서 꾸역꾸역하고 잤다

원인 파악을 해보자면 호르몬과 운동 부족의 콜라보인 것 같다

집순이라 스터디하러 갈때 빼고 밖에 거의 안나가는 편인데, 그러다보니까 광합성도 못하고,

챙겨먹던 영양제들 중에 PMS에 도움이 되는 영양제가 있는데, 그것도 안 챙겨먹어서인 것 같다

아 생각해보니까 겨울마다 뭐라도 운동을 다녔었다

 

<목요일> 특강데이, 회고, 알고리즘 스터디, 페어프로그래밍

오늘 일정

꽥!

그리고 강의 중에 자꾸 서초고용센터에서 국취제 연락왔는데 KDT 과정이랑 연계된 그런게 아니라 그런지, 상담 때문에 센터를 한달에 3번?은 방문해야 한다는 데 매우 불편한 것 같다 졸업증명서도 떼야함 귀찮; 하여튼 나랏돈 타먹기는 항상 까다롭다니깐 과정 끝나면 취업할건데 취업하려면 수강을 우선적으로 하게끔 해줘야하는거 아님? ㅠ,ㅠ

객체지향 프로그래밍 복습
  • 사실 실무가서 배워도 상관없다는 입장
    왜냐면 신입으로 들어가면 보통은 사수가 객체 지향으로 프로그래밍한 코드들을 볼테니까
  • 프로토 타입은 어떤 임의의 공간을 가르킨다
  •  
  • 생성자 함수로 만든 인스턴스의 기본 타입은 Object로 프로토
  • constructor는 instance의 프로토를 가르킨다

https://web.archive.org/

 

Wayback Machine

Due to a planned power outage on Friday, 1/14, between 8am-1pm PST, some services may be impacted.

web.archive.org

최척화 Optimization
  • Make it work, Make it right, Make it fast
    -Kent Beck

https://web.dev/why-speed-matters/

 

속도가 왜 중요합니까?

사용자 경험에서 속도는 중요한 역할을 합니다. 모바일 속도로 인한 지연은 실망스러울 뿐만 아니라 비즈니스 결과에도 부정적인 영향을 미칠 수 있습니다.

web.dev

https://kraken.io/

 

Kraken.io Image Optimizer

Kraken.io is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization algorithms Kraken.io is a world ahead of other tools. Want to save bandwidth and improve your website's load times? Look no further and welcome to Kraken!

kraken.io

이미지 최적화 사이트

  • 폰트는 결국 이미지이기 때문에 3개 이하로 사용하되, 용량이 최적화 된 폰트로

https://pagespeed.web.dev/

 

PageSpeed Insights

올바른 URL을 입력하세요.

pagespeed.web.dev

https://web.archive.org/web/20220313150523/https://csstriggers.com/

 

CSS Triggers

@PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates

web.archive.org

  • 대부분의 CSS속성이 reflow를 일으키는 편
  • Chrome : Blink
  • Edge : EdgeHTML→Blink
  • FireFox : Gecko
  • Safari : WebKit
  • InternetExploer : Trident

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

 

window.requestAnimationFrame() - Web API | MDN

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의

developer.mozilla.org

 

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

 

  • 스타트업 지원은 원티드, 로켓펀지, 점핏 (사람인에서 만든 플랫폼)
  • 한재현 강사님 커리어 썰들었다
    부트캠프를 많이 들으셨는데, 어떤 학원은 국비지원을 받으려고 과정을 만들다보니 과정이 시작하기 직전까지도 강사님이 정해지지도 않고 실제로 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시부터 자습시간이 되었다

 

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

10월 20일 이력서 특강 피드백 메모입니다

  • 블로그로 방향성을 직접 해보면서 궁금한점이나 문제해결한 경험을 어필할 수 있게끔 포스팅
  • 프로젝트는 무조건 최신순으로 BBD,SSD 같이 면접관이 물어볼만한 키워드는 미리 공부
  • Next.js를 썼다면 왜 썻는지도 이유도 함께 기술
  • 오픈소스기여
  • 가독성 좋은 레이아웃짜기
  • 화면을 반으로 나눠 여러 이력서를 같이 볼 수도 있으니 웹사이트라면 반응형까지 고려

늘 느끼는건데, '왜?' 가 참 중요한 듯

블로그 방향성을 잡는데 도움이 되었다

'메타인지'하고 면접관의 입장에서 나를 바라봐야 한다

 

개인적으로 나는 아직 내세울 활동이 없기에 시멘틱한 태그를 사용한

공들인 웹사이트로 이력서를 만드는게 조금이라도 나를 보여주는 데에 더 나을 것 같다는 생각을 했다

 

https://wonny.space/writing/work/engineer-resume

 

개발자 이력서 작성하기 (feat. 이력서 공개) | Wonny Log

이력서 작성 시 참고하면 좋을 정보와 체크리스트 공유 | 2022년 4월 8일 업데이트 안녕하세요, 워니입니다. 이력서 작성 방법에 대한 글을 올린 후, 수많은 강의 제안과 이력서 …

wonny.space

'개발자 이력서 작성하기' 워니님 이력서 포스팅

 

9월 29일 이력서 특강 피드백 메모입니다

  • 이력서의 목적
    면접자 1차 필터링
    질문할 거리
  • 구체적으로 기술, 역량을 수치화
    다른 이력보다 개발 이력 중점
    강점의 차별화
  • 20초 이내로 잘 읽히는 가독성있는 레이아웃
    섹션 그룹핑, 핵심 내용 강조
  • 제목
    식상한 한줄은 없는게 나음
  • 프로필
    연락처, 깃허브, 블로그, 사진
    불필요한 정보 필요없음
  • 자기소개
    2~5줄
    경력,경험, 성과, 태도 어필 (+수치화된 근거)
  • 경험1
    회사 경험, 프로젝트
    최신순, 양보다 질, 적절한 링크 활용
  • 경험2
    회사 외 경험
    기술 번역, 오픈소스
  • 기술
    실무 활용 가능한 기술만
  • 학력(전략적 선택)
  • 이력서 작성 후
    맞춤법
    링크 제대로 동작하는지 확인
    별도 파일 첨부하지 않는다
    PDF나 링크로 제출
  • 퇴고
    인사담당 입장에서 핵심내용 강조, 불필요한 내용 삭제
    체크리스트 활용
  • 피드백 잘 받는 법
    예의
    1.자기소개
    2.나의 상황/ 맥락 설명
    3.당신이 왜 나에게 도움이 될 수 있다 생각하는지
    4.감사인사
  • TIPs
    관심없는회사 → 관심많은 회사 순서로 일정 나누기
    탈락 시 피드백 요청, 개선
    지원 전 관심 회사와 티타임(동료, 기준 성립)
    가능한 추천 전형
    과제, 코테 준비
    수치 툴 : 라이트 하우스
    검색 키워드 : 웹 퍼포먼스
DOM
  • 찾아서 저장하고 사용한다
  • 변수 선언할 땐 const 위주로 작성하는 편, 재할당이 필요하면 let
  • 키값이 인덱스 형태로 되어 있는 경우를 '유사 배열' 이라 한다
  • 탐색은 document부터 할 필요는 없다
    장점: 페이지 로딩 속도가 빨라진다 > SEO에도 영향(정보를 빨리 찾을 수 있어 사용자 편리성이 높아진다)
  • HTMLCollection / NodeList 차이점?
    HTMLCollection은 라이브 돔(실시간으로 바뀌는 자료형)이다
  • toggle : 클래스가 있으면 넣어주고, 없으면 빼준다
    스타일을 주고 자바스크립트로 제어해 많이 사용한다
  • contain : 클래스가 있는지 확인한다
    조건문에서 활용할 수 있다 ex) ??d클래스가 있다면 ~~
  • 실습 타임
    HTML, CSS부터 짠다
    먼저 뭘 할지 모르겠다면 큰 것부터 선언해 하나 하나 찾아 낸다
    DOMDOM
  • button 은 type click
    myInput 은 type input

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText#%EC%98%88%EC%A0%9C

 

HTMLElement.innerText - Web API | MDN

HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수

developer.mozilla.org

  • textContent 는 날것을 뱉고,
    innerText 는 HTML은 흡수해서 텍스트만 가공해서 뱉는다

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations

 

Element.innerHTML - Web API | MDN

Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.

developer.mozilla.org

 

오늘 배운 것들로 캐러셀 과제와 밴딩머신을 구현할 수 있게 되었다^^!

 

9시~11시 조원들과 게더에서 벤딩머신 코드리뷰

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

 

box-sizing - CSS: Cascading Style Sheets | MDN

box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

developer.mozilla.org

 

나같은 경우 '잔액', '소지금', '원' 같이 고정된 값은 가상요소를 주었는데,

가상요소에도 자바스크립트로 선택이 가능한지 알아봐야할 부분이다

 

+ Recent posts