목 차문제 해결 접근법문제 해결 패턴빈도수 세기 패턴다중 포인터 패턴슬라이딩 윈도우 패턴분할과 정복 패턴문제 해결 접근법 🔷PROBLEM SOLVING어려운 문제에 어떻게 접근해야할까?1. Devise a plan for solving problems 👉 여기서 다룰 내용! 2. Master common problem solving patterns 1️⃣Understand The Problem "단계별로 문제를 생각하자"Can I restate the problem in my own words?What are the inputs that go into the problem?What are the outputs that should come from the solution to the problem..
배운 내용 요약 정리빅오 표기법 (Big O Notation)배열과 오브젝트의 성능 평가 빅오 표기법 (Big O Notation) Big O 소개 - '좋은', '그저그런', '엉망인' 코드라고 말하는 대싯 숫자로 코드의 성능을 표기할 수 있는 지표- 입력의 크기와 실행시간의 관계를 말함 Big O Notation is a way to formalize fuzzy counting.It allows us to talk formally about how the runtime of an algorithm grows as the inputs grow. O(n) operaion inside of an O(n) operaion. == O(n^2) (eg. 중첩 반복문)Simplifying Big O Expres..
리액트 시작 🎯리액트 이해리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다.구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(view)만 신경 쓰는 라이브러리다. 🔹컴포넌트: 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체: 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의 🔹 렌더링: 사용자 화면에 뷰를 보여 주는 것: 리액트가 렌더링 과정에서 최적의 사용자 경험을 제공하며 성능을 아낀 비밀을 파악하려면'초기 렌더링'과 '리렌더링' 개념을 알아야 함 🔸초기 렌더링어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다.리액트에서는 이..
(리액트) 카운터 앱 만들기 📌가운데 정렬 cssmargin: 0 auto; import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";function App() { return ( Simple Counter );}export default App; 변경된 값이 컴포넌트가 즉시 렌더링 하여 화면에 반영하도록 하려면 state값으로 설정해야 한다.state는 컴포넌트 내부에서만 만들 수 있다.그럼 이때 state를 어디에 설정해야 할까? state의 값을 실제로 렌더링하게 ..
(리액트) public폴더와 assets폴더 차이 둘 다 동일하게 정적파일을 보관하는 용도인데왜 폰트는 public폴더에 넣고, 이미지는 assets폴더에 넣나요? 그 이유는 바로 Vite가 내부적으로 진행하는 이미지 최적화 설정때문에 그렇다. 그렇기에 이미지를 최적화할게 아니라면 public폴더에 넣어도 상관없다.이 경우 상대경로를 통해 이미지를 불러와야한다.이 경우 이미지를 import가 아니라 img태그로 src프로퍼티를 사용해 넣는다. 만약 import문으로 간편하게 불러오고 싶다면 assets에 넣어야만 한다.이때 util폴더를 만들어 get-image.js와 같은 모듈을 따로 만들어서 넣어주는게 좋다.import emotion1 from "./../assets/emotion1.png";impo..
목차 MPA: Multi Page ApplicationSPA: Single Page ApplicationReact Router페이지 라우팅: 페이지 이동페이지 라우팅: 동적 경로페이지 라우팅 🔷MPA: Multi Page Application애초에 서버가 여러개의 페이지를 갖고 있음동작 방식이 굉장히 직관적이기 때문에 많은 서비스가 사용하는 전통적인 방식→ React.js는 이 방식을 따르지 않음(쾌적한 페이지 이동 제공이 어렵기 때문) 🔹MPA 방식의 단점페이지 이동이 쾌적하지 못하다. 계속해서 페이지의 전체를 새로고침하므로 깜빡거림 서버의 부하가 심해진다. 페이지 요청마다 서버에게 모든 요청이 감🔹 서버 사이드 렌더링: Server Side Rendering서버 측에서 미리 완성해놓은 파일을 보..