[멋사 FE 스쿨] 18일차 리뷰 + 데일리 회고

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

morning break

• 주니어만 해도 5개 정도 언어를 다룬다고..하하

• node를 한다면 server는 필수로 다뤄야한다.

• 대기업이나 육성해서 키우려고 하지..

• 어떤 회사라도 FE 개발자라고 서버를 모르지 않을것..! 기본적으로 다룰 줄은 알자

• 클라우드 VM 가격 비교

  https://zetawiki.com/wiki/2020_클라우드_VM_가격_비교

  https://brunch.co.kr/@topasvga/1242

  https://swiftcoding.org/all-about-amazon-lightsail-billing

  • FE 개발자라고 이런 걸 몰라도 될까?

    • 물론 알아야한다. 제안하는 경우

  • 물론 실무에서는 비용 산정으로만 가지는 않는다. NCP(네이버)로 갈 확률이 높다.

    왜? → 해외 결제가 까다로운 곳들이 많다. light한 개발 같은 경우는 한국 것을 쓰게 될 곳이 많다. 원화 결제.

    NCP에서 스타트업 Promotion을 진행하는 경우가 많다.

  • 그래서 AWS, GCP 등을 배우고나서도 NCP 쓸 확률 높

  • 회사를 갔는데 NCP 지원을 안받는다? NCP 지원을 모르거나 안 받고 있을 확률이 높다. 내가 제안해보자!

  • 제코베가 구름 IDE를 사용하시는 이유??

    → 편하기 때문에 가격 자체는 연간 AWS보다 4만원정도 비싸다. 싸피 수석의 주니어 개발자가 일한 적이 있는데 그때도 선택한게 구름(!) 그때도 이유는 편해서라고..ㅎㅎ

  • VM이란? → virtual machine

    진짜 물리적 컴퓨터를 주는 것이 아니라 논리적 컴퓨터를 하나 주는 것이다. 따라서 VM

  • 1C2G → 1 Computer 2 Gigabytes

    • 그럼 내 컴퓨터가 훨씬 좋겠네요?

      → 물론이다.

      하지만 서버의 장점? 가볍고, 가상 서버 회사는 정전 등에도 대비가 되어 있다. 무중단 배포에 훨씬 장점이 있다.

      또, 엄청난 숫자의 접속자 분산에도 용이

      레이드에서도 장점(하드 하나가 날라가도 다른 컴퓨터에 백업이 잘 되어있다.)

  • 지도 API등을 이용해도 결국 NCP, GCP등을 쓰게 되어 있다.

• 서버 터졌을 때 대처, 복구 방법?

  → 주니어는 알 수가 없고, 알고 있다면 대단한 것. 재부팅해도 안될 수도 있다.

  서버를 켰다 → NginX 올려보기 → 문제 없다? → Node 올려보기 → 엄청난 부하가 걸린다? → Node에 문제가 있는 것

  서버
  |- Nginx
  |- Node
  |- MySQL
  백업서버

  • 트러블 슈팅 결국 정답은 log에 있다.

• log란?

  → 모든 코드 남긴 기록, 접속 기록이 남는다고 했잖아?

  누가 어떤 ID로 무슨 서버에 접속해서 어떤 행위를 했다.

  한 사용자가 엄청난 트래픽을 발생시켰다? 그 전 log들을 다 살펴봐야한다.

수업

자격증 취득에는 회의적인 편이시지만

• 한번 공부할 때 제대로 해둬서 더 공부하지 않고 한번에 가서 자격증 취득하자 ㅎ

리눅스

• 리눅스 디렉토리 한번쯤 읽어보면 좋음https://ko.wikipedia.org/wiki/파일시스템_계층구조_표준

Nginx

• 아직 미출판(!)된 서적이지만 시중에 제대로 된 책이 없어서 집필하시는 중이라는..
• 제코베 페이지는 Apache로 되어 있다.
• git에서는 동적인 페이지 역할을 못해준다.
• Nginx 등은 동적인 페이지가 가능
• git에 올려서 동기화 되게끔
• Apache vs Nginx
• Web Server
  • 요즘은 Nginx로 바꾸는 추세
  • Apache 자체가 heavy해졌기 때문에
  • 하지만 Nginx도 사용자 요구에 따라 무거워질 수 있다. 그래서 시대의 흐름, 유행에 따라 맞춰서 사용하면 된다.
