✈️ 13주차 회고

이번 주 부터는 2차 프로젝트 기획이 시작됐다. 3주간 개발을 시작해야돼서 미리 기획을 진행하라고 팀을 일찍 짜주셨다. 우리 팀이 만들려는 서비스는 강아지 산책 알바 매칭 사이트인데, 기존에 있는 서비스가 아니라서 기획하는 데 조금 오래걸렸다. 당근마켓, 김과외 등 비슷한 사이트는 있지만 그게 다 전반적으로 합쳐서 만들어야 되기도 하고, 비슷하기만 하지 똑같지는 않아서 내 의도를 팀원들한테 전달하고, 이해시키는 게 어려웠다. 결국 주요 서비스를 3개로 나눠서 백1프론트1로 팀을 짜서 기획하고, 피그마로 그림을 먼저 그려놓고 설명하는 방식으로 진행되었다. 다행히 나름의 절춘안이 되어서 다들 이해할 수 있는 기획을 완성시켰다.

확실히 프로젝트를 시작하려고 하니 떨리기도 하고 설레기도 하는데, 이번 일주일동안 팀원들과 소통하면서 협업의 어려움과 문제 해결 방식을 계속 생각하게 되었다. 남은 3주 동안 팀원들과 잘 배려하면서 멋진 프로젝트가 완성 되었으면 좋겠다는 바람이다.

스터디

이번 주는 프로젝트 기획때문에 수요일까지만 스터디를 진행했고, 잠깐 멈췄다가 수료 후 다시 모이기로 했다. 지금까지 리액트 프로젝트를 하면서 왜 리액트를 써야하는지 점점 느끼고 있다. 또한 마지막 주가 되니 전역으로 상태관리를 해야 될 부분이 생겨서 리덕스도 써보고 싶다는 생각이 들었다. 엘리스에서 알려준 강의도 듣고 추가적으로 유튜브 강의도 들으면서 리덕스 사용법을 공부했다. 프로젝트에서는 적용해보면 좋을 것 같다는 생각이 든다.

프로젝트 기획

위에서 말했듯이 강아지 산책 알바 매칭 사이트를 만들려고 한다. 실제 서비스화가 됐으면 좋겠다는 생각에 기획적으로 탄탄하게 준비하긴 했지만, 어플로 나오면 더 좋을 서비스이기도 하고 실력이 아직 부족하다보니 조금씩 기능을 빼가면서 해야될 것 같다. 조금 아쉽긴 하지만 프로젝트가 끝나도 계속 리팩토링하고 보완해가면서 실제 서비스처럼 만들어보고 싶다.

기획은 피그마로 진행했고, 리액트, 리덕스 툴킷, 타입스크립트, MUI, Styled Component 를 사용하기로 했다. 갑자기 너무 많은 기술을 사용하는 것 같아서 걱정되긴 하지만, 코치님이 계실 때 즉 누군가한테 도움을 받을 수 있을 때 많이 배워두고 싶어서 팀원들과 이렇게 정하게 되었다.

✅마치면서...

드디어 트랙이 끝나고 마지막 프로젝트만을 남겨두고 있다. 초반에는 쉬워서 아쉬운 부분도 있었지만, 진행 될수록 심도 있는 내용을 배우게 되고 더 탄탄한 코티님들께 배우고 많은 내용을 알게 되면서 엘리스 트랙에 참여하길 잘했다는 생각이 들었다.

특히 4개월이라서 다행이라고 생각이 드는데, 다른 분들은 어떨지 모르겠지만 나는 이론적으로 혼자 공부하는 게 더 맞아서 차라리 이렇게 빠르게 배우고 혼자 배운 내용을 깊게 파보는 것이 훨씬 시간 효율적이나 내 공부에 있어서 도움이 되는 것 같아서 매우 만족한다.

또한 동료 레이서를 알게 되어서 계속 다른 프로젝트도 같이 할 수 있어서 좋고, 개발이나 취업 관련 얘기할 사람도 생겨서 든든하다! 또 코치님이나 매니저님 덕에 개발 현업 시장을 알 수도 있고, 계속 도움을 요청할 수 있어서 좋은 것 같다.

약 3달 간 수업 듣고 진도 따라가느라 고생했다.. 내 자신...👍🏻

✈️ 12주차 회고

이번 주 부터는 아예 이론보다 실습에 집중했다. 한 번 프로젝트로 공부해보고 나니, 확실히 앉아서 이론만 듣는 것보다 직접 해보는 게 더 와닿고 집중도 잘 돼서 스터디에서 하는 프로젝트로 공부하기로 마음 먹었다. 프로젝트 스터디에 들어간 덕분에 리액트로 프로젝트를 미리 하면서 2차 프로젝트를 대비할 수 있어서 좋은 것 같다. 물론 이것만 해서는 깊은 공부를 할 수 없으니, 나중에 이론을 다시 들어야할 것 같지만... 지금은 계속 집중도 안되고 진도를 따라가지 못하니 내 방식대로 하는 것도 좋을 것이라고 생각이 들었다.

스터디

주제는 연극 API를 사용한 연극 소개 사이트이고, 직접 기획부터 피그마로 디자인을 완료했다. 리액트하고 같이 많이 쓴다는 MUI 라이브러리도 활용하는 중이다. css는 Scss를 쓰기로 했다. 엘리스에서는 styled component를 알려줬지만, 지금 바로 쓰기에는 scss가 우리가 더 쓰기 편할 것 같아서 그렇게하기로 했다. 물론 타입스크립트나 리덕스도 제대로 배우지 않아서 어설프게 쓸 바엔 다음에 도전해보기로 했다.

✅Try

• 정해진 엘리스 참여 시간 동안에 스터디 프로젝트 하기
• 엘리스 트랙 진도율 채울 겸 강의 천천히 듣기! 이해 못하더라도 일단 들어두면 언젠가 도움이 될거야..

✈️ 11주차 회고

저번 주 보다 더 집중 못했다. 이번주는 무슨 내용을 배웠는지도 모르겠고.. 겨우 시간만 채우고 배운 게 없다. 그나마 이번 주부터 스터디가 시작됐는데, 프로젝트 스터디라서 기획하고 피그마 만드는 단계가 재미있어서 버티고 있다. 이론만 계속 배우고 있었다면 진짜 하루종일 멍하니 아무것도 안 한 사람이 될 뻔 했다. 지쳐서 그런건지 왜그런지 잘 모르겠다.

트랙 내용

React 심화 리액트 스타일링에 대해 배웠다. 예전에 리액트 스터디를 했을 때는 몰랐던 내용이라 그나마 흥미있게 들었다. styled-components 방식도 신기했고, Sass와 Scss에 대해서도 처음 알아서 써보고 싶다는 생각이 들었다.

리액트로 라우팅 하는 방법도 알게 되었다. 프로젝트할 때는 순수 Html, js, css를 쓰다보니 node.js로 백엔드에서 라우팅을 해줫어야 했는데, 리액트는 프론트측에서 직접 라우팅할 수 있어서 편하고 좋다. react-router-dom의 버전이 바뀌면서 다른 문법이 되었다고 하는데, 온라인 강의에서는 예전 버전으로 알려주고 문제집에서만 다른 버전이 있다고 알려줘서 조금 불편했다. 강의가 업데이트 되면 좋을 듯 하다.

자바스크립트 비동기 통신에 대해서도 나왔는데, 이 부분은 아직 공부하지 못했다. 이전에 한 번 다뤘던 내용이기도 하고, 그 때 어려웠던 기억도 있어서 듣기가 두렵다. 이거 작성 후에 들으려고 한다...

스터디

리액트&node.js 프로젝트 스터디에 들어갔다. 주제는 연극 API를 사용한 연극 소개 사이트이다.

✅Problem

집중 부족

동영상은 제대로 듣지 않았고, 거의 문제만 풀었다. 이렇게 해도 되는지 모르겠다... 그냥 혼자 노션에 정리하려니 귀찮아서 안 하게 되는 것 같기도 하다. 포스팅을 계획해봐도 좋을 것 같다.

실시간 수업

