분류 전체보기
-
Algorithm의 개념1codeStates front-end/Algorithm 2023. 4. 4. 11:38
HTML 삽입 미리보기할 수 없는 소스 📌 Algorithm의 개념 문제를 해결하는 최선의 선택 📍시간 복잡도 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 얼마만큼 걸리는가? 효율적인 알고리즘 구현 👉🏻👉🏻 입력값이 커짐에 따라 증가하는 시간의 비율을 최소화한 알고리즘 🔗 Big-O 표기법 시간 복잡도를 표기하는 방법 Big-O(빅-오) Big-Ω(빅-오메가) Big-θ(빅-세타) 각각 최악, 최선, 중간(평균)의 경우를 대하여 나타내는 방법, Big-O표기법이 가장 자주 사용 Big-O표기법 👉🏻👉🏻 최악을 고려 "최소한 특정 시간 이상이 걸린다" , "이 정도 시간까지 걸릴 수 있다" O(1) Big-O 표기법은 입력값의 변화에 따라 연산을 실행할 때, 연산 횟수에 비해 시간이 ..
-
아마존 웹 서비스(AWS)codeStates front-end/node(server) 2023. 3. 31. 11:56
HTML 삽입 미리보기할 수 없는 소스 📌 AWS 클라우드 컴퓨팅 서비스 📍 Cloud Computing 기존 서버 방식 - 같은 공간에 더 많은 컴퓨터를 추가해 한 대가 해결할 수 있는 요청을 여러 대가 나누는 방식 👉🏻👉🏻 공간의 한계와 주기적인 유지 관리의 어려움으로 한계가 드러남 클라우드 - 서버의 자원과 공간, 및 네트워크 환경 제공 필요할 때마다 컴퓨팅 능력을 유연하게 조절 사용한 만큼의 요금만 지급 👉🏻👉🏻 클라우드 서비스에 문제가 생기면 내가 배포하고 관리하는 환경에 영향을 미치는 단점이 존재함 🔗 SaaS, IaaS, PaaS IaaS : 서비스로 제공하는 인프라스트럭처클라우드 인프라스트럭처 서비스는 확장성이 높고 자동화된 컴퓨팅 리소스를 가상화하여 제공하는 것다. PaaS : 서비스로 ..
-
[html] 개념학습 <optimization>codeStates front-end/Html 2023. 3. 29. 20:26
HTML 삽입 미리보기할 수 없는 소스 📌 optimization 📍 최적화(optimization) 사전적의미 : 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 주어진 조건으로 최대 효율을 낼 수 있도록 하는것을 의미한다. 🔗 최적화의 필요성 및 효과 이탈률 감소 : 웹 개발 최적화 👉🏻👉🏻 빠른 속도로 렌더링 하는 것 🙏🏻 렌더링이 빠르지 않으면 페이지 이탈할 확률 ⬆️🙏🏻 전환율 증가 : 💁🏼♂️ 전환율이란? 방문자의 비율 👉🏻👉🏻 이탈율 ⬇️ 👉🏻 전환율 ⬆️ 수익 증대 : 회원 수가 증가하면 수익이 증대함을 의미 사용자 경험(UX) 향상 : 페이지 로딩이 빠를수록 UX는 향상된다. 🔗 HTML,CSS 코드 최적화하기 html,css의 DOM트리가 크고 복잡할 수록 리..
-
[React] React와 TDDcodeStates front-end/React 2023. 3. 29. 17:13
HTML 삽입 미리보기할 수 없는 소스 📌 React 와 TDD 📍 TDD(Test-driven Development) 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론 개발자가 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성라는 과정을 반복하는 것을 의미 🔗 TDD를 사용하는 이유 테스트코드를 먼저 작성해야 하기 때문에 시간이 오래 걸리는 것처럼 느껴지지만, 오히려 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있기 때문이다. 🔗 TDD를 작성하는 방법 console.log escribe, it, assert, expect 등의 다양한 키워드들 : JavaScript 내장 기능이..
-
[TS] 제네릭codeStates front-end/Typescript 2023. 3. 23. 21:52
HTML 삽입 미리보기할 수 없는 소스 📌 제네릭 알려진 타입은 사용하는 것이 아닌 코드에서 호출하는 방식에 따라 다양한 타입으로 작동하도록 하려면 어떻게 해야 할까? 🙋♂️ 타입을 선언하지 않는 다면? any로 간주👉🏻👉🏻 any는 모든 타입을 뜻하는게 아니라 제한을 두지 않는 것일 뿐 👉🏻👉🏻 엄격한 검사를 하지 않기 때문에 문제가 발생할 수 있다. 🙋♂️ 모든 타입을 허용하려면? 제네릭 사용 👉🏻👉🏻 타입 간의 관계를 알아낸다. 🙋♂️ 제네릭이란? 타입을 마치 함수 파라미터로 사용한다는 것, 코드를 수행될 때(런타임) 타입을 명시 any처럼 타입을 지정하지 않지만, 타입을 체크해 컴파일러가 오류를 찾을 수 있다. 재사용성이 높은 컴포넌트를 만들 때 자주 활용 📍 제네릭 함수 매개변수 괄호 바로..
-
[React] 코드 분할codeStates front-end/React 2023. 3. 23. 18:41
HTML 삽입 미리보기할 수 없는 소스 📌 React 심화 📍 코드 분할(Code Spliting) React는 HTML 웹 페이지에 JS를 추가해야 하기 때문에 번들링을 진행한다. 그러나 JS코드가 점점 무거워지기 때문에 실행 속도가 느려지게 된다. 이를 방지하기 위해 해결방법은 번들을 물리적으로 나누는 것이다. 번들 분할 혹은 줄이는 법 번들링이 진행되면 npm을 통해 서드파티 라이브러리가 포함하게 된다. 🤷🏼 서드파티(Third Party) 라이브러리란? 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리, 즉 제 3자 라이브러리 그러나 번들링 시 이 라이브러리는 많은 공간을 차지하기 때문에, 따로 따로 불러서 사용할 수 있어야 한다. /* 이렇게 lodash 라이브러리를 전체를 불러와..
-
[React] React Hooks, useMemo, Custom Hooks카테고리 없음 2023. 3. 22. 21:30
HTML 삽입 미리보기할 수 없는 소스 📌 React Hooks 📍 Function Component와 Class Component Hook은 함수 컴포넌트에서 사용하는 메서드 🔗Class Component VS Function Component 🤷🏼 컴포넌트란? 단순히 템플릿을 넘어 데이터에 맞춰 UI를 만들어 주는 기능과 API를 통해 화면의 움직임 작업을 수행 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다 class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.hand..
-
[React] Virtual DOM, React Diffing AlgorithmcodeStates front-end/React 2023. 3. 22. 19:04
HTML 삽입 미리보기할 수 없는 소스 📌 리액트 심화 📍Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트 할 수 있도록 가상의 DOM 객체를 활용한다. Real DOM (Document Object Model) DOM은 문서 객체 모델은 의미, 문서 객체란? 브라우저가 JS와 같은 스크링팅 언어가 html 태그들에 접근하고 조작할 수 있도록 문서를 트리 구조로 객체화 한 것을 의미한다. 즉, DOM은 브라우저가 HYML 문서를 조작할 수 있도록 트리 구조화한 객체 모델이다. DOM의 조작 속도가 느려지는 이유 트리는 "저장된 데이터를 더 효과적으로 검색"을 위해 사용, 그러므로 트리구조 된 DOM은 탐색속도는 빠르다. 그러나 DOM이 변경되고 업데이트 된다..