1주차 랭킹 1위..긴 한데 오래 앉아있는 만큼 공부한 것 같진 않다.
한 시간을 공부해도 의미있는 공부를 하도록 노력해야겠다.
모르는게 많은 것이 당연하다. 다른 사람의 팁과 지식을 흡수하자!
배운 것을 정리하는 습관이 아직은 어렵다. 완벽하게 하려하지말고 꾸준히 하자!
1일차
1)주말에 리액트 과제를 미리 끝내놔서 마음이 편하다 HTML, CSS 할 때가 좋았지,,
2) CS 스터디 조가 짜여졌다. 1일 1로그 100일 완성 IT 지식이라는 책을 하루에 한 챕터씩 읽고 공부하기로 했다. 아직은 어려운 단어들이 많은데 얼른 다 배워서 똑똑이가 되고 싶다!!
3) 알로리즘 스터디도 조금씩 실력이 늘고 있긴한데 오늘 팀원분이 reduce, map, fillter를 알면 풀 수 있는 문제들이 많아진다고 하셔서 공부해볼 예정이다.
4) 리액트 과제를 미리 다 풀어놨었는데 input 내용을 다 입력했을 때 javascript로 alert을 띄우는 법을 팀원들과 공부해보았다. javascript에서는 id값을 쓰고 val()값의 유무를 판단해서 alert을 띄웠다.
5)react 기술 매니저님이 오셔서 지금 이럴 때가 아니라고 하셨다.🤦♀️
알고리즘 문제를 푸는 것도 중요하지만 자바스크립트 공부를 해야 알고리즘을 더 잘 풀 수 있다고 강의를 추천해주시고 가셨다.
6)크롬앱 만들기와 자바스크립트 기본, 자바스크립트 DOM & EVENT를 공부할 예정이다.
7)항해톡 발표 신청하려했는데 목요일까지 강의 다들으려면 시간이 부족할 것 같아 취소했다 ㅠㅠㅋ
알고리즘 til
1.Date 객체와 날짜
2.array filter 사용법
2일차
1)알고리즘 모의고사날이다. ㅠㅠ 범위 안의 내 파트 문제는 다 풀어서 다른 팀원 파트도 풀어보고 내가 푼 답안이랑 팀원들 답안을 비교해보았다.
2)cs스터디 발표 첫째날인데 첫번째 발표자이신 팀장님이 발표자료 준비와 발표를 너무 잘하셔서 놀랬다. 유튜브하셔도 되시겠는걸요..? 책이 번역된 글이라 그런지 더 어렵게 느껴진다. ㅠㅠ
3)모의고사를 30분만에 풀고 돌아와서 팀원들과 답을 공유 했는데 이해했다고 생각한 개념이 아직 완벽하게 숙지가 안된 것 같다. 옆구리 쿡찌르면 나오도록 연습해야지 부들
4)대규님 문제에서 모르는 부분이 있어서 질문했다. 역시 자바스크립트 문법이 아직 부족한 듯 하다.ㅠㅠ
backtick과 single quoto
3일차
1) 팀내 모닝콜 담당^_^ 이전 팀원들이 체크인이 안돼있어서 전화로 깨워줬다. 엄마역할이네 ㅠㅋㅋ
2) map 함수를 이해하겠다고 팀원들이 다같이 머리를 맞대고 싸우다가 안돼서 다른 팀원분에게 도움을 요청했다. 설명을 들었을 때는 이해했는데 다시 혼자 이해하려해보니 이해가 되지 않아서 손코딩을 했다.
// 설명해주신 부분
function solution(arr1, arr2){
return arr1.map((value,index) => value.map((value2, index2) => value2 + arr2[i][j]));
}
// 1. arr1 의 요소들을 각각 조회 : arr1.map((value, index) => )
// : ex) [[1,2],[2,3]] => [1,2], [2,3] 이렇게 하나씩 읽는다는 뜻임
// 2. arr1 안의 요소가 list로 되어있으니 다시 map 돌려서 각각 조회
// : value.map((value2, index2)) => ( ... 여기는 나중에 식 써줄거임 ))
// ex) [ 1, 2 ] => 1, 2 이렇게 하나씩 읽는다는 뜻임
// 3. 데이터 조회를 했으면 이제 요소를 내가 원하는 방식대로 요리해야함
// : value2 + arr2[i][j]
// : index = 0, index2 = 0이면 => 1 + B[0][0] = 1 + 2 = 3
// : index = 0, index2 = 1이면 => 2 + B[0][1] = 2 + 3 = 5
//. : 내부 index2 다 돌았으니까, [3, 5] 요소는 요리완료하고 위에 index가 1로 넘어감
// : index = 1, index2 = 0이면 => 2 + B[1][0] = 2 + 5 = 7
//. : index = 1, index2 = 1이면 => 3 + B[1][1] = 3 + 6 = 9
//. : 내부 index2 다 돌았으니까 [7, 9] 요리 완료, 다시 위 index 돌리러감
// 어 돌릴게 없네? 왜? index는 0 ,1 이 끝이었으니꽈. 그럼 다시 리스트로 묶어
// [[3, 5], [7,9]]function sumMatrix(A,B){
return A.map((a,i) => a.map((b, j) => b + B[i][j]));
}
A=[[1,2],[2,3]]
B=[[3,4],[5,6]]
console.log(sumMatrix(A,B))
손코딩 점점 맛들리는것 같다. ㅋㅋ 씹어먹지 못하면 갈아서 마셔야지..
3) 항해톡을 다시 신청했다. 그래도 날짜를 조금 넉넉히 잡아서 준비는 할 수 있을 것 같긴한데 발표가 너무 오랜만이라 떨린다 ㅠㅠㅋㅋ
3) 리액트 기술 매니저님이 자바스크립트 강의를 안듣고 리액트를 들어가면 힘들거라고 강의를 듣고오라고 하셨다. ㅠ 질문을 두 가지 했는데 짧은 코드가 무조건 좋은지와 cs 관련 공부방법에 대해 물어보았는데
알고리즘 테스트는 짧게 쓴다고 좋은 것이 아니라 어떻게든 풀면 된다고 하셨고 알고리즘과 CS지식은 프론트엔드에게 엄청 중요한 부분은 아니라고 하셨다.
4) 컨디션 조절을 좀 해야할 것 같다 ㅠ 일주일 내내 새벽 늦게 잤더니 회복이 잘 안된다 ㅠㅠㅋ 오늘은 일찍 자고 내일 일찍 일어나서 하려고 한다. ㅎㅎ
프로그래밍 기초 결과물
1.알고리즘 학습 계획서
2.알고리즘 Github
3.리액트 과제
til
1.Spread Operator(스프레드 연산자)
2.es6 문법
5일차
1) 리액트 주특기 첫째날! 새로운 팀원들과 리액트 과제를 시작했다.
자바스크립트 기초가 부족해서인지 아직은 개념들이 어려운 것 같다.
2) 12조 팀원들과 git bash & 소스트리를 다시 공부했다. 소스트리에서 gitignore 사용법도 알게 되었다.
3) 자바스크립트 문법 내용을 조사하는 숙제가 있었는데 자료는 찾았는데 내용이 어려워서 이해가 잘 안되었다. ㅠㅠ
4) 문제 두 문제와 퀘스쳔 한문제 만들기를 하나씩 맡아서 해오기로 했는데 나는 그 중 라이프 사이클 문제를 맡았다. 다른 사람에게 설명을 하기 위해서는 내가 먼저 잘 이해해야 설명할 수 있기 때문에 더 꼼꼼히 알아보려 노력했다.
6일차
1) 리액트 강의를 듣다보니 알고리즘 스터디 때 했던 내용이 또 나와서 반가웠다. 하지만 리액트 문법은 아직 낯설다. 입문단계니까 당연하지! 강의만 계속 듣다보니 조금 진이 빠지기는 한데 짧은 기간안에 해내려면 감수해야한다. 집중이 안되더라도 안되면 다시하고 또 다시하고! 작심삼일도 반복하면 300일이 될 수 있다.
2) 팀별 과제 중 라이프 사이클 파트를 맡아 조사하게 되었다.
부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다.
컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?
라이프 사이클: 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지
- 컴포넌트는 생성되고 수정(업데이트)되고 사라진다.
- 수정은(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다.
-
[생성] 처음으로 컴포넌트를 불러오는 단계
1) [constructor] 컴포넌트한테 필요한 값을 넣어준다.
자식 컴포넌트 B가 부모 컴포넌트 A에서 받아온 name 값. {name: "르탄이"}
2) [render] 화면( DOM)에 뿌려준다. (Mount 한다.)
3) [componentDid-Mount] 화면에 나타내는 것을 끝냈다.
-
[수정] 바뀐 부분을 가상 DOM에 저장했다가 DOM에 뿌려주는 단계
부모가 자식한테 주는 데이터 값이 변경된 경우(props가 변경되었을 때)
1) [New props] 부모 컴포턴트 A의 name 값이 {name: "진도사우르스"}로 변경
2) B는 바뀐 name값을 가져온다. (update한다.)
3) [render] 가상DOM에서 DOM으로 바뀐 부분을 올려준다.
화면( DOM)에 뿌려준다. (Update 한다.)
4) [componentDidUpdate] 업데이트 하는 것을 끝냈다.
