개발새발

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

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

프로젝트

1. 목표설정
   구글폼으로 설문
   목표 구체화, 기술 스택에 대한 왜?, 부담감이나 원인 파악
2. 안전한 피드백
   시각화
   선택권
   피드백에 대한 피드백
   '우리'로의 환원

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

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

https://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 

객체지향 프로그래밍 복습

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

https://web.archive.org/

최척화 Optimization

• Make it work, Make it right, Make it fast
  -Kent Beck

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

https://kraken.io/

이미지 최적화 사이트

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

https://pagespeed.web.dev/

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

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

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

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

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

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

https://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

https://devfolio.kr/

설문조사 Form

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

https://colorhunt.co/

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

fieldset

legend

To do List

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

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

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

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

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

초보용 책 추천

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

스터디 모임을 많이 해라!

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

굉장히 많이 도움이 된다

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

https://hyeonseok.com/blog/306

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

HTML

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

SECTION

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

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

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

https://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

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

은근 너무 어렵더라

몇명 하고싶은 사람 봐주고

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

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

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

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

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

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

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

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

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

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

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

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

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

영화추천
peaceful warrior

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

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

팀 활동

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

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

https://thevc.kr/

https://startupspace.kr/

코드 라이언 시간

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

Weniv 박누리 멘토님 특강

오늘도 개발자가 안된다고 말했다

책

• 오늘도 개발자가 안된다고 말했다
• 개발자의 글쓰기 (소프트스킬내용도 많이 나온다)
• 함께자라기

소프트스킬도 하드스킬 못지않게 중요하다

개발자는 개발만 하는게 아니니까!

프로젝트를 하면서 갈등상황은 없었나, 갈등상황이있을때 어떻게 해결하는 편인가

팀장이든 팀원이든 활발하게 지식을 공유한 것도 꾸준히 기록하기

웹에이전시의 프로세스

