분류 전체보기 (40) 썸네일형 리스트형 2024-09-10 갓생 살기 5일차 어제 프로젝트 퍼블리싱을 새벽까지 수정을 했더니.. 오늘 늦게 일어났다.. ㅜㅜ 일상이 망가지지 않도록 밤 새는건 자제해야지..넘 피곤하다 ㅜㅜ 1. 네트워크 공부 어제는 패킷의 에러와 패킷 로스에 대해서 공부했다. 간단히 복습하자면 패킷 에러 메커니즘은 에러 디텍션, 피드백, 리트랜스미션, 시퀀스 번호가 있고 패킷 로스는 타임아웃 이 있다. 어제까지 공부한 것은 한 패킷을 보내고 응답을 보내고, 또 한패킷을 보내고 응답을 보내는 형식이었는데이렇게 하나씩 보내면 트랜스미션 타임(패킷 하나 보내는 시간)이 오래걸리기 때문에 2가지의 파이프라인 프로토콜이 있다고 한다. 첫번째는 Go-Back-N이라는건데이 때 Sender가 보낼 수 있는 패킷 사이즈는 window사이즈 (n개) 이다. n개가 4개라고 가정.. [React 프로젝트] redux-toolkit 도입기... with typescript 도입 배경 프로젝트 기능 중에 다른 유저들이 본 식물들을 띄우는 기능이 있다.북마크를 클릭하면 내 도감 목록들 중에 하나를 선택하여 도감에 식물을 넣을 수 있다.서버에서, 도감에 이미 있는 아이템을 확인해서 구분해 주면 좋겠지만도감이 여러개이기 때문에 구분하는 것이 여러모로 복잡하기 때문에 기능을 단순화 시키기로 했다. 다른 유저들이 본 식물들을 띄워주고 사용자가 특정 식물을 선택해서 도감에 넣으면그 식물은 목록에서 필터링된다.이 과정을 클라이언트에서 맡게 됐고, 그렇기 때문에 상태값은 로그인 ~ 다음 로그인 전까지 유지 된다. 로직이.. 따로 어려울 건 없다.플로우차트가 익숙하진 않지만 그냥 끄적여 봤다.. 1. 추천 식물 정보 목록을 받고 2. 추천 식물 정보를 하나 선택해서 도감에 넣으면 3. 다.. 취업 하고 싶다. 내가 잘 하고 있는 걸까 ?남들 보다 노력이 부족하진 않은가?이렇게 하다 보면 끝이 보일까 ? 요즘 너무 많은 생각이 한다.한숨을 쉬는 날이 많이 늘어난 것 같다. 혼란스러울 수록 이런 푸념 글을 적을 게 아니라, 기회가 주어졌을 떄 잡을 수 있도록 노력으로 행동으로 보여줘야 하는데내가 제대로 하고 있는건지 잘 모르겠다. 공부를 하면 할 수록 나의 부족함이 많이 보이고, 나보다 더 잘하는 사람들이 많겠지.. 라는 생각도 들고.. 모르겠다 그래도 할 수 있는데 까지 노력해보다 보면 어떻게든 결론이 나겠지. 이런 생각 하지말고오바하지 말고공부나 하자......!조금만 더 노력해보자 2024-09-09 갓생 살기 4일차 1. 프론트엔드 Cs 개념 공부호이스팅이란 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상 2.네트워크 공부 TCP 가 어떻게 신뢰성있는 데이터를 확인하지? => 한패킷을 보내보고 패킷 신뢰성 확인하면 다음 패킷 보냄. 그렇다면 에러 핸들링은 ? - error detection- feedback ( 패킷 하나 받을 때마다 ACK, NACK인지 피드백) - retransmission (Nack일때)근데 보낸 패킷이 새로운 패킷인지 duplicate인지 어떻게 알지 ? sequence number 을 헤더에 넣어줌. 1 bit면 충분! 만약 duplicate된 seq이면 버리고 ACK만 다시 보내주면 됨. 메시지 유실 시 에러 메카니즘은? Sender가 보내는 도중에 데이터 유실로 rece.. 2024-09-06 갓생 살기 3일차 1. 프론트엔드 Cs 개념 공부 주소창에 URL 을 입력하면..도메인 네임을 DNS 서버에서 검색 > IP주소를 찾아 내어 사용자가 입력한 URL 정보와 함께 전달. HTTP 프로토콜을 사용하여 요청 메시지를 생성 후 TCP/IP 프로토콜을 사용하여 서버로 전달. response 메시지를 생성하여 브라우저에 데이터 전송 브라우저가 파싱 후 화면에 렌더링=> 네트워크 지식이랑 같이 공부하면 좀 더 이해하기 편리한 것 같다. 2.네트워크 공부 TDP UDP 의 세그먼트는 header(source port, destination port, other header fields..)와 data로 이루어져 있음.멀티플렉싱은 여러 소켓으로 부터 들어온 데이터를 하나로 만들어주는거 디멀티플렉싱은 받은 세그먼트를 알맞.. 2024-09-05 갓생 살기 2일차 오늘 공부한거.. 정리정리 1. 프로젝트 수정 - 캐릭터 이미지를 변경했다. - 그리고 액세스 토큰이 만료되었을 때 쿠키에 갖고있는 리프레시 토큰으로 다시 액세스 토큰을 요청하는데, 계속 400이 뜬다... ㅜㅜ 이유를 모르겠다...ㅜㅜ.. 아직 문제를 뚝딱 해결하기엔 내가 많이 부족한거같다.. 언제쯤 나도 코딩 천재가 될 수 있을까.. 2. 프론트엔드 Cs 개념 공부 오늘 공부한건 리플로우와 리페인트가 실행되는 시점대략적으로 설명하자면 리플로우는 DOM 엘리먼트 추가, 삭제 변경시 , Css 스타일 추가 삭제 변경시, css클래스가 추가 될때, css애니메이션 트랜지션 등등.. 유저 인터랙션(글꼴 전환, hover, 창 크기 조정) 등으로 인해도 트리거 된다. 리페인트는opacity, 배경 색상, vi.. 2024-09-04 갓생 살기 1일차 오늘한 일 갓생 살기 1일차 !이제부터 공부한 내용들을 매일 매일 기록하면서 복기를 하는 시간을 가져보도록 하려고 한다..! 방법은공부한거 끄적이면서 복습하기!한 일 기록하기! 자소서일어나서 자소서 하나를 작성했다. 아직 좀 더 첨삭 할 부분이 남았다. Fe Cs - 브라우저 렌더링 공부그리고 브라우저 렌더링 방식을 공부했다. 짧게 오늘 학습한 렌더링 방식을 얘기하자면 브라우저에는 렌더링 엔진이 있고 CRP (중요 랜더링 경로) 를 사용해서 단계별로 이루어지는데 HTML은 파싱을 통해 DOM 트리를 구축, CSS는 파싱을 통해 CSSOM을 구축 그리고 이 둘을 합쳐서 렌더트리를 구축 하고, 뷰포트를 기반으로 노드의 정확한 위치와 크기를 계산하는 Layout 과정을 거쳐 화면에 Paint하는 과정으로 .. [React] Tanstack 쿼리 , POST POST 컴포넌트 내 const { mutate } = useMutation({ mutationFn: createNewEvent, onSuccess: () => { queryClient.invalidateQueries({queryKey:"events"}); // 정확하게 key가 일치해야하는 경우 // queryClient.invalidateQueries({queryKey:"events",exact:true}); navigate("/events"); }, }); function handleSubmit(formData) { mutate({ event: formData }); } createNewEvent 함수import { Quer.. [React] Tanstack 쿼리 1.특징 - Http 요청을 전송하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리- 코드가 매우 간결, 고급 기능이 Build in 되어있음- 즉각적인 결과와 업데이트된 데이터를 빠르게 얻을 수 있음주의- Http 를 전송하는 로직이 내장되어 있지 않음 > 직접 코드 작성 해야 함- 대신 요청을 관리하는 로직을 제공(요청 관련 데이터, 발생 가능한 오류를 추적) 2. 사용방법App.jsxfunction App() { return ( QueryClientProvider client={queryClient}> RouterProvider router={router} /> QueryClientProvider> );} 사용하는 컴포넌트 co.. [React] 인증 Authentication tokens사용자가 인증받은 다음 서버에는 이 토큰을 생성하고 그것을 클라이언트에게 전송토큰(알고리즘에 따라 생성된 스트링으로 몇가지 정보를 담고 있음) 토큰을 생성한 백엔드만이 해당 토큰의 유효성을 확인하고 검증 가능백엔드만이 알 수 있는 개인키를 활용해 토큰 생성클라이언트가 백엔드에 요청을 보낼 때 해당 토큰을 요청에 첨부하면 백엔드는 토큰을 살펴보고검증하고 또 그 토큰이 그 백엔드에서 만들어진건지 확인 > 유효한 토큰이면 접근 승인 1. 로그인 시function login(){ const response = await fetch('로그인 요청 주소및 코드..'); // 서버에 로그인 요청 코드... const resData = await resp.. 이전 1 2 3 4 다음 목록 더보기
