![[troubleshooting] react 렌더링이 2번 발생하는 에러](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWjDyL%2FbtrRvbIMjgw%2F9DQDJJIOcTXSjixOYdk8G0%2Fimg.png)
1. 상황 - front : react와 server : node(mongoDB)로 이루어진 프로젝트의 백과 프론트 연동 후 어플리케이션 동작시, 랜더링이 완료되면 console에 문구가 찍히도록 설정해놓았으나, 두번 발생되는 현상 발생. 2. 원인 - 프론트의 index.js에서 app 소환시 React.StrictMode 로 불러왔기 때문. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. - 리액트 공식문서 3. 해결방안 - React.StrictMode 삭제 4. 결과..
![[troubleshooting] proxy is not a function](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8jkWF%2FbtrRuw0FUZl%2F0KbDYYqHRhnQUONs9zqQE1%2Fimg.png)
0. 상황 - front : react와 server : node(mongoDB)로 이루어진 프로젝트의 백과 프론트 연동을 위한 프록시 작업 진행 중, proxy is not a function 이라는 문구와 함께 프론트 서버가 가동되지 않는 상황 발생. 1. 에러코드 전문 - proxy is not a function 2. 원인 - http-proxy-middleware 버전업으로 인해 사용방법이 바뀌었기 때문에 발생된 에러 3. 해결방안 - 아래 사진과 같이 코드를 좌측에서 우측으로 수정 //버전없된 http-proxy-middleware의 사용방법 const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = ..
![[CS] 프로세스(process)와 스레드](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAgQMd%2FbtrPyKf1QjU%2FAGbjOXaKtpgiY93rRkzil1%2Fimg.png)
프로세스 : 컴퓨터에서 실행되고 있는 프로그램을 말함. CPU 스케쥴링의 대상이 되는 작업(task)라는 용어와 유사한 의미. 스레드 : 프로세스 내 작업의 흐름을 지칭. 프로그램이 메모리에 올라가면 프로세스가 되는 인스턴스화 일어나고, 운영체제의 CPU 스케줄러에 따라 CPU가 프로세스를 실행. 1. 프로세스와 컴파일 과정 - 프로세스 : 프로그램으로부터 인스턴스화 된 것을 말함. ㄴ ex) 프로그램 : chrome.exe / 두번 클릭시 구글 크롬 '프로세스' 시작. 1. 컴파일러(Compiler) - 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어 혹은 컴퓨터 언어로 옮기는, 일종의 번역 프로그램. - 비주얼, 터보, 볼랜드 등 언어에 따라 다양한 컴파일러 종류가 존재한다. - 보통 ..
![[CS] CPU스케줄링 알고리즘](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGHiB0%2FbtrPzAKNS6c%2FbXkQ8PwKDcdiBzkqKwZI60%2Fimg.png)
CPU스케줄러는 CPU 스케줄링 알고리즘에 따라 프로세스에서 해야하는 일을 스레드 단위로 CPU에 할당함. 프로그램이 실행 될 때, CPU 스케쥴링 알고리즘이 어떤 프로그램에 CPU 소유권을 줄 것인지 결정. 이용률은 높게, 주어진 시간에 많은 일을 하게, 준비 큐(ready que)에 있는 프로세스는 적게, 응답시간은 짧게 설정하는것을 목표로 함. 1. 비선점형 방식(non-preemptive) - 프로세스가 스스로 CPU 소유권을 포기하는 방식이며, 강제로 프로세스를 중지하지 않음. ㄴ컨텍스트 스위칭으로 인한 부하가 적음. 1) FCFS(First Come, Fist Served): 가장 먼저 온 것을 가장 먼저 처리하는 알고리즘 - 길게 수행되는 프로세스 때문에 준비 큐에서 오래 기다리는 현상(co..
![[CS] 운영체제(OS)와 컴퓨터](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbLD3wr%2FbtrPvjjs6ca%2FKskuLdG7npbQOyDd5UtDK1%2Fimg.png)
컴퓨터 : 하드웨어와 소프트웨어를 관리하는 운영체제와 CPU, 메모리 등으로 이루어짐. 1. 운영체제의 역할과 구조 1] 운영체제의 역할 1) CPU 스케쥴링과 프로세스 관리 : CPU 소유권을 어떤 프로세스에 할당할지, 프로세스의 생성과 삭제, 자원할당 및 반환 관리. 2) 메모리 관리 : 한정된 메모리를 어떤 프로세스에 얼만큼 할당할지 관리. 3) 디스크 파일 관리 : 디스크 파일을 어떤 방법으로 보관 할 지 관리. 4) I/O 디바이스 관리 : I/O 디바이스들인 마우스, 키보드와 컴퓨터간에 데이터를 주고받는 것을 관리. 2] 운영체제의 구조 - 유저 프로그램과 하드웨어 사이를 운영체제라고 부름 cf) 리눅스 서버 : GUI 없이 CUI만 있음. 더보기 * GUI : 사용자가 전자장치과 상호 작용할..
![[CS] 메모리란?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FO3gxw%2FbtrPwY7lLq8%2Fn296w8UdzZlkupYFGWbgpK%2Fimg.png)
CF) CPU : '메모리'에 올라와 있는 프로그램의 명령어들을 실행할 뿐. 1. 메모리 계층 : 레지스터, 캐시, 저장장치. - 레지스터 : CPU 안에 있는 작은 메모리. 휘발성. 속도 : 가장 빠름. 기억용량 : 가장 적음. - 캐시 : L1, L2 캐시를 지칭. 휘발성. 속도 빠름. 기억용량 적음. (L3캐시도 있음). - 메모리(RAM, 주기억장치) : RAM. 휘발성. 속도 : 보통. 기억용량 : 보통. ㄴ HDD로부터 일정량의 데이터를 복사, 임시저장 후 필요시마다 CPU 에 전달. - 보조기억장치 : HDD, SDD를 일컬음. 휘발성. 속도낮음, 기억용량 많음. 1] 캐시(cache) : 데이터를 미리 복사해 놓는 임시 저장소. - 빠른 장치와 느린 장치에서 속도 차이에 따른 병목현상을 줄..
* 운영체제(OS, Operating System) : 사용자가 컴퓨터를 쉽게 다루게 해주는 인터페이스. - 한정된 메모리나 시스템 자원을 효율적으로 분배. - cf) 펌웨어(firmware) : 운영체제와 유사하지만, 소프트웨어를 추가로 설치할 수 없는 것. 1. 운영체제와 컴퓨터 2. 메모리 3. 프로세스와 스레드 4. CPU 스케줄링 알고리즘
![[프로그래머스] 코딩테스트 입문/ 사칙연산 / 몫 구하기(C, Java, JavaScript, Python)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8RwXB%2FbtrN78hMjbV%2F3bjvP268kj9kG3kbkHaHZK%2Fimg.png)
[프로그래머스] 코딩테스트 입문/ 사칙연산 / 몫 구하기 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 제한사항 0 < num1 ≤ 100 0 < num2 ≤ 100 문제 풀이 C //C언어 풀이 #include #include #include int solution(int num1, int num2) { int answer = num1 / num2; return answer; } Java //Java 풀이..
![[프로그래머스] 코딩테스트 입문/ 사칙연산 / 두 수의 곱(C, Java, JavaScript, Python)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb7wEy6%2FbtrN8A6nIqu%2FaZSk1oxl0EnR6FzUmD24m0%2Fimg.png)
[프로그래머스] 코딩테스트 입문/ 사칙연산 / 두 수의 곱 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ num1 ≤ 100 0 ≤ num2 ≤ 100 문제 풀이 C //C언어 풀이 #include #include #include int solution(int num1, int num2) { int answer = num1 * num2; return answer; } Java //Java 풀이..
![[프로그래머스] 코딩테스트 입문/ 사칙연산 / 두 수의 차(C, Java, JavaScript, Python)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc7rOKD%2FbtrN5kiTv3R%2F6kquTSIUKKnFRGKgiAJ5nk%2Fimg.png)
[프로그래머스] 코딩테스트 입문/ 사칙연산 / 두 수의 차 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 return하도록 soltuion 함수를 완성해주세요. 제한사항 -50,000 ≤ num1 ≤ 50,000 -50,000 ≤ num2 ≤ 50,000 문제 풀이 C //C언어 풀이 #include #include #include int solution(int num1, int num2) { int answer = num1 - num2; return answer; } Ja..
![[프로그래머스] 코딩테스트 입문/ 사칙연산 / 두 수의 합(C, Java, JavaScript, Python)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcuT93f%2FbtrN656A4o5%2FJiiHFPEgKuapthB3tUkF4k%2Fimg.png)
[프로그래머스] 코딩테스트 입문/ 사칙연산 / 두 수의 합 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return 하도록 soltuion 함수를 완성해주세요. 제한사항 -50,000 ≤ num1 ≤ 50,000 -50,000 ≤ num2 ≤ 50,000 문제 풀이 C //c언어 풀이 #include #include #include int solution(int num1, int num2) { int answer = -1; answer = num1 + num2; return a..
![[CS] HTTP(HTTP/1.0, HTTP/1.1, HTTP/2, HTTPS, HTTP/3)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbT4vCL%2FbtrNKU6DO6L%2FFRwgnUAW4shF5YQxqGCgH0%2Fimg.jpg)
HTTP(Hyper Text Transfer Protocol) - 인터넷에서 HTML 문서와 같은 데이터를 주고받을 수 있도록 해주는 프로토콜. - 애플리케이션 계층으로, 웹 서비스 통신에 사용. 1. HTTP/1.0 - 한 연결당 하나의 요청을 처리하도록 설계됨 -> RTT증가 ㄴ 서버로부터 파일을 가져올 때 마다 TCP의 3-웨이 핸드셰이크를 계속해서 열어야 하기 때문. *RTT : 패킷이 목적지에 도달하고 나서 다시 출발지로 돌아오기까지 걸리는 시간이며 패킷 왕복 시간. RTT의 증가를 해결하기 위한 방법 - RTT가 증가 -> 서버에 부담이 많이 가고 사용자 응답 시간이 길어짐. ㄴ 이미지 스플리팅, 코드 압축, 이미지 Base64 인코딩 사용. 이미지 스플리팅 - 많은 이미지를 다운로드받게 되면..