지선생 코딩딩 지선생 코딩딩

2.1 프로토콜 계층화 계층화의 장단점 장점 : 서비스 구현을 각 기능별로 분리할 수 있게 한다, 중간시스템을 단순화 시킬 수 있다. 단점 : 계층간의 상호 연관이 있는 경우 정보를 주고 받기가 어려움 2.2 OSI 모델 모든 유형의 컴퓨터 시스템 간의 통신을 허용하는 네트워크 시스템의 설계를 위한 계층구조 계층구조 장치 A로부터 장치 B까지 메시지를 전송할 때 연관되는 계층 OSI 모델의 7 계층 (한 계층당 몇주에 걸쳐 공부해야 하지만 간단하게 몇개만 알아보고 넘어감) 계층이 내려갈때 마다 헤더가 붙는다고 생각하고 가면 편함. 물리층 케이블, 스위치등 물리적인 매체를 포함한다. 데이터 링크층으로부터 데이터를 받아 통신링크를 따라서 전송될 수 있는 형태로 변환, 비트 스트림을 전자기 신호(bit)로 변..

1.1 데이터 통신이란? 전선과 같은 통신매체를 통하여 두 장치간 데이터를 공유하는것 데이터 통신의 구성요소 송신자 : 메세지를 보내는 장치 수신자 : 메세지를 받는 장치 메세지 : 전송되는 정보 전송매체 : 송신자에서 수신자까지 메세지를 전달하는 물리적 경로 ex) 광케이블, 무선파등 프로토콜 : 데이터 통신 수행 규칙들의 집합 데이터 표현 문자, 숫자, 화상, 음성, 동영상등 데이터 흐름 단방향 방식 : 한쪽방향으로 통신이 가능함. 한쪽은 수신만 한쪽은 송신만 ex) 키보드 모니터 등등 반이중 방식 : 각 지국끼리 송,수신이 가능 동신에 송수신은 불가능 ex) 무전기, 토키 (군대에서 쓰던거) 전이중 방식 : 각 지국간 동시에 송,수신 가능 ex) 전화기 1.2 네트워크란? 전송 매체링크로 서로 연결..

YAPP 동아리 소개 개발자, 디자이너, 기획자가 한팀이 되어 기업형 프로세스에 따라 6개월동안 서비스를 제작하는 동아리입니다. 디자이너뿐만 아니라 기획자까지 협업을 해볼 수 있다는 점에서 매우 매력적이였습니다. 지원 계기 지인에게 연락이 왔는데 자신이 YAPP19기 활동을 수료했고 YAPP에서 진행한 프로젝트를 실제로 서비스를 하고있는데 너무 좋은 경험이였다고 지원을 해보라고 추천을 해주었습니다. (지금도 운영되고 있다) https://dotoriham.com/ 서비스 완성까지는 해봤지만 서비스 런칭 단계까지는 가본적이 없었던지라 다음 프로젝트는 꼭 런칭을 하고 싶다는 생각을 가지고 있었습니다. 그런데 YAPP동아리에는 기업 후원사도 있고 디자이너, 개발자, 기획자까지 있는 깔려있는 판 위에서 개발을 ..

저번 프로젝트도 그렇고 지금 프로젝트도 그렇고 자꾸 별점 컴포넌트를 필요로 합니다. 이번 프로젝트는 MUI, 라이브러리 등을 사용하지 않고 만들고 있습니다. 근데 구글링을 해보니 딱히 프로젝트에 적용할 만한 글이 없길래 직접 만들었습니다. 만드는 김에 재활용성 빵빵하게 만들어서 두고두고 쓰자 라는 생각이 들었습니다. 제 생각엔 어디든 쓸 수 있을 거 같으니 퍼가서 써도 좋을 거 같습니다. 결과물부터 보여드리면 원리를 간단하게 설명하면 1. 별을 누르면 값이 변하고 2. 변한 값보다 작으면 별을 색칠하고 3. 변한 값을 부모로 보낸다 입니다. 진짜 간단하네요 RatingSection.tsx // line 26 까지는 css const RatingContainer = styled.div` display: f..

지금까지는 react-query로 Read만 진행해 보았는데 CUD를 해결할 수 있는 useMutation 을 알아보겠습니다. 1. 설명 공식문서를 퍼온것인데요 useQuery 와 동일하게 data, error, isError 등의 데이터들을 제공해 주는걸 알 수 있고 mutate 라는 데이터가 CUD 역할을 하는 함수 입니다 다른점은 queryKey 값을 받지 않고 api,option 만 받고 작동합니다. 코드로 설명하겠습니다 Api 부터 작성합니다 const addSuperHero = async (hero: Hero) => { const response = await axios.post("http://localhost:4000/superheroes", hero); return response.data..

1. InfiniteScroll 이란? 전에 포스트에도 써놓긴 하였으나 1억 개의 데이터를 모두 가져오면 서버 부하가 생기기 때문에 데이터를 조금씩 나눠 받는 방법이며 pagenation과 다르게 스크롤을 내리거나 다음 데이터를 불러오는 버튼을 클릭할 때 데이터를 추가적으로 불러오는 방법입니다. 백엔드는 구현되어있다는 가정하에 진행하겠습니다. 2. useInfinityQuery 설명 지금까지는 useQuery를 사용하였으나 무한 스크롤은 useInfinityQuery라는 다른 함수를 사용합니다. 공식문서를 가져온 것인데요, 인수로 (키값, fetch api, options)는 동일하게 들어가나 options에 getNextPageParam이라는 옵션을 넣어 사용합니다. getNextPageParam의 인..

지금 쇼핑몰 프로젝트를 하고 있는데 구현하고 싶은 기능이 있다. 이렇게 생긴 버튼을 클릭하면 해당 부분으로 스크롤을 자동으로 움직여주는 기능이다. 거의 모든 쇼핑몰에서 사용하고 있길래 이번 프로젝트에서 적용해 보았다. 첨에는 쉽지 않겠다... 싶었는데 찾아보니 useRef에 구현해놓은 메서드가 이미 존재했다 (https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView) element.scroolIntoView라는 메서드였다. 바로 useMoveScroll라는 hook을 만들어 활용해 보았다. import { useRef } from 'react'; //hook function useMoveScrool() { const element = us..

개발자의 품격이 끝나고 며칠을 쉬었다. 초반엔 재밌고 배우는것도 많았는데 나중에 팀원들도 나가고 혼자 열정이 다 떨어진 상태로 만들어서 일하듯이 만든 터라 힘들고 재미가 없었다. 그 뒤에 시간이 남아서 next js 에 대해 공부를 조금 해봤다. 알아보니 알구 프로젝트에서 next js를 잘못 쓰고 있었다. 사실상 ssr을 안 쓴 거나 다름없을 정도로 잘못 만들었다. 열은 받는데 공부도 안하고 만든 내 잘못이라 할 말이 없다. 알고 프로젝트는 나중에 next 공부하고 다시 만들어야겠다. 그리고 쇼핑몰 프로젝트를 시작했다. 결제 기능을 한번 경험해보고 싶어서 쇼핑몰로 결정했는데 이번에는 친분이 있는 형들이랑 해서 낙오 없이 끝까지 같이 갈 것 같다. (그랬으면 좋겠다) 개발자의 품격을 하면서 벤치마킹, 기..