우당탕탕 아장아장

9주차 월요일 15. 네트워크 통신 동기와 비동기 - 동기 방식(synchronous) : 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식 - 비동기 방식(Asynchronous) : 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행하는 방식 ex) fetch함수, useState import React from "react"; const Async = () => { console.log("1. 안녕하세요"); setTimeout(() => console.log("2. 반가워요"), 3000); console.log("3. 안녕히계세요"); return ; }; export default Async; async와 await - async : 함수 선언부에 async 키워드 작성 -..

뚝딱 만들 수 있는 그 날을 위해 재도전! 이번 컨셉은 .... 흑회백! 여백의 미..? 왜 화면에 안나오니 왜😩😩😩😩 거짓말.. 나한테 왜그래.. App.js에서 괄호를 다른 함수위에 닫음..... 내가 넣어놓은 값까지는 보임! 추가와 삭제까지..! 으아아아 두번째를 했지만,, 아직 내께 아니다.. 느낌이 아닌 확신.. 가계부는 언제쯤..

To Do List 정도는 껌으로 만들어야하는데, 나는 이가 없는 사람..🤐 힙겹고 어렵게 만들었고, 이제 다시 만들어볼 예정인 To Do List! 밥먹기 같은건 매일매일 잘 할 수 있는데, 리액트 공부하기와 투두리스트 만들기는 언제쯤.. 내 자신 화이팅.. 기능 ➕ 누르거나, 엔터를 치면 일정 입력 ✔ 를 누르면 텍스트 색 변경 + 중간에 줄 긋기 ➖ 누르면 아이템 삭제! 추가하고 싶은 기능 - 귀여운 폰트로 글씨체 변경 - 글자가 입력되지 않았을 경우 강조표시 🤦‍♂️ To Do List를 하면서 느끼고 배운 점 과정 1. 그림그리기 2. 전체적인 틀 만들기 3. UI만들기 (전체적인 틀, 입력 추가, 리스트 등) 4. 기능 구현 (체크박스 밑줄, 일정의 추가, 제거, 수정) map함수에는 key값..

8주차 목요일 14. 리액트 라우터 싱글 페이지 어플리케이션 - 페이지 전환 속도가 빠름 - 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업 필요❌ 단점) - 어플리케이션 규모가 커지면 자바스크립트 파일 또한 커짐 - 페이지 로딩 시, 사용자가 실제로 방문하지 않을 수도 있는 페이지 스크립트까지 불러옴 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 import React from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Home, errorEleme..

8주차 수요일 13. Context Context - 어플리케이션에서 전반적으로 사용할 값을 관리 - 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 ➡ App.js function App() { return ; } function GrandParent({ value }) { return ; } function Parent({ value }) { return ; } function Child({ value }) { return ; } function Message({ value }) { return 전달받은 데이터 : {value}; } export default App; 길어 길어🤦‍♂️ 한번에 보내줄 수는 없지만, 새로운 영역을 생성해서 전달 가능! Context 사용 방법 1️⃣ Con..

새싹 프론트엔드 실무 과정 8주차 Hooks 8주차 월요일 11. Hooks - 1 useState() - 가장 기본적인 Hook - 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 import React, { useState } from "react"; const AddName = () => { const [names, setNames] = useState(["간", "리액트"]); const [input, setInput] = useState(""); function InputChange(e) { setInput(e.target.value); } function uploadInput() { setNames([input]); } return ( 추가 {names.map((name, idx) =..

7주차 수요일 8. 컴포넌트 스타일링-1 이름 생성 규칙 1. 컴포넌트 이름-클래스 이름 방식 2. BEM 네이밍 방식 (Block, Element, Modifier) 장점 : 가독성 좋음 단점 : 이름의 길이가 김 Sass 문법적으로 매우 멋진 스타일시트를 의미 css 단점 - 선택자(Selector)를 만들 때 매번 부모 요소 선택자를 넣어줘야 함 - 함수 기능 제공 안해서 중복이 되면 복붙을 해야 함 - CSS 전처리기로 복잡한 작업을 쉽게 할 수 있음 - 스타일 코드의 재활용성을 높임 - 스타일 코드의 가독성을 높여서 유지 보수가 쉬움 mixin : 재사용 가능한 기능을 만드는 방식 $main-font: "Halvetica"; @mixin title($font) { font-size: 60px; ..

7주차 화요일 7. 이벤트 이벤트를 사용할 때 주의사항 - 카멜 표기법으로 작성 - 이벤트의 값으로 함수 형태를 전달 - DOM 요소(div, button, input, form)에만 이벤트를 설정 가능 이벤트에 매개변수 전달하기 : 익명함수를 통해서! import React, { useState } from "react"; const ChangeFont = () => { const [value, setValue] = useState("안녕하세요"); const [font, setFont] = useState("50px"); const fstyle = { fontSize: font, }; return ( {value} { setFont("100px"); }} > 글자크기변경 ); }; export def..

새싹 프론트엔드 실무 과정 7주차 React state 7주차 월요일 6. state state - 값을 저장하거나 변경할 수 있는 객체 - 컴포넌트 내부에서 바뀔 수 있는 값을 의미 - 주로 버튼 클릭과 같은 이벤트와 함께 사용함 - 읽기전용❌ 값이 계속 바껴야 함 props와 차이점 - props는 부모 컴포넌트가 설정한 값을 전달받아 읽기 전용으 로만 사용할 수 있음 ➡ ChangePropsValue.js import React from "react"; const ChangePropsValue = (props) => { let name = props.name; function changeName() { name = "React"; } return ( {props.name} 클릭 ); }; expor..

6주차 목요일 1. React란 프레임워크 vs 라이브러리 - 프레임워크 일정한 형태와 기능을 갖추고 있는 골격 또는 뼈대를 의미 (밀키트) - 라이브러리 특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합 (마트) 주도권이 누구에게 있느냐의 차이 React 특징 1. 컴포넌트 기반 : 코드를 기능별로 나눠서 작성, 코드 재사용성 및 유지보수가 편리 2. Virtual DOM 사용 3. JSX 문법 사용 : 자바스크립트안에서 HTML문법을 사용 앞으로 만들 파일들은 다 src안에 만들어야 함! 에러가 있을 시, cd '가고싶은 자식 폴더 이름' 나의 경우 cd react-app Ctrl + C눌러서 끄기 pwd 현재위치 ls 안에 뭐가 있는지 알려주는 명령어 clear 누르면 터미널 깔끔해짐..