# NomadCoders

henry

7주차(23.09.13~19) 💖 핵심 3줄 요약 사소한 코드에 대한 시간 소비 줄이기 Animation 강의 2강 까지 완료 강의 과제 DM 생성 & 목록 구현 완료 🎯 이번 주 목표 ✅ 과제 제출 ✅ Animation 강의 2강까지 완료 🚧 Dart 3 migration 👏 칭찬하고 싶은 점 클린 코드에 대한 집착을 버리고 구현을 우선시하기 시작함 😭 고치거나 버려야 할 점 사소한 코드에 지나친 시간을 쏟음 🏃‍♀️ 일일 스프린트 23.09.13 ✅ Day38-State Management 과제 완료 23.09.14 ✅ Day39-MVVM + Provider + Dark Mode 과제 완료 23.09.15 ✅ Day40-Provider + 🔥 = Riverpod 과제 완료 ✅ 홍대 모각코 23.09.16 ✅ Day41-Authentication 과제 (1/2) ✅ 서초 모각코 23.09.17

henry

6주차(23.09.06~12) 💖 핵심 3줄 요약 7일 중 4일의 모각코는 많은 체력을 요한다. 모각코 이제는 줄이고 밀린 flutter 공부에 집중 하자. 다음 번에 다시 인천을 방문 할때는 의미 있는 변화가 있도록 노력해야 한다. 🎯 이번 주 목표 ✅ 모각코 4일 참석 ✅ 과제 완료 ❌ Dart 3 upgrade 👏 칭찬하고 싶은 점 휴가 없이 7일중에 4일을 모각코 간 것은 대단 😭 고치거나 버려야 할 점 모각코 이제는 줄이고 밀린 flutter 공부에 집중 하자. 🏃‍♀️ 일일 스프린트 23.09.06 ✅ Day31-Photos 과제 1/2 23.09.07 ✅ Day31-Photos 과제 2/2 완료 23.09.08 ✅ 부평 모각코 참석 23.09.09 ✅ Day34-Dark Mode 과제 완료 ✅ 서초 모각코 참석 23.09.10 ✅ 고터 모각코 참석 23.09.11 ✅ Day36-Rout

ekkk

