ASAC 웹 풀스택 리액트 복습

ASAC 웹 풀스택 리액트 복습

 

 

iTerm2

 

iTerm2는 macOS에서 사용할 수 있는 고급 터미널 에뮬레이터입니다. 

 

기본 터미널 앱보다 많은 기능을 제공하며, 사용자 친화적인 인터페이스와 확장성을 갖추고 있습니다. iTerm2는 개발자들에게 인기가 많은데, 그 이유는 탭, 스플릿 패널, 검색, 커스터마이징 등 다양한 기능을 제공하기 때문입니다. 이러한 기능들은 개발 작업을 보다 효율적으로 수행할 수 있도록 도와줍니다.

 

iTerm2 공식 사이트 

https://iterm2.com/

iTerm2 - macOS Terminal Replacement

 

 

 

 

 

인텔리제이 단축키 세팅 

 

인텔리제이(IntelliJ IDEA)에서 폴더와 파일을 열고 닫는 데 사용할 수 있는 다양한 단축키가 있습니다. 아래는 주요 단축키 목록입니다.

폴더 열기:

프로젝트 창에서 폴더를 선택한 후, Enter 키를 누르거나 F4 키를 누릅니다. 이렇게 하면 해당 폴더가 열립니다.
파일 열기:

파일을 선택한 후, Enter 키를 누르면 파일이 열립니다.
폴더 또는 파일 닫기:

열려 있는 폴더 또는 파일을 닫으려면 Ctrl + F4 (Windows/Linux) 또는 Command + W (Mac)를 사용합니다.
모든 열려 있는 파일 닫기:

모든 열려 있는 파일을 닫으려면 Ctrl + Shift + F4 (Windows/Linux) 또는 Command + Shift + W (Mac)를 사용합니다.
탭 닫기:

현재 열려 있는 파일 또는 탭을 닫으려면 Ctrl + F4 (Windows/Linux) 또는 Command + W (Mac)를 사용합니다.
모든 탭 닫기:

모든 열려 있는 탭을 닫으려면 Ctrl + Shift + F4 (Windows/Linux) 또는 Command + Shift + W (Mac)를 사용합니다.

 

 

 

인텔리제이(IntelliJ IDEA)에서 자동으로 import 문을 추가하려면 다음 단축키를 사용할 수 있습니다:

Windows/Linux: Ctrl + Alt + O

 

인텔리제이 유용한 단축키
이전 클릭으로	- 이전으로 이동: `Cmd + [` (macOS), `Ctrl + Alt + ←` (Windows/Linux) - 다음으로 이동: `Cmd + ]` (macOS), `Ctrl + Alt + →` (Windows/Linux)
	import 최적화: `Ctrl + Alt + O` (Windows/Linux)
커서 2개 만들기	Ait+ shift

 

 

 

 

 

 

 

ts와 tsx 의 차이

 

 

ts	ts json
tsx	tsx 컴포넌트+리액트 사용

 

 

 

 

프롭스 2가지 

 

 

