alex im

프로세서 명령어들을 처리하고 반응하기 위한 논리 회로를 말한다.크게는 소프트웨어 신호를 받아 다른 하드웨어 부분으로 신호를 보내는 제어장치와 연산을 담당하는 연산장치로 구성된다.프로세스가 존재한다면 무조건 스레드도 하나 이상 존재한다. 스레드 프로세스 내에서 실행되는 흐름 단위멀티프로세스와 멀티스레드는 양쪽 모두 여러 흐름이 동시에 진행된다는 공통점을 가지고 있다. 멀티 프로세스 하나의 어플리케이션을 여러 개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하도록 하는 것 . 각 프로세스는 독립적으로 실행되며 각각 별개의 메모리를 차지하고 있다. 안정성이 좋다. 자식 프로세스 중 하나에 문제가 발생해도 다른 자식 프로세스에 영향이 확산되지 않는다. 작업량이 많을 수록 오버헤드가 발생할 수 있다. 멀..

HTTP 인증 http는 액세스 제어 및 인증을 위한 일반 프레임워크를 제공한다. 일반적인 HTTP 인증 프레임워크 서버는 클라이언트에게 401 (Unauthorized) 응답 코드를 가지고 응답한다. 최소한 한 번의 시도에 포함된 WWW-Authenticate 응답헤더로 권한을 부여하는 방법에 대한 정보를 제공한다. 서버와 인증을 하기를 원하는 클라이언트는 Authorization 요청 헤더 필드에 인증 정보를 포함함으로써 인증을 수행할 수 있다. 그림에서 보는 것과 같이 Basic 인증의 경우, 교환은 안전을 위해 HTTPS (TLS) 위에서 발생하여야 한다. 위의 그림에 사용된 “Basic” 인증 체계는 인코딩되지만 암호화되지 않은 자격 증명을 보낸다. 교환이 보완 연결(HTTP/TLS)을 통하지 ..

Effect Hook side effect를 수행할 수 있다. Side Effect란? 데이터 가져오기 구독(subscription) 설정하기 수동으로 React 컴포넌트 DOM 수정하기 결과를 예상할 수 없는 것 렌더링 과정에서 구현할 수 없는 작업 다른 컴포넌트에 영향을 줄 수 있는 작업 정리(Clean-up)를 이용하지 않는 Effects 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리가 필요 없는 경우들이다. 이러한 예들은 실행 이후 신경 쓸 것이 없기 때문 useEffect가 하는 일 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다. useEffect 안의 함수는 DOM 업데이트를 수행한 이후에 불러낸다. useEffect를 컴포넌트 안에서 불러내는 이유 effect를 통해 ..

State 끌어올리기 state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가된다. 그러고 나서 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 된다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천 어떤 값이 props 또는 state로부터 계산될 수 있다면, 그 값을 state에 두는 걸 추천하지 x 합성 (Composition) vs 상속 (Inheritance) 어떤 자식 엘리먼트가 들어올 지 예상할 수 없는 컴포넌트 범용적인 "박스" 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다. 이러한 컴포넌트에서는 특수한 children prop을 사용..

JSX const element = Hello, world!; JavaScript를 확장한 문법 JavaScript 모든 기능이 포함 React "element"를 생성한다. React + JSX 리엑트에서는 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 받아들인다. 리엑트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트" 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX는 HTML 보다는 JS에 가깝기 때문에 React DOM은 HTML 어트리뷰트 이름 대신 카멜케이스 규칙을 사용한다. JSX에 표현식 포함하기 JSX에 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다. JSX도 표현식이다. JSX는 객체를 표현한다. Bab..

react router v5에서 v6으로 업데이트되면서 많은 게 바꼈는데 기능상의 업데이트 보다는 문법이 많이 바뀜. 직관적으로 많이 바꼈다고 함. Reach Router라는 것과 합쳐져셔 많이 바꼈다고 함. 문서를 볼 때 아래의 단어가 있다면 v5이다. Switch (Routes로 바꼈다.) exact (path와 정확하게 일치하는 경우에만 이동하라는 건데 v6에서 없어졌다.) params history.push or history.replay (useNavigate로 바꼈다.) history.goback() (뒤로 가는 기능으로 navigate(-1)로 쓸 수 있다. 2페이지 전: -2) react router는 눈속임이다. 페이지가 여러 개 있는 게 아니라 여러 개 있는 척 하는 것. (실제로는 페..

D:\blog\imalex\src\server 위치에서 __dirname과 process.crw()를 호출했을 때 (imalex가 프로젝트 경로이다.) dirname -> D:\blog\imalex\src\server process.cwd() -> D:\blog\imalex __dirname은 모듈의 파일 경로를 말한다. process는 node 전역 객체를 말한다. crw()는 노드가 실행중인 위치를 반환한다. 즉 process.crw()는 프로젝트 안 어디서 호출하든 같은 결과를 가져온다.

📗 Optional Chaning ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 📗 언제 사용하나? 1. 있을 수도 없을 수도 있는 객체의 속성을 조회할 때 말이 이상하게 들리겠지만 옵셔널 체이닝은 이런 경우에 굉장히 유용하게 사용된다. 옵셔널 체이닝 연산자가 없을 때는 객체에 속성이 있는지 확인하기 위해서 "&&" 연산자를 썼다. let user = {}; user 객체 안에서 user.address.street 을 조회하여야 하는데 주소 정보가 없는 user가 있다고 할 때 그냥 조회한다면 바로 타입에러가 발생할 것이다. 이를 해결하기 위해서 console.log(user && user.address && user.address.street); 이..

Given the head of a linked list, remove the nth node from the end of the list and return its head. 연결리스트 head과 n이 주어지고 끝에서 n번째 노드를 삭제하고 head를 return 하라 Example 1: 방법 1. 처음 생각한 방법 2개의 포인터가 필요함. p1(포인터1)은 head부터 시작, p2는 head.next부터 시작 리스트 길이를 계산하고 (리스트 길이 - n) 만큼 이동해 p1.next는 지울 노드가 되고 p2는 지울 노드를 가리킨다. 고려해야 할 코너케이스 1. n이 length와 같을 때 : 이 경우에는 p1 head 자체를 지워야한다. 2. length가 1일 때 : 위 첫 번째 케이스와 같은 케이스..

Given the heads of two singly linked-lists headA and headB, return the node at which the two lists intersect. If the two linked lists have no intersection at all, return null. For example, the following two linked lists begin to intersect at node c1: The test cases are generated such that there are no cycles anywhere in the entire linked structure. Note that the linked lists must retain their or..