[꼼꼼한 개발자] 꼼코더

🧹 쉬운 정리 1. useReducer()는 useState()와 같은 상태 관리, 상태 업데이트 훅(Hook)이다. 2. 변경할 값이 많을 때(상태 업데이트) 즉 상태 관리할 데이터가 많아질 때 사용을 고민해 볼 필요가 있다. 3. 좀 더 구조화된 방식으로 상태를 관리하고 싶을 때 사용할 수 있다. ( 예) "PLUS" 타입 은 무조건 더하기) 4. 선언형태 : const [state, dispatch] = useReducer(reducer, initialState); state : 상태 이름 (컴포넌트에서 사용할 상태) > 빵(재료) 담는 접시 dispatch : 상태(state)를 변경 시 필요한 정보를 전달하는 '함수' > 주문서 reducer : dispatch를 확인해서 state를 변경해 주..

💻 준비물노드비주얼 스튜디오 코드 🙋🏻‍♂️ Expo 회원가입회원가입 페이지 접속 (링크) → 회원가입 진행 🔗 Expo 패키지 설치 (프로젝트 생성)1. 비주얼 스튜디오 실행 → (생성할 프로젝트의 상위) 폴더 열기 → 터미널 열기2. 패키지 설치 명령어 실행npm install -g eas-cli3. expo 프로젝트 생성 명령어 (App-Name] 으로 Expo 프로젝트 생성)npx create-expo-app [App-Name]4. 생성한 프로젝트로 이동 → expo 로그인 정보 등록cd [App-Name] npx expo login(1번에서 가입했던) 이메일(or 이름) 입력 → 비밀번호 입력 🌐 Expo 프로젝트 생성(등록)1. Expo 로그인 (링크)2. (좌측 메뉴) [All pr..

🧹 간단 정리 커스텀 훅이란? 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현한'내가 만든 훅'이라고 생각하면 된다. 쉽게 설명하자면 '반복되는 로직을 분리' 했는데 분리한 로직 속에 리액트 훅이 있다? > '커스텀 훅' 분리한 로직 속에 리액트 훅이 없다? > '(JS) 함수' (자세한 내용은 아래 👀) 💁🏻‍♂️ 규칙 🎤 이름 규칙 - 커스텀 훅의 이름은 "use"로 시작해야 한다. 예를 들어, useCounter나 useFetchData와 같은 이름. 🥊 내장 훅(Hook) 사용 - 커스텀 훅 내에서 내장 훅(예: useState, useEffect)을 사용. 이렇게 하면 커스텀 훅의 로직을 더욱 강력하게 만들 수 있다. 🎁 상태와 함수 반환 - 커스텀 훅은 상태 값과 해당 상태를 업데이트하는 ..

🧹 두서없이 적는 쉬운 정리 1. 컴포넌트 안에 여러개의 컴포넌트를 사용할 수 있다. 2. 컴포넌트 속 css적용이 가능하다. 3. 컴포넌트를 동적으로 변경려면 props 추가 4. 여러 중복 데이터는 배열로 관리하고 .map()함수로 추출. (자세한 내용은 아래 참고) 🕵🏻 댓글 컴포넌트 실습 1. Comment라는(댓글) 이름의 리액트 함수 컴포넌트 생성 2. 여러 개 댓글(Comment) 컴포넌트를 포함하고 있는 댓글 목록(CommentList) 컴포넌트 작성 3. 리스트 컴포넌트를 실제로 화면에 렌더링 하기 위해 index.js 수정. 4. 리액트 애플리케이션 실행 🎨 댓글 모양 CSS 스타일 적용 5. 댓글 모양 처럼 보이도록 Comment 컴포넌트에 css 스타일을 작성 후 컴포넌트 코드 변경..

🧹 두서없이 적는 쉬운 정리1. 기존 웹 사이트에서 React를 추가하려면 HTML 코드 속에 DOM Container와 리액트의 자바스크립트 파일들을 추가해야 한다.2. 컴포넌트 작성 후 리액트 DOM의 reder() 함수를 사용해서 리액트 컴포넌트를 DOM Container에 렌더링 한다.3. HTML에서 컴포넌트를 불러오고 실행하면 끝 (자세한 내용은 아래 참고) 📺 HTML과 CSS리액트로 연동하기 전 HTML과 CSS를 이용하여 간단한 웹 페이지를 만들어보자. ✋🏻 React 추가하기HTML에 DOM이 들어있는 곳인 DOM Container를 추가한다.다른 말로는 Root DOM Node라고 한다.(Viturl DOM의 시작점) 여기에서는 'root'라는 ID를 가진 태그를 추가했다..

🧹 두서없이 적는 쉬운 정리 1. 라이브러리란 : 자주 사용되는 기능들을 모아놓은 것, 개발자가 제어권을 가지고 있다. 2. 사용자 인터페이스(UI) : 사용자와 컴퓨터 중간에 입력과 출력을 제어해 주는 것 3. 리액트는 '자바스크립트 UI 라이브러리'이다 4. 리액트는 spa 를 쉽고 빠르게 만들 수 있도록 해주는 도구이다. (자세한 내용은 아래 참고) 🤷🏻 리액트란? 공식문서에는 '사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리'라고 정의되어 있다. 📖 라이브러리란? 자주 사용되는 기능들을 정리해 모아 놓은 것을 의미한다. 라이브러리(일상, 프로그래밍) 일상 : 도서관에 수많은 책들이 정해진 기준에 따라서 잘 정리되어 꽂혀있는 걸 볼 수 있다. 프로그래밍 : 특정 프로그래밍 언어에서 자주 사용..

🧹 두서없이 적는 쉬운 정리 1. 함수는 입력을 받아 정해진 출력을 하는 것 2. 자바스크립트의 함수는 2가지이다.(function statement, arrow fuction expression) 3. 함수 호출은 함수 이름 뒤에 괄호를 붙이고, 괄호 안에 파라미터 값을 넣어준다. (자세한 내용은 아래 참고) 🤷🏻 함수란? 함수는 프로그래밍에서 입력(파라미터 혹은 인자)을 받아 정해진 출력을 하는 동작을 수행하는 것을 의미. 자바스크립트에서 함수를 정의하는 방법은 크게 두 가지로 나눌 수 있다 function statement를 사용하는 방법 arrow fuction expression을 사용하는 방법 🧑🏻‍💻 function statement를 사용한 함수 정의 function sum(a, b) {..

🧹 두서없이 적는 쉬운 정리1. JavaScript는 쉽게 말해 동작이다.2. 정리하면 HTML(생선 뼈), CSS(비늘, 색깔, 살), JS(뛰어오르다, 숨 쉬다)3. JavaScript의 정식 명칭은 ECMAScript이다.4. JavaScript 스크립트 언어이고 런타임에 코드가 해석되고 실행된다.5. 변수에 값이 들어갈 때 자료형이 정해진다. 변수는 var, let, const로 선언하지만 let을 사용한다.(호이스팅)6. 배열 자료형에는 여러 서로 다른 자료형이 함께 들어갈 수 있고 index로 값에 접근할 수 있다.7. Object(객체) 자료형은 값이 key value로 이루어져 있다. (자세한 내용은 아래 참고)👨🏻‍🏫 JavaScript의 소개만약 웹사이트에서 동적인 처리를 하..