🛠 기술 스택 📚 강의 [ReactJS 로 영화 웹 서비스 만들기 by noma

ekkk

📍 Parameters 📏 페이지 전환 ( Home ) 영화 제목 클릭 -> ( Detail ) 영화 정보 페이지 React Router 는 동적 URL 을 지원해주기도함 동적? -> URL에 변수 넣을 수 있음! id 부분에 "/movie/:id" 형태로 변수 넣기 가능 Movie 가 props로 id를 받도록 Home.js 에서 id 추가 Movie 가 Home 으로 부터 id 를 받음 📏 URL - 아이디 가져오기 url 에 있는 영화별 아이디를 어떻게 가져올 수 있을까? React Router 에서는 url 에 있는 값을 반환해주는 함수 useParams 사용

ekkk

📍 영화 정보 가져오기 loading, movies 를 useState 적용 영화 정보들을 가져올 건데... 📓 then 방법 오류 발생시, 어떤 then 에서 발생한지 확인 어려움 가독성 나쁨 VS 📓 asyn-await 방법 > asyn-await : 비동기 처리를 동기적으로 작동할 수 있게 도와줌 try-catch 예외 처리 가능 async : function 앞에 위치, Promise 반환 await : 비동기 처리된 프로미스 앞에 위치, 비동기 처리가 될 때까지 기다림 📍 React Router 이용한 페이지 전환 📗 React-Router-Dom 설치 📗 컴포넌트 분리 App.js : router 를 render 하는 역할 Home.js : loading, 데이터 fetch 후 전달의

ekkk

📍 ToDoList form 은 submit 이라는 이벤트를 지님 input 값이 변할 떄마다 onChange 버튼 클릭시 onSubmit map() 을 이용해 toDo 리스트 보여주기 배열의 아이템 만큼 새로운 배열을 만들어 리턴해줌 map 으로 만든 element 들은 key 를 꼭 가져야함 toDo, toDos 의 State 설정 toDo의 값을 event.target.value 로 업데이트 event.preventDefault 로 새로고침 방지 만약 toDo 가 비어있을 경우 바로 return toDo input 을 빈칸으로 리셋 toDo 들의 항목들을 함수로 element 추가 기존 배열에 새로운 값 추가 > 배열 이름 앞에 ... 추가 🍍 전체코드 ![](https://velog.ve

ekkk

📍 useEffect > 특정 코드의 실행을 제한하고 싶을 때 사용 useEffect 안의 한수는 보통 안에서 화살표 함수로 만들어 사용 🍍 실습코드 📚 노마드 코더 👩‍💻 참고

ekkk

📍 props > 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법 (어떤 형태로든 보낼 수 있음) 자식 컴포넌트의 첫 번째이자 유일한 인자 버튼을 만들때마다 일일히 style 적용 -> 비효율적 => 하나의 틀로 만들어 붙이면 좋겠다..! 📐 props 전달 >전달할 property = 값 📐 자식 컴포넌트가 props 받아오기 argument 로 props를 받아 {props.text} 형태로 사용 가져올 property의 이름을 {}와 함께 바로 사용 보내는 property 이름과 받는 property 이름이 일치할 것 일부 props만 전달 Continue 버튼은 idex 값을 전달하지 않아 undefined 를 받게됨 -> default 값을 설정할 수 있음 📐 props로 함수 전달

henry

5주차(23.08.30 ~ 09.05) 💖 핵심 3줄 요약 중간 모임에서 니꼬샘을 만나서 너무 좋았다. 위젯별로 대처해야 할 상황들에 조금씩 익숙해지고 있다. 모각코는 양보다 질 이여야 한다. 🎯 이번 주 목표 중간 모임 참석 모각코 참석 👏 칭찬하고 싶은 점 스케줄은 어찌어찌 해 냈다. 😭 고치거나 버려야 할 점 모각코를 자주 나간다고 해서 실력이 늘지는 않는다. 양을 늘리는게 아니라 효율적으로 모각코를 하는 방법을 찾아보자. 🏃‍♀️ 일일 스프린트 23.08.30 ✅ Day24-Bottom Sheet 과제 완료 23.08.31 ✅ Day25-Write Screen 과제 완료 23.09.01 ✅ 강남 모각코: Day26-Search & Activity 과제 1/3 ✅ 플러터 스터디 중간 모임 참석 23.09.02 ✅ 종로 모각코: GlueSQL Foreign key constraint base

ekkk

🛠 기술 스택 📚 강의 바닐라JS로 크롬앱 만들기 by nomadcoders 📝 기록 및 후기 https://velog.io/@ekkk/series/J

ekkk

비추천 방법 Counter UI 새로고침해주기 위해 함수 CountUp 안에 ReactDom.render(...) 넣어줌 React 가 제공하는것 : 데이터가 바뀔때마다 컴포넌트르 리렌더링하고 UI 를 refresh 하는 것 즉, 우리가 바꾸고 싶은 부분만 바꾸는 거임 📍 State > 기본적으로 데이터가 저장되는 곳 >useState 는 [value, modifier] 를 제공 > value : 값을 저장하는 변수 modifier : value 값 변경이 가능하며 (직접 다시 렌더할 필요없이) 자동으로 re-render > 📐 state 이용 state 생성 초기값은 0, setCounter 함수를 이용해 값 변경가능 onClick 시, setCounter 함수를 이용해 counter 에 1씩 더해줌 modifer

ekkk

📍 vanillaJS 로 구현 > HTML 로 시작해 JS로 끝 html의 body에 클릭 버튼과 클릭 수를 알려주는 요소 생성 JS를 통해 이벤트 구현 📍 ReactJS 로 구현 > JS로 시작에 HTML로 끝 React는 script 태그를 이용해 사용 -> 느리기 때문에 보통 스크립트로 사용하지 않음 html의 body에 `` 생성 React에서 root id에 들어갈 element 들을 생성해 render 해줌 > - #### 🔎 render() -> React 의 element를 가지고 HTML을 만드어 배치해 사용자에게 보여줌 🔎 react-dom -> element 를 HTML body에 넣는 역할 getElementById를 이용해 root 를 찾음 `createEle

henry

4주차(23.08.23~29) 💖 핵심 3줄 요약 과제 시간 내 완료 모각코 참석 완료 Flutter UI 시스템에 대해 새로 배운점이 많음 🎯 이번 주 목표 과제 시간 내 완료 강의 복습 👏 칭찬하고 싶은 점 조금씩 스터디 패턴에 익숙해지고 있다. 아직 복습은 많이 부족하지만. 두번 째 모각코에 나가 웹기초와 리액트 노마드코더들을 만났다. 😭 고치거나 버려야 할 점 이해가 안가는 부분은 대충 구현하지 말고 시간을 좀 더 써서라도 강의를 다시 보거나 리서치를 더 할 필요가 있다. 🏃‍♀️ 일일 스프린트 23.08.23 (수) ✅ 영화 대본 번역 ✅ Day15-Onboarding Flow part 1 완료 23.08.24 (목) ✅ Day18-Onboarding Flow part 2 base 23.08.25 (금) ✅ Day18-Onboarding Flow part 2 완료 23.08.26 (

ekkk

📍 parentElement > 선택한 element의 부모를 알려줌 event 에 대한 유용한 정보를 얻고 있음 target은 클릭된 HTML element임 parentElement 는 클릭된 element의 부모 -> 누구를 삭제해야하는지를 알 수 있음 x 버튼 누름 -> event 를 얻게 됨 -> event는 target을 줌 (target은 button) -> 그 button 은 부모를 갖고 있음. parentElement 를 통해 부모를 알 수 있음 -> 부모를 통해 remove 함수를 통해 toDo 목록 삭제 📍 JSON.stringify() > JavaScript의 Object나 array 등을 string으로 바꿔주는 기능 📍 JSON.parse() > JavaScript 에서 사용 가능한 object로 만들어줌

henry

3주차(23.08.16~22) 💖 핵심 3줄 요약 첫 틱톡 챌린지의 난이도는 나쁘지 않다. 하지만 생각보다 시간이 오래 걸리므로 미리 하는 습관을 기르자 애니메이션 강의 듣기를 시작(?)은 했다. 🎯 이번 주 목표 첫 틱톡 챌린지 무사 완료 👏 칭찬하고 싶은 점 😭 고치거나 버려야 할 점 챌린지를 미루는 습관 🏃‍♀️ 일일 스프린트 23.08.16 ✅ Day10: State! 제출 ✅ 맥미니 수리.. 23.08.20 ✅ 애니메이션 1강 듣기 ✅ 강남역 모각코 참여 ✅ Day14: Movieflix 제출 23.08.21 ✅ Day17: Onboarding Flow part 1 (2페이지까지 구현) 23.08.22 ✅ Day17: Onboarding Flow part 1 (기능구현 완료) ✍️ 이번 주 배운 내용: Hero 는 동일 이미지에 대해서만 적용된다. 이번

ekkk

📍 Math 함수 > #### 🔎 Math.random() : 0 과 어떤 수 사이의 어떤 랜덤한 수를 가져오고 싶을 때, 그냥 그 수를 곱함 Math.random() * 10 : 0~10전의 숫자 랜덤 > 🔎 Math.round() : 숫자 반올림 🔎 Math.ceil() : 숫자 올림 🔎 Math.floor() : 숫자 내림 📍 Array.lenth 하드코딩하지 않도록 따로 숫자를 넣는 것보다는 배열의 길이를 사용할 것 📍 createElement() > : element 생성해 body에 html을 추가함. 괄호 안에는 HTML tag 들어감 📍 appendChild() >생성한 bgImage를 html의 body에 append 혹은 prepend >append 는 맨 뒤, prepend 는 맨 위에

ekkk

📍 setInterval() > interval : 매번 일어나야 하는 무언가 📍 setTimeout() 📍 Date() > 현재 날짜, 시간, 분, 초에 대한 정보를 가지고 있음 new Date() : 오늘 날짜에 대한 정보를 가져옴 https://ko.javascript.info/date 📍 padStart() > 스트링의 길이가 첫 번쨰 인수와 같지 않을 경우 -> 앞쪽에 원하는 특정 스트링 추가 반대로 padEnd() 존재 🌻 오늘의 실습 !codepen[ekkk/embed/RwEbKoe?default-tab=html%2Cresult]

henry

2주차(23.08.09~15) 💖 핵심 3줄 요약 더 많은 스터디원 들과 친해지자(w옾각코) 일일 스프린트 습관을 잡자 기존 강의 복습을 꾸준히 하자 🎯 이번 주 목표 [x] 스터디원들과 친해지기 [x] 과제형 챌린지 빠르게 완료 [ ] 일일 스프린트 습관 잡기 [ ] 기존 강의 메모 복습 👏 칭찬하고 싶은 점 일부 스터디원들과 조금은 친해졌다 고 생각된다. 주말 휴가를 다녀왔음에도 챌린지를 모두 완수했다. 😭 고치거나 버려야 할 점 기존 강의 메모들에 대한 복습이 귀찮아도 해야한다. 계속 미루면 다음 주 부터는 챌린지하다 큰일 날 수도? 일일 스프린트 습관이 아직 잡히지 않았다. 더 세분화해서 명확한 목표를 잡아야 한다. 🏃‍♀️ 일일 스프린트 23.08.09 [x] Understanding the linux kernel ch.1 읽기 [x] Rust CSV storage re

ekkk

📍 HTML - form > 💁‍♀️ WHY 웹사이트 창에 ?가 붙을까? form 이 submit 되고 있기 때문에 웹사이트를 재시작하고 있다. 따라서 input 안의 button을 누르거나 type이 submit 인 input 을 클릭시 내가 작성한 form이 submit 된다. 즉, form 안에서 엔터 누르고 input 이 더 존재하지 않는다면 자동으로 submit 된다. input 의 유효성 검사 작동시키기 위해서는 input이 form 안에 있어야함 📍 querySelector() - getElementById() 🔎 querySelector : classname, tagname 모두 검색 가능 -> 대상

ekkk

element 찾기 event를 listen 그 event 에 반응 📍 if 문 사용해 글자색 변경 !codepen[ekkk/embed/Rwqzjyw?default-tab=html%2Cresult] 📍 CSS로 HTML 요소 변경 문제점 className 은 이전에 크래들은 상과하지 않고 모든 걸 교체함 -> classList 사용할 것 !codepen[ekkk/embed/qBQzxRj?default-tab=html%2Cresult] 📍 classList 클래스들의 목록으로 작업할 수 있게끔 허용해줌 🔎 contains 우리가 명시한 클래스가 HTML element의 클래스에 포함되어 있는지 말해줌 🔎 remove 🔎 add !codepen[ekkk/embed/GRwbQGw?defa