코딩 일기장

⭐️ React 란? UI 자바스크립트 라이브러리로 SPA(Single Page Application)의 UI를 생성하는데 집중한 라이브러리입니다. SPA의 UI를 만드는 자바스크립트 라이브러리이다보니, SPA 제작을 하는 다른 프레임워크(Angular, Vue)에 비해 부족한 부분이 있습니다. 예) 리액트는 페이지 전환 기능을 제공하지 않기 때문에 react-router와 같은 추가적인 라이브러리를 사용해야 합니다. ⭐️ React 의 특징 단방향 데이터 바인딩 단 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신합니다. 사용자가 UI를 통해 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신하게 됩니다. 하나의 Watcher를 사용하기 때문에 양방향 데이터..

SPA와 MPA SPA (Single Page Application) React, Vue와 같은 프레임워크처럼 하나의 페이지로 구성된 웹 어플리케이션 입니다. SPA는 CSR 방식을 채택합니다. MPA (Multi Page Application) 탭을 이동할 때마다 서버로부터 화면에 필요한 새로운 HTML 파일을 받아와서 페이지 전체를 새로 렌더링하는 전통적인 방식입니다. MPA는 SSR 방식을 채택합니다. 브라우저 렌더링은 크게 CSR과 SSR의 방식으로 나누어집니다. CSR (Client Side Rendering) 렌더링이 클라이언트 쪽에서 일어납니다. 서버는 요청을 받으면 클라이언트에게 HTML과 JS 파일을 보내줍니다. 클라이언트는 해당 콘텐츠를 받아 렌더링을 시작합니다. 유저가 서버에 웹사이트..

🔅 Webpack이란? 모듈 번들링이라고 하는데, html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 합니다. 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 의미합니다. 왜 Webpack을 사용할까? SPA를 사용하면서 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함됩니다. 종속된 여러 자바스크립트 파일들을 하나로 묶음으로서 관리하기 편하다. 파일을 컴파일 할 때 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에, 이를 해결하기 위해 여러 자바스크립트 파일을 하나의 파일로 번들링한다. 하나의 자바스크립트 파일로 만들기 때문에 웹페이지 성능 최적화를 해준다. 🔅Babel 이란? ES6+ 버전의 ..

동기와 비동기는 호출되는 함수의 작업 완료 여부를 신경쓰냐에 대한 개념이고, 블록킹과 논블록킹은 코드를 실행할 수 있는 권리인 제어권이 누구에게 있느냐에 대한 개념이다. 👉 동기와 비동기 호출되는 함수의 작업 완료 여부를 신경쓰냐가 최대 관심 여부! 함수 실행과 리턴이 순차적인 흐름을 따르느냐, 따르지 않느냐 동기 (Synchronous) 함수 A가 함수 B를 호출하고, B의 작업 완료 후 리턴을 기다리거나 B의 작업 완료 여부를 스스로 계속 확인하며 신경쓰면 Synchronous 비동기 (Asynchronous) 함수 A는 함수 B를 호출한 후로 B의 작업 완료 여부에는 신경쓰지 않는다. 함수 A가 함수 B를 호출할 때 콜백 함수를 함께 전달해서, 함수 B는 작업이 완료되면 콜백 함수를 실행한다. 👉 ..

태스크 큐는 콜백 함수들이 대기하는 큐(FIFO) 형태의 배열이라 할 수 있고, 이벤트 루프는 호출 스택이 비워질 때마다 태스크 큐에서 콜백 함수를 꺼내와서 실행하는 역할을 한다. 자바스크립트 싱글스레드 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있다. 비동기로 동작하기 때문에 싱글스레드임에도 동시에 많은 작업을 처리할 수 있다. 하지만 비동기로 동작하는 핵심 요소는 자바스크립트가 아닌 브라우저가 가지고 있다. 자바스크립트 엔진이 단일 호출 스택을 사용하기는 하지만, 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되며, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바스크립트 엔진과 상호 연동하기위해 사용하는 장치가 바로 이벤트 루프이다. 메모리 힙 ..