• 의뢰&사전미팅 : 고객의 요구사항을 정리하고 진행가능 여부를 확인
• 계약
• 기획안 작성(https://moqups.com/,PPT) : 기획자가 넘버링을해서 기획안을 짠다
• 킥오프회의 : 기획안을 토대로 회의
• 디자인 작업 (피그마,제플린) : A안 B안을 만들어 고객에게 확인받는다
• 개발(프론트&백)
• QA(품질관리) : 원래 의도한대로 잘나왔나 확인하는 과정
  QA하면서 테스트하지 못한부분이 나와서 추가하게 될 수 있으므로 이전에 의사소통하면서 확인하는 과정이 중요하다
• 오픈

말을 구체적으로! 안되는 이유를 설명을 해줘야 한다

내가 이해한대로 하지말고 돌다리도 두드리고 건너자 중간에 이상한 포인트가 있다면 물어본다

수정사항을 요청하고 확인할 때에는 보다 정확하게 정보 전달하기

적어도 수정 URL / AS-IS 내용(지금은 이러한데) / TO-BE 내용(이렇게 하면 좋겠다) 혹은 이미지 전달하기

깃헙프로젝트

장점

1. 한눈에 들어오는 진행 상황
2. 커밋 단위로 트래킹하기 편리
3. 직관적인 코드와의 연동

https://fluoridated-office-e89.notion.site/221007-GitHub-Projects-Issues-c211cf6d98a84f56afcf2f70137ea07b

+ 알잘딱깔센 GitHub

와 짱 편하다

https://gist.github.com/ihoneymon/652be052a0727ad59601

Weniv 강혜진 멘토님 특강

HTML & CSS ㄱ 나나요?

• 시안대로만??ㄴㄴ 유지보수, 재사용도 고려해보기

• 반응형에 좋은 flex

• gnb: Global Navigation Bar
• 피그마 디자인 백그라운드에 깔고 Opacity 조절하는 팁

• SEO 확인 라이트 하우스(부동산 폭락론자 유튜브 채널 이름이라 나혼자 맨날 피식함응?)

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related?hl=ko

https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe/related?hl=ko

• 여러분이 만든 웹사이트는 모두에게 친절한가요?

와 넘 빠르다

Array 한번 정리

• Array(100).fill(0).map((_, index)=>index)
  (100) [0부터 99까지 채워진 배열이 출력된다]
• (변수명Value,인덱스Index,배열Array)
  변수명이 _인 이유는 자리를 채워주는 용도이다
• Array(100).fill(0).map((_, index)=>index+1).filter(i => i % 3 === 0 || i % 5 === 0)
  (47) [3의 배수 5의 배수]
• sort는 새로운 배열을 만들기 때문에 원본이 변경되지 않는다

조건문

• if 문
• if ... else 문 (중첩문은 맨위에 둔다)
• switch 문 (잘 안쓰지만 코드 가독성이 좋다)
• 삼항연산자 (조건연산자)
  두개까지는 괜찮은데 많아지면 한줄일 때 가독성이 좋지 않다
• nullish 연산자
  요소 값이 없을 때 undefined가 출력된다
• || : 0, null, undefined
  ?? : null, undefined
  falsy하다 : 0, null, undefined, "", NaN
  nullish하다 : null, undefined

반복문

• for 문 (Airbnb 컨벤션을 많이들 쓰는데 for문을 쓰지 말라고 권고되어 있다?!)
• forin
• 29번 파일 암기할 코드 재귀함수 할 때 필요하다
  문자열 뒤집기
  시그마
  팩토리얼
• 코딩도장 레벨2 구글입사문제 정도는 풀기 (손으로 외우기)
  https://codingdojang.com/scode/393?answer_mode=hide

• while 문
  31번 파일 구구단 코드 암기
•  

회사 코딩 테스트를 볼 때

알고리즘 책을 옆에 두기 (구글 검색보다 빠르고 정확할 수 있다)

코딩 테스트 후 면접이 진행되므로 문제를 못 풀었다고 쳐져있는 것 보단

시간이 15분정도 남았을 때 이 알고리즘이 어떤걸 묻는 문제이며 어떤식으로 풀려고 했는 지 머릿속으로 정리해보자

(문제를 풀지 못했다고 탈락이 확정은 아니다!)

반응형 웹 완성

태블릿, 모바일 버전 마무리

• max-width만 주고 rem환산하여 수치입력
  (font-size에 따라 padding도 커지길 원한다면 em으로 준다.
  rem은 루트 요소의 폰트 사이즈, em은 부모 요소의 폰트 사이즈를 상속받기 때문)
• 요소선택자로 선택하는이유는 좀 더 정확하게 선택할 수 있으므로
• flex-basis는 axis 방향에 따라 flex가 column 방향일때 높이로 유연한 컨텐츠 크기 조정 가능
• 컨텐츠가 없을때 필요한 경우 높이를 지정해주기도 하긴 하지만
  안에 컨텐츠가 있는 경우는 높이값을 직접 지정해 주는 경우는 거의 없다
• 콘텐츠가 많아지면 어떤 화면이든 레이아웃이 깨지지 않게 하기는 쉽지않다
  근데 누가 화면을 늘렸다 줄였다 확인하는 경우가 개발자가 아니고서야..
  그 시간에 다른곳에 리소스를 투여하는게 효율적

https://devlog.jwgo.kr/2019/01/16/why-we-use-625p-instead-of-10px/

웹의 역사

• 최초의 컴퓨터
• 최초의 웹사이트

http://info.cern.ch/

• 닷컴 버블
• 브라우저 전쟁
  모자이크 > 넷스케이프 내비게이터 > 인터넷 익스플로러
  모질라 파이어폭스, 사파리, 오페라, 크롬
  
  

짤의 출처: https://www.youtube.com/watch?v=taJV5cigzNY 

배열

• {리터럴} [배열의 리터럴]
• 리터럴은 할당되기 전의 값이다
• 문자열의 배열 특성은 불변성이다
• mutable(가변), immutable(불변) 많이 듣게 될것
• 희소 배열
• Array.메소드
  Array.prototype.메소드
  ????
• unshift() : 맨 앞에서 요소를 추가할 때
• shift() : 맨 앞에서 요소를 제거할 때
• splice() : 요소를 위치할 인덱스(음수일땐 뒤에서부터), 제거할 요소 개수, 배열에 추가할 요소
• slice() : 잘라낼 배열의 시작 인덱스, 종료지점 인덱스(생략시 끝까지 추출된다)
• indexOf() : 찾을 요소, 탐색을 시작할 인덱스(생략가능)
  탐색되지 않았을 땐 -1이 출력된다
• join() : 요소들을 ()로 연결해 하나의 값인 문자열로 만들 때
• fill() : 똑같은 요소들로 채울때(많이쓴다?)
• flat() : 평탄화할 때 (알고리즘 문제 풀 때, 재귀적으로 평탄화 할 수 있다)
• includes() : 특정 요소가 있는지 확인할 때
• find() : 하나의 요소라도 조건을 만족하는지 확인할 때
• filter() : 모든 요소가 조건을 만족하는지 확인할 때
• map() : 함수 호출할 때
  filter는 조건 메소드가 자체적으로 있고 map은 따로 없다
  (함수자리에 조건문을 걸면 메소드처럼 쓸 수 있다) 
• forEach() : 각 요소 콜백 1회씩 실행
• sort() : 요소 정렬 (유니코드 오름차순)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#%EB%A9%94%EC%84%9C%EB%93%9C

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map