TIL

20240102 TIL

김빵그 2024. 1. 2. 22:23

Today 요약

[✅] 코딩테스트 1문제

[✅] react 프엔 강의 (3개)

[✅] 올인원 강의 (1개)

배운점

1. js

1-1 every

  • 배열의 모든 요소가 특정 조건을 만족하는지 확인하는데 사용
  • 참이면 true 그렇지 않으면 false
array.every(callback(element, index, array), thisArg)
  • callback : 각 배열 요소에 대해 실행할 함수 
  • element : 현재 처리 중인 배열 요소 
  • index : 현재 처리 중인 배열 요소 인덱스 
  • array : every를 호출할 배열 자체
const positiveNumbers = [1, 2, 3, 4, 5];

const allPositive = positiveNumbers.every(function(number) {
  return number > 0;
});

console.log(allPositive); // true

2. react

2-1 create-react-app 이란?

  • React 애플리케이션을 쉽게 생성하고 구성할 수 있도록 도와주는 도구로 React 앱을 초기화하고 설정하는 일련의 작업을 자동화 할 수 있다.
  • 프로젝트 초기화 : 초기 프로젝트 구조, 설정 파일 및 기본적인 의존성이 자동으로 설정
  • 개발 서버 제공 : 내장된 개발 서버 제공하여 코드 변경 시 자동으로 리로드, 실시간 프로젝트를 개발할 수 있다
  • 빌드 설정 자동화 
  • Babel 및 Webpack 설정

2-2 구조

  • 컴포넌트 (Component) 
    • 함수형 : 주로 state나 라이프사이클 메서드가 없이 뷰만을 담당하는 경우 사용
    • 클래스형 : React 이전의 버전에서 사용
  • Props (속성) 
    • 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는데 사용되는 매개변수 
    • 읽기 전용이며 자식 컴포넌트에서 수정할 수 없다 
  • State(상태)
    • 컴포넌트 내에서 관리되는 동적 데이터

3. react-native

3-1 scrollview와 flatlist 차이

  • scrollView 
    • 모든 자식 요소 렌더링, 모든 요소를 메모리에 유지. 컨텐츠가 많은 경우 성능 저하된다 
    • 모든 아이템이 한번에 렌더링 되기 때문에 상대적으로 간단한 목록이나 뷰에 사용된다.
    • 적은 수의 아이템이나 정적인 컨텐츠 표시할 때 효과적이다 
  • flatlist
    • 데이터 소스로부터 필요한 만큼의 아이템만 렌더링하고, 스크롤되면 메모리에서 해제 
    • 대규모 데이터 목록에 효율적 
    • 화면에 보이지 않은 아이템들은 렌더링 되지 않기 때문에 성능 향상

 

4. 기초 

4-1 웹표준 

  • 웹에서 사용되는 표준 기술이나 규칙을 의미한다 
  • W3C의 권고안에서 나온 기술들이 해당
  • 크로스 브라우징 : 구글크롬, ms엣지, 파이어폭스, 오페라, 네이버 웨일, 사파리 등 (동일한 사용자 경험을 줄 수 있도록 제적하는 기술, 방법 등

4-2 웹 접근성 

  • 누구나 웹사이트를 사용할 수 있도록 하는 것
  • 장애에 구애없이 모든 사람이 접근할 수 있는 것
저작자표시 (새창열림)