본문 바로가기

분류 전체보기

 (138)
[Next.js] 최종발표회 피드백(2024.05.01) pdf로 다운로드 될 수 있다.prefetch 사용 로컬스토리지에 저장, 기반으로 수파베이스에 저장되었음이메일: sntp 서버를 다루는 경우도 많아서 깊게 파보면 좋다. 낙관적인 업데이트: 좋아요 또는 댓글, 티가 바로 난다. 리엑트 19버전 이후로는 훅이 생겼다. 뭔말이지조퀴즈와 게임, 소통 커뮤니티객관식, 주관식 퀴즈 만들기배경음악 볼륨 조절관리자 모드의 게시글 관리new Audio로 오디오 실행supabase 크라운? 삭제하는 기능이 있다. 이미지 CDN에 저장연계된 콜이 있으면 마지막 콜이 취소되면 다 취소되는 롤백 전략?내려오는 것은 interval을 usestate로 생명력 5개윈도우 높이에 맞게 땅에 닿으면 생명이 1씩 감소하게 구현 믿고조유저데이터를 기반으로 불러오는 데이터가 많아서 하이드..
[Next.js] Throttling and Debouncing 짧은 시간 여러번 이벤트가 발생했을 때 서버의 요청을 제한해서 서버의 부담을 줄이는 방법이다. Throttling이벤트를 단위로 그룹화하여 호출하는 것  코드 실행 순서1. onClick으로 throttle 함수가 실행된다.2. timerId가 null이므로 if는 통과한다.3. setTimeout이 실행되면서 timerId가 생성된다.4. 다시 한번 클릭하면 timerId가 이미 있으므로 return되어 빠져나간다.5. setTimeout의 만료후 timerId = null이 실행된다.6. 다시 요청이 들어오면 1번부터 반복하여 실행된다.   코드 실행 순서1. onClick으로 throttle 함수가 실행된다.2. 함수가 클로저 함수이므로 외부의 timerId의 null값을 받아오면서 if는 통과한다..
[Next.js] 리엑트 컴포넌트 코드실행순서 componentDidMount, componentDidUpdate, componentWillUnmount는 useEffect에서 실행된다.componentDidUpdate는 의존성 배열에 따른 업데이트에 해당된다.componentWillUnmount는 useEffect의 return문에 해당되며 unmount 되기 직전에 실행된다. useEffect의 위치리턴문 바로 위에 useEffect를 쓰는 것이 좋다. 읽기가 더 편한 구조가 된다.왜냐하면 랜더링 될 때는 useEffect가 실행되지 않고, 랜더링 후 useEffect가 실행되기 때문이다. 처음 랜더링 될 때처음 랜더링 되면 위에서 아래로 읽으면서 실행시킨다. 이것은 render까지의 과정에 해당된다.return까지 모두 실행된 직후 useEff..
[면접대비] http, https 차이점 http, https 차이점에 대해 설명하세요. HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜입니다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답합니다. 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환합니다. 간단히 말해 HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술입니다. 이름에서 알 수 있듯이 HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전입니다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정합니다. HTTP 메시지..
[vercel] 컴파일 오류: Module not found: Can't resolve 분명 개발자모드에서는 잘 되는 것을 확인했고, 오류도 없었는데 컴파일을 하니 오류가 발생했다. 이 오류는 파일 참조를 잘못했을 때 뜨는 오류라고 한다. 나의 경우에는 폴더의 위치를 인식하지 못해서 생기는 오류였다. 파일을 완전히 삭제하고, 캐시를 비운 다음 다시 작성하니 사라졌다. Next.js를 사용하는 경우 .next 파일에서 오류가 발생하기도 한다.
[면접대비] TCP/UDP의 특징과 차이점 TCP(Transmission Control Protocol)의 특징 - 데이터의 배달에 사용되는 프로토콜입니다. - IP와 함께 사용되며 IP는 데이터 배달을 처리하고, TCP는 조각낸 데이터인 패킷을 추적/관리합니다. - 패킷의 순서를 저장하여 어느 번호가 빠졌는지 확인할 수 있습니다. - 패킷을 전송하기 위한 논리적인 경로를 배정하기 때문에 연결 지향 방식이라고도 합니다. - 안정적이고 신뢰성 있는 데이터를 전송하며 파일이나 이메일 전송 등 연속성보다 신뢰성이 중요할 때 쓰입니다. - CPU 기능을 사용하기 때문에 속도가 느립니다. - 데이터가 손실된 경우 재전송을 요청합니다. UDP(User Datagram Protocl)의 특징 - 데이터를 데이터 단위로 처리하는 프로토콜입니다. - IP와 PO..
[면접대비] 쿠키, 세션, 웹스토리지 쿠키, 세션, 웹스토리지의 차이를 설명해보세요. - 쿠키 : 웹사이드 접속시 접속자의 개인장치, 즉 클라이언트 측에 다운로드 됩니다. 접속자의 설정, 과거 이용내역 등을 저장하고 관리할 수 있게 합니다. 쿠키의 삭제 기간은 설정에 따라 다릅니다. - 세션 : 웹사이드 접속시 서버 측에 보관하여 사용자를 구분할 수 있는 데이터입니다. 브라우저를 닫으면 세션이 삭제되는 특성이 있습니다. 서버에 보관되므로 쿠키에 비해 보안이 안전하다는 자점이 있습니다. - 웹스토리지 : 문자열을 저장할 수 있는 저장공간입니다. 캐시에 비해 큰 용량(5MB)를 지니고 있으며 유효기간이 없는 로컬 스토리지와, 탭 단위의 세션 스토리지로 나눠져 있습니다. 만료기능 설정이 불가능합니다.
[면접대비] CSR, SSR의 차이점과 장/단점 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요. - CSR은 html과 JS 파일을 모두 주고 클라이언트 측에서 조합하여 랜더링합니다. 처음에는 보이는데 필요한 데이터만 다운받고, 상호작용이 필요한 부분은 나중에 다운받습니다. - 단점으로는 데이터가 많으면 처음 랜더링하는데까지 걸리는 시간이 오래 걸릴 수 있습니다. 조합하여 랜더링되므로 SEO에 적합하지 않습니다. 장점으로는 빠르게 반응할 수 있어 사용감이 좋습니다. 요청한 데이터를 처리할 때 JS만을 받아와 적용하므로 동적인 작업을 빠르게 할 수 있습니다. - SSR은 서버측에서 이미 완성된 html 상태로 다운받아 랜더링합니다. - 장점으로는 초기 데이터가 이미 완성되어 있는 ht..
[Next.js] 새로고침 새로고침하여 fetch로 데이터를 다시 불러오게 하고 싶었다. - 새로고침을 하고 싶은데 클릭한 부분만 새로고침 기능이 작용해야 했다. - 처음 찾은 것은 이벤트 리스너로 click 이벤트를 컨트롤 하는 것이다. - 이 경우 useState로 boolean 값을 할당한 뒤 클릭하면 useEffect 안에서 리로드 되면서 false로, 버튼을 클릭하면 true로 변경된다. - useEffect 안에 return 문으로 false로 변경해주기 때문에 이벤트가 끝나면 false로 고정되었을 것이다. - 그러나 true로 변경되어도 바로 새로고침이 되지 않았고, 새로고침 기능을 추가하기 위해 useEffect 부분을 무효화하면 화면 어디를 클릭하든 새로고침이 되었다. - 그래서 useState를 거치지 않고 바..
[Next.js] tailwindcss className에서 index 사용 - 3개의 카드가 번갈아 나오는 회전목마(carousel) 형태를 tailwind css의 className에 index를 page 조건으로 주면 카드가 나오기는 한다. - 그러나 index 결과의 규칙을 알 수 가 없다. index>page로 입력하고 page를 1을 넣으면 index가 0만 나올것 같지만.. 0,1,2가 나온다. - page * 3index는 카드가 안 나올것 같지만.. 나온다. - page*3을 하고 조건을 두개 걸면 세개만 나올줄 알았는데 아니다. - map에서 if 조건으로 정보를 뿌려주는 것으로 변경하였다. - 해당 내용은 map의 공식문서, tailwind css의 공식문서에서 발견하지 못했다. - 적절한 활용 방법이 아니라서 그런 것으로 보인다.

티스토리툴바