개인적으로 온라인 수업도 따라가지 못하는데 진도를 너무 많이 빼셔서 거의 내가 들은 게 없다. 아는 게 없으니 수업에 참여할 수도 없고 그러다보니 안 듣게 된다.

✅Try

• 매일 계획 스터디 플래너에 작성하기. 이전에 해왔던 것처럼 아침에 하루 할 일 정리하고 각오 적기
• 리액트 열심히 필기하면서 수업 듣고 포스팅해보기
• 실시간 수업 때 밀린 온라인 수업이라도 듣기. 멍하니 시간 버리는 것 보단 빨리 진도를 따라잡는 게 나을 것 같다.

✈️ 10주차 회고

2주 동안 프로젝트를 진행하면서 정말 많은 것을 배웠고 많은 것을 깨달았다. 그 중 하나가 실제로 무언가를 만들어보면서 배우는 게 더 와닿고 훨씬 재미있다는 것이다. 프로젝트 기간동안 잠도 안 자고 몰입했고, 하루 종일 어떻게 해야 더 좋은 서비스가 될지 고민하고 생각했다. 그러다가 스스로 짜내는 생각 없이 동영상 강의만 보고있으려니 너무 재미없게 느껴졌다. 그래서 집중도 안 되고 괜히 하기 싫어졌었다.

또 스터디가 없던 것도 한 몫 했는데, 이전엔 매일 TIL미팅 때문에 무조건 그 날 강의는 듣고 더 많이 공부했었는데 이제는 정해진 약속이 없으니 미루게 되는 경향도 있는 것 같다. 이외에도 체력적으로 많이 지쳐있었다보니 자고싶은 욕구도 많아지고... 언젠가부터 플래너를 못 써서 게을러지기도 했고... 여러 이유들로 집중을 못한 한 주였다.

이번 주 부터 한 달간 리액트를 배우게 된다. 아무래도 제일 배우고 싶었기도 하고 중요하다고 생각이 들어서 빨리 많은걸 배우고 알고싶다는 생각이 들기는 한다. 이 회고를 통해 문제점을 파악하고 다시 패턴을 찾았으면 좋겠다.

트랙 내용

리액트 기초 내용을 다뤘다. JSX 문법, 컴포넌트, props, 이벤트, state, Hooks 등에 대해 배웠다. 이게 뭔지 설명하라면 못할 것 같지만 그래도 코드에 사용할 수는 있을 정도만 배운 것 같다.

✅Keep

아무리 생각해도 이번 주에서 이어나갈 게 없는 것 같다. 아니. 이번 주 행동을 이어나가면 큰일난다.

✅Problem

이론에 대한 의지 부족

자꾸 뭔가를 만들고만 싶고 이론 공부를 하기가 싫었다. 그래서인지 이전에는 영상을 보고 해당 내용에 대해 추가적으로 구글링해가며 공부했는데, 이번 주는 이해 하지도 않아놓고 그냥 영상을 넘기곤 했다. 반성한다. 또 한번 놓치니까 계속 밀려서 필기조차 안하고있다...

실시간 수업

이번에 또 코치님이 바뀌셨는데, 수업 방식이 나와 맞지 않다고 느껴져서 집중이 떨어졌다. 이번엔 선택과 집중이 필요할 것 같다.

계획 부족

하루에 얼만큼 하겠다는 계획이 없으니 그냥 시간만 떼우게 되고 그날 그날의 의지도 부족한 것 같다.

✅Try

1. 일단 밀린 것부터 해결하자. 하루 4시간은 이전 내용 다시 들으면서 이해하고, 노션에 정리한다. 6시간은 당일 수업에 집중하자.
2. 매일 계획 스터디 플래너에 작성하기. 이전에 해왔던 것처럼 아침에 하루 할 일 정리하고 각오 적기
3. 이론 공부가 지겹다면 프로젝트를 하는 스터디에 들어가자.
4. 실시간 이론 수업은 다음 주에 열심히 들어보고 결정하자.

✈️ 7주차 회고

이번 주는 메탈이 반 나간 상태였다. 당장 주어진 내용은 이해하지만, 순간 지나면 까먹고 각각의 내용을 연결짓지 못했다. 한 번 그렇게 흐름을 잡지 못하니 한 주 내내 얼레벌레 보내기만 한 것 같다. 한 번은 실시간에서 먼저 배운 내용이 다음 날 온라인 강의에서 나왔는데, 예습이 되지 않은 상태에서 실시간으로 갑자기 들으니 조금 멘붕이 오기도 했었다. 요즘 바빠서 예습 못한 게 아쉬웠다.

이런 저런 이유로 잘 따라가지 못하다 보니 '다음 주 휴가 때 하면 되지~' 라는 안일한 생각으로 더 집중을 못하고, 결국 일주일 내내 악순환이 반복됐다.

스터디도 마무리 되었는데 끝까지 열심히 문제를 풀긴 했지만 난이도 조절을 조금 잘 못한 것 같다. 다음 스터디에도 알고리즘을 열심히 하되 난이도 조절을 할 필요가 있어보인다.

트랙 내용

1. 게시판 CRUD 만들기 Template Engine, 게시판 CRUD 만들기, 에러 핸들링, Pagination 기법들에 대해 학습했다.
2. 회원가입 및 로그인 구현, passport.js 회원 서비스를 적용하기 위해 회원가입, 회원과 게시글의 연동 방법 등을 passport.js로 구현하는 방법을 배웠다.
3. JWT, Nginx JWT, Mail Server, OAuth2.0 등 웹 서비스를 구성하는 추가적인 기술들에 대해서 학습했다.

스터디

• 알고리즘 빠른 정렬, BFS/DFS, 재귀의 활용을 문제 풀이를 통해 공부
• TIL 미팅으로 전날 공부한 내용 복습
  
  

✅Keep

운동 인증

이번 주 부터 일주일에 3번 하루 15분 이상 걷기 운동 인증을 시작했다. 확실히 바람을 쐐고 오니 머리가 맑아지는 느낌이 들고 잠도 조금 깨서 좋다. 15분이라 부담도 적고 스트레칭도 할 수 있어서 계속하기 좋을 것 같다.

✅Problem

예습 및 마무리

이전까지는 어느정도 예습이 가능했는데, 진짜 처음 들어보는 내용도 너무 많이 나오고 그냥 따라가기에도 벅차서 예습을 할 수 없었다. 또, 한 내용을 공부하고 나면 확실히 이해하고 정리하는 것이 마무리였는데(+블로그 포스팅) 요즘은 확실히 이해하기가 어렵기도 하고 여유가 없다보니 정리도 못하고 마무리를 못 짓고 다음으로 넘어가는 기분이다.

실시간 수업

집중을 잘 못했다. 뭐가 문제인지 잘 모르겠다. 그래서 더 문제다...

✅Try

• 다음 스터디도 열심히 하기
• 키워드 정리는 잘 했으니 백지 공부법 마저 해보기
• 백지 공부법 해본 다음에 제일 기억 못하는 내용들 추려서 그 다음 주에 집중적으로 복습하기
• 실시간 수업 영상 또는 자료 보면서 놓친 부분 꼭 다시 공부하기.

✈️6주차 회고

일주일이 또 지났다🫠 이번 주는 데이터베이스도 시작했다. 역시나 새롭게 무언가 배우는 건 재밌지만, 여전히 어렵다... 딱 금요일까지는 따라가기 벅차서 이해도 안되고 힘들었지만 전체적으로 한 주를 복습하고 전체적인 흐름을 잡고 나니 막혔던 내용도 이해가 되고 적당히 따라잡을 수 있었다.

프론트 부분을 할 때보단 적당히 하자는 마음을 가지니 한결 편하게 공부할 수 있었다. 또 생각보다 나쁘지 않아서 나중에 풀스택도 도전해볼까 싶다.

트랙 내용

