kyunghoonk00k

import React, { useEffect, useState } from 'react'; import io from 'socket.io-client'; const socket = io.connect('http://localhost:3000'); function App() { const [notifications, setNotifications] = useState([]); useEffect(() => { socket.on('display_notification', (data) => { setNotifications([...notifications, data]); }); }, [notifications]); return ( socket.emit('new_notification', '새로운 알림')}>알..

데이터 페칭 (useQuery 훅 사용 예시) javascript import { useQuery } from "react-query"; import { getUser } from "./api"; function UserData({ userId }) { const { data, isLoading, isError } = useQuery(["user", userId], () => getUser(userId)); if (isLoading) return "Loading..."; if (isError) return "Error loading data"; return {data.name}; } 캐싱 (자동 캐싱) react-query는 기본적으로 쿼리 키에 따라 자동으로 캐싱을 관리합니다. 배경 동기화 (윈도우 포..

1. 시간복잡도와 공간복잡도가 무엇인지 설명해주실 수 있을까요? 시간복잡도: 알고리즘의 절대적인 실행 시간을 나타내는 것이 아닌 알고리즘을 수행하는 데 연산들이 몇 번 이루어지는 지를 숫자로 표기 공간복잡도 : 프로그램을 실행시킨 후 완료하는 데 필요로 하는 자원 공간의 양 2. 스택, 큐에 대해 설명해주실 수 있을까요? 스택(stack)이란 어떠한 자료를 쌓아서 올려놓은 형태의 자료구조입니다. 책상에 쌓여있는 책들이나 싱크대의 접시를 예시로 들 수 있습니다. 📝 스택의 특징 스택은 위의 그림과 같이 아래에서 위로 쌓이는 형식이며 가장 최근에 들어온 자료를 top이라고 부릅니다. 뻥튀기를 꺼낼 때 가장 아래쪽의 뻥튀기를 꺼내려면 위에서부터 차례대로 뻥튀기를 꺼내야 하는 것처럼 가장 위쪽(최신)의 데이터부..

DOM : 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스..

오늘 한 일 react 기초 1~30 ------------------------------------------------------ 오늘 느낀 것 react 기초 지식 다시 잡는 것이 중요하다. ------------------------------------------------------ 좋았던 점 이걸 왜 이렇게 쓰지? 라는 것을 다시 잡고 갈 수 있었다. ------------------------------------------------------ 개선점 기초만 봤는데도 모르는 점이 많고 부족하다. ------------------------------------------------------ 내일 할 일 react 공식문서, 디테일 (고급) 강의 완료 -------------------..

Infinite Carousel 문제상황 맨 끝 배너에서 첫 번째 배너로 넘어갈 때 자연스럽게 넘어가지 않고 역재생 되는 듯한 애니메이션 발생 문제원인 transition + 양 끝 이미지에 추가적인 이미지가 없기 때문에 처음으로 돌아감 때문에 역재생 애니메이션 발생 문제해결 배너 양 끝에 데이터를 복사해 주고 끝 배너에서 첫 번째 배너로 넘어갈 때 transition을 없애줌 해결결과 해당 하는 이미지의 개수만큼 배너 이벤트가 이루어 지기 때문에 자연스럽게 넘어가는 애니메이션이 생김

자바스크립트 실행컨텍스트 / this가 결정되는 것, closure, event loop, bubbling, capturing, delegation , prototype(chain) ,function.bind, 상속 구현방법 , 커링, 고차함수 propmise 객체, async await 예외처리 -- 비동기 자바스크립트 원시값, 가비지컬렉션 알고리즘 구글을 치고 엔터를 누르면 일어나는 일 (what happens when type google) -> 구글 서버에서 index.html 파일을 GET요청으로 가져옴 이를 위해선 IP주소가 필요한데 도메인 네임을 통해 IP 주소를 찾음 해당 IP를 통해서 index.html을 브라우저에 렌더링함 html css javascript가 브라우저에서 어떻게 렌더링..

이번주 간 진행했던 작업 중 가장 고민했던 부분은 헤더 서치부분에서 모임을 검색했을때 좌측 작은 부분을 mousehover했을때 우측에 자세한 내용이 보여지게 되는데 좌측 부분에서 마우스를 떠나 우측에 마우스를 올렸을 때 보여지는 것이 유지되지 않는 이슈가 발생했었다. 이를 해결하기 위해 2가지 방법을 썼었는데 1. useState를 통해 마우스 이벤트 true , false로 class 명을 유동적으로 변하게 했으나 우측 박스들이 겹쳐서 나오는 이슈가 생겼었다. 2. css hover시 transition을 주기위해 opacity0 -> 1 로 주었었는데 이를 display none -> block을 주어 유지되지 않는 이슈를 해결했다.

tensorflow 설치 window 1. 아나콘다 설치 2. 아나콘다 가상환경 만들기 - 아나콘다 파워쉘에서 관리자 권한으로 실행 - conda activate tens_2 # 가상환경 3. (가상환경) tensorflow 설치 - conda install tensorflow=2.0.0 중간에 에러 떠서 https://blog.naver.com/nobuntu/222940824892 참고 함 4. python 환경설정 5. 주피터 노트북 설정 6. jupyter notebook 실행

MVP 중간발표 회고록 (복사용) 1. MVP 중간발표 자료 2. 스택별 트러블슈팅 기록 로그인이 안되어 있을때 디테일 페이지 접속 - 로그인 에러 번호에 따른 예외 처리 중복 모임 가입 에러 - 백엔드 처리 3.중간발표 질문/피드백 기록 4. 중간 발표 후 회고 반응형 도입 — 모바일ver -- 다소 어려울 수 있다 보안 강화 — https infinite carousel -- 도전 infinite scroll — 모바일ver -- 도전 검색, 좋아요등 서버에 부하가 올 수 있는 api call 최적화 -- 현재 프로젝트 단위에서 고려할 사항인가? 이미지 용량 최적화 -- 최적화 되면 좋음 채팅에서 이미지 전송 기능 추가 -- 가능하면 좋음 후기 기능 -- 도입 예정 api instance -- 도전 ..