React 아코디언 UI 구현 공부를 하면서 복기를 하고 있는데 마주친 코드이다. useEffect(() => { if (descRef.current) { descRef.current.addEventListener("beforematch", toggle); } return () => { if (descRef.current) descRef.current.removeEventListener("beforematch", toggle); }; }, [toggle]); 아니 useEffect에도 return 문이 있네?, 왜 if 문과 return 문에 addEventListener에서 remove로 빼주는 걸까? 하고 useEffect의 무지함에 궁금해서 찾아본 내용들을 기록한다. 위 코드의 목적은 descRef..
TCP 대기(지연) 시간 대기시간이란? 대기 시간이란 일반적으로 사용자가 요청을 한 시점부터 해당 사용자에게 요청에 대한 응답을 받기 까지 걸리는 시간을 말한다(하나의 패킷이 출발지에서 도착지까지 가는데 걸리는 시간) 예를들어 첫번째 요청에서 14KB 만큼의 DNS 조회, TCP handshake, 보안 TLS 협상 등의 과정을 거치기 때문에 대기 시간이 길다. 이후 후속 요청은 서버에 대한 연결이 이미 설정이 되어 대기 시간이 줄어든다. 즉, 대기시간은 네트워크나 인터넷 연결의 지연 시간을 나타낸다. 대기시간이 짧다 ⇒ 지연이 없거나 거의 없음 대기시간이 길다 ⇒ 지연이 많다 한 개의 자원에 대한 대기 시간은 사소하지만, 웹사이트의 경우 여러 개의 요청을 포함(여러개의 CSS, Script, 미디어 파..
3,4way handshake Transport Layer OSI 7 레이어중 Transport(전송) 계층은 상위 계층들이 데이터 전달의 유효성이나 효율성을 생각하지 않도록 해주며 , 사용자들이 데이터를 주고 받을 수 있도록 해주는 계층이다. 전송 프로토콜 중 잘 알려진 것이 바로 TCP와 UDP가 있다. TCP - 인터넷상에서 데이터를 메시지 형태로 보내기 위해 IP와 함께 사용하는 프로토콜 - 애플리케이션에게 신뢰적이며, 연결형 서비스를 제공 - 3way h 과정을 통해 연결을 설정하고, 4way h 과정을 통해 해제한다 - UDP보다 속도가 느리다(데이터의 흐름제어와 혼잡제어 하기 때문에) UDP - 데이터를 단위로 처리하는 프로토콜(비연결형) - 할당되는 경로가 없이 각각의 패킷이 다른 경로로..
첫 업무 입사하고 온보딩이 어느 정도 끝이 나고 첫 업무가 주어졌고 10일간 전투를 하며 끝을 냈다. 내가 어떤 일을 했는지, 그때의 나는 그 일을 해결하기 위해 어떤 고민과 에러를 어떻게 해결했는지 기록하고 있다. 이 과제형 컴포넌트 생성이 끝난 후 실무 투입이 되어 현재까지 실제 서비스 페이지를 만들며 API를 연동하고 붙이는데 혈연을 버리고 있다. 확실히 지금 이 글을 쓰는 시점에는 그나마 회사 동료들과 친해지고, Vue도 어느 정도 적응하여 열심히 부딪히고 있다. 그래도 아직 부족한 부분은 많이 있지만 아직 내 연차에(이제 입사 1개월 조금 지난 신입) 부족한 건 당연한 거고, 지금은 할 수 있는 최선을 다하고 모르는건 간단명료하게 왜 모르는지 설명하는 방법을 조금 더 생각하고 있다. 개발자의 밤..
React18에서 업데이트된 기능 1) 자동 배치 이전 버전: setState()를 여러 번 호출하면 해당 컴포넌트가 매번 리렌더링 되었다 React v.18 : setState() 호출을 자동으로 배치하여 렌더링이 한 번만 실행되도록 처리하여 불필요한 렌더링을 방지하여 성능을 개선 2) 서스펜스 지원 이전 버전 : 데이터 가져오기 등의 비동기 작업에서만 사용되었다. React v.18 : 서스펜스가 렌더링 지연 및 코드 스플리팅에도 사용될 수 있도록 개선된다. 렌더링이 지연되는 동안 렌더링 대기 시간에 대한 UI를 표시할 수 있게 해주는 유연성을 높인다. 3) 이벤트 처리 개선 이전버전 : 이벤트 처리를 위해 SyntheticEvent 객체를 사용했다. React v.18 : 브라우저의 원래 이벤트 객..
TCP/IP Original 인터넷에서 컴퓨터들이 서로 정보를 주고받는데 쓰이는 프로토콜의 집합 프로세스 간 통신 접속을 위해 설계되어 통신 프로토콜과 방식을 위해 보유된 추상 계층이다. * TCP는 Transmission Control Protocol : '데이터 전송과정의 컨트롤' OSI 모델 vs TCP/IP 모델 이렇게 TCP/IP 스택은 각 계층마다 데이터 송수신의 과정을 4개의 영역으로 계층화 했다는 의미이다 '인터넷 기반의 효율적인 데이터 전송'이라는 큰 하나의 문제를 하나의 프로토콜의 설계로 해결한 것이 아닌 문제를 작게 나눠서 계층화하여 탄생한 것이 'TCP/IP 프로토콜 스택'인 것 OSI 모델 vs TCP/IP(original) vs TCP/IP(Updated) 모델 오늘날 Updat..
OSI 7 layer이란? 네트워크 프로토콜이 통신하는 구조를 7개의 계층으로 분리하여, 각 계층간 상호 작동하는 방식을 정해 놓은 것이다. 통신이 일어나는 과정을 단계별로 파악할 수 있고, 통신 과정 중에 특정한 곳에 이상이 생길 경우 다른 단계의 장비 및 소프트웨어 등을 건드리지 않고 통신 장애를 이르킨 단계에서 해결할 수 있다. 1계층 '물리' 계층 실제 장치를 연결하기 위한 전기적 및 물리적 세부 사항을 정의한 계층이다. 인터넷 케이블, 라우터 스위치 등의 전기적 신호가 물리적인 장치에 의해 왔다 갔다 하는 통신 계층이다. 이 계층에서는 데이터를 전달만 할 뿐 전송하려는 데이터가 무엇인지, 어떤 에러가 있는지 전혀 신경 쓰지 않고 단지 데이터 전기적인 신호(0,1)로 변환해서 주고받는 기능만 있을..
벌써 2023년 2월이 끝이 나고 일주일이 지났다!. 여전히 헬스는 시작도 하지 못했고, 퇴근하고 집에서 자기계발(코딩.. 취미..) 루틴을 잡아야 하는데 아직 잡지 못하고 있다. 2월 한달을 되돌아보며 애견카페 알바 정리 작년 겨울부터 주 4일 애견카페에서 알바를 했다. 여러 좋은 직원들이랑 사장님. 부산에서 올라와서 혼자 사는데 부족한 건 없냐고 근무시간이 짧은 날에도 꼭 밥은 챙겨 먹고 퇴근하라 하시고, 반찬도 많이 챙겨주시며 많은 경제적인 보탬이 되었다.. (가끔씩은 용돈도 많이 챙겨주셨다.) 회사 합격을 해서 알바를 그만둬야 한다고 했을 때 정말 죄송한 마음에 며칠 고민해서 말을 했는데 당연한 일이라며 축하해야 하는 일이니 미안해하지 말라고 하시던 사장님.. 그래서 퇴사선물로 사장님한테 보답을 ..
