리액트 & 노드.js 스터디 5주차

John Ahn 님의 [입문-활용] 따라하며 배우는 웹 개발 시리즈 로드맵 따라가는 스터디 1차 1.요약 매주 1강좌씩 듣고 주중에 강의를 듣고 인증하고 일요일에 디스코드에서 학습내용을 공유하는 스터디입니다. 2.참여인원 스터디 총인원 6명 3.WK5 변동사항 2021.07.25 4차 스터디 참석자: 5명 참석자: 래욱,효효,Suzzie, Jason, NR 미참석:dream2026 학습 기간과 내용 : youtube 클론코딩 1/2 4.스터디 진행 세부사항 🌷학습 내용 관련> Suzzie님: styled.components 로 짧은 리팩토링 시연 효효님: material UI 소개 래욱님: 비디오 업로드시 체크 파일명은 임의로 조작할 수 있으니signature bite 방법 소개해주심 Jason님: 현업에서 FE 작업물은 아이디로 mapping해서완전히 분리해서 작업하는 편인데 리액트/노드.js 상황은 어떤지에 대한 의논 NR님:아직 파일 문제로 고통받고 계심(인프런 강의 질문에도 올렸는데 답이 없는...ㅠ) 1. 8월까지는 기존 커리큘럼대로 진행하는 것( 최소 쇼핑몰 만들기)을 기본으로 합니다. 2. 다만, 강의를 들으면서 에러나는 부분이나 강의가 쓱(?)지나가는 부분들을 개선하려고 합니다. 의견 1: 에러 발생시 질문과 답변을 빠르게 받을 수 있는 다른 강사분의 강의를 찾아봅니다. 제로초님이나 벨로퍼트님 같이 유명한 분들도 있으니 섞어보는 것도 좋을 것 같습니다. 의견 2: 에러 발생시 스터디 내부적으로 해결하며 전진합니다. 5. 마무리다음주까지 JS풀스택 강의 중에서 강사님피드백(이슈해결) 좋고,조금 더 자세히 배울 수 있는 강의 각자 추천하기로~~ [8:38 PM]

리액트 & 노드.js 스터디 3주차

John Ahn 님의 [입문-활용] 따라하며 배우는 웹 개발 시리즈 로드맵 따라가는 스터디 1차 1.요약 매주 1강좌씩 듣고 주중에 강의를 듣고 인증하고 일요일에 디스코드에서 학습내용을 공유하는 스터디입니다. 2.참여인원 스터디 총인원 6명 3.WK3 변동사항 2021.07.18 3차 스터디 참석자: 6명 참석자: 래욱,효효,Suzzie, Jason, Dream2026, NR 학습 기간과 내용 : 1주 --> 2주간 학습하고 스터디 진행, 4강좌 진행에서 3강좌로 바꿈 스터디 방식 변경 : 전체적인 Q&A로 진행하니 참여율이 떨어짐. 파트 디스커션 추가: 각자 맡은 부분을 정리해서 설명하고 Q&A하는 방식으로 진행 4.담당 파트 개별 스터디원들이 각자 설명할 파트를 맡아서 코드를 보며 설명하고, 다같이 이야기해보거나 막혔던 부분, 의견을 나눔! 래욱님: 페이지의 접근권한을 체크하는 로직을 살펴보고, 서버에 api를 호출하고 쿠키 정보를 통해, 데이터베이스의 사용자 정보를 검토하는 과정을 공유하심 Jason님 :(리액트 UI)컴포넌트 내에서 프로퍼티를 이용해서 값을 전달하고,useState를 이용해서 제어하는 부분 공유하심 6.학습인증 & 스터디 진행 노션에서 주차별로 개별 학습진행사항을 공유중 6.4차 스터디 의논 마지막 강좌인 Youtube 클론강의에 대해서 파트나누기와 진행방향 의견 나눔

20210717 WIL_Redux

