항해99 3주차 회고록

1일차

1)일요일을 항해톡 준비로 보냈다 ^^.. 백만년만에 열어본 ppt..ㅎ..

2)주말에 12조 팀원들에게 프론트엔드 용어 스터디를 하자고 제안했다.
물론 항해를 진행하다보면 알게되는 부분도 있겠지만 한번 봤던걸 한번 더 보면 기억에 더 잘 남을테니까!

• 프론트엔드 스터디

3)실전 프로젝트 팀 빌딩 방식 발제를 들었다.마음 잘 맞는 팀원들을 만났으면 좋겠다. ㅎㅎ

4)오늘은 영남님이 cs스터디 발표를 준비해오셨는데 준비성이 너무 좋으셨다. ㅋㅋ 센스

5)옆 조 팀원분이 한분 하차하셔서 우리 조와 합류하게 되었다. 백지장도 맞들면 났다고 했다..!! 뭐든 다 배워갈게요 여러분!!!

6)애플코딩 리액트가 쉽고 이해가 잘된다는 팁을 얻었다 (+1)

7)이번 팀별 과제 중 맡게 된 부분은 ref 이다.

리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다.
domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

• React에서 document.querySelector를 사용하게 되면, 실제 DOM의 요소를 가져오게 된다. 하지만 React는 Virtual DOM을 통해 Real DOM을 그리기 때문에, React가 제어하고 있는 Virtual DOM 안에 있는 요소가 더 신뢰할만하다. DOM API로 Real DOM에 있는 친구를 집었는데, 이게 현재 Virtual DOM을 통해 Real DOM에 존재하는 친구인지 아닌지 확신할 수 없다는 것!`
• React를 사용하게 되면, 가장 중요한 개념 중 하나가 바로바로 State이다. React 내부에서 데이터는 컴포넌트 내의 State으로 조작된다.  즉, React가 State를 컨트롤(제어)하고 있다. 만약 이러한 React 시스템을 벗어나 DOM을 직접적으로 건드리게 되면 이 내용들은 React가 제어하는 영역에서 벗어나게 되고, 이렇게 React의 제어를 벗어나게 되면, React에서 제공하는 이점들을 사용할 수 없게 된다.
• 또 이렇게 React가 제어하는 State와 제어하지 않는 State을 혼용해서 사용해 데이터를 조작할 경우, 위에 언급했듯이 React의 Lifecycle에 맞추어 DOM Element를 가져오지 못해 가져온 DOM Element를 신뢰할 수 없어지는 문제가 발생한다. 이렇게 데이터를 어디에서 어떻게 조작하고 있는지 예측하기 어렵기 때문에 디버깅 또한 어려워진다.
• 그렇기 때문에 React에서 DOM Selector를 사용하고싶으면 React의 Lifecycle과 함께 동작하는 Ref를 사용하는 것이 더 바람직하다. Babble 프로젝트에서도 DOM Selector를 사용해야 하는 상황이 오면 React에서 제공하는 ref를 사용해 상황을 해결했다.
• 참고자료

8)리액트 개인 과제를 시작했다. 손도 못대다가 강의에서 들었던 예시를 활용해서 동그라미를 랜덤한 갯수로 띄우는 것까지 성공했다..! 아주 작은 성취지만 너무 기뻤다.

9)프론트엔드 스터디를 시작했다! 새벽까지 서로가 서로의 선생님이 되어 설명해주고 이해가 될 때까지 공부했다. 알고 있다고 생각한 것들이 잘못 알고 있었던 것도 있고 설명을 해주면서 더 확실함을 얻게 된 것도 있었다. 이런 것들이 하나씩 쌓여가면 나중에 어떤 모습이 될지 기대가 된다!

10)자려고 했는데 갑자기 인터넷이 끊겼다.ㅠㅠ 너무 피곤했는데 내일 하루를 날릴 수 없기에 폭풍검색해서 고치고 잠들었다.ㅎ

2일차

1) 아아 첫 지각이라니 ㅠ 눈은 일찍 떴는데 어제 인터넷을 고치느라 피곤해서인지 몸이 일어나지질 않아서 몇초차이로 지각을 해부렀다.ㅠ

어떻게 맨날 잘해요 ^_^//

2)과제 내용 중 동그라미 랜덤으로 띄우기에 성공했다!!

혜지님 월화수목금토일도 띄우기 성공!

그런데 합계와 평균값 구하기에서 합계 구하기 실퍃ㅎㅎㅎ
이 방법이 아닌가보다.ㅠ 급할수록 돌아가랗ㅎㅎㅎ

3)항해 웰컴키트가 드디어 도착했다. ㅠㅠㅋ 웰컴이라기엔 한달이 지났지만.. 반겨줘서 감사합니다..!

4)스프링 영남님에게 유일하게 도움을 드릴 수 있는건 CSS뿐.. 뭐든 물어봐주십쇼..

5)12조 힘내라고 기타연주 영상을 보내드렸습니다. 보고 잠시나마 웃으십셔 ^^..

6)성현님에게 map설명을 들었는데 봐도봐도 헷갈린다.🤦‍♀️
언젠가 꼭 완벽히 이해하고 말리라

7)모두가 잠든 밤 혼자 삽질을 했지만 성과는 없었다(따쉬..). 그치만 삽질하는 동안에도 성장했으리라 믿는다! 이렇게도 해보고 저렇게도 해보고 탐정이 된 것 마냥 뭔가 해결해가는 과정이 진짜 개발자 같아보여.. 짜릿해..

3일차

1)항해톡 발표 아니 분명 안떨렸는데 50명 모인거 보자마자 심장이 벌렁벌렁 펄떡펄떡 팔딱팔딱 손떨리고 손에 땀나고 난리난리 ㅠㅠㅋ

아니 진짜 너무 무섭다고여..
다른 발표자분들 너무 전문가처럼 잘해주셔서 주눅들었지만 다들 잘했다고 격려해주셔서 infp 너무 위로 받았습니다. 아흐흑 감사해요.

2)매니저님 50명의 WIL을 다 읽으셨다니 진짜 감동이에여ㅠ 초등학교 때 선생님이 일기장에 써주시던 멘트들이 생각납니다🥲

3)오늘은 12조분들께 피아노 연주를 들려드렸습니다. 다음엔 드럼으로 찾아올게요 ^_^ 뚱땅뚱~~

4)어제는 종일 개인과제만 하느라 시간을 보내서 프엔 스터디를 못해서 오늘은 시간을 정해놓고 했다. 성현님이 거의 선생님처럼 설명을 해주셨는데 이해가 쏙쏙 너무 잘됩니다. 선생님. 가끔 살인 예고를 하시는데 더 혼내주세요. 황송합니다.

호이스팅! 스코프! TDZ! 다 알아버렸지뭐야~

5)혜지님과 성현님의 도움으로 과제를 완성했다!
하지만 조금 더 간단하고 간결하게 코드를 짜고싶어서 삽질중..ㅎ

4일차

1) 4시에 잤는데 왜때문에 팔팔하지? 일찍 잤는데도 피곤한 날은 정말 죽을 것 같은데 알다가도 모를 일이다~
2)라고 했는데 새벽에 스터디하다가 갑자기 엽총맞음
3)대규님이 리셋값 구하는 법을 도와주셨다. 아 정말 모르겠는데요. 아흐흑
4)우여곡절 끝에 과제를 제출했다. 답변 작성도 아는 만큼만했는데 잘한건지 모르겠다. ㅠ그런데 이해 안되는 코드들이 있어서 주석을 달면서 다시 이해해 보았다. ㅠ
5)cs 스터디 발표준비를 했다. 슈퍼컴퓨터 짱..!

6)리액트 기술매니저님 말씀

• 사용자가 많고 사용자가 많으면 자료가 많기 때문에 라우터6보다는 5를 사용하자.
• 스타일 컴포넌트 또는 css하나만 사용.
• 알고리즘같은 코드x usestate를 사용한다.
• 함수(컴포넌트) 안에 리턴이 들어가면 리턴이 아니라 렌더링을 한다.
• 리턴 안에는 html만 들어가는데 자바스크립트를 넣고 싶을 때 중괄호를쓴다.
• inline스타일은 지양해야 한다.
• 스타일컴포넌트도 컴포넌트이기 때문에 안에 자바스크립트 문자를 쓸 때 ${}를 쓴다.
• 스타일 컴포넌트 안에 css: 조건문을 쓸 수 있다.
• 모던자바스크립트 따라하기 습관들이기
• 파이어스토어는 깊게 공부하지말고 사용법만 알고 넘어가고 리덕스에 집중하자.
• 리덕스 공부할 때 주의사항 설정하는 코드들은 강의에서 하라대로 하면 되고 이해할 필요 없다.

5일차

1)점심먹고 지방선거 투표도 하고 탱크보이도 사왔다 ^~^ 가끔 산책도 좀해야겠다.. 낡아버린 몸..
2)
몇 일전부터 냉장고에서 폭발음 같은게 나서 깜짝 놀랐는데 소리가 더 심해져서 너무 무서웠다. 119에 전화해서 물어봣는데 냉장고 문제면 도와줄 수 없으시다고 코드 빼놓고 내일 기사님을 부르라고 했는데 코드뺏는데도 나서 친구를 불렀다.ㅠ 냉장고가 아니라 콘센트 쪽에 전기가 합선된거였다. 진짜 죽을뻔 했잖아?ㅠ 무서워서 잠도 잘 못잤다.

6일차

우리집 와르르맨션 목록
1)콘센트전기합선 - 집주인 아저씨가 고쳐주심
2)샤워기 물샘 - 동네친구가 샤워기 줄 바꿔주고 감
3)형광등 깜빡거림 - 철물점에 가서 하나 사왔는데 다른게 또 깜빡거려서 하나 더 사와야한다.🤦‍♀️
덕분에 집수리 다하고 대청소까지 했다. ^^ 저것때문에 종일 얼이 빠져있던 탓에 공부를 많이 못했다ㅠ 정신차려 김돌멩..

4)어제 잠을 잘 못자서 안졸려고 카페를 갔는데 카페에서 졸았음 ^^..
잠을 깨는데는 커피를 쏟는게 최곱니다.

5)리액트로 가위바위보 게임을 만들었다. UI는 상당히 귀여운데 코드는 귀엽지 않다.^^

5)감자단님들이 스터디하는 걸 우연히 봤는데 반성하게 됐다.ㅠ 정신차리고 바짝해야지!!

스터디 숙제

// 05/28 숙제 - 한 문제당 20분 넘기지 않는다. 
//1. 1~100 사이 중에서 소수인 수? //for문
//2. 홀짝 판별 //function.
//3. 팩토리얼 3!=1x2x3 //5!=1x2x3x4x5 function으로 만들자.
// 05/29일 숙제
//1. arr 배열을 순회하여 가장 큰 값을 max에 담고 출력하세요
let arr = [50, 3, 40, -90, 370, -99, -1, 17]
let max
//함수를 써서 풀어보기
//2. arr 배열을 순회하여 가장 작은 값을 min에 담고 출력하세요
let arr = [50, 3, 40, -90, 370, -99, -1, 17]
let min
//함수를 써서 풀어보기
// 3. arr배열을 순회하여 각 원소의 값을 1씩 
// 증가시키고 원소의 sum에 총 합을 담아 출력하세요
let arr = [3, 4, 6, 7]
let sum = 0;
//map써서 풀어보고 forEach도 써서 풀어보기
// 1 ~ 100까지 소수 나열하기 다시 풀어보기

7일차

1)백재님한테 알려드린 동기 비동기 내용이 잘못된 것 같아서 다시 알려드렸다.ㅠ 제대로 공부해서 팀원들한테 도움이 됐으면 좋겠다.