React 강의 @media ,타입스크립트,제네릭 JS타입타입의 JS, 버블링 , React.FC 와 children, 해쉬태그
본문 바로가기

컴퓨터공부/React

React 강의 @media ,타입스크립트,제네릭 JS타입타입의 JS, 버블링 , React.FC 와 children, 해쉬태그

by Life & study 2023. 12. 22.
반응형

 

React 강의 @media ,타입스크립트,제네릭 JS타입타입의 JS, 버블링 , React.FC 와 children, 해쉬태그 종합표

 

 

3가지의프론트 직업  
CDN, 코드스플릿  
DX 디자인 시스템 기여
데브웹 성능
최신기술트렌드  
   
레드헷
데브옵스
라이브러리 
의 집요함이란?		 크롬엔진의 오픈소스의 기여할정도
   
   

 

미디어쿼리 자바스크립트 관리
레거시 코드란? A.기존   > B.새로운서비스를 만들어 동시에 띠움 (M도메인)
크로스플랫폼 하나의 언어로 모든걸 해야된다는 관점떄문
   
   
   
   
   
   
   

 

구글 크롬앱 열기
WebStorm 단축키		 Ait + F2
   
  
section {
    padding: 0 2rem;
}​

1
H - >Em 이란?   
   
@media query 범위
@media 기본틀 
html {
    font-size: 32px;
}

@media (min-width: 700px) and (max-width: 900px) {
    html {
        font-size: 30px;
    }
}

@media (min-width: 700px) and (max-width: 900px) {
    html {
        font-size: 20px;
    }
}​

1최소한의 크기를 지정하고 display로 막고 최대크기 display 조절하기
애런의생각
애런의생각에

 결국 MUI를 선택하게 됫다.  
왜냐 크기는 ※(디바이스에 종속)되기때문에다.
문제점 단축키 Ait + 6
   
