연습장

크롬 - 구글 검색을 주로 이용하는데, 갑자기 어색함을 느낌 검색시에 다음과 같이 글씨가 진하게 / 볼드체 표시되는 느낌을 받았다.   하지만 엣지에서는 잘 동작하는걸 확인 했다. 따라서 크롬 브라우저의 폰트에 문제가 있지 않을까 고민을 하였고  크롬의 설정 - 모양 - 글꼴 에서 글꼴을 바꿔보니 효과가 있어서 이대로 해결 이라 생각했는데..     vscode 에서 실행한 페이지에서는 여전히 볼드체로 나오는것을 확인    Noto Sans KR 폰트를 삭제 후 다시 설치하여 문제 해결  시작 -> 설정 -> 글꼴 검색 -> 삭제 -> 재설치 https://fonts.google.com/noto/specimen/Noto+Sans+KR Noto Sans Korean - Google FontsNoto is ..

package.json npm init -y airbnb 스타일 관련 설치npx install-peerdeps --dev eslint-config-airbnb package.json // devDependencies 에 설치 확인 {   ...   "devDependencies": {    "eslint": "^8.2.0",    "eslint-config-airbnb": "^19.0.4",    "eslint-plugin-import": "^2.25.3",    "eslint-plugin-jsx-a11y": "^6.5.1",    "eslint-plugin-react": "^7.28.0",    "eslint-plugin-react-hooks": "^4.3.0"  }} 폴더 구조 세팅 app.js 오류..

https://www.youtube.com/watch?v=Y3kjHM7d3Zo&t=97s 장점코드 포매팅 : 일관된 코딩 컨벤션을 유지하는 기능코드 품질 : 잠재적인 오류를 찾아주는 기능 eslint 설치  // 해당 영상 기준 버전npm install --save-dev eslint@6.8.0  옛날 버전이라고 경고하는 모습 .eslintrc.js 파일 생성빈 객체를 만들어서 노드 형식의 모듈을 생성-> v9.0.0 부터는 eslint.config.js 로 생성module.exports = {    } npm 스크립트에 'lint' 명령어 등록  "scripts": {    "lint": "eslint src"  },  [폴더 구조] app.js 생성// ./src/app.jsconsole.log()(..

사용자의 상태를 관리 하기 위한 방법클라이언트와 서버 간의 상태를 유지하고 정보를 저장하는 데 사용됩니다. HTTP 프로토콜의 특징으로 1. Connectionless (비연결지향)    클라이언트가 서버에 요청을 보내면, 서버는 해당 요청에 대한 응답을 전송한 후 연결을 끊는다는 것을 의미합니다. Keep-AliveHTTP/1.1부터 지원되는 기능으로, 하나의 TCP 연결을 여러 HTTP 요청과 응답 사이에서 재사용할 수 있게 해줍니다.서버 부하 감소: 서버는 매 요청마다 TCP 연결을 설정하는 작업을 줄일 수 있으므로 서버 부하를 감소시킬 수 있습니다. HTTP/1.0에서는 명시적으로 설정HTTP/1.1에서는 기본적으로 활성화HTTP/2에서는 다중 요청과 응답을 하나의 연결에서 병렬로 처리  2. S..

https://disco-biscuit.tistory.com/86#%ED%8A%B9%EC%A7%95 MobX 를 이용한 간단한 앱 만들기01. MobX 란 redux이후로 많이 사용되는 상태관리 라이브러리이다. MobX는, 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어주는 검증된 라이브러리다. 특징 쉽다. 미니멀하고 보일러 플레disco-biscuit.tistory.com  MobX는 상태 관리 라이브러리로서, 주로 React와 같은 JavaScript 프레임워크와 함께 사용되며 애플리케이션의 상태를 관리하는 데 도움을 줍니다. MobX는 리액티브 프로그래밍 원칙을 기반으로 하며, 상태의 변화를 자동으로 감지하고 필요한 부분만 업데이트하는 방식으로 동작합니다. 옵저버 패턴. 쉽다.미니멀하고 ..

Redux는 JavaScript 상태 관리 라이브러리 입니다. 필요성:react 에서 state 는 component 안에서 관리됩니다.리액트 특성상 단방향 데이터 바인딩이기 때문에, 하위 컴포넌트에게 state를 전달 할 수 있습니다.이를 props 라고 하며, component 구조가 깊어지면 props 를 계속 전달해야 하는 'Props drilling' 이슈가 있습니다.또한 props 되는 component 가 많아지면 state 관련 오류 발생시 조치하기 어려워지는 문제점도 있습니다.이때, redux를 사용하여 state를 관리하면 위와 같은 문제를 개선 할 수 있습니다.  예시코드 .gpt Redux 를 사용해서 버튼 숫자 count 를 state 로 관리하고 '좋아요' 버튼 클릭시 count..

https://www.youtube.com/watch?v=pjakE0D4CeI  클래스 컴포넌트 예시import React, { Component } from 'react';// 예시로 사용할 클래스 컴포넌트 정의class Counter extends Component {  constructor(props) {    super(props);    // 초기 상태 설정    this.state = {      count: 0    };  }  // 증가 메서드  incrementCount = () => {    this.setState({ count: this.state.count + 1 });  }  // 감소 메서드  decrementCount = () => {    this.setState({ cou..

https://www.youtube.com/watch?v=XWqs1mMPJ30  자바스크립트는 DOM 요소에 직접 접근하여 조작하는데, DOM의 요소가 많거나 접근과 조작이 빈번한 경우 성능의 문제가 발생할 수 있습니다. 이에 대한 방안으로 Virtual DOM 을 활용할 수 있습니다.  Virtual DOM은 실제 DOM을 추상화하여 만든 자바스크립트 객체로 트리 구조로 표현됩니다. 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성state나 props가 변경시, 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성두 Virtual DOM을 비교하여 어떤 부분이 변경되었는지 확인변경된 부분만 실제 DOM에 적용합니다. 그럼 state나 props가 변경될 때마다 Diffing과..

https://velog.io/@developer-sora/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC-Part1CS-JSReact 프론트엔드 면접 질문 정리 Part1(CS, JS,React)면접을 준비하자velog.io  해당 사이트의 질문을 참고 했습니다.Virtual DOM이 무엇이고 작동 원리에 대해 설명해주세요자바스크립트는 DOM 요소에 직접 접근하여 조작하는데, DOM의 요소가 많거나 접근과 조작이 빈번한 경우 성능의 문제가 발생할 수 있습니다. 이에 대한 방안으로 Virtual DOM 을 활용할 수 있습니다.  Virtual DOM은 실제 DOM을 추상..

https://www.youtube.com/watch?v=QkCNba92Vqo   요약: 실행 컨텍스트는 코드가 실행되는 환경 자바스크립트에서 코드 처리 과정소스코드 -> 평가(evaluation) -> 실행 컨텍스트 -> 실행(excutation) -> 결과   소스코드:JavaScript 코드 자체를 말합니다. 이 코드는 함수 호출, 변수 할당 등 다양한 작업을 포함할 수 있습니다.평가 (Evaluation):실행 컨텍스트가 생성되기 전에 JavaScript 엔진이 코드를 평가합니다.평가 단계에서는 변수와 함수 선언을 메모리에 등록하고, 스코프 체인을 설정합니다.변수는 초기화되지 않고 단순히 등록되며, 함수는 정의되어 호출 가능한 객체로 만들어집니다.실행 컨텍스트 (Execution Context):..