분류 전체보기
-
[CS Study] 브라우저 랜더링 과정네트워크/CS Study 2024. 2. 14. 22:39
개요 1. WHY? 2. 브라우저 랜더링 과정 3. Reflow / Repaint 4. CRP ✅ why? 📦 내가 느끼는 브라우저 랜더링이 중요한 이유 대부분의 프로그래밍 언어는 운영체제 또는 가상머신에서 실행되지만 자바스크립트의 경우 클라이언트에서 실행되기에 랜더링 과정을 통해서 어떻게 실행되는지 파악해야한다.(Node.js에서 실행시에는 다름) 브라우저에서 HTML, CSS, JS는 함께 실행된다. 화면이 그려지는 원리에 대해 파악함으로써 어느 부분에서 문제가 일어났는지 예측할 수 있고 이를 토대로 효율적이고 의도에 맞게 코드를 작성할 수 있다. 사용자 경험을 향상시키기 위한 성능 최적화 시에 어떤 부분을 얼마만큼 최적화 시켰는지 최적화 시킬 수 있는 요소는 어떤 것이 있는지 알 수 있다. 클라이언..
-
[프로그래머스 1단계] [1차] 다트 게임알고리즘 2024. 2. 13. 18:09
❓문제 설명 다트게임을 할것임 3번을 던져서 보너스도 있고 감점하게 만드는 요소도 있음 게다가 다트가 박히는 구역별로 제곱값 또는 세제곱값을 주는 요소도 있음 그래서 대충 "1D2S#10S" 이런식으로 문자열이 나오는데 이걸 점수로 바꿔놓아야함 부가적은 조건은 문제에 보면 있음 그거 보면서 풀어보셈 ✅ 문제 해결 예외에 대한 처리를 해야하는데 어디서부터 해야할지 막막했음. *이게 연산을 개떡같이 하니깐 이거부터 처리할까하다가 반복문을 돌리게 되면 문자 하나씩 들어갈텐데 10이라는 숫자가 눈에 띄었음 그래서 이거 먼저 처리하고 나머지 값에 대해서 처리를 해야할 것 같음 이후에는 반복문을 돌았을 때 어떠한 값을 return해주면 되는데 이럴 때에는 break를 쓰는게 좋을 것 같아 switch를 사용해보겠음..
-
[프로그래머스 1단계] [1차] 비밀지도알고리즘 2024. 2. 5. 18:29
❓문제 설명 한 변의 길이가 n인 정사각형이 있음 변의 길이만큼 블록이 나올 것임 ex)4 x 4 각 블록을 겹처서 최종적으로 하나의 블록을 만들어야 함 블록이 한군데라도 칠해져있다면 칠한채로 둘다 칠해지지 않았다면 안칠한채로 합칠 것임 주어지는 값은 변의 길이인 n, 배열 2개 (2진법으로 바꿔야하는 것임) 출력값으로 비밀지로를 만들어야 함 ex) ["#####","# # #", "### #", "# ##", "#####"] ✅ 문제 해결 배열 두개를 index값을 통해 가져와서 합칠 것임 그리고 그 합친 값에 대해서 0 = " ", 1 = "#"으로 바꿀 것임 이진법으로 나타내는 방법을 알아야 함 문자열.toString(2) 원하는 길이만큼 만들어야하는데 둘 다 앞이 0일때는 길이가 점점 줄어든다 그..
-
[CS Study] 디자인 패턴네트워크/CS Study 2024. 2. 4. 12:32
정의 소프트웨어를 개발하는 과정의 반복되는 일반적인 문제들에 대해 기준이 되는 해결책을 제공하는 중요한 개념으로 소프트웨어의 특정 구현을 직접 제공하지는 않지만, 반복되는 문제 상황들을 최적화된 방법으로 해결하도록 돕는 컨셉들이다. ⚠️ 주의사항 모든 문제에 대해서 적용할 수 있는 묘책이 아니다. 억지로 적용하려고 하면 안된다. 과도하게 고민하지마라. 올바른 방식으로 사용하고 있는지에 대해서 고민해라. Hooks 패턴 전통적인 디자인 패턴들이 Hooks로 다수 교체될 수 있게 됨에 따라서 생명주기와 관련된 메서드를 사용하지 않게 되었다. Hooks가 디자인 패턴이 아닐 순 있지만 React에서 중요한 역할을 한다. state, effect, 기타 커스텀 훅을 통해서 class에서 사용한던 것보다 편리하..