동기 비동기에 대해 https://strap.tistory.com/entry/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 비동기 패턴의 이점 응답성 향상: 비동기 패턴을 사용하면 여러 작업을 동시에 처리할 수 있어 사용자 경험을 향상시킨다. 웹 페이지가 멈추지 않고 반응하는 느낌을 제공할 수 있다. 성능 향상: 비동기 패턴은 작업을 병렬로 처리하여 전체적인 시스템 성능을 향상시킨다. 특히 네트워크 호출과..

React-icons https://www.npmjs.com/package/react-icons react-icons SVG React icons of popular icon packs using ES6 imports. Latest version: 5.0.1, last published: 12 days ago. Start using react-icons in your project by running `npm i react-icons`. There are 5607 other projects in the npm registry using react-icons. www.npmjs.com React 작업중 쉽게 아이콘을 추가할 수 있는 라이브러리 이다. 위에 첨부된 사이트에서 보이듯 npm i react-ic..

리액트(React), 뷰(Vue), 앵귤러(Angular)는 각각 JavaScript 기반의 프론트엔드 프레임워크 또는 라이브러리로, 모두 웹 애플리케이션을 개발하기 위한 도구로 사용돤다. 하지만 각각은 고유한 특징과 철학을 가지고 있다. 러닝 커브 (Learning Curve) : 학습곡선 리액트: 자유도가 높아 초기 학습 곡선이 다소 높을 수 있다. (시간과 노력이 필요하다.) 뷰: 진입 장벽이 낮아 빠르게 학습할 수 있다. 앵귤러: 기능이 많고 복잡한 특성 때문에 학습 곡선이 다소 가파르다. (기울기가 크다는 의미로 학습 초기에 어려움이 있다.) 문법 및 구조 리액트: JSX(JavaScript XML)라는 문법을 사용하여 컴포넌트를 정의하며, 가상 DOM(Virtual DOM)을 활용하여 성능을 ..

React의 데이트 흐름 React는 기본적으로 데이터 즉. props를 단방향으로 전달한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. 이는 React의 핵심 개념중 하나인 "단방향 데이터 흐름"을 나타낸다. 부모 컴포넌트에서 자식컴포넌트로 props를 내릴 수 있지만, 자식 컴포넌트에서 직접적으로 부모 컴포넌트의 상태를 변경할 수 없다. 자식 컴포넌트에서 상위 컴포넌트로 데이터를 다시 전달하려면 콜백 함수 또는 이벤트를 사용하여 부모 컴포넌트에서 처리해야 한다. React는 단방향 데이터 바인딩이 되는 이유 결론은 애플리케이션의 상태를 예측 가능하고 디버깅하기 쉽게 만들기 위함이다. 예측 가능한 데이터 흐름: 단방향 데이터 흐름은 데이터의 흐름이 항상 한 방향으로만 이동하도록 한..

프리티어 (Prettier) 프리티어는 코드 포맷팅 도구로, 코드 스타일, 들여쓰기, 줄바꿈 및 기타 서식을 자동으로 표준화해주는 역할을 한다 코드 포맷팅의 주요 목적은 코드의 일관성을 유지하고, 가독성을 향상시키며, 협업을 더 효율적으로 만들어준다. 프리티어는 주로 코드베이스에 적용되며, 코드를 저장하거나 커밋할 때 자동으로 코드를 정리한다. 프리티어 설정 예시 // .prettierrc 파일 { "singleQuote": true, // 작은따옴표(') 사용 "semi": true, // 세미콜론(;) 사용 "trailingComma": "all", // 후행 콤마 사용 (예: { a: 1, b: 2, }) "tabWidth": 2, // 탭 너비 "printWidth": 80 // 줄 바꿈 문자 수..

position position 속성은 요소의 위치를 조정하는데 사용되는 속성이다. 다음과 같은 속성들을 조합하고, 다른 속성들과 함께 사용하여 원하는 레이아웃과 위치를 구현할 수 있다. static 기본값으로, 요소를 문서의 일반적인 흐름에 따라 배치한다. top , right, bottom, left 등의 속성은 적용되지 않는다. relative 요소를 자기 자신을 기준으로 상대적으로 이동시킬 수 있다. 이동시키려는 경우 top , right, bottom, left 속성을 사용할 수 있다. 또 다른 요소들과 겹칠 수도 있다. absolute 가장 가까운 조상 요소 중 position 속성이 static이 아닌 경우를 기준으로 위치한다. 다른 요소들의 영향을 받지 않고 원하는 위치로 이동할 수 있다...

React 라이프 사이클 리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다. 리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다. 함수 컴포넌트 함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다. 함수컴포넌트 예시코드 import React, { useState } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); return ( Cou..

클로저 함수와 그 외부를 둘러싸고 있는 렉시컬환경의 조합으로, 클로저가 자신의 렉시컬환경 외부에서 선언된 변수에, 접근할 수 있는 메커니즘을 제공한다. 클로저 사용하는 이유 클로저는 내부 정보를 은닉하고, 공개 함수(public, 외부)를 통한 데이터 조작을 위해 쓰인다. 캡슐화와 정보은닉을 위해 쓰인다. 클래스 private 필드 또는 메소드를 사용하는 효과와 동일하다. 클로저 예제 function outer() { const outerVar = "I'm from outer"; function inner() { console.log(outerVar); // 내부 함수에서 외부 함수의 변수에 접근 } return inner; } const closureFunc = outer(); // outer 함수 실..

엄격모드 StrictMode ECMAScript5 (ES5)에서 도입된 "StrictMode" 또는 "엄격모드"는 자바스크립트의 실행 컨텍스트 내에서 코드를 더 엄격하게 처리하는 방식을 의미한다. 엄격모드를 사용하면 더 많은 에러를 발견하고 예방하며, 작은 동작 차이를 제어할 수 있다. 엄격모드를 활성화 하려면 엄격모드를 활성화하려면 스크립트의 최상단이나 함수 내의 첫 줄에 "use stricet"; 문을 추가하면 된다. 반드시. 최상단에 있어야 엄격모드가 활성화 된다. React에서 사용한 나는 이런식으로 작성하였다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // 엄격 모드 활성화 React..

자료형 (Data Types) https://ko.javascript.info/types 자료형 ko.javascript.info 숫자형 BigInt 문자형 불린형 null undefined → 값이 할당되지 않은 상 객체와 심볼 typeof 연산자 문자형 큰 따옴표나 작은따옴표는 차이가 없지만 백틱 ` 에는 다른의미가 있다. 백틱 사이에 ${ } 를 이용해 변수나 표현식을 넣어주면 문자열 중간에 표현이 가능하다는 점이다. alert( "the result is ${1 + 2}" ); alert( `Hello, ${name}!` ); 등과 같이 사용할 수 있지만 첫째 줄 처럼 큰따옴표는 인식되지 않는다. 무조건 ${} 식의 형태를 사용하기 위해선 백틱을 사용해야 한다. Typeof 연산자 첨부한 사이트의..