기록하는 개발자

나는 처음 프론트엔드를 공부할 때, 당시 vue, angular 보다 react의 생태계가 더 넓고 커뮤니티가 활성화 되어있기 때문에 react를 선택했다. vue의 점유율은 꾸준히 오르고 있는데 실제로 취업 공고에도 vue가 많이 보이고 카카오에서도 react와 vue, angular를 함께 사용한다. react와 vue의 github issue나 star수만 보면 사실 차이가 많이 나긴 한다. react - issue 1.2k, start 220k vue - issue 691, start 43.6k 그렇다면 react와 vue의 장단점, 공통점과 차이점을 알아보자. React React는 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위해 사용된다. - SPA(Single Page Applica..

내가 지금까지 무심코 써왔던 CSS 스타일링 방법이 사실은 CSS 방법론이라는 이름하에 여러 개로 나눠지고 있었다. 가장 유명한 BEM, OOCSS, SCACSS 세 가지 중 무엇을 쓰는 것이 효율적인가에 대해 많은 이야기가 있는데 알고 보니 나는 이 3가지를 모두 섞어서 쓰고 있었다🫢 더 놀라운 점은 실제로 한 가지만 쓰는 것보다는 두 가지 이상을 섞어 쓰면서 개별적인 단점을 보완하는 것이 더 유리하다는 것이다🫢🫢🫢 그렇다면 세 가지 방법론에 대해 알아보자 1. BEM 블록(Block), 요소(Element), 상태(Modifier)로 구분하여 클래스 이름을 작성하는 방법론이다. 각 부분을 __와 --로 구분하여 클래스명을 짓게 된다. Ex) Block__Element—Modifier 1. Block ..

브라우저의 렌더링 과정 https://mingmeng030.tistory.com/316 브라우저의 렌더링 과정과 Reflow, Repaint 브라우저의 렌더링 과정 Parsing→Style→Layout→Paint→Composite Parsing(DOM Tree, CSSOM Tree 구성) HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 H mingmeng030.tistory.com Parsing(DOM Tree, CSSOM Tree 구성) → Style(Render Tree 구성) → Layout(Render Tree 배치 : Reflow) → Paint(Render Tree 그리기 : Repaint) → Composite Display ..

브라우저의 렌더링 과정 Parsing→Style→Layout→Paint→Composite Parsing(DOM Tree, CSSOM Tree 구성) HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. 브라우저가 페이지를 렌더링하려면 가장 먼저 받아온 HTML 파일을 해석해야한다. Parsing 단계는 HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다. CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다. Style(Render Tree 구성) Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성한다. Render Tree는 실제로 화면..

DOM(Document Object Model 문서 객체 모델) HTML 또는 XML 문서에 접근하기 위한 인터페이스로, HTML element들을 Tree 형태로 표현한 것이다. 우리의 IDE에서 작성한 HTML이 아닌, 작성 된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 Node Tree가 DOM이다. DOM tree안에는 각 element에 상응하는 Node가 들어있고, 이러한 DOM은 API(getElementById, querySelector 등)를 제공하여 Javascript로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능하게 한다. IDE에 HTML을 작성해도 최종적으로 결과 화면을 보기 위해서는 브라우저가 필요하다. IDE에 작성된 HTML은 단순..

cookie, session, cache , localstorage, sessionstorage 🤔 개발할 때 사용하는 저장소도 참 다양하다. web storage 정도만 사용해봤는데 쿠키, 세션, 캐시는 개발을 하지 않아도 접해본 용어들일 것이다. 그렇다면 이 저장소들의 차이점은 뭘까? 그 전에, 저장소를 사용해야하는 이유는 뭘까? HTTP (HyperText Transfer Protocol) HTTP는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜로, 클라이언트와 서버는 이 HTTP를 통해 통신한다. 이 HTTP의 특징에는 connectionless(비연결성), stateless(무상태)가 있다. connectionless(비연결성) 실제 요청을 주고 받을 때만 연결을 유지하고, 요청 후 응답이 종..

타입 추론 변수 선언 시 타입을 쓰지않아도 컴파일러가 스스로 판단하여 타입을 넣어주는 것 타입을 추론하는 경우 1. 초기화된 변수 let num = 10; num에 대한 타입을 따로 지정하지 않더라도 10으로 초기화 되었으므로 number로 간주된다. 2. 기본값이 설정된 매개변수 function cook (how = 'cut', ingredient: string): void { console.log(`${how} the ${ingredient}`); } 변수 how는 변수 ingredient와 달리 "cut"으로 기본값이 설정된 매개 변수이다. 이는 typescript에 의해 string으로 타입 추론 되므로 how : string = "cut" 과 같이 작성할 필요가 없다. 3. 반환 값이 있는 함수..

nextjs+typescript+tailwindcss 환경에서 영화 api를 사용한 토이 프로젝트를 진행중이다. (영화 api https://developer.themoviedb.org/reference/intro/getting-started) https://mingmeng030.tistory.com/270 axios .get(`${config.api}/api/search/${keywordToShow}/${pageParam}`) .then((res) => { return res; }); api 호출 결과 response - data 객체 내 현재 페이지 번호(page) , 영화 리스트(results), 전체 페이지 수(total_pages), 전체 결과 수(total_results)가 있다. (2) us..