1. Express.js NPM과 NPX를 통해 Node.js 프로젝트를 만들고, Express.js를 시작하는 방법을 배웠다. 또 웹 프레임워크의 라우팅과 HTML Templating에 대해 공부하게 되어 웹 프레임워크의 큰 틀을 알게 되었다. Express.js에서 라우팅 사용법, request, response 객체를 다루는 법 등을 알게 되어 웹의 동작에도 익숙해 질 수 있었다.
2. Middleware, REST API Express.js의 핵심 중 하나인 middleware에 대해 학습하면서 REST API에 대해서도 공부하게 되었다. 더불어 포스트맨이라는 툴도 알게되어 REST API사용 방법과 request, response message도 직관적으로 확인할 수 있어서 도움이 많이 되었다.
3. MongoDB, Mongoose RDB, NoSQL의 차이점과 MongoDB의 사용법 등을 배웠다. Mongoose ODM에 대해서도 배웠다. 처음엔 MongoDB와의 차이가 명확히 잡히지 않았지만, 실시간 수업 등을 통해 확실히 할 수 있었다.

스터디

• 알고리즘 완전탐색, 그리디, 백트래킹의 활용을 문제 풀이를 통해 공부함
• TIL 미팅으로 전날 공부한 내용 복습
  
  

✅Keep

스터디

서로 어려움의 척도를 알 수 있어서 위로도 조금 되고, 얼마나 공부해야 하는지 감이 조금 잡힌 것 같다.

키워드 정리

키워드 정리를 위해 강의 자료를 처음부터 훑어보니 흐름도 조금 잡히고 왜 이때 이 내용이 나오는지 이해도 돼서 공부에 감이 더 잡힌 것 같다. 이번엔 작성해보니 33개...

✅Problem

온라인 수업

집중이 잘 안됐다. 조금 지쳐서 그런지 그냥 빠르게 듣고 넘기고 싶었던 것 같다.

컨디션 조절

위 내용과도 연관되는데 컨디션 조절이 잘 안돼서 공부하는 게 조금 지친 한 주를 보냈다.

실시간 수업 복습

요즘 실시간 수업에서 얻는 게 많은 것 같은데 복습을 잘 안하게 된다. 수업 당시에 집중하는 것 뿐만 아니라 이후에 복습하는 것도 중요할 것 같다.

✅Try

• 스터디 지금처럼 열심히 활동하기!
• 키워드 정리는 잘 했으니 백지 공부법 마저 해보기
• 백지 공부법 해본 다음에 제일 기억 못하는 내용들 추려서 그 다음 주에 집중적으로 복습해도 좋을 듯
• 실시간 수업 영상 또는 자료 보면서 복습하기.
• 컨디션 조절 및 온라인 수업을 위해 월, 수, 금 15분씩 걷기 해보기

✈️5주차 회고

백엔드 파트가 시작됐다. 백준 문제풀이를 하며 node.js를 사용해왔지만, 뭣도 모르고 썼던 것들이 이제는 눈에 들어온다. 그리고 간단하게 내 손으로 서버를 열어보니 재미있었다. 혼자 백엔드를, 그것도 어려운 스프링을 공부할 때와는 확실히 달랐다. 서버 쪽도 배우고 나니 재밌는 걸 보면... 나중에 풀스택 해볼까? 라고 할뻔

트랙 내용

1. Node.js 기초 node.js의 등장 배경 및 특징과 사용하는 이유를 배웠다. 더불어 이전에 다뤘던 비동기 방식을 node.js 수준에서도 다시 한번 배울 수 있었다.
2. 타입스크립트 개념, 클래스 마찬가지로 사용하는 이유를 배웠고 자바스크립트와의 관계도 알게 되었다. 이전까지 자바스크립트와 타입스크립트의 차이나 관계가 헷갈렸는데 확실히 짚고 넘어가서 좋았다. 유틸리티 타입과 매개변수 사용법도 공부했는데, 유틸리티 타입은 아직도 어렵다..
3. 인터페이스, 제네릭 사실 인터페이스와 제네릭 관련해서는 자바 공부할 때 배웠기 때문에 괜찮을 줄 알았는데, 실제 코드 작성해보니 타입스크립트에서의 인터페이스와 제네릭 사용법이 자바와 비슷한듯 달라서 더 헷갈린다ㅜㅜ

한 주동안 너무 많은 사용법들을 배워서 머리가 복잡스럽다...

스터디

• 알고리즘 정렬, 분할 정복, DP의 활용을 문제 풀이를 통해 공부함
• TIL 미팅으로 전날 공부한 내용 복습
  
  

✅Keep

스터디

요즘들어 '각자 공부 방법이나 시간이 다 다른데 TIL 괜히 만들었나? 괜히 시간 빼앗는건가?' 라는 생각이 조금 들었었는데 이번 주는 아주 알차게 얘기하고 내가 처음 의도했던대로 진행된 것 같아서 뿌듯하고, 실제로 도움도 많이 됐다.

키워드 정리(feat. 백지공부법)

지난 주 회고 try에 썻던 백지 공부법을 한번 해보려다가 배운 게 너무 많아서 뭘 배웠는지 키워드조차 감이 잡히지가 않아서 일단 키워드를 작성했다. 키워드라고 했지만 사실 문장에 더 가까운... 작성하고 보니 중요하지만 가볍게 넘긴 내용도 많이 보이고 키워드를 토대로 하나씩 직접 작성해가며 공부하기 좋을 것 같아서 계속 이 방법을 사용해 공부하려고 한다. 아래는 작성해본 키워드. 23개나 된다 ㅎ🫠 핳.. ㅠ ㅋ

실시간 수업

이번 주는 안 졸았다!! 코치님이 바뀌셔서 새로운 환경이라 집중이 잘 된걸 수도 있지만, 코치님의 호응 유도 + 나의 적극적인 반응 + 점심 식사 적당히 의 결과물인듯 코치님도 한 분으로 계속 하지 않고 커리큘럼에 따라 바뀌는 것도 마음에 든다.👍🏻

✅Problem

공부량

순 공부량이 너무 적어졌다. 잠이 좀 많아진 느낌인데 영양제를 먹어야하나? 왜이렇게 피곤한건지... 하루에 10시간을 못 채울 때가

어찌보면 가장 기본적이고 가장 중요한 시간투자... 너무 못했다. 플래너도 잘 작성하지 못했다. 반성한다.

✅Try

• 스터디 지금처럼 열심히 활동하기!
• 키워드 정리는 잘 했으니 백지 공부법 마저 해보기
• 백지 공부법 해본 다음에 제일 기억 못하는 내용들 추려서 그 다음 주에 집중적으로 복습해도 좋을 듯
• 매일 순 공부시간 최소 10시간 목표

✈️4주차 회고

개인적으로 너무 바빴던 주였다. 때문에 공부도 원하는 만큼 못해서 아쉽다. 이제 계속 어려운 내용이 나오다보니 시간 투자를 많이 해야될 것 같다.

트랙 내용

1. 비동기 통신, Promise 자바스크립트에서의 동기-비동기에 대해 배웠다. 비동기 처리 모델에서 이벤트 루프, 테스크 큐, 잡 큐에 대해 배웠지만, 테스크 큐와 잡큐에 대해서 아직 깊게 공부하지 못했다. 비동기 API중 하나인 Promise에 대해서 배웠다. 또 비동기와 연관해서 디바운싱과 쓰로틀링 기법도 배웠다.
2. Async, Await async/await가 무엇인지, 사용법은 어떻게 되는지 등을 배웠다. 초반에는 프로미스보다 더 이해하기 힘들었는데, 코드를 직접 다뤄보니 훨씬 편하고 좋은 방법이라고 생각이 들었다.
3. 자바스크립트 프로젝트 행맨 게임을 만드는 과정을 통해 상태관리에 대해 배웠다. 리엑트에서만 사용되는 개념인줄 알았는데 알고보니 프론트엔드라면 알고있어야 하는 내용이었다.

스터디

• 알고리즘 정렬, 분할 정복, BFS/DFS, 재귀, 동적 프로그래밍, 백트래킹 이론 공부
• TIL 미팅으로 전날 공부한 내용 복습
  
  

✅Keep

스터디

이번 주도 열심히 참여했다. 완벽히 알고리즘을 외우진 못했지만, 질문에 대해 답변할 수 있을 정도로 공부했다. 또, TIL을 위해서 30분 전에 일어나서 공유할 내용 정리하고 참여해서 활발하게 이야기 가능했다.

