#김정환 선생님 React 강의 완주반 - 8회차(完)

안녕하세요 "정보교류가 목적이며 코드리딩을 주로 하고 있는 스터디" 그룹 김정환 선생님 React 강의 완주반입니다. 8월 01일날 진행했던 "김정환 선생님 React 강의 완주반 8회차" 스터디의 내용을 공유합니다. 👍 김정환 선생님 React 강의 완주반 8회차 2021.08.01 디스코드를 통해 8회차 리뷰를 진행했습니다. 스터디 범위는 "만들면서 학습하는 리액트(react)" 끝까지. 조성재님께서 수고해주셨습니다. (17시 ~ 18:30시 까지.) 🙋 스터디에서 공유했던 내용들 메모리 적인 측면에서에서는 클래스가 많이 먹게 되어 훅을 쓰는게 좋고, 사용하기 편합니다. 클래스같은 경우 라이프사이클이 복잡했는데 훅은 더 편했습니다. 클래스 되어있는 코드를 hook으로 리팩토링! - 함수형 정리 ⏰ 강의에 대한 후기 리덕스 같은 상태관리 까진 아니더라도 컨텍스트 API나 Hook까지는 강의가 있었으면 정말 초급 강의로써 완벽했을 텐데 이부분이 조금 부족하게 느껴지셨다고 합니다. 공통된 의견으로 빨리 다음 강의가 올라오길 기다리고 있다고 합니다 ㅎㅎ 앞으로 학습할 것들은 이야기 나누어 보았습니다. 조성재님 - redux보다는 recoil 상태관리를 공부하실 거라고합니다.(hook처럼 사용하기 쉽지만, 리덕스툴에 비해 좀 힘이 약하지만 큰 서비스에서 사용할 게 아니라서 공부하기 좋을 것 같으시다고 합니다.) 김진수님 - Nest.js 인프런 강의를 구매해서 학습할 생각입니다. 원주혜 - https://react.vlpt.us/ 학습 예정 shootingstar - 딥다이브 정독 중. 전창민님 - 코어 자바스크립트 추천 외에도 김정환 선생님 강의를 기다렸다가 구매한다는 의견, 다시 처음부터 강의를 복습한다는 의견있었습니다.

#김정환 선생님 React 강의 완주반 - 7회차

안녕하세요 "정보교류가 목적이며 코드리딩을 주로 하고 있는 스터디" 그룹 김정환 선생님 React 강의 완주반입니다. 7월 25일날 진행했던 "김정환 선생님 React 강의 완주반 7회차" 스터디의 내용을 공유합니다. 👍 김정환 선생님 React 강의 완주반 7회차 2021.07.25 디스코드를 통해 7회차 리뷰를 진행했습니다. 스터디 범위는 "만들면서 학습하는 리액트(react)" 사용편 ⭐[최종정리] 까지. 원주혜님께서 수고해주셨습니다. (17시 ~ 18:30시 까지.) 🙋 스터디에서 공유했던 내용들 강의에서는 stopPropagation을 사용하는데 검색해보니 이벤트 버블링을 건들이면 안좋다해서 이 부분에 대해서 심도있게 대화를 나누어 봤습니다. (event) => this.search(event, keyword) 로 대신가능합니다. (조성재님께서 작성해주셨습니다.) this.search(event, item.keyword) } > https://medium.com/tapjoykorea/%EB%A6%AC%EC%95%A1%ED%8A%B8-react-%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%95%B8%EB%93%A4%EB%9F%AC-event-handler-syntheticevent-nativeevent-3a0da35e9e3f 해당 내용을 더 깊이 이해 하기 위해 관령 링크를 남겨둡니다. ⏰ 다음번 스터디 일정과 주제 다음 스터디는 2021.08.01에 마찬가지로 Discord을 통한 온라인 미팅 방식으로 진행될 예정이며 "만들면서 학습하는 리액트(react)" 끝까지 학습해서 모입니다. 해당 시간에 조성재님께서 발표해주실 예정입니다. 앞으로 진행되는 스터디 일지도 인프런 블로그를 통해 회고하겠습니다. 하트 눌러주시면 감사하겠습니다!

# 김정환 선생님 React 강의 완주반 - 6회차

