기록하는 개발자

나는 처음 프론트엔드를 공부할 때, 당시 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은 단순..

이번 하반기 면접을 준비할 때 java, javascript 위주로 준비하면서 cs 공부도 했는데 공부할수록 새록새록 기억이 나는게 뇌가 살아나는 느낌.... 공부겸 정리겸 공부했던 cs 지식들을 기록하면 좋을 것 같다. 프로그램, 멀티프로그래밍, 멀티태스킹, 프로세스, 스레드, 멀티스레드, 멀티프로세스, 멀티프로세싱, etc... 이름 비슷한 녀석들의 종류가 참 많다.. 헷갈리는 녀석들을 짚고 넘어가보자 프로그램(Program) & 프로세스(Process) 프로그램(Program) 사전적 의미로는 '어떤 작업을 위해 실행할 수 있는 파일'로 컴퓨터가 실행할 수 있는 명령어들의 집합이다. 프로세스(Process) 컴퓨터에서 실행 중인 프로그램으로 각각의 프로세스는 독립된 메모리 공간을 할당 받으며 명령어..

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

https://school.programmers.co.kr/learn/courses/30/lessons/178870 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 전체 코드 class Solution { public int[] solution(int[] sequence, int k) { int[] answer = new int[2]; int resultLen = sequence.length+1; int min = 0, max = 0, sum = 0; while(true){ if(sum >= k) sum -= sequence[min++]; // sequen..