어려웠던 문제 깊게 공부함

수요일 실습 문제 중에 어려웠던 내용이 있었는데, 그냥 넘어가지 않고 끝까지 물고 늘어져서 궁금한 부분 해결했다. 실제로 브라우저에서 코드도 돌려보며 비동기에 대해 확실하게 이해할 수 있었고, 가볍게 생각하고 넘어갔던 promise의 세 가지 상태에 대해서도 복습할 수 있는 시간이었다. 더불어 수업에서 알려주지 않은 순차처리, 병렬처리에 대해서도 공부할 수 있는 시간이었다.

✅Problem

지난 주 복습

이번 주 내용도 어려웠다보니 머릿 속 정보가 아예 이번 주 내용으로만 가득 차버렸다. 지난 주 내용이 기억나지 않는다......

실시간 수업

또 졸았음

✅Try

• 스터디 지금처럼 열심히 활동하기!
• 주말에 해당 주와 그 지난 주 복습하기. 백지 공부법 써보면 어떨까? 요즘 계속 많은 정보를 쉽게 찾아가며 복붙 정리를 하다보니 쉽게 잊어버리는 것 같다. 복붙하지말고 직접 쓰면서 다시 정리해보면 오래 기억에 남을 것이다.
• 실시간 수업때 점심 배부르지 않게 먹기.

✈️지난 3주간 회고...

엘리스 트랙에 합격한 후 사랑니도 발치하며... 비장한 각오로 트랙이 시작되었다. 첫 주엔 진행 방식이나 노션, 디스코드 등.. 주어진 것들에 적응하고 공부하는 습관을 만드는데 집중하느라 정신없이 지나갔지만, 다행히도 강의 내용은 내가 이미 알고 있던 기초적인 내용이라 따라가기 쉬웠고 디스코느나 노션 역시 써봤기 때문에 무난하게 지나갔다.
2주차에는 조금 더 욕심이 생겨서 예습, 복습도 하고 블로그 포스팅도 조금씩 해나갔다. 하지만... 욕심이 과했는지 스터디 계획에 시간을 많이 보냈다. 스터디 기획이 처음이기도 했고, 좋은 분들의 선택을 받고 싶은 마음에 여러 고민을 하며 시간을 많이 보낸 것 같다. 쓸데없는 완벽주의 성향이 발동된 것도 한 몫 했다.
대망의 3주차...! 실제 스터디가 시작되기도 했고, 슬슬 어려운 내용이 나오기 시작했다. 최근 몇 달간 놀고먹던 나에겐 아주 살인적인 스케쥴이었다. 그래도 나름 빡세게 하기로 마음 먹었던 만큼 열심히 한 것 같고, 오히려 중간중간 비어있는 시간들이 아쉽다. 조금 더 할 수 있을 것 같은데 뭔가 아쉽게 목표치를 못 채운 것 같아서 찝찝한 한주였다.

3주차 트랙 내용

1. 인스타그램 클론코딩 리팩토링 인스타그램 클론코딩 리팩토링에서 모듈화를 하면서 함수가 많아지고 여러 파일들이 의존관계가 생기면서 코드의 흐름을 이해하기가 힘들었다. 이전까지는 실습이 한 파일에서만 이행하면 됐지만, 이 수업은 여러 파일을 왔다갔다 하며 UI에서 입력이 온 순간부터 해당 작업이 이뤄지기까지 어떤 흐름으로 가는지 이해하느라 깊이 있게 공부한 것 같다. 진행 방법은 온라인 강의만으로 이뤄졌다.
2. 자바스크립트 최신 문법 this, closure, 내장 객체 등 다양한 내용을 배웠다. 온라인 강의와 실시간 수업에서 동시에 다뤄서 이해가 안되는 부분을 반복해서 배울 수 있었다.
3. 자바스크립트 동작 원리 지금까지 중에 제일 헷갈렸던 실행 컨텍스트와 자바스크립트 엔진 내용을 배웠다. 마찬가지로 실시간 강의와 온라인 강의에서 함께 배워서 이해하기에 무리가 없었다.

✅Keep

스터디

지금까지 중에 가장 만족하는 부분은 스터디를 진행한 것이다. 스터디 진행 방향을 내가 정했기 때문인 것도 있지만, 혼자 하려고 했을 때 막막했던 내용을 같이 공부하며 꾸준히 이어나갈 수 있다는 것이 좋았다. 특히 나는 알고리즘 스터디를 위주로 하고 이외에 다양한 활동을 겸하는 스터디를 진행하였는데, 2주차까지는 같은 수업을 듣는 사람이 많은데도 혼자 공부하는 기분이었다면, 스터디 이후로는 같이 공부하는 기분이라 더 의지가 타올랐다. 알고리즘 같은 경우 혼자 했을 때보다 진도가 느리긴 하지만 오히려 더 확실히 짚고 넘어가는 느낌이라 공부의 질이 좋았다고 생각한다.

자바스크립트 문제집

이건 엘리스에서 좋앗던 부분. 엘리스에서 강의 이외로 문제집을 제공해줬는데, 확실히 더 연습할 수 있어서 좋았다. 배운 내용을 혼자 코드로 실습해보려고 하면 감이 안 잡힐 때가 있는데, 어떻게 공부해야 되는지 틀을 잡아주기도 하고 강의에서 알려주지 않은 내용이 나와서 추가적으로 공부할 내용도 간접적으로 알려주는 느낌이라 좋았다.

예습 복습

대부분 오늘 배운 내용은 내일 배울 내용과 연관되어 있어서 깊게 공부하다보면 자연스럽게 예습도 하게 됐는데, 그게 수업 듣기에도 도움이 많이 됐다. 특히 실행 컨텍스트를 공부하다가 깊게 공부하게 되어 렉시컬 환경과 클로저의 개념도 살짝 공부하게 되었는데 다음날 실시간 수업에서 내용이 나와서 다른 동기분들보다 좀 더 잘 따라간 것 같다. 또 이 부분이 중요하다고 생각해서 스터디원 두분과 실행 컨텍스트의 흐름을 직접 말로 설명하는 연습을 해보았는데, 확실하게 복습이 되었고 기억도 많이 남았다. 매우 만족.

✅Problem

주차테스트

인스타 클론코딩 내용을 공부하지 않고 시험을 봐서 시간이 매우 오래걸렸다. 그냥 혼자 생각하기에 indexedDB는 중요하지 않다고 생각해서 공부를 따로 하지 않았는데, 지금 생각해보니 4개월 밖에 안하는 과정에서 안 중요한걸 알려줬을까.. 싶다.

실시간 이론 수업

엘리스에서 아쉬운 부분인데, 이론 코치님이 경력도 좋으시고 아는 것도 많으시지만 기초적인 내용을 가끔 잊으신 듯 하다. 설명에서 가끔 틀리실 때가 있어서 아쉬웠다. 오히려 깊은 내용을 알려주실 때 수업이 더 재미있고 안정적인 느낌이라 프로젝트 할 때나 기초보단 중급 내용을 다룰 때 만났으면 더 좋았을 것 같다.

내 문제점은 너무 집중을 못한 것. 특히 이론 시간에 집중 못하고 많이 졸았다ㅠ 놓친 부분은 많은데 그렇다고 실시간 녹화 영상을 처음부터 다시 보자니 시간이 너무 효율적이지 못해서 실시간 이론 수업을 잘 따라가지 못했다.

✅Try

• 스터디 지금처럼 열심히 활동하기!
• 자바스크립트 문제집이 주어지지 않는 날에도 그냥 넘어가지 말고 직접 코드 작성하며 실습해보기
• 매일 1시간 잡아두고 간단하게라도 예습 복습 하기. 아침에 당일 내용 공부하기 전 30분 복습, 자기 전 다음 날 내용 30분 예습 해보자!
• 주차 테스트 보기 전에 월~금 내용 전체적으로 복습하기
• 실시간 수업때 채팅 많이 참여하면서 잠깨기!!!

우선순위 큐를 위해 만들어진 자료구조