@Me diretion
gap
display
.p-container{

}
rem 양측 패딩으로 넓어짐 
그리드 컬럼  
@media쿼리 F12구글크롬
+ 누르고 인스펙터
파일		  
원티드 채용건 페이지나누기2 display : none
fixed
theme: theme: {

} 
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
// import COLOR from './src/constant/color.json'
import colors from '@mui/material/colors'
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  important: '#bootstrap-root',
  darkMode: 'class',
  theme: {
    screens: {
      ...defaultTheme.screens,

      mobile: { max: '600px' },

      sm: '600px',
      tablet: '600px',
      'tablet-vertical': '600px',

      md: '900px',
      'tablet-horizontal': '900px',

      lg: '1200px',
      desktop: '1200px',
    },
    extend: {
      fontFamily: {
        sans: ['"Pretendard"', 'var(--font-pretendard)', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        ...colors,
        // primary: COLOR.GREY[50],
        // secondary: COLOR.BLUE['main'],
        github: '#333333',
      },
      // backgroundColor: {
      //   // primary: COLOR.GREY[50],
      //   secondary: COLOR.BLUE['main'],
      //   'secondary-light': '#433C47',
      //   support2: '#3A3649',
      //   support3: '#514C66',
      //   accent: '#2E2C3A',
      //   trans: '#2A2735B2',
      //   github: '#333333',
      //   company: COLOR.BLUE['main'],
      //   project: '#40464D',
      // },
      // textColor: {
      //   primary: '#B6BFC8',
      //   secondary: '#D3ABAB',
      //   inversed: '#2A2835',
      // },
      // borderColor: {
      //   primary: '#B6BFC8',
      //   'primary-light': '#40464D',
      //   secondary: '#D3ABAB',
      //   'secondary-light': '#433C47',
      // },
      blur: {
        xs: '2px',
      },
    },
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.font-h1': {
          fontSize: '2rem',
          lineHeight: 1.2,
          letterSpacing: '-0.02rem',
        },
        '.font-subhead-1': {
          fontSize: '1.375rem',
          lineHeight: 1.3,
          letterSpacing: '-0.01rem',
        },
        '.font-subhead-2': {
          fontSize: '1.25rem',
          lineHeight: 1.3,
          letterSpacing: '-0.01rem',
        },
        '.font-subhead-3': {
          fontSize: '1.125rem',
          lineHeight: 1.35,
          letterSpacing: '-0.01rem',
        },
        ' .font-body-1': {
          fontSize: '1rem',
          lineHeight: 1.5,
          letterSpacing: '-0.005rem',
        },
        ' .font-body-2': {
          fontSize: '0.875rem',
          lineHeight: 1.5,
          letterSpacing: '-0.005rem',
        },
        ' .font-body-3': {
... (17줄 남음)​
   
   
   
서버사이드
는 
무조건 테일윈드		 
 theme: {
    screens: {
      ...defaultTheme.screens,

      mobile: { max: '600px' },

      sm: '600px',
      tablet: '600px',
      'tablet-vertical': '600px',

      md: '900px',
      'tablet-horizontal': '900px',

      lg: '1200px',
      desktop: '1200px',
    },
테일윈드 
서버사이드 이점		 서버 사이드 테일윈드의 주요 특징과 이점은 다음과 같습니다:

성능 개선: 서버 사이드 렌더링 또는 정적 사이트 생성을 통해 초기 로딩 속도를 향상시킬 수 있습니다. 사용자에게 보여지기 전에 스타일이 미리 컴파일되기 때문에 초기 페이지 로딩이 빨라집니다.

검색 엔진 최적화 (SEO): 서버 사이드 렌더링은 검색 엔진 최적화에 유리하며, 검색 엔진은 컨텐츠를 더 잘 인덱싱할 수 있습니다.

렌더링 컨트롤: 서버 사이드 테일윈드를 사용하면 동적으로 페이지를 렌더링하면서 원하는 스타일을 적용할 수 있습니다. 이로써 렌더링된 페이지의 스타일링을 보다 더 세밀하게 조절할 수 있습니다.

일관된 디자인: Tailwind CSS를 사용하면 일관된 디자인 시스템을 만들기 쉽습니다. 서버 사이드 테일윈드를 사용하면 이 일관성을 서버 사이드에서도 유지할 수 있습니다.

서버 사이드 테일윈드를 구현하려면 주로 프레임워크 또는 라이브러리와 함께 사용하며, Next.js, Nuxt.js, Gatsby 등과 같은 프레임워크는 서버 사이드 테일윈드를 지원하고 간단하게 설정할 수 있는 방법을 제공합니다.


사용자가 크기를 왼쪽으로 줄일떄 (A,B)중에 어떤것을 보여줄수있나도 코드
   
return <> A && B </>으로 하나를 보여줄수잇나를 표시할수있다.

API 의 관점 웹
모바일은 무한스크롤
훅으로 정의할수있다.

  
   
뷰포터가 서버사이드랜더에는없다? 서버사이드 유저 에이전트로 

은닉의방법:
헤더에 커스텀값 넣어서 보여주기

A->B 


A:
B:유저 에이전트


오어스 서비스
오어스 서비스?  
유저에이전트 유저의 기록
ngnix + HTTPS
React+  면접준비 20문20답 
 
@context
 

AWS
Heder 엣지펑션
 
 
 
 

 

 

 
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://spems.tistory.com/66","name":null},"url":"https://spems.tistory.com/66","headline":"ASAC 웹풀스택 교육 3기 합격","description":"배경 ▶️ 우연한 기회로 ASAC 교육 과정을 접하게 되었는데, 한 단계 성장할 수 있는 기회라 생각해서 지원하게 되었다. 목표 ▶️ 6개월동안 하나의 웹 서비스를 만들 수 있는 개발자로 성장한다. 특징 ✅ 실습/프로젝트 중심 교육. ✅ 다루는 범위가 넓지만, 짧은 기간 안에 실무 수준 역량을 갖춰야 함. ✅ 수강생들의 주도적인 개발을 위한 가이드 매주 제공 ✅ 자기 주도적 문제 해결을 위한 멘토 서포팅 ☑️ 서비스의 기능적 측면보단, 그 구성 요소를 사전에 정의하여 뼈대 위주로 조직하는 느낌 ☑️ 그 요소 하나하나를 교육하기보다, 그 수준에 도달하기 위한 방법과 동력을 제공하는 느낌 학습 준비 ASAC에서 알아야할 N가지 ASAC에 오신 여러분들을 환영합니다! asac.oopy.io 웹(리액트) 수업을..","author":{"@type":"Person","name":"Nithen","logo":null},"image":{"@type":"ImageObject","url":" https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdrzL4%2FbtsmOj4KdU4%2FFCnNYYNTZhKGrg5NvoMu3k%2Fimg.png ","width":"800px","height":"800px"},"datePublished":"20230713T03:10:34","dateModified":"20230713T03:10:58","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-ed51bd5551f1038015f42d48259c25dac3192da8/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-ed51bd5551f1038015f42d48259c25dac3192da8/static/script/comment.js" defer=""></script>

 

Q
@media 값을 은닉하는방법?
오어스 서비스?
타입스크립트와 declear 에서 타입스크립트에서만 declear 가가능한가?

 

 

타입스크립트

타입스크립트 asyn 
<script>
로 GA 처럼 작성하기
</script>
   
  import안에 

declear로 알린다?


declare 
declear declare 키워드는 TypeScript에서만 사용할 수 있는 TypeScript의 특별한 기능 중 하나입니다. 이 키워드를 사용하면 TypeScript 컴파일러에게 특정 변수, 함수, 객체 등이 이미 어디에 선언되었거나 다른 파일에서 가져올 것임을 알려줄 수 있습니다.





declare module 'some-library' {
  // 여기에 라이브러리의 타입 정의
  export function someFunction(): void;
  export const someValue: number;
}​


전역 객체 확장: JavaScript의 전역 객체에 새로운 
속성이나 메서드를 추가하고 해당 속성/메서드의 타입을 선언할 때 사용할 수 있습니다.
typescript
Copy code
declare global {
  interface Window {
    myFunction: () => void;
  }
}​


전역 객체 확장: JavaScript의 전역 객체에 새로운 속성이나 
메서드를 추가하고 해당 속성/메서드의 타입을 선언할 때 사용할 수 있습니다.
typescript
Copy code
declare global {
  interface Window {
    myFunction: () => void;
  }
}​
declare 
키워드		 는 주로 TypeScript와 함께 사용되며, React나 TypeScript, 또는 다른 JavaScript 프레임워크와는 직접적인 관련이 없습니다. declare는 TypeScript에서 타입을 정의하거나 확장하기 위한 목적으로 사용됩니다.
 
라이브러리가 js로 저장되어잇다
타입스크립트는 선언파일이 없기 때문에 declear 파일에 저장해놧다
   
  
interface SessionAdditionUserInfo {
  username: string;
  email: string;
  age?: number;
  isPremium: boolean;
  // 또 다른 속성들을 추가할 수 있습니다.
}

// 사용 예시
const user: SessionAdditionUserInfo = {
  username: "john_doe",
  email: "john@example.com",
  isPremium: true,
};
   
   

 

제네릭 JS타입
타입의 JS		 동적 타입, 

// 동적 타입 - 타입 단언 사용
function logLength(input: any) {
  const length = (input as string).length;
  console.log(`Length: ${length}`);
}

logLength("Hello, TypeScript"); // 실행 중에 타입 단언을 사용하여 문자열의 길이를 가져옴​




컴파일 타입 이 있다.

// 제네릭 함수 - 컴파일 타입
function identity<T>(arg: T): T {
  return arg;
}

const value: number = identity(123); // 타입 오류 발생X
const value2: string = identity(123); // 타입 오류 발생: number를 string에 할당 불가능​
 keyof, extends 등의 TypeScript 키워드와 함께 제네릭을 사용하면 

동적 타입과 컴파일 타입을 조합하여 강력한 타입 

추론을 수행		 
// 동적 타입을 활용한 예제
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const person = {
  name: "John",
  age: 30,
  email: "john@example.com",
};

const name: string = getProperty(person, "name"); // 컴파일 타임에 타입 안정성 보장
const age: number = getProperty(person, "age"); // 컴파일 타임에 타입 안정성 보장
const email: string = getProperty(person, "email"); // 컴파일 타임에 타입 안정성 보장
const city: string = getProperty(person, "city"); // 컴파일 오류: 객체에 "city" 속성이 없음​

1
example['string']['string']['string'] 
const example = {
  outer: {
    middle: {
      inner: "Hello, world!",
    },
  },
};​

위 객체에서 example['outer']['middle']['inner']는 다음과 같이 해석됩니다.

example 객체의 outer 속성에 접근하면 { middle: { inner: "Hello, world!" } } 객체를 얻습니다.
그 다음, outer 객체의 middle 속성에 접근하면 { inner: "Hello, world!" } 객체를 얻습니다.
마지막으로, middle 객체의 inner 속성에 접근하면 "Hello, world!" 문자열을 얻습니다.
따라서 example['outer']['middle']['inner'] 표현식은 "Hello, world!" 문자열을 반환합니다. 이것은 객체의 중첩된 속성에 접근하는 일반적인 방법 중 하나입니다.
1
   
버블링?
HTML 코드에서는 #outer 요소 안에 #inner 버튼이 중첩되어 있습니다.

JavaScript 코드에서는 #inner 버튼에 클릭 이벤트 리스너를 추가합니다.

사용자가 버튼을 클릭하면, 클릭 이벤트가 #inner 요소에서 시작되어 버튼에 할당된 이벤트 리스너가 실행됩니다.

이후 이벤트는 상위 요소인 #outer 요소로 버블링됩니다.

결과적으로 #outer 요소에도 클릭 이벤트 리스너가 없음에도 불구하고, 이벤트 버블링으로 인해 #outer 요소에 할당된 이벤트 리스너가 실행됩니다.

이벤트 버블링은 이벤트 핸들링의 강력한 기능 중 하나이며, 이를 통해 상위 요소에서 이벤트를 캡처하거나 처리할 수 있습니다. 이를 이용하여 여러 요소 간의 상호 작용을 구현할 수 있습니다.

<div id="outer">
  <button id="inner">버튼</button>
</div>
javascript
Copy code
// 버튼 요소에 클릭 이벤트 리스너 추가
document.getElementById('inner').addEventListener('click', function(event) {
  alert('버튼 클릭');
  console.log('이벤트 버블링 발생');​

1
keyof를 쓰면
엄격한
타입 체크가 가능하다.
사용 유무는 체크박스나, 엄격한 검증

1
   
getserversession  
// 세션 정보를 담을 타입 정의
interface SessionInfo {
  userId: number;
  username: string;
  // 필요한 다른 세션 정보도 여기에 추가할 수 있습니다.
}

// getserversession 함수 정의
function getserversession(userId: number): SessionInfo | null {
  // 서버에서 세션 정보를 가져오는 비동기 로직을 가정
  // 예: 서버 API 호출, 데이터베이스 쿼리 등
  // 여기서는 간단히 더미 데이터를 사용합니다.
  
  // 세션 정보를 가져오는 데 실패한 경우
  if (userId < 0) {
    return null;
  }

  // 세션 정보를 가져오는 데 성공한 경우
  return {
    userId,
    username: "john_doe",
  };
}

// 사용 예시
const userId = 123;
const session = getserversession(userId);

if (session) {
  console.log(`User ID: ${session.userId}`);
  console.log(`Username: ${session.username}`);
} else {
  console.log("세션 정보를 가져올 수 없습니다.");
}
React.FC 와 children 
import React from 'react';

// React.FC를 사용하여 함수형 컴포넌트 정의
const MyComponent: React.FC = ({ children }) => {
  return (
    <div>
      <h1>My Component</h1>
      <div>{children}</div>
    </div>
  );
};

// 사용 예시
const App = () => {
  return (
    <MyComponent>
      <p>This is the content inside MyComponent.</p>
    </MyComponent>
  );
};

export default App;​

1
메모지 
// 1. {} object
const RedBoxDivD1 = styled('div')({
  color: 'red',
})

// 2. `` string interpolation
const RedBoxDivD2 = styled('div')`
  color: red;
`​

1
@mui 테마  
   
MUI  

vs

테일윈드 컬러테마 		 
import React from 'react';
import styled from 'styled-components';

interface ColoredBoxDivType {
  color: 'red' | 'blue'
  type: '1' | '2'
}

const ColoredBoxDivD1 = styled('div')<ColoredBoxDivType>((props) => {
  const colored = props.color + props.type
  return {
    color: colored,
  }
})

const ColoredBoxDivD2 = styled('div')<ColoredBoxDivType>`
  color: ${(props) => props.color + props.type};
`;

const Example = () => {
  return (
    <div>
      <ColoredBoxDivD1 color="red" type="1">Hello, world!</ColoredBoxDivD1>
      <ColoredBoxDivD2 color="blue" type="2">Hello, world!</ColoredBoxDivD2>
    </div>
  );
};
   
해쉬태그 
해시태그

클릭하면
oncloick 이벤트
페이지이동하고

어떤태그를눌럿지

url 머쉬해쉬 {}

새로고침 

페이지 이동을 읽는다.

입력된 파라미터값을 읽는다.

apai fetch

,
React.FC를 사용한
경우: (0)		 
import React from 'react';

interface Props {
  title: string;
}

const MyComponent: React.FC<Props> = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

export default MyComponent;​

1
React.FC를 사용하지않은경우(x)  
import React from 'react';

interface Props {
  title: string;
}

const MyComponent = ({ title }: Props) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

export default MyComponent;

 

Q
해쉬태그 
해시태그

클릭하면
oncloick 이벤트
페이지이동하고

어떤태그를눌럿지

url 머쉬해쉬 {}

새로고침 

페이지 이동을 읽는다.

입력된 파라미터값을 읽는다.

apai fetch

,

 

반응형
저작자표시 비영리 변경금지

'컴퓨터공부 > React' 카테고리의 다른 글

리액트 Material-UI , DOM 트리 , SSR, CSR 정적 렌더링, 다이내믹 렌더링, JSX  (0) 2023.08.31
React 렌더 라이프사이클 - 클래스 컴포넌트를 중심으로, 그리고 함수형 컴포넌트에서의 렌더 사이클  (0) 2023.08.20
리액트 공부노트 2  (0) 2023.08.18
[Asac 웹풀스택] 리액트 설치 , 돔트리, 명령어 ,취약점  (0) 2023.08.17

관련글

댓글

티스토리툴바