반응형 eSTRELLa177 클린코드 TIL #06 클린코드 TIL #06 DAY 06 📓 오늘 읽은 범위 04장 주석 💡 책에서 기억하고 싶은 내용을 써보세요 주석은 쉰들러 리스트가 아니다. 주석은 ‘순수하게 선하지'목하다. 사실상 주석은 기껏해야 필요악이다. (p.68) 진실은 한곳에만 존재한다. 바로 코드다. 코드만이 자기가 하는 일을 진실되게 말한다. 코드만이 정확한 정보를 제공하는 유일한 출처다. 그러므로 우리는 (간혹 필요할지라도) 주석을 가능한 줄이도록 꾸준히 노력해야 한다. (p.69) 주석은 나쁜 코드를 보완하지 못한다. (p.69) 표현력이 풍부하고 깔끔하며 주석이 거의 없는 코드가, 복잡하고 어수선하며 주석이 많이 달린 코드보다 훨씬 좋다. 코드로 의도를 표현하라! (p.69) 좋은 주석 (p.69) 명심하길 바란다. 정말로 좋은 주석.. 2022. 2. 24. [CSS] BEM (Block Element Modifier) BEM 의미 BEM은 Block, Element, Modifier로 구성된 클래스 이름을 짓는 CSS 방법론이다. BEM 방법론은 id에서 사용하지 않으며, 오직 class명에만 활용할 수 있다. "어떻게 보이는가"가 아니라 "어떤 목적인가"에 따라 이름을 짓는다. Block Element Modifier 재사용 가능한 독립적인 블록 블록을 구성하는 종속적인 하위 요소 블록 또는 요소의 변형 (모양, 상태, 동작) BEM을 사용하는 이유 BEM 명명 규칙은 세 가지 뚜렷한 이점을 제공 BEM은 목적 또는 기능을 전달 BEM은 구성 요소의 구조를 전달 BEM은 선택자 특이성을 항상 낮은 수준으로 유지 BEM 특징 의미론적 클래스 선택자 작명 규칙 약어 사용 피하기 다른 형식의 선택자 사용을 제한 --, _.. 2022. 2. 22. 클린코드 TIL #05 TIL-Assignment #05(2022.02.22[화]) DAY 05 📓 오늘 읽은 범위 03장 함수 💡 책에서 기억하고 싶은 내용을 써보세요 직관적인 함수를 작성하는 방법 작게 만들어라!(p.42) 함수를 만드는 첫째 규칙은 ‘작게!’다. 함수를 만드는 둘째 규칙은 ‘더 작게!’다. 중첩 구조가 생길만큼 함수가 커져서는 안된다. 그러므로 함수에서 들여쓰기 수준은 1단이나 2단을 넘어서는 안 된다. 당연한 말이지만, 그래야 함수는 읽고 이해하기 쉬워진다. 한 가지만 해라! (p.44) 함수는 한 가지를 해야한다. 그 한가지를 잘 해야 한다. 그 한가지만을 해야한다. 단순히 다른 표현이 아니라 의미 있는 이름으로 다른 함수를 추출할 수 있다면, 그 함수는 여러 작업을 하는 셈이다. 함수 당 추상화 수준.. 2022. 2. 22. 클린코드 TIL #03 TIL-Assignment #03(2022.02.20[일]) DAY 3 📓 오늘 읽은 범위 02장 의미있는 이름 💡 책에서 기억하고 싶은 내용을 써보세요 이름을 잘 짓는 간단한 규칙(p.22) 의도를 분명히 밝혀라(p.22) 그릇된 정보를 피하라(p.24) 유사한 개념은 유사한 표기법을 사용한다. 이것도 정보다. 일관성이 떨어지는 표기법은 그릇된 정보다. 의미 있게 구분하라(p.24) 읽는 사람이 차이를 알도록 이름을 지어라. 발음하기 쉬운 이름을 사용하라?(p.27) 검색하기 쉬운 이름을 사용하라(p.28) 관점에 따라 긴 이름이 짧은 이름보다 좋다. 검색하기 쉬운 이름이 상수보다 좋다. 이름 크기는 범위 크기에 비례해야 한다. 인코딩을 피하라.(p.30) 멤버 변수 접두어: 클래스와 함수는 접두어가 .. 2022. 2. 20. 클린코드 TIL #02 DAY 2 📓 오늘 읽은 범위 추천사 들어가면서 1장 깨끗한 코드 💡 책에서 기억하고 싶은 내용을 써보세요 “사소한 곳에서 발휘한 정직은 사소하지 않다.” (p.xxii) 장인 정신을 익히는 과정은 두 단계로 나뉜다. 바로 이론과 실전이다. (p.xxxii) 첫째, 장인에게 필요한 원칙, 패턴, 기법, 경험이라는 지식을 습득해야 한다. 둘째, 열심히 일하고 연습해 지식을 몸과 마음으로 체득해야 한다. 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업, 바로 이것이 프로그래밍이다. (p.2) 좋은 코드를 사수하는 일은 바로 우리 프로그래머들의 책임이다. (p.7) 깨끗한 코드는 한 가지에 ‘집중'한다. (p.10) 코드는 추측이 아니라 사실에 기반해야 한다. 반드시 필요한 내용만 담아야 한다... 2022. 2. 20. [Web] 브라우저 렌더링 브라우저 렌더링 우리는 매일 같이 크롬, 사파리 등의 다양한 브라우저를 통해 편리하게 웹사이트를 접속하고, 사용하고 있다. 어떤 방식으로 브라우저에서 웹 페이지가 렌더링 되는지, 그 과정을 정리해보자 한다. 브라우저란 무엇일까? 브라우저의 주요 기능 은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 먼저 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 HTML과 CSS 명세에 따라 명세를 따라 HTML를 해석한다. 브라우저의 구조 브라우저는 크게 화면을 조정하는 영역과 데이터를 조작하는 영역으로 구분 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.. 2022. 2. 9. 리액트(React.js) vs 뷰(Vue.js) 리액트(React.js) vs 뷰(Vue.js) 2021년 StackOverFlow에서 조사한 웹 프레임워크 사용 순위에서 react.js가 1위를 했다. vue의 사용이 증대되고 있지만 아직까지 크게 순위적인 차이가 나지 않은 것 같다. 리액트와 뷰의 차이점이 라이브러리와 프레임워크라는 것은 알고 있었지만, 정확한 차이점에 대해서 인지하지 못한 채 리액트만 사용해왔다. 뷰 역시 사용해 볼 계획이기 때문에 뷰를 학습하기 전 어떠한 차이점이 있는지 궁금했다. 내가 사용하고 있는 도구가 어떤 장점과 단점이 있는지 파악해 보고 사용하도록 하자. UI 라이브러리 vs 프레임워크 react와 vue의 차이점에 있어 가장 대표적인 것은, 먼저 react는 UI 라이브러리이며 Vue는 프레임워크라는 것이다. 라이브러.. 2022. 1. 26. [JavaScript] null과 undefined null과 undefined 나는 아무런 생각이 '없다' JavsScript 뿐만 아니라 다른 언어를 배울때도 느꼈지만 null과 undefined에 대한 차이가 무엇인지 추상적으로만 생각하고 넘겼었다. 그냥 쉽게 생각해서 둘다 '없음'을 나타내는 것이지 차이가 있겠냐라고 생각하고 더 이상 자세히 찾아보지 않으려고 했었다.(너무 찾아볼게 많았기에...) 최근에 '클린코드 자바스크립트'라는 강의를 통해 JavaScript에 대해 공부하던 중 'null과 undefined'에 대한 수업이 있어서 해당 내용을 정리하며 null과 undefined의 차이에 대해 알아보고자 한다. null과 undefined는 무엇이 다른가? Google에 null과 undefined 차이에 대해 찾아보니 이런 이미지가 제일 먼.. 2022. 1. 19. [React] React 18 - Automatic Batching 새로운 React, React 18 2021년 6월 8일 리액트 팀에서 리액트 18 버전에 관한 사항들을 발표한 이후 7개월의 시간이 흘렀다. Alpha와 Beta 버전을 거쳐 현재 RC 단계로, 한달 내에 온전한 React 18 버전을 사용할 수 있을 것으로 기대된다. (리액트 공식 홈페이지 React 18 안내) 최초 알파 버전에서 소개된 내용과 현재 RC 버전에 소개된 내용에서 큰 차이는 없으며, 대부분의 기능이 확정되었다고 보아도 무방하다. 리액트 18의 개선사항들은 아래와 같다. 즉시 사용 가능한 개선 (out-of-the-box improvements) automatic batching (fewer renders) SSR support for Suspense Fixes for Suspense .. 2022. 1. 12. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음 728x90 반응형