최소 값이나 최대 값을 빠르게 찾아내기 위해 완전 이진 트리를 기반으로 한 자료구조

• 우선순위 큐 : 우선순위 개념을 큐에 도입한 자료구조.
  • 데이터들이 우선순위를 가지고 있어 우선순위가 높은 데이터가 먼저 나간다.
• 반 정렬 상태
• 완전 이진 트리의 일종
• 중복 값을 허용

종류

• 최대 힙 : 부모 노드의 키 값이 자식 노드의 키 값보다 크거나 같은 완전 이진 트리
• 최소 힙 : 부모 노드의 키 값이 자식 노드의 키 값보다 작거나 같은 완전 이진 트리

구현

• 힙 구현의 표준은 배열이다.
• 부모와 자식 인덱스는 항상 정해져 있다.

왼쪽 자식 index = (부모 index) * 2
오른쪽 자식 index = (부모 index) * 2 + 1
부모 index = (자식 index) / 2

관련 알고리즘

힙 생성(정렬)

노드들이 나뭇가지처럼 연결된 비선형 계층적 자료구조

그래프의 한 종류이다.

• 하나의 루트 노드와 0개 이상의 하위 트리
• 비선형 자료구조 : 데이터를 순차적으로 저장하지 않음
• 재귀적 자료구조 : 트리 내에 또 다른 트리가 있다.
• loop가 없는 연결 무방향 그래프
• 모든 자식 노드는 하나의 부모 노드만 갖는다.
• 노드가 n개인 트리는 항상 n-1개의 간선을 가진다.
  

관련 용어

• 노드(Node) : 그래프의 정점
  • 루트 노드 : 트리의 기준이 되는 노드. 나무의 뿌리를 생각하면 된다. 루트 노드에서 가지가 뻗어나가는 이미지.
  • 부모 노드 : 자신과 인접한 노드들 중 루트 노드로 향하는 노드
  • 자식 노드 : 자신과 인접한 노드들 중 루트 노드의 반대 방향으로 향하는 노드
  • 단말 노드 : 자식 노드가 존재하지 않는 노드. 가지의 끝
  • 형제 노드 : 부모 노드가 같은 노드
• 가지(Branch) : 그래프의 간선. 트리에서는 양방향 간선만 사용한다.
• 부트리(Sub Tree) : 부분 그래프와 비슷하게 정의한다.
• 차수(Degree) : 자식 노드의 개수.
• 길이(Length) : 임의의 두 노드를 시작 노드, 도착 노드로 하는 경로에서 거치게 되는 노드의 수.
  • 깊이(Depth) : 루트 노드에서 해당 노드까지의 길이.
    • 레벨(Level) : 깊이가 같은 노드의 집합.
    • 높이(Height) : 가장 깊이가 깊은 단말 노드까지의 길이. 깊이 중 최댓값

이진 트리(Binary Tree)

각 노드가 최대 두 개의 자식을 갖는 트리

구현

1. 배열로 구현 : 단순히 트리를 위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 배열에 넣으면 된다.

/*       5
 *     /   \
 *    3      8
 *   / \   /  \
 *  1   4  7   9
 */
const tree = [null, 5, 3, 8, 1, 4, 7, 9];

2. 연결 리스트로 구현 : 연결리스트 구현 방식이랑 같음

function Node(val) {
  this.val = val;
  this.left = null;
  this.right = null;
}

let root = new Node(5);
let left = new Node(3);
let right = new Node(8);
root.left = left;
root.right = right;

이진 탐색 트리(Binary Search Tree)

모든 노드가 [ 모든 왼쪽 자식들 < n < 모든 오른쪽 자식들 ]의 특징을 가지는 이진 트리

같은 값을 가지는 노드는 없다.

관련 알고리즘

• 이진 트리 순회 알고리즘
  • 전위 순회(preorder traverse) : 뿌리(root)를 먼저 방문
    • 뿌리 -> 왼쪽 자식 -> 오른쪽 자식( 8 -> 1 -> 3 -> 6 -> 4 -> 7 ....)
  • 중위 순회(inorder traverse) : 왼쪽 하위 트리를 방문 후 뿌리(root)를 방문
    • 왼쪽자식 -> 뿌리 -> 오른쪽 자식( 1 -> 3 -> 4 -> 6 -> 7 -> 8 -> ...)
  • 후위 순회(postorder traverse) : 하위 트리 모두 방문 후 뿌리(root)를 방문
    • 왼쪽자식-> 오른쪽 자식 -> 뿌리(1 -> 4 -> 7 -> 6 -> 3 -> 13 -> ..)
• 이진 탐색 알고리즘
  • 이진 탐색 트리일 때 탐색 알고리즘
  • 루트 노드부터 방문하여 찾는 값이 작으면 왼쪽, 크면 오른쪽을 방문하며 값을 찾는다.

이진트리 관련 자료

https://velog.io/@dlgosla/CS-자료구조-이진-트리-Binary-Tree-vzdhb2sp

노드와 그 노드를 연결하는 간선을 모아 놓은 자료구조

즉, 연결된 객체 간의 관계를 표현하는 자료구조

관련 용어

• 정점(vertex) : 위치라는 개념. node라고도 부름
• 간선(edge) : 위치 간의 관계. 즉, 노드를 연결하는 선. link, branch라고도 부름
• 인접 정점 : 간선에 의해 직접 연결된 정점
• 차수 : 무방향 그래프에서 하나의 정점에 인접한 정점의 수
• 진입 차수(내차수) : 방향 그래프에서 외부에서 오는 간선의 수
• 진출 차수(외차수) : 방향 그래프에서 외부로 향하는 간선의 수
• 경로 길이 : 경로를 구성하는 데 사용된 간선의 수
• 단순 경로 : 반복되는 정점이 없는 경로 (한붓그리기)
• 사이클 : 단순 경로의 시작과 종료 정점이 동일한 경우

그래프 구현 방법

1. 인접 행렬(2차원 배열) 방식

그래프의 노드를 2차원 배열로 만든 것. 노드 간에 직접 연결이 되어있으면 1, 아니면 0을 넣어서 행렬을 완성시킨다.

2. 인접 리스트 방식

그래프의 노드를 리스트로 표현한 것. 정점의 리스트 배열을 만들어 관계를 설정하며, 노드들 간에 직접 연결이 되어 있으면 해당 노드의 인덱스에 그 노드를 삽입해 주면 된다.

장단점

종류

무방향 그래프

방향 그래프

가중치 그래프 : 간선에 가중치(비용)가 할당된 그래프로, 두 정점을 이용할 때 비용이 든다.

연결 그래프 : 무방향 그래프의 모든 정점 쌍이 항상 경로가 있는 그래프

비연결 그래프 : 무방향 그래프에서 특정 정점 사이에 경로가 없는 그래프.

완전 그래프 : 그래프의 모든 정점이 서로 직접 연결되어 있다.

순환 그래프 : 단순 경로에서 시작 정점과 도착 정점이 동일한 그래프

비순환 그래프 : 사이클이 없는 그래프

관련 알고리즘

탐색 알고리즘 : BFS, DFS

LIFO(Last In First Out) 구조로, 가장 나중에 들어온 게 먼저 나간다.

• 맨 위만 바라보는 구조
• ex) 뒤로가기(ctrl+Z)

사용

스택 구현체 없음 Array.prototype 사용

arr.push() // 삽입
arr.pop()  // 삭제
// peek()은 없음! 배열의 마지막 인덱스로 접근

큐(Queue)

FIFO(First In First Out) 구조로, 가장 먼저 들어온 게 먼저 나간다.

• 맨 아래에서만 꺼낼 수 있음
• ex) 인터넷 쇼핑 배송, 마트 진열

사용

큐 구현체 없음 Array.prototype 사용

arr.push()  // 삽입
arr.shift() // 삭제
// peek()은 없음! 배열의 0 인덱스로 접근

순서가 있는 데이터들을 저장할 때 그 다음(이전) 순서의 데이터가 있는 주소를 현재 데이터에 포함시키는 방식으로 자료를 저장하는 구조

노드

연결 리스트에서 노드는 데이터와 포인터를 가지는 객체를 의미