안녕하세요 "정보교류가 목적이며 코드리딩을 주로 하고 있는 스터디" 그룹 김정환 선생님 React 강의 완주반입니다. 7월 18일날 진행했던 "김정환 선생님 React 강의 완주반 6회차" 스터디의 내용을 공유합니다. 👍 김정환 선생님 React 강의 완주반 6회차 2021.07.18 디스코드를 통해 6회차 리뷰를 진행했습니다. 스터디 범위는 "만들면서 학습하는 리액트(react)" 사용편 🌟[검색결과 중간정리] 까지. 김진수님께서 수고해주셨습니다. (17시 ~ 18:30시 까지.) 🙋 스터디에서 공유했던 내용들 1번째는 클래스형, 2번째는 함수형이다. 샌드박스를 통해 직접 카운터 기능을 만들어 보여 주셨습니다. 문자열도 증감시킬 수 있었습니다. 생명주기에 대한 학습도 하였습니다. 생명주기에 대한 내용은 너무 방대하여 스터디 이후에도 학습하기 위해 링크를 남겨주셨습니다. https://jistol.github.io/frontend/2018/12/10/react-lifecycle-methods/ 그 외 학습사항 : 렉시걸 스코프 : (함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다. 즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.) ⏰ 다음번 스터디 일정과 주제 다음 스터디는 2021.07.25에 마찬가지로 Discord을 통한 온라인 미팅 방식으로 진행될 예정이며 "만들면서 학습하는 리액트(react)" 사용편 ⭐최종정리까지 학습해서 모입니다. 해당 시간에 제비뽑기를 통하여 코드리딩 발표자를 뽑을 예정입니다. 앞으로 진행되는 스터디 일지도 인프런 블로그를 통해 회고하겠습니다. 하트 눌러주시면 감사하겠습니다!

# 김정환 선생님 React 강의 완주반 - 5회차

안녕하세요 "정보교류가 목적이며 코드리딩을 주로 하고 있는 스터디" 그룹 김정환 선생님 React 강의 완주반입니다. 7월 11일날 진행했던 "김정환 선생님 React 강의 완주반 5회차" 스터디의 내용을 공유합니다. 👍 김정환 선생님 React 강의 완주반 5회차 2021.07.11 디스코드를 통해 5회차 리뷰를 진행했습니다. 스터디 범위는 "만들면서 학습하는 리액트(react)" 소개편 🌟최종 정리 까지. 원주혜, 전창민님께서 수고해주셨습니다. (17시 ~ 18:30시 까지.) 🙋 스터디에서 공유했던 내용들 Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. console.log(Array.from('foo')); // expected output: Array ["f", "o", "o"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] this는 실행과 런타임을 다르게 봐야합니다. this는 실행 되었을 떄 어떤 것을 어떻게 하라~ 라는 것으로 받아 드리는게 가장 먼저입니다. 예시 ) 해당 사진을 보면 hide() { this.element.style.display = "none"; return this;} 로 되어있습니다. 여기서 실행하기전에 this는 View를 리턴합니다. 하지만 this는 실행할 때를 생각해야 합니다. hide함수는 view객체에다가 display none해준 상태 객체를 돌려줍니다. 클래스 설계도가 있고 브라우져에 올라가서 실행되면 객체가 실행되는데 어떤 메소들어가서 지지고 볶다가 돌려줍니다. 전창민님께서 생각한 바로는 1. 우리는 클래스를 만듬 2. 클래스가 어떤 실행환경(브라우저나 JVM) 에서 실행되면서 객체를 만듬 3. 그 객체를 가지고 우리는 어떤 일을 함 4. 우리가 지금 이 객체(this)에서 어떤 일(hide)을 하라고 하는 것을 this.hide()로 표현해놨다고 볼 수 있겠네요. 최종 정리 : this 바인딩은(this에 바인딩 될 값)은 함수 호출 방식, 즉 함수가 어떻게 호출 되었는지에 따라 동적으로 결정된다. ⏰ 다음번 스터디 일정과 주제 다음 스터디는 2021.07.18에 마찬가지로 Discord을 통한 온라인 미팅 방식으로 진행될 예정이며 "만들면서 학습하는 리액트(react)" 사용편 ⭐[검색결과]중간정리까지 학습해서 모입니다. 해당 시간에 제비뽑기를 통하여 코드리딩 발표자를 뽑을 예정입니다. 앞으로 진행되는 스터디 일지도 인프런 블로그를 통해 회고하겠습니다. 하트 눌러주시면 감사하겠습니다!

