브라우저가 웹 페이지를 불러올 때는 웹킷(Webkit), 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지를 이루는 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 이 과정은 크게 DOM, CSSOM, 렌더트리 그리고 레이아웃을 포함하며 이러한 프로세스를 CRP(Critical Rendering Path)라고 한다. ✅ CRP(중요 렌더링 경로)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다.  1. DOM 생성브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다.✅ DOM(Document Object Model..

https://school.programmers.co.kr/learn/courses/30/lessons/12916 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr입력으로 주어진 문자열 내에 p와 y의 개수를 비교하는 문제이다.   처음 나의 풀이function solution(s){ var answer = true; var p = 0; var y = 0; s = s.toLowerCase(); s.split('').forEach(i => { if (i === 'p') p += 1; if (i === 'y') y..

삶에서 하고 싶은 것도 많고 해야 하는 것도 많다. 그리고 대체로 해야 하는 것은 하고 싶지 않다는게 문제이다.둘 중에 뭐가 더 중요한지에 대해서 이야기하는 글은 아니다. 꼭 다 큰 어른이 아니더라도 세상을 좀 살다보면 둘 중 뭐가 더 중요한지는 중요하지 않다는 것을 알게 되기 때문이다. 이 두 가지는 둘 중 하나를 고르는 선택지 같은 것이 아니다.  해야 하는 것은 보통 나에게 필요하거나 도움이 되는 일인 경우가 많다. 그렇기 때문에 많은 사람들이 할 일을 두고 '하기 싫다, 하기 싫다' 거리면서도 그 고통을 참아가며 하는 거일 것이다.  하고 싶은 것은 '그냥 하고 싶어서''하고 싶으니깐' 이게 맞다 사실 여기서 내가 따로 말하지 않아도 하고 싶은 건 참기 힘든 것이 인간이기 때문에 아마 다들 잘 하..

우리 프로젝트의 아주 중요한 핵심 기능 중 하나는 '실시간으로 진행되는 문제 풀이 기능'이다. 표준 웹소켓을 이용해 구현하였다. http 통신만 해오다가 ws 통신을 하려니 시작 당시엔 나에게 꽤 큰 도전이었다. 거기다 (기획적인 면에서) 플로우가 제법 복잡했기에, 특히 처음 구현 시에 머리가 많이 아팠던 기억이 난다. 그래도 좋은 경험이 돼서 꼭 정리해봐야지 하다가... 벌써 반년도 넘게 미루다가 지금까지 왔다.ㅋ그렇게 해서 (드디어) 이번 시리즈는 두 개의 포스팅에 걸쳐 해당 기능 구현을 위해 왜 WebSocket을 선택하였는지부터, 적용하며 마주한 문제 상황과 해결한 과정들을 정리하여 이야기해보려고 한다. 왜 WebSocket인가?✅ 웹소켓(WebSocket) : 사용자의 브라우저와 서버 간 지속적..

지난 주 웹소켓 관련 이슈를 해결하면서 리액트의 생명주기에 대한 이해가 아직 부족하다는 생각이 들었다. 거기다 문제 해결의 열쇠가 useEffect 쪽에 있었는데, 어쩌다보니 해결된 느낌이었어서 이에 대해서도 좀 더 제대로 공부해볼 필요성을 느꼈다. 따라서 이번 주제는 React LifeCycle과 useEffect Hook이다. 두 가지는 연관성도 깊고 매우 중요한 개념인만큼 포스팅 길이가 다소 길어질 예정이지만, 공식문서를 특히 많이 참고하여 작성하였으니 가능한 한 정독^^해볼 것을 추천한다. React Lifecycle리액트에는 생명주기라는 것이 있다. 라이프사이클이라고도 하는데, 이는 리액트의 컴포넌트가 생성되고 소멸되기까지의 기간을 의미한다. 크게 마운트, 업데이트, 언마운트로 과정을 나눈다. ..

뜬금 선언 먼저 하고 시작할게여ㅛ저 코테 언어 JS로 바꿈아니 사실 오늘 아침에 코테를 봤는데 언어가 자스로 제한된거임 !!.. 나 알고리즘에선 초면이란 말이얘,,그래서 하루동안 벼락치기 하고결과는 시원하게 조짐 그래서 바꿔요 는 아니고 요새 확실히 파트별로 프론트면 JavaScript, 백엔드면 JAVA 이런식으로 언어 제한 두는 기업들이 늘어나고 있는데겸사겸사 자스 공부도 제대로 해보고 싶기도 했고, 아무래도 주로 다루는 언어로 알고리즘까지 하면 그 언어에 대해서 아는 깊이감도 생기게 되니분명 개발할 때도 도움이 될 것 같다 판단하여 바꿉니다 ...한두달 전인가에 이미 한 번 고민했다가 그냥 파이썬 하자~ 했었던 나ㅎㅎ   사족이 길었네요 예바로 스따뚜     문제 https://www.acmicpc..