프롭스 방법1	function MyComponent(props) { return ( <div> <p>{props.name}</p> <p>{props.age}</p> </div> ); } // 부모 컴포넌트에서 사용 예 const data = { name: "John", age: 30 }; <MyComponent {...data} />
프롭스 방법2	function MyComponent(props) { return ( <div> <p>{props.name}</p> <p>{props.age}</p> </div> ); } // 부모 컴포넌트에서 사용 예 <MyComponent name="John" age={30} />
리액트 데이터	function MyComponent() { const [inputValue, setInputValue] = useState(''); // 상태 변수 생성 // 입력 값이 변경될 때 호출되는 함수 const handleInputChange = (event) => { setInputValue(event.target.value); // 입력 값 업데이트 }; return ( <div> <input type="text" value={inputValue} // 입력 값 상태 변수와 연결 onChange={handleInputChange} // onChange 이벤트 처리 함수 연결 /> <p>입력 값: {inputValue}</p> </div> ); }
리액트 2가지 디스트럭처  ,
디스트럭처	function DestructuringExample() { // 객체 디스트럭처링 const user = { name: 'John', age: 30 }; const { name, age } = user; // 배열 디스트럭처링 const numbers = [1, 2, 3, 4, 5]; const [first, second] = numbers; return ( <div> <p>Name: {name}</p> <p>Age: {age}</p> <p>First Number: {first}</p> <p>Second Number: {second}</p> </div> ); }
스프레드	import React from 'react'; function SpreadExample() { // 객체 스프레드 const person = { name: 'John', age: 30 }; const newPerson = { ...person, job: 'Engineer' }; // 배열 스프레드 const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4, 5]; return ( <div> <p>New Person: {JSON.stringify(newPerson)}</p> <p>New Numbers: {JSON.stringify(newNumbers)}</p> </div> ); } export default SpreadExample;
리액트  객체 2개 만들고 리턴으로 [객체1, 객체	import React from 'react'; function App() { // 객체 1 const obj1 = { name: 'Alice', age: 20 }; // 객체 2 const obj2 = { name: 'Bob', age: 25 }; // 리턴 return [obj1, obj2]; } export default App; 복사 이 코드는 콘솔에 다음과 같이 출력됩니다. [{name: “Alice”, age: 20}, {name: “Bob”, age: 25}]
버튼 태그에 {onclick() => onchange && onchange }	import React, { useState } from 'react'; function App() { // 상태 변수와 상태 변경 함수 const [count, setCount] = useState(0); // onchange 함수 정의 const onchange = () => { // count를 1 증가시킴 setCount(count + 1); }; // 리턴 return ( <div> <p>Count: {count}</p> <button onClick={() => onchange && onchange()}>Click me</button> </div> ); } export default App;
$ ? '   ':  '  ' 조건넣기 {$ ismobile ? ' 색상 ' : '' }	import React from 'react'; function ConditionalColorExample() { // isMobile 상태 변수 설정 (예: 모바일 디바이스 여부를 가정) const isMobile = true; return ( <div> <h1>Conditional Color Example</h1> <p> Text with <span style={{ color: isMobile ? 'red' : 'black' }}> conditional color</span> </p> </div> ); } export default ConditionalColorExample;
{$ ismobile ?? ' 색상 ' : '' }  ?? 2개짜리 문법	import React from 'react'; function NullishCoalescingColorExample() { // isMobile 상태 변수 설정 (예: 모바일 디바이스 여부를 가정) const isMobile = true; return ( <div> <h1>Nullish Coalescing Color Example</h1> <p> Text with {isMobile ?? <span style={{ color: 'red' }}> conditional color</span>} </p> </div> ); } export default NullishCoalescingColorExample;​ 1 기본값을 설정하고 ? 할려면 물음표2개넣기? 위 코드에서는 Nullish Coalescing Operator (??)를 사용하여 isMobile이 null 또는 undefined인 경우에만 빨간색 텍스트를 렌더링하고, 그렇지 않은 경우에는 아무 것도 렌더링하지 않습니다. 이렇게 함으로써 Nullish Coalescing 연산자를 활용하여 조건에 따라 색상이 적용되거나 적용되지 않습니다.
console.log ( . ?) 콘솔	// 값이 있는 변수 const a = 10; // 값이 없는 변수 const b; // console.log()에 값이 있는지 없는지 출력 console.log(a ? 'a has a value' : 'a has no value'); // a has a value console.log(b ? 'b has a value' : 'b has no value'); // b has no value
console.log ( . ?) 콘솔2	// 객체 생성 const obj = { a: { b: { c: 10 } } }; // console.log()에 객체.객체?.객체! 이런식으로 값이 분명히 있어야 하는 조건을 맞추고 출력 console.log(obj.a?.b!.c); // 10 console.log(obj.a?.d!.c); // TypeError: Cannot read property 'c' of undefined
파라미터3개로쫴개고, 커링함수에서 (e) 출력값 확인해보기 첫번째 input 10 두번째 input 10+20= 30	import React, { useState } from 'react'; function App() { const [value, setValue] = useState(0); // 파라미터 2개를 받는 커링 함수 const sumTwoNumbers = (a) => (e) => { const b = Number(e.target.value); setValue(a + b); } // 파라미터 3개를 받는 커링 함수 const sumThreeNumbers = (a, b) => (e) => { const c = Number(e.target.value); setValue(a + b + c); } return ( <div> <input type="number" onChange={sumTwoNumbers(10)} /> <input type="number" onChange={sumThreeNumbers(10,20)} /> <p>Result: {value}</p> </div> ); } export default App;
api 콜 fetch().then(). 컨테이너의방식      =함수 프레젠테이션의 방식= 뷰

 

 

 

 

 

리액트 복습

 

import() @/context/focusInputContext라는 모듈을 import ('@/context/focusInputContext') .then(result) => { } .catch() => {}	import() 함수는 동적으로 모듈을 가져오는 방법입니다. import() 함수는 프로미스를 반환하므로, .then()과 .catch()를 사용하여 결과나 오류를 처리할 수 있습니다1 예를 들어, @/context/focusInputContext라는 모듈을 가져오고 싶다면 다음과 같이 작성할 수 있습니다. import("@/context/focusInputContext") .then((result) => { // result는 가져온 모듈 객체입니다. // result.default는 모듈의 기본 export를 가리킵니다. // result에는 다른 named export도 있을 수 있습니다. console.log(result); }) .catch((error) => { // error는 가져오기에 실패했을 때 발생하는 오류 객체입니다. console.error(error); });​ import("@/context/focusInputContext") .then((result) => { // result는 가져온 모듈 객체입니다. // result.default는 모듈의 기본 export를 가리킵니다. // result에는 다른 named export도 있을 수 있습니다. console.log(result); }) .catch((error) => { // error는 가져오기에 실패했을 때 발생하는 오류 객체입니다. console.error(error); });​ 이게 도움이 되었으면 좋겠습니다.😊 다른 질문이 있으시면 언제든지 말씀해주세요. Fetch API 사용하기 - Web API | 증권 시세 표시기 (mozilla.org)
.map  객체를 반환한다. 리턴으로 묶는다	배열 const arr = [1, 2, 3];​ const newArr = arr.map((num) => { // 객체를 소괄호로 감쌉니다. return { value: num + 10 }; });​ [{ value: 11 }, { value: 12 }, { value: 13 }];​​ 1
styled ('div') 와 emotion
합성 컴포넌트
테이블에서 컨텍스트대신 프롭스로 넘길수 있지않느냐 칠드런과의 관계는?	칠드런은 리액트에서 컴포넌트의 자식 요소를 나타내는 특별한 프롭스입니다. 칠드런은 컴포넌트의 태그 사이에 작성할 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다. <Table> <Row>...</Row> <Row>...</Row> </Table>​​ 1
칠드런	function Parent(props) { return ( <div> <h1>부모 컴포넌트</h1> {props.children} </div> ); } function Child() { return <h2>자식 컴포넌트</h2>; } // 칠드런은 태그 사이에 작성 <Parent> <Child /> </Parent>;
컨텍스트	// 컨텍스트 생성 const ThemeContext = React.createContext(); function Parent() { return ( <div> <h1>부모 컴포넌트</h1> <Child /> </div> ); } function Child() { // 컨텍스트 사용 const theme = useContext(ThemeContext); return <h2 style={{ color: theme }}>자식 컴포넌트</h2>; } // 컨텍스트 값 제공 <ThemeContext.Provider value="blue"> <Parent /> </ThemeContext.Provider>;​
프로바이더	// 컨텍스트 생성 const ThemeContext = React.createContext(); function Parent() { return ( <div> <h1>부모 컴포넌트</h1> <Child /> </div> ); } function Child() { // 컨텍스트 사용 const theme = useContext(ThemeContext); return <h2 style={{ color: theme }}>자식 컴포넌트</h2>; } // 프로바이더 작성 <ThemeContext.Provider value="blue"> <Parent /> </ThemeContext.Provider>;
칠드런, 컨텍스트, 프로바이더 의 장점을 분석하기	칠드런의 장점은  부모 컴포넌트가 자식 컴포넌트의 구조나 내용을 알 필요가 없다는 것입니다. 부모 컴포넌트는 자신의 칠드런을 렌더링하기만 하면 됩니다. 이렇게 하면 자식 컴포넌트를 재사용하거나 변경하기 쉽습니다. 컨텍스트의 장점은  중간에 있는 컴포넌트들이 프롭스를 전달하는 역할만 하지 않도록 하고, 트리의 모든 레벨에서 데이터를 접근할 수 있게 한다는 것입니다. 이렇게 하면 중복되는 코드를 줄이고, 데이터의 일관성을 유지할 수 있습니다. 프로바이더의 장점은  컨텍스트의 값을 동적으로 변경할 수 있다는 것입니다. 프로바이더는 value 프롭스를 통해 컨텍스트의 값을 제공하므로, 이 값을 상태로 관리하면 컨텍스트의 값을 변경할 수 있습니다. 이렇게 하면 하위에 있는 컴포넌트들도 새로운 값을 받아서 렌더링할 수 있습니다.
const ? 존재하지않을수있는것을검사하는 함수	import React, { useState } from 'react'; const Function1 = () => { const [hello, setHello] = useState("hello"); // hello라는 상태를 생성합니다. const value = "world"; // 대충 값으로 world라는 변수를 선언합니다. return ( <div> {value === "world" ? hello : null} {/* value가 world와 같으면 hello를 출력하고, 아니면 null을 출력합니다. 삼항 연산자를 사용하여 조건에 따라 값을 렌더링합니다. */} </div> ); }; export default Function1;​ 1
npm run build 검사
next.js  ssg 서버 컴포넌트 클라이언트 컴포넌트
context는 글로벌로 형식으로 관리하라.
modalprovider 칠드런 중앙화 관리란

 

 

 

 

context 글로벌

 

 

 

context는 글로벌로 형식으로 관리하라.	1예를 들어, 테마(theme)라는 상태를 글로벌하게 관리하고 싶다면, 다음과 같이 작성할 수 있습니다. // ThemeContext.js   // App.js import React from "react"; import { ThemeProvider } from "./ThemeContext"; import Header from "./Header"; import Main from "./Main"; // App 컴포넌트에서 ThemeProvider로 감싸기 const App = () => {   return (     <ThemeProvider>       <Header />       <Main />     </ThemeProvider>   ); }; export default App; // Header.js  import React from "react"; import ThemeContext from "./ThemeContext"; // Header 컴포넌트에서 useContext 훅으로 context 객체 받기  const Header = () => {         const {             theme,             toggleTheme         } = React.useContext(ThemeContext); // 테마에 따라 스타일 변경하기          const style = {             backgroundColor: theme === "light" ? "white" : "black",             color: theme === "light" ? "black" : "white",         };         return ( < div style = {                     style                 } >                 <                 h1 > React Context Example < /h1> <button onClick={toggleTheme}>Toggle Theme</button > < /div> ); };                 export default Header;​ // Main.js  import React from "react"; import ThemeContext from "./ThemeContext"; // Main 컴포넌트에서 useContext 훅으로 context 객체 받기 const Main = () => {     const {         theme     } = React.useContext(ThemeContext);     // 테마에 따라 스타일 변경하기      const style = {         backgroundColor: theme === "light" ? "white" : "black",         color: theme === "light" ? "black" : "white",     };     return ( < div style = {         style     } > < p > This is the main content. < /p> </div > ); }; export default Main;​ 1
AOS 스크롤이벤트
useform	// App.js import React from "react"; import {     useForm } from "react-hook-form"; const App = () => { // useForm 훅 호출 const { register, handleSubmit, formState } = useForm(); // 제출 콜백 함수 정의 const onSubmit = (data) => { console.log(data); }; return ( <div> <h1>useForm Example</h1> <form onSubmit={handleSubmit(onSubmit)}> <label htmlFor="name">Name</label> <input id="name" name="name" type="text" ref={register({ required: true })} /> {formState.errors.name && <p>Name is required</p>} <label htmlFor="age">Age</label> <input id="age" name="age" type="number" ref={register({ min: 18 })} /> {formState.errors.age && <p>Age must be at least 18</p>} <button type="submit">Submit</button> </form> </div> ); }; export default App;​ 이렇게 하면 이름과 나이를 입력받고, 필수 조건과 최소 조건을 검증하고, 제출하면 콘솔에 데이터를 출력하는 예제를 만들 수 있습니다. 1

 

 

useform의 조건

// App.js import React from "react"; import { useForm } from "react-hook-form"; const App = () => {   // useForm 훅 호출   const { register, handleSubmit, formState } = useForm();   // 제출 콜백 함수 정의   const onSubmit = (data) => {     console.log(data);   };   return (     <div>       <h1>useForm Example</h1>       <form onSubmit={handleSubmit(onSubmit)}>         <label htmlFor="name">Name</label>         <input           id="name"           name="name"           type="text"           ref={register({ required: true })}         />         {formState.errors.name && <p>Name is required</p>}         <label htmlFor="age">Age</label>         <input           id="age"           name="age"           type="number"           ref={register({ min: 18 })}         />         {formState.errors.age && <p>Age must be at least 18</p>}         <button type="submit">Submit</button>       </form>     </div>   ); }; export default App; 출력예시 출력의 조건 이름과 나이를 모두 입력하지 않고 제출 버튼을 누르면,  "Name is required"와 "Age must be at least 18"이라는 에러 메시지가 표시됩니다. 이름은 입력하고 나이는 입력하지 않고 제출 버튼을 누르면,  "Age must be at least 18"이라는 에러 메시지가 표시됩니다. 이름은 입력하지 않고 나이는 18 이상으로 입력하고 제출 버튼을 누르면,  "Name is required"라는 에러 메시지가 표시됩니다. 이름은 입력하지 않고 나이는 18 미만으로 입력하고 제출 버튼을 누르면,  "Name is required"와 "Age must be at least 18"이라는 에러 메시지가 표시됩니다. 이름과 나이를 모두 입력하고 나이가 18 이상이면,  콘솔에 {name: “입력한 이름”, age: 입력한 나이} 형식의 데이터가 출력됩니다. 이름과 나이를 모두 입력하고 나이가 18 미만이면,  콘솔에 {name: “입력한 이름”, age: 입력한 나이} 형식의 데이터가 출력되고, "Age must be at least 18"이라는 에러 메시지가 표시됩니다. 1