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

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

모던 리액트 딥다이브 week5 2024-03-27 DIL 주차 DIL 범위 날짜 개인 진도 5주차 9장 2024-04-01 529-542p 9장 모던 리액트 개발 도구로 개발 및 배포환경 구축하기 Next.Js로 리액트 개발 환경 구축하기 프론트앤드 개발자가 직접 만든 애플리케이션을 온전히 이해하려면 package.json 부터 시작해서 직접 설정해보기. 왜 이런 파일이 필요한지, 이 파일 내부에 어떤 설정이 필요한지 이해한다. 기본 패키지 설치 npm init npm i react react-dom next npm i @types/node @types/react @types/react-dom eslint eslint-donfig-next typescript --save-dev tsConfig 작성 {..

모던 리액트 딥다이브 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'로 설정하여 분석) (※ 다른 자바스크립트/타입..

프론트 앤드 기술 면접 스터디 스터디 이름: 스터디 캠프 fe-기술면접-훈련(유료) 참여 기간: 2024.1.12~2.04 (약 4주) 참여 동기: 아직 신입이지만 미리 준비하고자 하였고, 면접준비가 생각보다 공부할 것이 많다는 후기에 신청하게 되었다. 참여 환경: 노션, 디스코드 스터디 Rules: 매주 목요일 중간점검 (스크립트 보기 가능) Week 1 : CSS-in-JS 매주 토요일 마다 오프라인으로 면접을 진행한다고 하셨다. + 중간 점검도 있었다.(매주 목요일) 난 면접 준비가 처음이라 엄청 떨리는 것도 있었고, 뭘 어떻게 준비 해야 할 지 몰라서 처음에는 닥치는 대로 블로그나 책을 들쒀봤던 것 같다. 모르는 것을 검색해보면 검색해볼 수록 파도 파도 계속 궁금한 것이 나왔었고 (양파 마냥..)..