• 포인터 : 다음 노드의 주소
• 각 포인터 변수의 주소도 따로 존재한다.

장점

• 필요할 때마다 데이터를 생성하여 연결하면 되기 때문에 메모리 효율 좋음
• 삭제 및 추가 시 데이터 재구성 용이

단점

• 탐색 시 느림 (처음 또는 마지막 노드 탐색은 빠름)
• 구현이 까다롭다
• 데이터를 저장할 공간 뿐만 아니라 다음 노드의 주소를 저장하는 공간이 추가적으로 필요

사용

자바스크립트에서는 포인터가 없다. 때문에 객체를 참조하는 방식으로 구현

(오히려 더 간단하다)

연결리스트 구현

function Node(val) {
  this.val = val;
  this.next = null;
}

let head = new Node(0);
let node1 = new Node(1);
let node2 = new Node(2);

head.next = node1;
node1.next = node2;

이중 연결리스트 구현

function Node(val) {
  this.val = val;
  this.next = null;
  this.prev = null;
}

let head = new Node(0);
let node1 = new Node(1);
let node2 = new Node(2);

head.next = node1;
node1.next = node2;
node1.prev = head;
node2.prev = node1;

참고자료

• https://code-lab1.tistory.com/2
• https://sycho-lego.tistory.com/17

Hash

고유한 데이터를 다루는 기법 또는 고유한 값

• key-value 구조이다.
• hash table에서 hash는 해시 함수를 통해 만들어진 고유한 값이다.

Hash Function

임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수

• 함수 내부적인 패턴에 의해 고유한 값(hash)이 생성되어 반환된다.
• Input : key // output : Hash
• 이렇게 나온 해시가 저장위치가 된다.

Hash Table

해시 함수를 사용하여 키를 해시 값으로 매핑하고, 이 해시 값을 주소 또는 색인 삼아 데이터를 key와 함께 저장하는 자료구조

• 자바스크립트에서 Object, (Map, Set)
• 시간복잡도 : O(1)
• 아래 구조로 되어있다.

구성

• key : 고유한 값. Input
  • key값을 그대로 저장소의 인덱스로 사용할 경우 key의 길이만큼 정보를 저장해야 한다.
  • 이 때 key의 길이가 제각각이기 때문에 고정된 길이를 가지는 해시로 변경한다.
  • why? 길이가 길면 저장소 공간도 길어지기 때문!
  • ex) john : 100101011101111101101 // 1 : 01
• buckets : 배열 같은 형태. 주소(인덱스)와 저장 공간으로 이루어 짐
  • 주소(인덱스) : key로 만들어진 hash
  • 저장 공간 : 실제 value를 담는 공간
• hash function : key → hash로 만드는 함수

collision

⚠️ 데이터가 많아짐에 따라 key가 같은 해시 값으로 인해 충돌(collision)이 일어날 수도 있다.

• ex) 해시 함수의 알고리즘이 key의 길이로 해시 값을 만든다고 할 때, 키로 “피자”, “케이크”, “타코” 를 넣는다면 케이크는 해시 값이 3으로 고유한 값이 되지만, 피자와 타코는 2로 같은 값을 갖는다.
• 개방 주소법, 체이닝 등의 기법으로 해결한다.

장점

• 시간 복잡도가 평균 O(1)로 매우 빠름

단점

• 해시 충돌 발생
• 순서/ 관계가 있는 배열은 어울리지 않음
• 공간 효율성 떨어짐(저장공간 미리 확보)
• 해시 함수의 의존도가 높다. 함수가 복잡하면 hash를 만드는데 오래 걸림
  

사용

객체

const object = {
    name : "name",
    age : 24,
}

Map

const map = new Map();
map.set('p1', 1);
map.get('p1'); // 1

Set

const set = new Set();
set.add(1);
set.has(1); // true

참고 자료

• 노마드 코더 : https://www.youtube.com/watch?v=HraOg7W3VAM

원격 저장소 : 인터넷이나 네트워크 어딘가에 있는 저장소

• ex) github, gitlab ..등 호스팅 서비스

받아오기

git clone

기존의 (원격 또는 로컬)git repository를 복사한다.

• 현재 폴더 내에 새로운 폴더 생성 ⇒ 새로운 폴더가 저장소가 됨
• 현재 폴더를 저장소로 만들고 싶으면 명령어 마지막에 . 찍기