• 동적으로 실행 가능하게 하는 Interface 개념 → Node 가서 이해하게 될 것
• 많은 것들이 시니어 레벨에서 관리하긴 할 것. 비용과 관련된 이야기이기 때문에
• 시니어란?
  • 연차가 중요한 게 아니다. 그냥 짬밥으로 안된다.
  • 보통 comfort zone(하고 싶은 것만 하고 싶다)을 벗어난 사람을 시니어라고 하게 된다. 더 큰 도전. 하고 싶은 것만 계속 할래! 하는 사람들은 계속 주니어에 머무는 거..
  • 진유림 님의 기억
  • 계속 공부해야한다!!
• 주니어에서 시니어 넘어갈 때 다시 공부하게 되는 것들?
  • 알고리즘 → 보통 시니어 전에 한 번 더 짚는다. 10년차가 다시 보는 경우 많이 보셨다고
  • 개발자 영어
  • 인프라(리눅스, AWS)
  • AWS에 다니셨던 분이 AWS 자격증이 하나도 없어서 스터디를 만들자 하셨던 기억도..ㅋㅋ

다시 구름 실습

• |(pipe)는 앞의 것을 연채로 뒤의 것을 실행

• ;는 연달아서 명령어 수행

• {3..5} 이런식은 연속한 숫자 emmet에서 $와 비슷한 역할

• ; vs && vs &

  https://opentutorials.org/module/2538/15818

• top은 작업관리자 창 같은 역할

• 구름 로컬 터미널과 연결은 AWS와 다르게 비밀번호 그냥 복사 붙여넣기로 하면 돼서 편하다

• log등을 회사 밖으로 가져가서 분석한다? 공개되면 안되는 정보가 있기 때문에.. 안된다.

막간 잡담

• 적게 일하고 많이 번다?

  → 그런 회사가 있을 수 있을까. 적게 일하는 개발회사를 본적이 없다. 보면 제보 좀..

• 개발자가 노는 회사는 금방 망하더라..

• 개발자를 점점 많이 채용하는 회사는 거의 성공한다는 통계가 있다.

• synololgy 오호.. 혼자서는 절대 모를 용어 같다

  synology + docker

• docker에서 사용하는 하나의 pc가 결국 구름에서 쓰고 있는 컨테이너랄 비슷

• tar vs zip

  → tar은 그냥 묶어주기만 하는 것

• alias

  → 별칭 묶어주기

  풀어주려면?

  → unalias

• man : manual → 사실 거의 사용하지 않는다

• nslookup은 정말 자주 사욯한다.

• 나오는 메세지가 왜 다 다른가? → EC2 사용하는 컴퓨터 마다 다를 수 있다.

  • apt-get을 사용할 때 먼저 접속하는 곳에서 가져오는데

  • apt-get을 통해서 악성 코드가 올 수도 있기 때문에 궁금해서 추적해보셨는데

    → 한국에서는 카이스트, Daum 등 apt-get 했을 때 나오는 것들을 배포해준다. 신뢰할만한 곳에서 배포해주는 것이기 때문에 악성 걱정은 없겠지만 카이스트냐, Daum이냐 등에 따라서 가져오는 게 다를 수도 있다.

• nslookup으로 address를 가져와서 어디에 쓸까?

  • cli로 홈페이지 주소에 접근할 때

• 통신이 마비 될 때 접근해서 확인 도구? 서버가 죽었다?

  → ping부터 날려본다.

• 코드리뷰 계속 신청하자..! 하나도 못받았네..ㅠ

  → 물리적으로 모두가 들어오기는 힘든 상황

• ping을 막아두는 이유?? 공격이 될 수 있다. synflooding공격

  자기네 개발자가 ping을 보낼 이유는 없다.

• traceroute도 실무에서 사용할 일이 꽤 있다.

• traceroute는 언제 쓸까?

  → 네트워크 이슈가 발생할 때 경로 파악 차원에서 route 장비 확인해서 어디서 막혔나 확인 가능하다.

  ip확인하면 위치를 확인할 수 있다.

  장비별 ip set이 있기 때문에

• & 명령어는 터미널의 백그라운드에서 실행

