구우우우운감 구우우우운감

export const userApi = createApi({ reducerPath: "user", // highlight-end baseQuery: fetchBaseQuery({ baseUrl: "http://111.111.111.111", headers: { Authorization: `Bearer ${getLoginToken()}` }, }), endpoints: (builder) => ({ getUserInfo: builder.query({ query: () => `users/informations`, }), }), }); export const { useGetUserInfoQuery } = userApi; 유저정보를 가져오는 Api에서 headers에 localhost에 담긴 토큰을 가져오는 함..

리액트에서 key는 배열안에서 컴포넌트의 고유성을 유지하기 위하여 사용합니다 {posts.map( (post) => )} 위와 같이 PostCard라는 컴포넌트는 각각 post.id에 담긴 값을 통해 고유한 key를 부여받고 랜더링 할 때 이 key를 통해서 효율적인 랜더링을 하게 됩니다. 만약 key가 매번 달라지게 된다면 각 자식 컴포넌트는 매번 다시 랜더링을 해야합니다. 하지만 이를 이용하는 상황 또한 고려해 볼 수 있습니다. 1. 컴포넌트 초기화 function App(){ return } 부모컴포넌트 function UserProfile({ user }: { user: number }) { const [name, setName] = useState(""); const [password, setP..

유튜브와 같은 사이트에서 작성된 게시글이나 댓글을 보면 글자수가 길어지면, 글자를 자르고 자세히 보기 버튼이 활성화 되어 버튼을 누른 후에 모든 글을 볼 수 있는 기능이 있습니다. 해당 기능을 리액트에서 구현해 보았습니다. 먼저 생각해야 할 것은 글자를 자르는 기준을 생각해야 합니다. 단순히 일정 글자수가 초과 된 경우 자르게 되면 위와 같이 글자수는 많지만 3줄밖에 되지않아 글자를 자르지 않아도 되는 경우에도 글자를 잘라버리는 경우가 발생합니다. 따라서 글자수가 아닌 해당 게시글의 라인수를 기준으로 잘라야 합니다. 그렇다면 개행문자(\n)의 개수로 확인하면 되지않을까? 라는 생각을 할 수 있지만 개행문자를 사용하지 않더라도 글자가 화면의 끝에 다다르면 자동으로 다음줄로 넘어가지기 때문에 라인수를 정확히..

유튜브 API를 사용하기 위해서 2가지 인증방식을 사용합니다. OAuth2.0과 API Key 둘 중 하나를 사용하면 되는데 자막을 다운로드 하기 위해선 OAuth2.0 방식을 사용해야만 다운로드를 할 수 있습니다. OAuth2.0방식을 사용하기 위해서 구글로그인이 필요하며 로그인 후 발급되는 ACCESS_TOKEN을 유튜브API에 함께 전송하여 인증합니다. 1. 구글 로그인 https://accounts.google.com/o/oauth2/v2/auth?client_id=클라이언트ID&response_type=code&redirect_uri=리디렉션URI&scope=스코프&access_type=offline 위와 같은 형식의 URL로 접속을 하면 로그인 할 수 있는데 이때 클라이언트 ID는 콘솔 창에서..

새로운 프로젝트로 무엇을 만들까 고민하던 중 openAPI를 활용한 프로젝트를 하나 해보고 싶었고, 유튜브 API가 눈에 들어왔습니다. 구글에서는 수많은 API를 제공하고 있고 그 중 유튜브의 API만 떼서 보더라도 많은 것들을 할 수가 있는데, 쉽게 해볼 수 있고 유용한 기능을 만들 수 있는 기능으로 유튜브 자막API를 활용해보고 싶었습니다. 원하는 유튜브 영상의 자막을 번역해서 보고싶을 때, 유튜브 자막을 읽어오고 번역하는 시스템을 만들고 싶었습니다...만 API를 실제로 사용해보니 직접 영상을 올린 본인만 다운로드를 할 수가 있어서 원래 기획했던 내용과는 조금 다르게 본인이 올린영상의 한국어 자막을 달고 외국어로 번역해서 업로드 할 수 있는 기능으로 바꿔서 제작하게 바뀌였습니다. 0. 유튜브 API..

댓글 작성 기능 구현 중 무한스크롤로 구현된 댓글에서 optimistic update를 구현해보겠습니다. useInfiniteQuery를 사용하게 되면 다음과 같이 데이터가 구성됩니다. [ pages: [ { comments: [{코맨트 내용}, {코맨트 내용} , {코맨트 내용} ], next }, { comments: [ {코맨트 내용} , {코맨트 내용} , {코맨트 내용} ], next }, ... ] ] 따라서 이 형식에 맞춰서 캐시된 데이터를 수정하면 됩니다. 쿼리 데이터를 수정하는 부분만 보면 const oldData = old as InfiniteData; InfiniteData를 이용해 타입을 불러올 수 있습니다. 제가 구현해야할 내용은 댓글 작성시 맨 앞에 댓글을 추가하는 작업이므로 c..

const session = await connection.startSession(); await session.withTransaction(async () => { await AlarmSchema.updateOne( { createAt: "2023-10-08 14:15:13" }, { $set: { content: "테스트" } }, { session: session } ); await session.abortTransaction(); }).then(() => session.endSession()); withTransaction 내에서 await session.abortTransaction();을 사용하거나 throw 문, 혹은 쿼리문의 에러가 발생한경우 콜백함 수내에서의 작업을 (여기서는 update..

문제상황 class Song{ id = 1; init(){ document.querySelector("#range").addEventListener('click', this.unSelectNote) } unSelectNote(){ console.log(this.id); } } const song = new Song(); song.init(); 위와 같은 Song 클래스가 있다고 할 때 #range 요소를 클릭할 때마다 unSelectNote가 호출될 것입니다 이때 this.id를 출력하게 되면 undefined가 출력됩니다. 왜냐하면 document.querySelector("#range").addEventListener('click', this.unSelectNote) 처럼 함수를 직접적으로 등록할 때..