브라우저 렌더링 브라우저 렌더링이란? 웹페이지를 HTML, CSS, JS 등의 웹 리소스를 파싱하고 처리, 렌더링을 통해 브라우저를 유저들에게 시각적으로 보여주는 과정이다. 브라우저 렌더링 방법 1. CSR(Client Side Rendering) 클라이언트 영역에서 렌더링을 수행하는 방식이다.사용자가 웹브라우저를 통해서 웹사이트에 방문 했을 때 웹사이트에서 제공하는 웹페이지에 대한 HTML, CSS, JavaScript와 같은 리소스들을 클라이언트 단에서 다운로드 받고 브라우저에서 페이지 전환을 처리하여 보여주는 방식이다. CSR rendering 방식에서 서버의 역할은 페이지가 그려질 때 웹리소스 파일을 제공하는 역할과 페이지가 모두 로딩이 되었을 때 클라이언트에서 요청하는 데이터를 전송해주는 역할..

변수 함수를 굳이 밖에 안빼도 된다. state를 자식에 만들면 부모 → 자식 전송할 필요가 없다. 근데 state가 Modal, App에서 필요하면 가장 최상위 컴포넌트에 보관하는 게 좋음 App에 보관 태그 에 뭔가 입력시 코드 실행하고 싶으면 onChange / onInput onMouserOver → 마우스를 올릴 때 이 코드 실행 onScroll → 스크롤 조작할 때 실행 input 태그에 입력한 값 가져오는 법 {console.log(e.target)}}> e를 넣어주면 이벤트객체라고 불리는거다. input 태그에서 발생하는 이벤트과 관련된 기능(변수)라고 보면 된다. e.target 이 이벤트가 발생하는 곳 e.target.value 이벤트가 입력한 값 input에 입력한 값 저장하려면 아래..

1. 클래스 / 함수형 컴포넌트 컴포넌트를 선언하는 방식은 두가지이다. 1. 함수 컴포넌트 2. 클래스형 컴포넌트 이렇게 두가지가 있다. 하지만 최근 클래스형 컴포넌트보단 함수 컴포넌트를 주로 사용한다. 다양한 이유가 있겠지만, 주요 이유는 1. 간단한 작성으로 가독성이 좋다. 2. 성능적인 부분에서 함수가 좀 더 효율적으로 사용할 수 있다. 3. 테스트 용이성 2. 컴포넌트 생성 생성 순서는 1. 파일 만들기 -> 2. 코드 작성하기 -> 3. 모듈 내보내기 및 불러오기 컴포넌트를 만들고자 할 때는 컴포넌트 코드를 선언해야 한다. const My Component = () => { return 함수형 컴포넌트 ; }; export default MyComponent; 3. 화살표 함수의 사용 funct..

1. 코드 이해하기 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // ..

Lv.1 행렬의 덧셈 문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 입출력 예 arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] 나의 풀이 function solution(arr1, arr2) { let answer = []; for(let i = 0; i < arr1.length; i++) { let sum = []; for (let j =..

[level 1] 평균 구하기 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 나의 풀이 function solution(arr) { let answer = arr.reduce(function add(sum, currValue) { return sum + currValue }, 0); let average = answer / arr.length; return average; } reduce 메서드를 사용해서 모두 더해줘서 나눠서 평균값을 구했다. 다른..