• ipconfig vs ifconfig | 윈도우 vs 리눅스

• cat, more과는 다르게 첫 10줄만 보고 싶을 때 head 사용 -(숫자)를 붙이면 해당 갯수만큼 출력

• nohup은 터미널 세션이 끊겨도 계속 실행되는 것

• curl은 packet을 사용할 경우에 많이 사용한다.

• 백엔드 지망하면 vim 에디터를 추천

---

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

• chmod
• FE는 linux 까방권 10회 정도??
• 중간에 수준 확인을 위해 시험 같은거 한번 볼 거임
• 실무에서 컨테이너를 지운다는 것은 있을 수 없는 일..!
• 구름에 코드 저장해두고 잊으면 6개월 후 동결되기 때문에 꼭 깃헙에 저장해두기 특히 Node.js 같은거
• 퀴즈 정답

1. alias ls='ls -a'
2. unalias ls
3. 방향키 위
4. tab
5. a. sudo apt-get install tree
   b. tree
6. find -name '*.js'
7. find -name '*.js' > result.txt
8. pwd
9. mv a/one.txt a/change.txt
10. mv a/change.txt b

• 실제 서비스 런칭 프로세스

  1. url 구매
  2. https 인증서 발급 구매 → 한번밖에 안된다
  3. url 구매한 것을 컨테이너에 연결

• AWS는 URL도 살 수 있고 인증서도 살수 있고 다 할 수 있다. 그래서 편하다.

  AWS가 https 인증 업체다..!

Sass

• 스타일 sheet가 길어져서 같은 작업을 반복적으로 하게 되면 문제가 있는거다

• css로 컴파일 되는 스타일 시트 확장 언어

• css를 만들 수 있는 새로운 언어다..!

• 굉장히 많은 수의 css를 작성할텐데 그를 위해 필요한 언어다

• vs scsss

  중괄호{} 사용

• sass 문법 그대로만 가다보면 대혼란 파티가 발생할 수 있어서 scss로 해줄 것이다.

• node sass vs ruby sass

  vsc extension으로 있는 컴파일러는 루비이긴 한데 지원이 중단됐다.. 그래도 연습에는 문제 없다.

• scss 에서 가 앞에 붙어 있는 것들은 컴파일 단계에서 skip -> 자바에서 /_init/ 비슷한건가

• scss에서 //가 주석의 역할을 해주지만 css로 컴파일 되고는 볼 수 없다. 즉, 한줄 주석 자체는 사라진다. 물론 /**/ 주석은 남아있다.

• Sass 어렵다.

• .map은 mapping 해주는 파일

nesting

• 너무 중첩되지 않는 것이 좋다. 중첩을 과하지 않게!!
• 잘 쓰면 엄청 편하다!
• 현업도 Sass를 사용하는 사람 안하는 사람 나뉜다.
• light한거 할 때 뭐 찾아보면서 하지 않는다. 그냥 bootstrap 등등 사용
• & 자리에 부모요소가 딱 들어간다.
• Sass를 사용하는 이유? 논리 구조를 직관적으로 보기에 좋다.
• 너무 많은 중첩에 좋은 것? → @at-root 이를 이용하여 중첩에서 벗어날 수 있다.

변수선언

• 값을 일일이 고치지 않아도 된다는 말
• 값을 일일이 다 넣는 걸 '하드 코딩'이라고 하는데
• css에서 —var라고 쓰는 것이랑 별로 다르지는 않다.
• 타당한 이유가 있는 변수들만 먼저 생성
• 수정될 가능성을 염두해두고 변수로 선언하기
• Sass도 함수 나오고 하면 어려울 수 있는데 JS 하면서 자연스럽게 이해되는 것들이 있을 것임
• boolean 값 첫 글자가 소문자인 것 주의
• Sass에서는 0부터 시작이 아니라 1부터 시작이다
• boolean값은 @debug를 통해서 보면 된다. console.log랑 같다고 생각하면 된다.
• scss가 vendor-prefix를 같이 던져준다.
• 지역변수 전역변수 조심해서 잘 쓰자
• !global은 local 변수를 전역 변수로 쓸수 있게 해준다. 그런데 사실 지역변수를 전역으로 바꿔주는 것은 의도에서 벗어난다.
• boolean은 button이면서 circle인 경우 뭐 해줘라 같은 경우 쓰인다!