리덕스 생활코딩/John Ann의 강의를 참고해서 작성함 리덕스 dependencies 생활코딩 Data change 발생 시 리엑트은 소문 컴포넌트로만 구성, individual compnt에서 data change 발생시, 주변으로 전파? 시킴 1. 렌더함수 호출로 필요하지 않아도 모두 전파되면서 performance 떨어짐 업뎃을 위해서 indiv cmptnt 연결되어야함! Props & event 로 연결됨 규모 커지면 복잡해짐--------------> 리덕스: 정보를 중앙화시킴 리액트의 1번 단점redux 도 가지고 있음(중앙전파) → 라이브러리로 극복가능함 Predictable state container for JS apps JS 앱을 위한 예측가능한 상태 저장소 리덕스 특징 1. Single Source → 하나의 객체 (app의 복잡성 낮춰줌) 로 관리 단 하나의 State 유지함 ={} 2.데이터 가져가거나 변경 매우 strict 데이터 외부에서 직접 제어 X 의도치 않은 state 변경 하지 않기 위해서 데이터 change → 업데이트 해줌! 원본 수정이 아니라 원복 복제를 통해서 change undo, redo 쉬움 이전 상태의 app 상태 찾기도 쉬움 https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=4 2.1 전체 동작 & 흐름파악 2.2 State 와 render 의 관계 리덕스는 저장하는 곳. State만들기 위해서 reducer를 매개로 씀 State 직접 접속 X 접속을 위해서 3가지 함수 → get State() 가져옴 렌더 → UI역할을 하는, 우리가 짜는 코드, State 데이터를 참조해서 UI를 만듦 Subscribe() 구독 렌더함수를 잘 만들면 상태 변화 업데이트된(state 값 받아와서 업데이트하는) UI만들 수 있음 → subscribe 형식 : store.subscribe(render); 3.Action의 예 Submit 버튼을 누르면, Action이 dispatch 에 전달됨 Dispatch 역할 1. 리듀서 호출해서 state 값 바꿈 2. 1이 끝나면 subscribe 이용해서 렌더함수로 리턴해줌(--> 화면갱신됨) Dispatch가 리듀서를 호출할떄(1번) 매개변수 2개 필요! ㅐㅑ(state, action) 리듀서는: 현재의 값 state (입력값)으로 action 을 참조해서 새로운 data (리턴값 -->새로운 state값) 만들어냄! 리덕스 John Ann 리덕스는 한방향으로만 흐름unidirectional 1.액션 = 무엇이 일어났는지 설명하는 객체 2.리듀서 -액션을 통해서 뭐가 변하는지 설명해주는 객체 3.스토어 → Dependencies 리덕스미들웨어 리덕스-thunnk 리덕스가 함수 잘 사용할 수 있게 해줌 리덕스-promise 리덕스가 프로미스 잘 사용할 수 있게 해줌

리액트+ 노드.js 스터디 1주차

John Ahn 님의 [입문-활용] 따라하며 배우는 웹 개발 시리즈 로드맵 따라가는 스터디 1차 1.요약 매주 1강좌씩 듣고 주중에 강의를 듣고 인증하고 일요일에 디스코드에서 학습내용을 공유하는 스터디입니다. 2.참여인원 스터디 총인원 6명 3.WK1 스터디 진행 2021.07.05 1차 스터디 참석자: 래욱,효효,Suzzie, Jason, Dream2026, NR 학습 기간 변동 : 강의 내용이 많어서 학습 기간을 1주 --> 2주간로 바꾸고 스터디 진행함(스터디원들과 의견 공유 후에 결정!) 4. Discussion - vulnerabilities 이슈, npm audit fix해도 줄어들지 않음, 진행하는데는 문제 없음 - body-parser 적용하면 에러생김, express에서 통합했기 때문에 최신버전에서는 문제 생김, body-parser 삭제하면 적용! - 이외 학습 중에 나타난 에러메시지 공유 & 의견 나눔 5.학습인증 & 스터디 진행 노션에서 주차별로 개별 학습진행사항 공유중~~~~ 6. 학습자료 공유 리액트/노드/full-stack 관련 학습자료나 강의를 공유함 mern-stack https://www.udemy.com/course/nextjs-dev-to-deployment/ 제로초 node.js 오픈소스 교재 https://thebook.io/080229/ 모던javascript tutorial https://ko.javascript.info/