# 김정환 선생님 React 강의 완주반 - 4회차

안녕하세요 "정보교류가 목적이며 코드리딩을 주로 하고 있는 스터디" 그룹 김정환 선생님 React 강의 완주반입니다. 7월 4일날 진행했던 "김정환 선생님 React 강의 완주반 4회차" 스터디의 내용을 공유합니다. 👍 김정환 선생님 React 강의 완주반 4회차 2021.07.04 디스코드를 통해 4회차 리뷰를 진행했습니다. 스터디 범위는 "만들면서 학습하는 리액트(react)" ⭐중간정리 까지. 전창민님께서 수고해주셨습니다. (17시 ~ 19시 까지.) 🙋 스터디에서 공유했던 내용들 mvc 패턴을 순수 js로 구현한뒤 리액트와 비교해보자는 내용.>> SearchFormView와 SearchResultView를 Controller에 연결해 줌. >> SearchFormView에서 일어나는 사용자의 활동을 Controller가 받아서 SearchResultView에 영향을 준다. handleKeyup - 타자를 누를 때 작동하는 이벤트, submit- 엔터를 누를 떄작동하는 이벤트, 클래스 객체지향에 대한 이야기.view가 자동차라면 searformView는 그랜저자동차 안의 속성들, 예를들면 배기량 엔진 등을 상위에 적용하면 하위에는 그냥 가져올 수 있다. form에서 엔터를 치면 그냥 넘어가는 부분이 구식이라 이 부분을 preventDefault로 막았다. filter((product) =>product.name.includes(keyword) 배열에 filter를 하면 배열 안에 있는 하나의 객체가 뽑힌다.(product) 그 객체의 이름을 가지고 includes 함수를 실행한다. product.name = '베이컨 샐러드'.include('샐러드') 비건 샐러드.includes('샐러드') 하면 true filter함수: 조건(product.name.include(keyword))을 넣어서 -> true인 객체들만 모아서 배열로 만들어서 반환 includes 함수 : 조건을 넣어서 > 그 조건이 포함되어 있으면 true/false map : 조건을 넣어서 -> 모든 객체에 그 조건을 일괄적용해서 반환datas.map(data -> data * 2).filter(data => data super : 상위에 있는 것을 불러온다. ⏰ 다음번 스터디 일정과 주제 다음 스터디는 2021.07.11에 마찬가지로 Discord을 통한 온라인 미팅 방식으로 진행될 예정이며 "만들면서 학습하는 리액트(react)" 소개편 ⭐최종정리까지 학습해서 모입니다. 해당 시간에 제비뽑기를 통하여 코드리딩 발표자를 뽑을 예정입니다. 앞으로 진행되는 스터디 일지도 인프런 블로그를 통해 회고하겠습니다. 하트 눌러주시면 감사하겠습니다!

김정환 선생님 React 강의 완주반 - 3회차

스터디 명 김정환 선생님 React 강의 완주반 이번 스터디가 끝난 뒤 얻고 싶은 것 React 강의 완주 스터디 참여자 및 참여목적 냉면 shootingstar 캪틴큐 동글 블루슈즈 김진수 전창민 조성재 커뮤니케이션 하는 방식(카톡, 슬랙콜, 노션 등) 카카오 오픈채팅 - 일반적인 소통. 디스코드 - 본격적인 학습의 장 스터디 참여자 역할 스터디 리더: 인프런 블로그에 스터디 일지 작성, 출석체크, 줌 채팅방 개설 출석체크 및 일정관리 스터디 일정 2021.06.29 스터디 주요 내용 이번 스터디에서는 어떤 내용을 주로 이야기 나눴나요? 본격적으로 수업을 듣고 모였다. 하지만 여러가지 문제점이 있었다. 대게 큰 문제점은 아니었지만, npx lite-server --baseDir 1-vanilla/ 와, npx lite-server --baseDir .W1-vanillaW 가 달라서 서버가 구동되지 않으셨던 분. (선생님 강의는 맥으로 진행되지만 윈도우 기반으로 학습하시는 분도 있으셨고, 해당 명령어는 맥북에서는 잘 동작하지만 윈도우에서는 오른쪽과 같이 변경해줘야 돌아간다. 그렇지 않을경우 404에러를 보게됩니다.) 스터디를 진행하며 나왔던 질문은 어떤 것들이 있나요? 먼저 발표를 준비했던 본인부터 문제점이 많았다. 너무 급하게 준비하다 보니 강의는 전부 들었고, 약간의 ppt와 코드 리딩을 했지만 팀원분들께 많이 여쭤보게 되었다. super와 this가 가장 큰 문제였다. 분명히 어디서 많이 봤고 해당 키워드도 인강도 찾아보고, MDN도 읽어보았지만 팀원분들에게 설명할 정도의 능력이 아니었다. (생성자 함수가 호출되면 search-form-view 생성자를 찾아서 this에 엘리먼트에 저장한다라고 설명 하셨는데 분명 super라고 적혀있는데 왜 이부분에 this에 저장된다고 하셨을까) 질문에 대한 서로의 답과 아직 해결하지 못한 질문들 질문에 대해 어떤식의 답변들이 오갔나요. 또는 해결하지 못한 질문이 있다면 알려주세요. 오늘 급하게 참가하신 분도 계셨고, 또 학교나 아르바이트, 직장으로 인해 수업을 못듣고 오신분도 있으셔서, 이러면 좀 스터디의 효율이 떨어질 것 같아 이번주 일요일 오후 5시까지 다시 공부해서 모이기로 했다. (다시 발표는안하지만 개인적으로 위의 super, this, 오버라딩, 생성자 키워드에서 스스로 공부할 예정이다.) 다음번 스터디 주제 다음번에는 어떤 주제로 스터디에서 이야기를 나누게 될지 알려주세요! 7.4일 일요일 오후 5시 학습 못했던 부분 모두가 [꼭] 진도까지 해오기! [순수JS 1] ⭐중간정리 해당 강의가 너무 무겁다면 코드 읽듯이라도 수강해오기!! 학습소감 진도까지는 완료했고, 결과물도 나왔지만... 다시 해당 부분을 처음부터 재수강하고, 최대한 스스로 풀어보면서 완전히 내것으로 가져가야겠다는 생각을 했다. 분명 학습을 했음에 불구하고 여러 기억에 공백이 있고 의뭉스러운 부분이 있다면 확실히 집고 넘어가는 것이 맞다고 생각한다.

김정환 선생님 React 강의 완주반 - 2회차

스터디 명 김정환 선생님 React 강의 완주반 이번 스터디가 끝난 뒤 얻고 싶은 것 React 강의 완주 스터디 참여자 및 참여목적 냉면 shootingstar 캪틴큐 동글 블루슈즈 김진수 전창민 커뮤니케이션 하는 방식(카톡, 슬랙콜, 노션 등) 카카오 오픈채팅 - 일반적인 소통. 디스코드 - 본격적인 학습의 장 스터디 참여자 역할 스터디 리더: 인프런 블로그에 스터디 일지 작성, 출석체크, 줌 채팅방 개설 출석체크 및 일정관리 스터디 일정 2021.06.28 스터디 주요 내용 이번 스터디에서는 어떤 내용을 주로 이야기 나눴나요? 자신의 학습 수준이 어느 수준인지 서로 공유 하였다. 어떤분은 HTML, CSS, JS까지 어떤분은 Vue 경험자도 계셨고, 학교에서 Python 공부하셨던 분도 계셨지만 공통적으로 React 하셨던 분은 없어서 차근차근이 나아갈 수 있을 것 같다. 또한, 의견을 나누었을 때 생각보다 강의가 많지만 시간적으로 보았을 때 양이 많지 않아 내일 모임까지 일단 [순수JS 1] ⭐중간정리 까지 학습해오기로 하였다. 스터디를 진행하며 나왔던 질문은 어떤 것들이 있나요? 공부 속도를 어떻게 조절해 나갈 것인지 이야기 나누었다. 사생활에 대한 질문은 없었지만 평균적으로 평일 저녁과 주말에 시간이 다들 가능하셨기에 일단 빠르게 평일 저녁에도 만나기로 하였다. 질문에 대한 서로의 답과 아직 해결하지 못한 질문들 질문에 대해 어떤식의 답변들이 오갔나요. 또는 해결하지 못한 질문이 있다면 알려주세요. 질문이랄 것 까지야 없지만 나를 포함해서 깃을 처음 사용해부분들이 많아서 조금 걱정이 되었다. 하지만 강의에서 알려줄 것 같고, 또한 팀원분들 중에 이미 깃을 사용하시분 유경험자 분들이 몇몇 있으셔서 도움을 받을 수 있을 것 같다. 다음번 스터디 주제 다음번에는 어떤 주제로 스터디에서 이야기를 나누게 될지 알려주세요! 6.28일에 모이기로 하였고, [순수JS 1] ⭐중간정리 까지 학습해오기로 하였다. 학습소감 두번째 만남이고 디스코드와 모임에 익숙해지고 서로 이야기를 나누다 보니 확실히 혼자 공부할 때보다 고양감이 느껴져서 좋았다. 다만 평일에 이렇게 저녁에 자주 만나기에 탈주 하시는 분이 생길까 조금은 걱정이다. 그럼 내일 모임도 파이팅!!

김정환 선생님 React 강의 완주반 - 1회차

스터디 명 김정환 선생님 React 강의 완주반 이번 스터디가 끝난 뒤 얻고 싶은 것 React 강의 완주 스터디 참여자 및 참여목적 냉면 shootingstar 캪틴큐 동글 블루슈즈 김진수 전창민 커뮤니케이션 하는 방식(카톡, 슬랙콜, 노션 등) 카카오톡 오픈채팅 >> JK님 의견으로 디스코드로 변경. - ZOOM 40분 이용시간 제한때문에 어려움이 있었는데 해결되었다. 스터디 참여자 역할 스터디 리더: 인프런 블로그에 스터디 일지 작성, 출석체크, 줌 채팅방 개설 출석체크 및 일정관리 스터디 일정 2021.06.27 스터디 주요 내용 이번 스터디에서는 어떤 내용을 주로 이야기 나눴나요? 아래와 같이 내용이 좀 중구난방이었는데 여러분들이 도와주신 결과 스터디 다운 스터디가 시작되었다. 매주 다수결에 의해서 요일을 정하기로 함. 맞는 시간대에 가능한 사람 참석, 못할경우 다른 요일이나 다른 시간대에 참석. 강의를 구매하지 못하신 분은 타 강의 수강하여 같은 시간대에 공부는 가능 다만, 화면 및 오디오 공유 금지.>>> 였는데 전창민님의 의견으로 깔끔하게 정리되었다. 스터디 개요 - 6/28일 19시 : 발표자 추첨 - 진행범위 : 처음 ~ 섹션 0. 준비편 - 발표자 : 발표자는 6/28에 모여서 추첨(복불복게임으로 2명 추첨) 스터디에서 나왔던 질문 스터디를 진행하며 나왔던 질문은 어떤 것들이 있나요? 스터디 운영에 대한 전반적인 의견 공유 및 방식을 정했습니다. 질문에 대한 서로의 답과 아직 해결하지 못한 질문들 질문에 대해 어떤식의 답변들이 오갔나요. 또는 해결하지 못한 질문이 있다면 알려주세요. 첫 스터디이기 떄문에 발표자 없이 개발환경만 셋팅해오고,분량은 처음 ~ 섹션 0 준피편까지 완료 해오기로 하였습니다. 다음번 스터디 주제 다음번에는 어떤 주제로 스터디에서 이야기를 나누게 될지 알려주세요! 본격적으로 발표자 정하고 10주내로 완강 예정!!! 느낀점덧분여서 인프런에서 준비해 준 노션 스케줄러가 해당 블로그에도 적용이 되나 싶었는데 그러지 않아 조금 슬펐다.노션으로 스케줄을 공유할까 했지만 카톡방에서 단순히 스케줄을 유동적으로 정하면 되는 부분이라서, 개인 노션용으로만 쓰기로 하였다. 애초에 노션에 있는 기능은 노션에만 적용되는 것을 이번에 처음 알았다.