mixin

• 코드 재사용을 위해 필요한 것
• 함수 같은 기능을 구현할 수는 있지만 좀 다르다.
• @mixin으로 생성할 수 있고 @include로 사용할 수 있다.

벤딩머신 과제는 꼭 만들어라

→ 보통 이 정도 과제 나오는 회사는 1차 테스트 안본다.

막간 잡담

• 사원증 처음엔 너무 간절하지만 달고 나면 별 것 아니다. 우리를 증명해주지 않으니까 너무 거기에 집착하지 말자 그냥 종이일 뿐!!

• 떨어졌다고 울고 힘들어하고 시기, 질투할 필요가 없다.

• 너무 진지하게 살 필요 없다

• 4명이 동업을 하더라도 지분을 25% 씩 갖는게 아니다. 지분 전쟁이 많다. 지분은 안 줄 수가 없으니..

  대표가 70% 이상 갖고, 나머지는 5% 미만으로 갖고 월급을 제때제때 주는 걸로 가야지 분쟁에서 문제가 없다.

• 개발자에게 준비물은 노트북 단 하나다! 회사 만든다는 것이 사실 그냥 집부터 시작해도 된다. 회사 주소를 그냥 집 주소로 해두고

• 프리랜서 → 사실 회의적. 일하지 않아본 프리랜서가 많이 할 줄 알까? 결국 일감을 주는 사람은 지난 회사의 동료들이다. 처음부터 프리랜서는 좀 비관적.

• 창업할 때 아는 사람 중에서 잘하는 사람들을 데리고 오는게 좋지. 공개 모집하는 건 별로다.

• 창업이 힘들지 않은 경우는 없다.

mixin vs extend

• 크게 차이는 없어서 현업에서는 그냥 쓴다 정도?

extend

• extend를 상속이라 생각할 수는 없다. 개념이 조금씩은 다르다.
• %placeholder도 많이 쓴다. → 컴파일되지 않는다.

이후 Sass 실습

지원하는 회사가 Sass를 쓰는지 알아보고 너무 깊게 파지는 말자

데일리 회고

• 금일 조은님(https://euncho.medium.com/)의 특강은 오프더레코드가 더러 있어서..ㅎ 엄청나신 분이라는 것 정도만 알고 있자! ㅎㅎ

본격적으로 Sass를 다루게 되면서 슬슬 JS스러운 문법 내용들이 나오기 시작했다. 점점 논리적 사고를 요하는 단계에 접어들면서 힘들어하는 동기들이 더러 보이는데, 할 수 있는 선에서 최대한 도움을 줄 수 있으면 좋겠다!

어제는 피곤함을 이기지 못하고 결국.. 이력서 페이지 하나 완성 시키지 못했다ㅠㅠ 계속해서 두통에 시달리고 있는데, 아침 운동을 하루 정도 쉬어가야할지 고민이다. 그래도 markup을 통한 이력서 제작은 정말 나중에 도움이 될 것 같아 일단 간단 템플릿은 만들긴 했다! tailwind를 통한 markup 작성은 확실히 element의 style이 가시적으로 class명을 통해 보이다보니 좀 더 수월하긴 한 것 같다.

Sass 실습이 더 남았는데, Sass를 통해 보다 간단한 리팩토링의 과정을 거치는 것은 정말 재밌다 ㅋ.ㅋ 그나저나 노트북 모니터 한개로만 개발하기에는 점점 힘에 부치고 있다. 15인치 작은 화면에 여러 코드를 비교하면서 보려니 한번에 볼 수 있는 정보량이 현격히 떨어진다. 모니터를 하나 사야하나.. 고민이다. 돈도 안버는 주제에🤦‍

오늘 한 일

• 리눅스 실습, Sass(Scss) 사용 / 리눅스는 수업 내용 완벽 이해, Sass는 숙련이 필요함
• 특강 -> 리액트 스터디 잘 하고 있는 것 같다. 하지만 무엇보다 중요한 기본을 위해 JS 스터디 참여

할 수 있는 일

• JS 문제 딱 5개만 풀고 자자
• 1만시간의 법칙 마크업 진행하자