⭕️ 문제 ⭕️ 문제 접근 이 문제는 다른 레벨3 문제에 비해 많이 쉬운것 같다. 리스트에서 주어진 구간 내의 합을 구하고, 평균을 구해주면 되는 문제이다. 이 문제에서는 소수점 자리에 맞게 포맷팅 하는 부분을 주의깊게 봐 두면 될 것 같다. print("{0:.2f}".format(숫자))) round 함수를 사용하게 되면 45 같이 정수의 형태는 자릿수에 맞게 표현이 불가능하다. 따라서 format 함수를 사용하여 소수점 둘째 자리까지 평균을 표현해준다. 코딩테스트에서는 포맷에 맞게 표현하는게 중요하니 기억해두자! ⭕️ 문제 풀이 import sys N, K = map(int, sys.stdin.readline().split()) scores = list(map(int, sys.stdin.readli..

운영체제 입장에서 작업의 최소 단위는 프로세스이고, CPU 입장에서 작업의 최소 단위는 Thread이다. 프로세스(Process)란 운영체제로부터 시스템 자원을 할당받는 작업의 단위 CPU 시간 운영되기 위해 필요한 주소 공간 Code, Data, Stack, Heap의 구조로 되어 있는 독립된 메모리 영역 한마디로 실행된 프로그램을 의미함 어떠한 작업을 위해 실행할 수 있는 파일 기본적으로 각 프로세스는 1개의 스레드를 가진다. 각 프로세스는 독립된 메모리 영역이므로 다른 프로세스의 변수나 자료 구조에 접근할 수 없다. 한 프로세스가 다른 프로세스의 자원에 접근하려면 IPC(Inter-Process-Communication)를 사용해야 한다. 스레드(Thread)란 프로세스 내에서 실행되는 흐름의 단위..

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 대기열 브라우저는 주소창 입력에 대한 요청을 대기열에 넣습니다. 캐싱 요청된 값의 결과값을 저장하고, 그 값을 다시 요청하면 저장해 둔 값을 다시 제공하는 기술. 다시 불러오지 않아도 되므로 속도 개선 효과가 있음. 공유 프록시 캐싱 요청한 서버에서 프록시서버가 캐싱을 하는 것을 의미한다. ex) Node.js 서버의 경우 앞단의 프록시 서버로 nginx 서버를 둬서 이 서버를 캐싱 서버로 사용하는 경우 브라우저 캐시 쿠키, 로컬스토리지 등을 포함한 캐시이다. 브라우저 자체가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말한다. DNS 조회 ..

🫠 문제 🫠 풀이 방법 전형적인 dp 문제입니다. 하지만 dp에 익숙하지 않은 저는 처음에 dp 문제인지 파악이 힘들었습니다ㅎㅎ dp문제도 열심히 연습해야겠습니다 😭 사실 답안을 봤음에도 처음에는 이해하기 어려웠습니다. 아래는 제가 이해한 내용입니다. 바깥 for문: 우선 돌다리를 처음부터 끝까지 한번 탐색합니다. 안쪽 for문: 탐색할 때, 현재 탐색하는 돌(stones[i])와 지나온 돌(stones[j])값을 비교합니다. 현재 탐색하는 돌(stones[i])이 지나온 돌(stones[j])보다 높다면 건널 수 있다는 뜻입니다! 그래서 지나온 돌을 건널 때(dp[j]+1)와 건너지 않을 때(dp[i])의 값을 비교하여 큰 값을 현재 돌의 dp값으로 업데이트 합니다. 이렇게 해 주면 dp array의 ..

진짜 이 문제 풀다가 화가 많이 났어요... 요즘 제가 이상한 걸수도 있는데 소프티어 문제들은 뭐랄까... 엄청 성질을 박박 긁는달까요...?^^// 제가 더 분발할게요.... 소프티어 레벨3을 한번에 풀어버리는 멋진 알고리즘 왕이 되는 그날까지...⭐️ 🫠 풀이 접근 모든 얼음이 녹을 떄까지 bfs 탐색을 반복합니다. 이 때, visited 변수를 초기화 시키는거 잊지 말기! 상하좌우를 탐색할 때, 앞으로 탐색할 칸이 얼음인지 혹은 얼음이 아닌데 방문한 적이 없는 곳인지 파악해야 합니다. 이렇게 하면 얼음 내부는 탐색하지 않고 얼음 밖의 영역만 탐색을 하게 됩니다! 두 면이 닿은 얼음 (visited >= 2)인 얼음은 녹여줍니다 🫠 풀이 과정 import sys from collections impo..