전체 글 (51) 썸네일형 리스트형 [토스] [Frontend Fundamentals] [변경하기 쉬운 프론트엔드 코드를 위한 지침서] [좋은 코드의 기준] intro혼자 보기 아까워.. 는 핑계고.. 기록도 할 겸, 복기도 할 겸, 겸사 겸사 정리를 해봅니다.스터디 주제로 나온 아티클로 발표를 준비하다보니 정리하게 되었지만 예시까지 들어가며 내용 정리가 아주 잘 되어있으니 시간이 된다면 정독을 추천합니다!토스에서 좋은 프론트엔드 코드의 기준에 대해서 소개하는 Frontend Fundamentals가 오픈 소스로 공개되었습니다.저희 같은 감자들에겐 아주 감지덕지죠!그래서 무슨 내용?내용은 크게 4가지 기준을 설명하는 것으로 일축됩니다.큰 주제는 변경하기 쉬운 코드! 좋은 프론트엔드 코드 = 변경하기 쉬운 코드 즉, 유지보수에 유리한 코드가 좋은 코드다 정도로 이해 할 수 있을 것 같습니다.좋은 코드에 대한 4개 원칙 그래서 좋은 코드를 위해서 어떤 것들이 .. [React] [Virtual DOM] 리액트 렌더링 리액트에선 렌더링이 핵심이라던데렌더링 -> 화면에 UI를 그리는 과정.어떻게 UI를 그려내길래?- 1. 핵심은 Virtual DOM ! (가상 돔) 리액트는 직접 DOM을 변경하지 않고, 가상 DOM(Virtual DOM) 을 활용하여 렌더링 성능을 최적화.컴포넌트가 상태(state)나 속성(props) 변경으로 인해 업데이트되면 새로운 가상 DOM이 생성.리액트는 이전 가상 DOM과 새 가상 DOM을 비교(diffing 알고리즘 사용)하여 변경된 부분 확인.바뀐 부분만 실제 DOM에 반영(Reconciliation 과정)하여 불필요한 DOM 업데이트 감소.- Diffing 알고리즘 : 비교하여 변경된 부분만 찾아 실제 DOM에 반영하는 방식.- Reconciliation(재조정)의 최적화 요소 -- .. [JavaScript][Lexical Scope] 렉시컬 스코프가 뭐죠? 렉시컬 스코프가 뭘까?어휘적? 사전적? 본질적? 범위...본질적 범위에 가깝!즉 정의의 범위로 변수나 함수가 선언된 위치와 밀접!- 렉시컬 스코프(Lexical Scope)란? 렉시컬 스코프(정적 스코프, Lexical Scope)는 함수가 정의된 위치(즉, 소스 코드 상의 위치)에 따라 변수의 유효 범위(Scope)가 결정되는 방식을 의미.코드가 실행될 때가 아니라, 작성될 때 스코프가 결정.정적 스코핑(Static Scoping)이라고도 명칭.- 렉시컬 스코프의 특징함수가 정의된 위치 기준으로 스코프 결정함수 내부에서 변수를 참조할 때, 해당 변수가 현재 함수 내부에 없으면 바깥쪽(상위) 스코프를 탐색하여 변수를 찾음.즉, 함수가 어디서 호출되었느냐가 아니라, 어디서 정의되었느냐가 중요.중첩된 함.. [JavaScript][this] 자바스크립트에서 this 키워드.. 가 뭔데? 자바스크립트에서 this 가.. 무엇??this ? 리얼 처음 들음!요즘 안쓴다던데...안써도 잘만 되던데...?- this 란?자바스크립트에서 this 키워드는 실행 컨텍스트(execution context)에 따라 다른 객체를 참조하는 특성 보유.즉, this의 값은 함수가 호출되는 방식에 따라 동적으로 결정. - this 의 특성 1. 전역 컨텍스트(Global Context)전역 범위에서 this는 전역 객체를 참조.브라우저 환경에서는 window 객체를 참조Node.js 환경에서는 global 객체를 참조console.log(this); // 브라우저에서는 window 객체 출력 2. 객체의 메서드에서 this객체의 메서드 내부에서 this는 해당 메서드를 호출한 객체.const obj =.. var, let, const의 차이점 자바스크립트에서 변수나 함수를 선언하려면 선언자를 사용해야 한다.var, let, const의 차이는 무엇일까?한마디로 표현하자면키워드범위(Scope)재선언재할당호이스팅var함수 스코프✅ 가능✅ 가능undefined로 초기화let블록 스코프❌ 불가능✅ 가능TDZ로 초기화 전 접근 불가const블록 스코프❌ 불가능❌ 불가능TDZ로 초기화 전 접근 불가- 차이점스코프(scope)var → 함수 스코프 (함수 내에서만 유효)let, const → 블록 스코프 (중괄호 {} 내에서만 유효)재할당 및 재선언var → 재선언 O, 재할당 Olet → 재선언 X, 재할당 Oconst → 재선언 X, 재할당 X호이스팅(hoisting)var → 선언이 끌어올려지며 undefined로 초기화.let, const → 선.. 브라우저는 어떻게 동작할까? 우리가 흔히 쓰는 브라우저는 어떻게 동작할까?www.naver.com , www.google.com 등 URL을 치면 어떤 일이 벌어지는 걸까?간단하게 말하면 : URL입력 -> HTML -> CSS -> JS -> UI 1. URL 입력 & 요청 과정사용자가 브라우저 주소창에 https://example.com 입력하면 아래 과정이 시작.DNS 조회입력한 도메인(example.com)을 IP 주소로 변환.브라우저 캐시, OS 캐시, DNS 서버를 순차적으로 확인.서버에 HTTP 요청IP 주소가 확인되면 해당 서버에 HTTP 또는 HTTPS 요청을 송신.요청에는 메서드(GET, POST 등), 헤더, 쿠키 등이 포함. 2. 서버 응답 & 데이터 전송서버에서 응답서버는 요청을 처리하고, HTML, CSS,.. [CSS] CSS의 Cascading 이란? CSS 란? => Cascading Style Sheets.Cascading => 폭포? 떨어지다? => 계단식 작용? => ??? - 요약CSS에서 Cascading은 여러 스타일 규칙이 충돌할 때 최종적으로 어떤 스타일이 적용될지를 결정하는 과정. - 최종 스타일 결정 기준 (우선순위 순으로 적용됨)중요도(Importance) → !important가 있는 스타일이 최우선 적용.우선순위(Specificity, 명시도) → ID > 클래스 > 태그 순으로 높은 우선순위를 가짐.선언 순서(Order of Appearance) → 같은 우선순위라면, 나중에 작성된 스타일이 적용. - 핵심 포인트!important는 가장 강한 우선순위를 가짐.ID 선택자가 클래스나 태그보다 우선 적용.동일한 우선순.. [시멘틱 태그] 시맨틱 태그? 시맨틱 태그를 왜 쓸까? 시멘틱 태그, 시멘틱 태그 하는데 시멘틱 태그란 무엇일까?그냥 랑 뭐가 다를까? - 시멘틱 태그란?시멘틱(Semantic) 태그 : 의미가 있는(semantic) HTML 태그로, 단순한 나 대신 태그 자체가 구조와 역할을 나타내는 태그.- 시멘틱 태그의 장점1. 가독성이 좋아짐코드만 봐도 구조와 역할을 쉽게 이해할 수 있음 대신 를 사용하면 의미가 명확해짐2. 검색 엔진 최적화(SEO) 향상검색 엔진이 페이지 구조를 더 잘 이해하여 검색 순위를 높이는 데 도움됨, 등을 사용하면 중요한 콘텐츠로 인식됨3. 웹 접근성(Accessibility) 향상스크린 리더가 태그의 의미를 이해하여 장애인을 위한 웹 접근성이 개선됨예: 를 사용하면 내비게이션 영역을 자동으로 인식4. 유지보수 용이개발자가 코드 구조.. 이전 1 2 3 4 ··· 7 다음