짧은코딩

axios 요청 axios 요청을 할 때는 기본적으로 백엔드 개발자가 api 주소와 body 등을 고려해야 한다. 그리고 withCredentials를 true로 해서 쿠키를 허용해주는 것도 중요하다. 가장 많이 하는 실수 1. 조건에 맞는지 체크 내가 가장 많이 하는 실수로는 요청만 보내고 그 전에 기준은 설정하지 않는다는 점이다. 예를 들면 어떤 것을 입력하고 그것을 보내는데 그 값이 빈 배열이 인지 확인을 해야한다. e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; 혹은 form 태그로 작성했을 경우 preventDefault도 해야한다. 2. 전송을 하..

프로세스 프로세스: 컴퓨터에서 실행되고 있는 프로그램, CPU 스케줄링의 대상이 되는 작업(task) 스레드: 프로세스 내 작업의 흐름 프로그램이 메모리에 올라감 -> 인스턴스화 -> OS 스케줄러에 따라 CPU가 프로세스 실행 프로세스와 컴파일 과정 프로세스: 프로그램으로부터 인스턴스화된 것 ex) exe 확장자를 가진 프로그램을 실행하면 프로세스가 된다. 또한 프로그램은 컴파일러가 컴파일하여 컴퓨터가 이해하는 기계어로 번역되는 파일이 되는 것을 의미한다. C 언어 기반의 프로그램은 컴파일을 거쳐야 하지만 파이썬 같은 인터프리터 언어는 컴파일 과정 필요 없이 한줄씩 읽어서 실행한다. -전처리 코드에서 주석을 제거하고 #include 같은 헤더 파일을 병합해 매크로를 치환한다. -컴파일러 오류 처리, 코..

해결법 사실 해결법은 간단하다. 하지만 난 일일히 비교해서 풀었다. 강사님 풀이에서는 A가 이기는 기준을 다 나열하고 아닌 경우 B 가 이긴 경우로 했다. 내 풀이 하나하나 다 경우의 수를 생각했다. 강사님 풀이 우선 비기는 경우와 A가 이기는 경우를 두고 else로 B가 이기는 경우를 했다.

함수 리턴값 타입 위치 function add(x: number, y: number): number { return x + y; } 리턴값 타입 위치는 이렇게 매개변수 뒤쪽에 붙여야한다. function add(x: number, y: number): number; function add(x, y) { return x + y; } 혹은 이렇게 타입만 선언하고 다음에 내용을 선언하는 경우도 있다. 화살표 함수 const add: (x: number, y: number) => number = (x, y) => x + y; 이렇게 매개변수의 타입 위치가 찾기 어렵게 있다. 이런 경우 타입을 다 지웠을 때 js 문법에 맞게 되도록 코딩을 하면 어느정도 맞다. type Add = (x: number, y: num..

네트워크 기기의 처리 범위 네트워크 기기는 계층별로 처리 범위가 다르다. 상위 계층의 기기는 하위 계층을 처리할 수 있지만 반대로는 불가능하다. 애플리케이션 계층: L7 스위치 인터넷 계층: 라우터, L3 스위치 데이터 링크 계층: 브리지, L2 스위치 물리 계층: NIC, 리피터, AP 스위치: 여러 장비를 연결하고 데이터 통신을 중재해 목적지 포트로만 전기 신호를 보내는 통신 네트워크 장비이다. 애플리케이션 계층을 처리하는 기기 L7 스위치 L7 스위치는 로드밸런서라고 불리며 서버 부하를 분산한다. 클라이언트로 오는 요청들을 여러 서버로 나누고 시스템이 처리할 수 있는 트래픽 증가를 목표로 한다. URL, 서버, 캐시, 쿠키 기반으로 트래픽을 분산한다. 바이러스, 불필요한 외부 데이터를 걸러 필터링도..

indexOf let s = "abcabc" console.log(s.indexOf('a')); //0 a가 0번째 위치에 있어서 0이 나온다. 즉 indexOf는 원하는 문자를 문자열 중에서 가장 처음 위치에 있는 문자의 인덱스 번호를 찾아준다. let s = "abcabc" console.log(s.indexOf('a', 1)); //3 이렇게 두번째 매개변수도 넣어주면 그 숫자 이후부터 있는 문자를 찾아준다. 만약 찾는 숫자가 없으면 -1을 반환한다. 해결법 indexOf를 이용해서 문제를 풀면된다. for문을 돌리면서 문자 하나하나를 확인하는데 만약 중복되는 문자가 있다면 indexOf를 했을 때 자기의 인덱스 번호와 다를 것이다. 코드

substr() substr() 함수는 s.substr(start, length) 이렇게 하면 start부터 length 만큼 잘라서 반환해준다. const s = "abcdef"; console.log(s.substr(1, 3)); //bcd 이렇게 출력이 된다. substring() s.substring(start, end) 이렇게 사용한다. substring()는 시작 인덱스 번호부터 마지막 인덱스 번호를 가져와준다. const s = "abcdef"; console.log(s.substring(1, 3)); //bc 이렇게 출력이 된다. slice() substring() 함수와 사용법이 같다. s.slice(start, end) 이렇게 하면 된다. const s = "abcdef"; consol..

모달 기능 모달을 구현하기 위해서 생각할 부분은 어떤 버튼, 부분을 눌렀을 때 모달이 뜨고 사라져야한다. 모달 바깥 부분을 누르면 모달이 사라져야 한다. 모달 자기 자신을 누르면 사라지면 안된다. 이렇게 3가지를 고려해야 한다. 구현 방법 -1번 모달이 뜨고 사라는 부분을 구현하기 위해서는 const onClickUserProfile = useCallback(() => { setShowUserMenu((prev) => !prev); }, []); 이렇게 state와 함수를 만들어서 구현하면 된다. -2번 모달 바깥 부분을 누르면 모달이 사라져야 하는 기능은 하나의 큰 div를 만들고 그 안에 모달을 구현한다. 큰 div는 화면 전체를 차지 하도록 한다. position을 absolute로 만들어서 전체를..

stopPropagation() 현재 event가 캡처링/버블링 단계에서 더 이상 전파되지 않게 한다. 전파를 방지해도 이벤트의 기본 동작은 실행된다. 즉 링크나 버튼의 클릭을 막진 못한다. 이런 동작을 방지하려면 preventDefault()를 사용한다. e.preventDefault()와 e.stopPropagation() 차이 -e.preventDefault() from 안에서 submit 같은 동작을 할 때 e.preventDefault()가 그 동작 중단한다. -e.stopPropagation() $(".last-el").click(function(e){ e.stopPropagation(); alert("last-el"); }); $(".third-cover").click(function(){ ..

해결법 문자를 for문으로 확인하면서 현재 문자와 현재 문자를 toUpperCase를 사용한 것과 비교해서 같으면 카운트를 올려주면 된다. 코드