git clone [https://github.com/jin-dooly/repository(주소)]

1. 원격 저장소의 원하는 리포지토리에 간다.
2. 리포지토리의 clone 버튼을 누르고 HTTPS로 주소를 복사한다.
3. git clone 뒤에 주소를 넣는다.

추가

git remote add

원격 저장소를 추가한다.

git remote add [origin] [https://github.com/jin-dooly/new-repository]

• origin : 원격 저장소 단축 이름. (원하는 이름 넣어도 됨)
  • git remote rename origin [원하는 이름] 으로 변경 가능
• github.com : 호스팅 서비스
• jin-dooly : 팀 또는 사용자 이름
• new-repository : 새 프로젝트 이름

Origin이란?

원격 저장소 단축 이름의 기본 값

⇒ clone으로 복사해온 저장소 이름은 origin으로 통일

git remote -v : 지정한 저장소들의 이름과 주소 확인

삭제

git remote rm

원격 저장소를 삭제한다.

git remote rm [origin]

원격 저장소 동기화

가져오기

pull

연결된 원격 저장소에서 데이터 가져오기 + 로컬 데이터와 병합

git pull [origin] [master]

• origin : 가져올 원격 저장소(별명)
• master : 가져올 브랜치

Fatch

연결된 원격 저장소에서 데이터 가져오기

git fetch [origin] [master]
git merge [origin/master]   //병합을 따로 해줘야 함

• fast - forward 방식으로 병합 됨
• origin : 가져올 원격 저장소(별명)
• master : 가져올 브랜치

발행하기

Push

로컬 작업 내용을 원격 저장소에 반영

git push [origin] [master]

• origin : 원격 저장소(반영된 내용 받는 곳)
• master : 로컬 저장소(반영할 내용 주는 곳)

⚠️ 다른 사람이 먼저 push한 상태에서 push 불가. 다른 사람이 작업한 것을 merge먼저 한다.

1. pull ⇒ 충돌 내용 확인
2. 충돌 해결 ⇒ 직접 파일 수정
3. git add [수정한 파일]
4. git commit
5. git push

프로젝트에서 여러 명이 동시에 작업한다면, 누가 어떤 코드를 반영한 것인지 알 수 있어야 한다.

따라서 작업을 시작하기 전에 내가 누구인지 이름과 이메일을 설정한다.

git config --global user.name "LeeJinIe" //git관련 작업 기록에 남는 이름 수정
git config --global user.email "jj0745@naver.com" //git관련 작업 기록에 남는 이메일 수정

git config --list //git 설정 확인

Git 저장소 생성

로컬 디렉토리 안에 git repository를 생성하는 방법

여기서 git repository는 .git파일이다.

현재 디렉토리 사용

git init

• 기존의 디렉토리를 git repository로 설정
• git을 사용할 로컬 폴더로 이동 후 명령어 실행

새로운 폴더 사용

git init ./폴더이름/폴더이름

• 원하는 폴더를 지정하여 실행
• 해당 폴더가 없다면 만든 새로 만들어진 후 git repository가 된다.

Git 준비 영역으로 보내기

git repository에 반영하기 전에 파일을 저장소에 먼저 올려야 한다.

준비 영역으로 보내기

git add newfile.js    //newfile.js 파일을 준비 영역으로 보낸다

git add .             //모든 파일을 준비 영역으로 보낸다.

• untracked, unmodified, modified → staged

준비 영역에서 삭제

git reset        //staging 된 파일을 준비 영역에서 삭제

상태 확인

git status     //Staging area 의 어떤 파일이 변경되었는지 등 파일의 상태를 확인할 수 있다.

Git 저장소 반영

staging된 파일들이 무엇이 수정, 추가되었는지 메시지를 남겨 저장소에 저장하는 작업

저장소 반영(커밋)

git commit                      //.git 저장소 내에 staging 파일 저장

git commit -m "commit message"  // 메시지를 추가하여 저장소에 반영
git commit --amend              // 텍스트 편집기가 실행되고, 수정하고 저장하면 저장소에 반영
                                // amend 뒤에 직접 메시지 작성도 가능

저장소 내역 확인

git log                     // 모든 커밋 내용 확인 가능
git log --pretty=oneline    // 각 commit을 한 줄로 출력
git log --graph            //commit 간의 연결된 관계를 아스키 그래프로 출력(branch에서 유용)
git diff                   //commit 된 파일 중 변경된 사항을 비교

Git Branch 만들기

Git Branch란?

독립적으로 어떤 작업을 진행하기 위한 개념

• 각각의 Branch는 다른 Branch에 영향을 받지 않음
• HEAD : 현재 branch를 가리킴

종류

• 메인 branch : 배포할 수 있는 수준의 안정적인 branch
• 토픽 branch : 기능 추가나 버그 수정과 같은 단위 작업을 위한 Branch
  • 수시로 만들고 없앨 수 있음

생성

git branch [Name]

확인

git branch 

브랜치 전환

git checkout [전환할 브랜치 이름]

• 브랜치 대신 commit ID를 넣으면 해당 스냅샷으로 헤드가 이동한다.

Git 브랜치 합치기

main(master) branch로 통합할 때,

• HEAD를 main branch로 이동하여 타겟 브랜치 병합한다.

git checkout master
git merge [my_branch]

fast-forward Merge

타겟 브랜치에서만 새로운 내용을 추가했을 때 메인 브랜치와 곧바로 병합

즉, 단순히 포인터가 최신 커밋으로 이동한다.

• 타겟 브랜치에서 새로운 커밋을 하면 새로운 check point가 만들어진다.
• 메인 브랜치가 새로운 체크 포인트로 이동하여 타겟 branch의 내용이 메인 브랜치로 병합
• 새 브랜치의 내용이 메인 브랜치에서 업데이트 된 내용이기 때문에 곧바로 marge가 됨

3-way Merge

각 브랜치가 가리키는 커밋 두 개와 공통 조상 하나를 사용

• 두 branch에서 각각 변경 사항이 있을 경우, 각각의 커밋에 따라 각각 체크포인트가 생긴다.
• 각 branch가 만든 마지막 체크 포인트와 공통 조상 세 커밋이 합쳐져서 새로운 체크포인트가 만들어진다.
• 이후 현재 브랜치는 새로운 체크포인트를 가리킨다.

EX)

git checkout master
git merge iss53

확인

git branch --merged      // marge된 branch들 출력

Git Merge conflict

merge한 두 branch에서 같은 파일을 변경했을 때 충돌이 발생한다 → 직접 수정해야 함

1. conflict 알림을 보내서 어떤 내용을 사용할지 알려 달라고 요청
2. git status 에서 어느 파일에서 충돌했는지 both modified : file name 으로 확인
3. 해당 파일을 열어서 직접 수정하고 ‘<<<<’, ‘====’ 등 필요 없는 기호 삭제
4. 수정 완료 후 git add → git commit → merge 다시 한다.

방지

main branch의 변화를 지속적으로 가져와서 충돌이 발생하는 부분을 제거

Git Branch 삭제

사용이 끝난 토픽 브랜치는 삭제를 하는 것이 일반적이다.

git branch -d [my_branch]

참고 및 사진 출처

• https://git-scm.com/book/ko/v2/Git-브랜치-브랜치와-Merge-의-기초

1. 여러 명이 효율적인 작업이 가능하다.

   • 깃은 오픈소스이므로 누구나 사용할 수 있다.

   • 여러 개발자가의 업로드할 때 버전으로 관리하여 변경 사항이 사라지는 것을 방지할 수 있다.

   • 같은 파일에 동시에 여러 명이 접근하는 경우 각각 변경 사항을 병합할 수 있다.

2. 쉬운 버전관리

   • 깃은 각각의 파일을 스냅샷 형태로 저장해서 하나의 파일 명으로 여러 버전을 가질 수 있다.

   • 여러 버전을 동시에 관리할 수 있어 데이터의 안정성이 보장된다.

Git 스냅샷

git은 스냅샷 방식을 사용하지만, 기존의 버전 관리 시스템들은 델타 방식을 사용했다.

델타 방식

변화된 사항만 기록한다.

VCS(Version Control System) 대부분은 “델타 기반 버전 관리”로, 관리하는 정보가 파일의 목록이다.각 파일의 변화를 시간순으로 관리하면서 파일들의 집합을 관리한다.

스냅샷 방식

파일에 변동이 생겼을 때, 파일의 상태 전체를 기록한다.

git은 데이터를 스냅샷의 연속으로 취급하여 크기가 아주 작다.

파일이 달라지지 않았으면 Git은 성능을 위해서 파일을 새로 저장하지 않는다. 단지 이전 상태의 파일에 대한 링크만 저장한다. Git은 데이터를 스냅샷의 스트림처럼 취급한다.

언뜻 보기엔 델타 방식이 유리해보이나, 만약 파일이 100번 수정 되었다고 할 때 53번째 수정되었을 때의 파일 상태를 불러와서 봐야 된다고 가정하면, 1번 상태부터 53번까지 변화를 모두 연산해 반영하고 53번째 파일의 전체 상태를 보여줘야 한다. 만약 다시 60번째 파일이 보고 싶어지면 또다시 1번부터 변화를 적용하여 다시 산출한다.
하지만 스냅샷 방식으로 각 버전을 통째로 기록해두면 52번째 수정된 파일을 불러오려면 바로 52번째 기록만 불러오면 된다. 버전 별로 차이점을 보고 싶으면 두 개의 스냅샷을 비교해주기만 하면 된다. 버전 관리에 있어서는 좀 더 용이한 방식이다.

Git의 특징

1. 가지치기와 병합

   • 여러 가지 작업을 동시에 할 때 새로운 가지를 만들어서 독립적으로 다른 작업을 하고, 작업이 마치면 다시 메인에 병합할 수 있다.

2. 가볍고 빠르다.

   • 깃의 작업은 대부분 로컬에서 진행된다.

   • 다른사람과 코드를 공유할 때만 중앙 서비스에 접속하면 되므로 네트워크 속도와 상관없이 빠른 작업이 가능하다.

   • SubVersion(SVN)과 달리 각 개발자가 중앙 집중 서버 저장소와 독립된 상태로 작업한다.

3. 분산 작업

   • 여러 사람이 작업할 때 복사된 프로젝트에서 각각 작업할 수 있다.

   • 통합 관리자를 두어 개발된 코드를 병합하는 데에 집중을 하고, 개발자는 개발에만 집중할 수 있다.

4. 데이터 보장

   • 체크섬이라는 검사 과정을 거친다.

     • 체크섬 : 해시를 사용하여 만든다. 16진수 문자열 == 커밋ID
       • ex) 24b9da6552252987aa493b52f8696cd6d3b00373
     • 커밋 아이디가 같다는 것은 파일 또는 구성이 완벽히 같다는 것

   • 누가 어느 파일을 작업했는지 기록이 남아서 버전 관리가 편리하다

5. 준비 영역(Staging area)

   • 수정한 내용을 저장소에 반영하게 전에 검토하는 단계가 있다.

6. 오픈소스

   • 소스코드를 공개한 상태에서 인터넷에 누구나 프로젝트에 기여할 수 Git있다.

Git의 영역 & 상태

Git 영역

git에는 세 가지 영역이 있다.

• .git directory(Repository) : “커밋되어 버전을 관리하는 파일”들의 변경내역 저장소
  • 저장소를 생성했을 때 자동으로 생기는 .git 디렉토리 (로컬 저장소)
  • Git이 프로젝트의 메타데이터와 객체 데이터베이스를 저장하는 곳
• Staging Area : 준비 영역
  • commit 할 준비가 된 파일들이 위치하는 영역
• Working Directory : 실제 작업 영역
  • git init을 통해서 git이 관리하도록 지정된 디렉토리
  • Git이 추적 중인 파일들이 위치하는 영역

