TIL (75) 썸네일형 리스트형 TIL 24.02.27 WebSocket 웹소켓 Web Socket 기존의 http 통신의 단방향 통신의 문제를 극복하고 실시간으로 통신할 수 있는 프로토콜. 주로 채팅앱, 알림, 예매 기능에서 사용됨 http 프로토콜과의 차이점 일방적으로 클라이언트가 요청을 보내고 서버로부터 응답받는 단방향 통신이며 연결의 지속성이 없다. 연결이 되어있으면 계속 양방향으로 실시간 통신할 수 있는 프로토콜이다. TIL 23.01.18 react-toastify 중복 처리 기존에 있는 alert 창은 디자인이 마음에 안들어서 toastify 라이브러리를 이용하기로 했다. 참고문서 https://fkhadra.github.io/react-toastify/limit-the-number-of-toast-displayed/ Limit the number of toast displayed | React-Toastify Notifications are useful to get the attention of the user. But displaying too many of them can also be counterproductive. fkhadra.github.io react-toastify 설치 명령어 $ npm install --save react-toastify $ yarn a.. TIL 24.01.10 React-hook-form value 객체 문제점 프로젝트 진행 중에 react-hook-form 을 쓰게 될 일이 있어서 사용했다. 특수하게 api 를 받아와서 결과 값을 도출하는 로직이어서 react-hook-form 에서 제공하는 data 를 바로 body로 넘기는 코드를 작성했다. 그런데 객체로 값을 넘겨줄때, 아래처럼 v.value 가 객체면 react-hook-form 에서 정한 value type에 어긋나기 때문에, 그 객체 자체를 전달해줄 수 없다. 따라서 JSON.stringify 로 문자열형태로 전달해주어야함 ; 그런데 이상태에서 값을 전달하면 api 를 제대로 받아올 수 없기 때문에 수정 해주어야한다. 시도해본 것 다음과 같이 react-hook-form 에서 제공하는 watch 를 사용했는데, 해당하는 register 의 v.. TIL 23.09.30 기술 interview (18) 18. http, https 차이점에 대해 설명해주세요. http(hyper text transfer protocol) 서버/ 클라이언트간에 데이터를 주고받기 위한 프로토콜 http 는 일반 텍스트 이므로 권한이 없는 당사자가 인터넷을 통해 쉽게 엑세스하고 읽을 수 있다. https(hyper text transfer protocol secure) 데이터 암호화가 추가 된 프로토콜 모든 데이터를 암호화 된 형태로 전송한다. 사용자가 민감한 데이터를 전송할 때, 제 3자가 데이터를 가로챌 수 없다. TIL 23.09.19 기술 interview (15) 15. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요. 쿠키 (cookie) - 쿠키는 클라이언트측에서 데이터를 저장하는 작은 텍스트 파일이다. - 주로 웹 브라우저에서 관리되며, 클라이언트 측에 저장된 정보를 HTTP 요청과 함께 서버로 전송한다. - 주로 세션 식별, 사용자 기본식별, 쇼핑 카트 등의 작은 정보를 저장한다. - 쿠키는 만료 날짜 및 시간을 설정하여 지속성을 제어할 수 있고, 보안 상의 제약이 있다. (데이터 양은 보통 4KB로 제한) 세션 (Session) - 세션은 서버측에서 상태를 관리하기위한 방법 - 클라이언트가 웹 서버에 연결하면, 서버는 해당 클라이언트에 대한 고유 식별자를 생성하고 이를 사용해 클라이언트 상태 저장 - 주로 로그인상태유지, 사용자인증, 장바구니 관리에 사용 .. TIL 23.09.15 Next.js deploy 에러 window is not defined https://handhand.tistory.com/272 [Next.js] window is not defined 원인 및 해결방법 📌 새로고침 시 오류 페이지가 떠요! 현재 회사에서 Next.js 를 이용한 프로젝트를 진행하고 있는데 특정 페이지에서 새로고침을 하거나 URL 을 통해 직접 접근을 시도할 경우 에러가 발생하며 에 handhand.tistory.com next.js 로 개인프로젝트 하면서 vercel 로 배포했는데 아니나 다를까 바로 배포되지 않았다.. 내용은 window is not defined. 내가 scroll 효과를 주려고 window 객체를 쓰는 곳이 몇 군데 있었는데, 이걸 custom hook 으로 만들어 관리하다 보니까 에러가 났다. Next.js 에서 서버사이드 렌더링을.. TIL 23.09.13 Cloudcraft 서비스 아키텍쳐 제작 프로젝트 발표준비를 하다가 서비스 아키텍쳐를 제작하기 위해 포토샵, PPT 를 사용해도 되지만 좀 더 입체감있고 멋있게 제작하면 좋을 것 같아서 아래의 사이트를 이용했다. 프론트엔드 영역과 백엔드 영역(서버리스) 으로 나누었고 이후 Deploy 와 협업툴을 정리했다. https://app.cloudcraft.co/ Cloudcraft – Draw AWS diagrams Visualize your AWS environment as isometric architecture diagrams. Snap together blocks for EC2s, ELBs, RDS and more. Connect your live AWS environment. www.cloudcraft.co:443 기술스택 선정이유 Next... TIL 23.09.12 skeleton UI Skeleton 스켈레톤 UI skeleton UI 란, 데이터가 로드되기 전 대체해서 보여주는 데이터의 골격(?) UI 라고 할 수 있다. 다음과 같이 유튜브에 접속하면, 스켈레톤 UI 가 무엇인지 알 수 있음. 빈화면을 보여주는 것 보다는 사용자경험 측면에서 우수하다. Skeleton UI 만드는 법 필요한 양 만큼의 가짜 데이터를 만들어야 하는데, 나는 12개의 골격을 보여주기위해 다음처럼 작성하였다. let product = []; for (let i = 0; i < 12; i++) { product.push(i); } 이후, 방법은 간단하다. tailwind css 를 사용해서 원래 UI 형태와 비슷한 회색의 가상 골격을 제작해주면 됨. 참고로 animate-pulse 를 넣어주면 물결처럼 일렁.. 이전 1 2 3 4 5 ··· 10 다음
