궁금한게 많은 코린이의 Developer 노트

인라인 style 방법 리액트에서는 아래와 같이 인라인 스타일을 적용시킬 수 있다.function Button({text}){ return {text};}   모듈러 style 방법 리액트는 스타일을 모듈처럼 사용한다. create-react-app은 css 코드를 자바스크립트 오브젝트로 변환시켜준다. 스타일을 모듈러로 사용하기 위해서는 파일명을 xxx.module.css 로 지어주어야 한다.아래와 같이 사용할 수가 있다.  Button.jsfunction Button({text}){ return {text};}  Button.module.css.btn{ color: white; background-color: tomato;}    해당 스타일을 개발자 검사 "요소"로 들어가보면 스..

7주 12강 담당 12강 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 웹사이트와 성능 사용자 최소 기대 사항 웹사이트에 방문한 목적을 쉽게 달성할 수 있어야 한다. 목적을 달성하는데 시간이 짧아야 한다. 웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저해야 한다. 오래된 기술이라도 사용자가 이용하는데 전혀 지장이 없다면 사용자들은 어떠한 불편함도 느끼지 않을 것이다. 이처럼 웹사이트의 성능이 뒤떨어지면 실제 서비스 이용자들의 호응을 얻기란 어렵다. 사용자가 느끼는 성능이 제일 중요하다. 이러한 웹사이트의 성능을 측정 할 수 있도록 "핵심 웹 지표" 가 있다. 핵심 웹 지표(Core Web Vital)란? 구글에서 분류한 기준이다. 웹사이트에서 뛰어난 사용자 경험을 제공하는데 필수적인 지표..

모던 리액트 딥다이브 week4 2024-03-26 DIL 주차 DIL 범위 날짜 개인진도 4주차 4장, 8장 2024-03-26 483-499p ...이어서 공부 완전히 새로운 규칙 만들기: new Date()를 금지시키는 규칙 해당 상황이 있다고 가정해보자. newDate()사용 못함. ServerDate()를 만들어 서버의 시간을 반환하는 함수만 사용해야 함. 이러한 규칙을 준수하기 위해 ESLint 규칙을 만들어야 한다. 이 규칙을 만들기 위해 먼저 자바스크립트의 내부에서 new Date()의 존재를 파악해야 한다. AST로 코드를 분석해보면, ExpressionStatement는 표현식 전체를 나타낸다.(ExpressionStatement.expression/callee/arguments..) ..

모던 리액트 딥다이브 week4 2024-03-25 DIL 주차 DIL 범위 날짜 개인진도 4주차 4장,8장 03-25 469-483p 8장 좋은 리액트 코드 작성을 위한 환경구축하기 정적 코드 분석의 대표적인 도구 EsLint! EsLint는 어떻게 코드를 분석할까? 코드스멜을 찾는 방법. 자바스크립트 코드를 '문자열'로 읽는다. 파서로 코드를 구조화하여 트리를 생성한다.(JSON 형식) 구조화한 트리(AST: Abstract Syntax Tree)를 기준으로 각종 규칙과 대조한다. 대조 후 위반한 코드를 알리거나 수정한다. 자바스크립트를 분석하는 파서는 여러가지가 존재하지만, 그 중 기본 값으로 espree를 사용한다.(ESLint 안에서 'espree'로 설정하여 분석) (※ 다른 자바스크립트/타입..

나의 문제풀이 function solution(my_string, overwrite_string, s) { let my_Arr = [...my_string]; my_Arr.splice(s, overwrite_string.length, overwrite_string) return my_Arr.join(''); } 1. 기존의 문자열을 [...]을 사용하여 배열로 만들어준다. 2. splice()문법을 사용하여 배열을 새로 반환한다: my_Arr의 s 부터 바꿔준다, overwrite_string.length만큼 배열을 삭제하고, overwrite_string 으로 비워진 부분을 새로운 배열로 채운다. [ splice() 메소드 ] -다목적으로 사용가능: 삭제.추가.기존값 대체 -배열 객체에 사용가능한 내장..