Git 영역에 따른 작업 흐름

• HEAD : 현재 브랜치의 마지막 커밋의 스냅샷
  • 현재 브랜치가 무엇인지 가리키는 포인터 역할도 한다.
• Index : Staging되어 있는 데이터들 == Staging Area의 내용 == 다음에 커밋할 것들
• Working Directory : 실제 작업 영역

파일 상태 라이프 사이클

git이 관리(추적) X

• Untracked : Working Directory에 존재는 하지만 git이 관리를 하지 않는 파일들의 상태
  • (commit 이후) 최초 만들어진 파일

git이 관리(추적) O

• Unmodified : 수정되지 않은 상태
  • commit 이후 수정되지 않은 파일
• Modified : 수정된 파일의 상태
  • commit 이후 수정된 파일
• Staged : commit 하고자 하는 파일의 상태
  • 수정 이후 Staging Area로 이동한 파일
  • commit 이후 수정되지 않은 파일(Unmodified 상태)

참고 및 사진 출처

• https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EA%B8%B0%EC%B4%88

💡 디바이스 크기가 줄어들고 늘어남에 따라

• 자연스럽게 웹사이트의 스타일이 변화되면 반응형
• 뚝뚝 끊겨서 독립적인 스타일이 적용되면 적응형

미디어쿼리 @media

여러 디바이스에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

스타일을 변경하기 위한 조건

• min-width : 브라우저의 최소 가로 폭

• max-width : 브라우저의 최대 가로 폭

• ex) 브라우저의 가로폭이 320px ~ 800px이 되었을 경우 아래 CSS 속성으로 대체한다.

    @media screen and (min-width: 320px) and (max-width: 800px) {
        h1 {...}
        h1:hover {...}
    }

미디어쿼리 사용 시 주의사항

1. meta 코드 작성

다음 코드를 반드시 html의 head에 작성해야 한다.

• 작성하지 않을 시 미디어쿼리가 제대로 작동하지 않는 문제 발생
• viewport로 너비, 비율 설정 ⇒ 모바일 디바이스에서 의도한 화면으로 볼 수 있음

• viewport : 다양한 디지털 기기의 화면에 표시되는 영역을 의미
  • 너비와 배율을 설정할 때 사용하는 속성 중 하나
• width=device-width : viewport의 가로폭 = 디바이스의 가로폭
• initial-scal=1.0 : 디바이스의 초기 비율 = 1.0

2. CSS 속성 상속

• 미디어쿼리 외부 영역에 있는 CSS 속성을 상속 받음
• 상속 받고 싶지 않다면 속성 값으로 none 입력

사용

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Media Query의 표현식에서 사용할 수 있는 프로퍼티

• orientation을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있음
• 일반적으로 반응형 웹 디자인은 viewport를 기준으로 한다.

참고 및 사진 출처

• https://poiemaweb.com/css3-responsive-web-design

Transition

상태 변화에 따라 CSS 프로퍼티가 변경되면 변경에 따른 변화는 지체없이 즉시 발생한다.

<div id = "test1"></div>
<style>
  #test1 {
  width:100px;
  height:100px;
  background:red;
  }
  #test1:hover {
      border-radius: 50%;
      background: blue;
    }
</style>

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 한다. 즉, 변화하는 과정을 보여줄 때 사용한다.

<div id = "test2"></div>
<style>
  #test2 {
  width:100px;
  height:100px;
  background:red;
  /* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
  transition: all 2s;
  }
  #test2:hover {
      border-radius: 50%;
      background: blue;
    }
</style>

이때 transition은 자동으로 발동되지 않는다. :hover와 같은 가상 클래스 선택자 또는 js의 부수적인 액션에 의해 발동된다. 만약 변화를 자동으로 발동시키고 싶다면 Animation을 사용할 수 있다.

div 셀렉터에 트랜지션을 설정하면 마우스가 올라갈 때(hover on)와 마우스가 내려올 때(hover off) 모두 트랜지션이 발동한다. 하지만 div:hover 셀렉터에 트랜지션을 설정하면 마우스가 내려올 때(hover off)는 트랜지션이 발동하지 않는다.

프로퍼티

transition-property

• 트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다
• 기본값 : all
• 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분
• 모든 CSS 프로퍼티가 대상이 될 수 없다.

사용 가능한 CSS 프로퍼티
Box model width height max-width max-height min-width min-height padding margin border-color border-width border-spacing
Background background-color background-position
좌표 top left right bottom
텍스트 color font-size font-weight letter-spacing line-height text-indent text-shadow vertical-align word-spacing
기타 opacity outline-color outline-offset outline-width visibility z-index

transition-duration

• 트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
• 기본값 : 0s

transition-timing-function

• 트랜지션 효과를 위한 수치 함수를 지정한다.
• 기본값 : ease

transition-delay

• 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
• 기본값 : 0s

transition

• 모든 트랜지션 프로퍼티를 한번에 지정한다.
• 순서 : property duration function delay
• 기본 값 : all 0 ease 0
• duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본 값이 0이므로 어떠한 트랜지션도 실행되지 않는다.

Animation

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 제한적이다.

transition과 anomation의 차이?

transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면,

animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

CSS 애니메이션과 JS 애니메이션?

일반적으로 CSS 애니메이션을 사용하면 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다.

그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다.

• 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다.

  • 예를 들어 요소의 width 변경 애니메이션은 자바스크립트를 사용하는 것보다 훨씬 간편하며 효과적이다.

• 세밀한 제어를 위해서는 자바스크립트 사용이 바람직하다.

  • 예를 들어 바운스, 중지, 일시 중지, 되감기 또는 감속과 같은 고급 효과는 자바스크립트가 훨씬 유용하다.

가장 중요한 것은 브라우저에서 애니메이션 효과가 부드럽게 실행되는 것이다. 그리고 애니메이션 효과 작성에 소요되는 시간과 수고이다. 여러 사항들을 고려하여 자바스크립트를 사용하여야 할지 CSS를 사용하여야 할지 결정하여야 한다.

프로퍼티

animation-name

• @keyframes 애니메이션 이름을 지정한다

animation-duration

• 한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.
• 기본값 : 0s
• 반드시 지정해야 한다.

animation-timing-function

• 애니메이션 효과를 위한 타이밍 함수를 지정한다.
• 기본값 : ease

animation-delay

• 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
• 기본값 : 0s

animation-iteration-count

• 애니메이션 재생 횟수를 지정한다. 숫자 또는 infinite
• 기본값 : 1

animation-direction

• 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.
• 기본값 : normal
  • alternate : from → to → from
  • normal : from → to, from → to
  • reverse : to → from, to → from

animation-fill-mode

• 애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.

animation-play-state

• 애니메이션 재생 상태(재생 또는 중지)를 지정한다.
• 기본값 : running

animation

• 모든 애니메이션 프로퍼티를 한번에 지정한다

@keyframes

• 시간의 흐름에 따라 애니메이션을 정의한다.
• 여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다.

@keyframes [name]{
  /* 애니메이션 시작 시점 */
  from { left: 0; }
  /* 애니메이션 종료 시점 */
  to   { left: 300px; }
}

//또는 

@keyframes [name] {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}

Transform

트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다.

transform은 여러 개 사용 불가능하다. 마지막 작성 내용만 적용된다.

애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.

변환함수

• rotate(45deg) : 입력한 각도만큼 오른쪽 회전
  • 음수 입력 가능 ⇒ 왼쪽으로 회전
• scale(2, 3) : 입력한 비율(x, y)만큼 확대, 축소
• skew(10deg, 20deg) : x축 y축을 기준으로 입력한 각도만큼 비틀림
  • 음수 입력 가능
• translate(10px, 20px) : 오브젝트의 좌표 변경

Prefix(접두사)

브라우저의 하위 버전에서도 실행을 원할 경우 사용

• -webkit-transform : 크롬, 사파리
• -moz-transform : 파이어폭스
• -ms-transform : 익스플로러 9.0 이상
• -o-transform : 오페라

참고

• https://poiemaweb.com/css3-transition
• https://poiemaweb.com/css3-animation
• https://poiemaweb.com/css3-transform