#promise

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

프론트엔드 데이터 통신과 에러핸들링..

에러핸들링과 데이터 통신이 궁금해서 여러가지 찾아봤는데 쉽게 이해가 안되네요..try catch promise then fetch 등등 본 거만 많고 정리가 안되는 상태입니다ㅠㅠ 수준 낮은 질문이지만 어떤 순서로 봐야하며 어떤 이유에서 다른 걸 사용하는지 가이드라인을 대충 알고싶습니다ㅠㅠ

리액트 로그인질문..

react + 파이어베이스만 써오다가 react + express 조합을 오랜만에 사용중인데 긴가민가한점이있어서 질문드립니다 ㅠㅠ import axios from 'axios'; const instance = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL, timeout: 2500, headers: { 'Content-Type': 'application/json', withCredential: true, }, }); instance.interceptors.request.use( (config) => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } else { delete config.headers['Authorization']; } return config; }, (error) => { return Promise.reject(error); } ); export default instance; 이렇게 인터셉터를주어서, 요청할 때마다 토큰을 전달하고있습니다. 그리고 프라이빗 라우터 + 유저정보 인증 훅을 사용해서 로그인사용자만 접근가능하게 페이지를 설정해줬습니다. 근데 질문 1. 네트워크탭 Request Headers 에서 Authorization을 확인해보면 토큰정보가 그대로 노출되고있는데요 원래 이렇게되나요? 질문 2. Bearer + token 이렇게 보내는 경우는 포스트맨이나 이런걸로 테스트할때만 Bearer 을 붙여서 보내주면될까요? 질문 3. 검색 키워드가 생각이안나서 질문으로 올립니다. 아주 옛날에는 (4년전) App.tsx에서 if(localstorage.token){ setAuthToekn(token); } 이런식으로 하고, setAuthToken함수는 import axios from 'axios'; const setAuthToken = (token) => { if (token) { axios.defaults.headers.common['x-auth-token'] = token; } else { delete axios.defaults.headers.common['x-auth-token']; } }; export default setAuthToken; 이런식으로 되어있었는데요, 요즘은 제가 짠 코드처럼 axios.인터셉터 식으로 하는게 맞나요? 질문 4. 그럼 요즘도 회원가입/로그인시 로컬스토리지에 유저 정보 (닉네임 이름 이메일, 토큰정보)만 저장해두고 로그인하면, 로그인버튼이 회원 닉네임으로 변하게 해준다던가.. 이런식으로 분기처리를 하나요? ( 저는 이렇게하고있어서요.. 로딩처리를 줄수도있겠지만 깜빡거리는게 싫고, 또 로컬스토리지로안하면 로그인버튼으로 잠깐바꼇다가 회원닉네임이 표시되더라구요) 질문5. (질문4와 이어집니다.) 만약 질문4처럼하면 사용자가 사이트에 계속 로그인중인데, 이 토큰이 끝났는지 판단하려는 코드를 따로 작성해줘야할까요? 예를들면, App.tsx에 서버 api/auth같은거에 요청보내는 로직을 작성해서, 토큰만보내서 유효한 토큰인지 아닌지, 유효하지않은토큰이면 에러를 리턴시켜준다던가, 리프레쉬토큰을 발급시켜서 연장시켜준다던가 이런식으로하면될까요? 마지막으로 질문이 좀 많고 중구난방인데 죄송스럽고 조심스럽네요..

node.js에서 API를 만들 때 콜백 함수를 많이 사용하나요?

안녕하세요 node.js express 강의를 듣고 있는 예비 (FE) 개발자입니다. 현재 back-end 역량을 키우기 위해 인프런의 `따라하며 배우는 노드, 리액트 시리즈 - 기본강의`를 수강중인데요 API를 만들때 콜백 함수를 많이 사용하고 메소드를 만들 때에도 콜백함수를 매개변수로 넣어서 결괏값을 콜백함수에 전달하도록 만들기도 하더라구요. 저는 왠지 이게 불편해서 promise 문법(.then .catch...)으로 바꿔보고 있었는데 문득 콜백을 사용하는 내가 모르는 이유가 있지 않을까? 하는 생각이 들었고, 현재 개발 트렌드도 궁금해졌습니다. 현재 개발 환경에서도 모종의 이유(JS의 태생적 한계?)로 프로미스 문법보다는 콜백을 많이 사용하는지, 아니면 오래된 강의(2020년)라 그런건지, 그냥 사바사인지 궁금합니다!

프론트엔드 개발자를 지망하는 취준생인데 이력서에 뭐가 부족한 것일까요?

5월 19일에 국비 부트캠프를 수료한 후 현재까지 5개월 동안 구직 활동을 하고 있는 취준생입니다. 현재까지 100군데 넘게 스타트업, 중소, 중견, 대기업 가리지 않고 다 지원했는데 면접은 커녕 서류 통과가 되는 곳이 한 군데도 없습니다. 취업에 먼저 성공했던 동료 취준생과 디스코드의 개발자 커뮤니티를 통해 이력서를 수정하고 있는데 현재 맞게 진행되고 있는지 긴가민가 합니다. 그래서 여기 계시는 현직자 분들한테 피드백 요청드리고자 합니다. 가감없는 솔직한 평가 부탁 드리겠습니다. 1. 이력서 제목: '이력서 | 안녕하세요, 정연준입니다!' -부족해도 멈추지 않는 개발자 -아는 것과 모르는 것을 구분할 줄 아는 개발자 2. 자기 소개: `안녕하세요, 신입 React 프론트엔드 개발자 정연준입니다. -시행 착오를 통해 성장해나갑니다. -잘하는 것과 부족한 것을 구분하여 잘하는 것을 부각시키고, 부족한 것을 채울려고 노력하는 개발자가 될려고 합니다. -좋은 서비스와 더불어 사용자가 편하게 이용할 수 있는 서비스를 만드는 것을 목표로 하고 있습니다. ` 3. 개발 직무: 프론트엔드 개발자 4. 프로젝트: -기간: 2023.04.17 ~ 2023.05.19 -서비스 제목: One-Line -한 줄 요약: AI모델이 사용자가 작성한 게시글을 한 줄 요약 및 제목 생성 -프로젝트 종류: 팀 프로젝트 -역할: 프론트엔드 파트(메인 페이지 게시글 목록 전체 조회, 인증 페이지 구현) *메인페이지 게시글 목록 전체 조회 1) Trending 섹션 2) Recent Posts 섹션 *메인 헤더(Global Navigation 메뉴) *인증 페이지에 Firebase Authentication 기능 적용 5. 교육 이력: -기간: 2022.11.28 ~ 2023.05.19 -주관 기관: 엘리스 -교육 프로그램 이름: 엘리스 AI트랙 6기 -학습한 기술 스택: React, Express.js, MongoDB, HTML5, CSS3, JavaScript, GitLab, Python, MySQL, TensorFlow, Pandas, Node.js -세부 사항 *JavaScript 1) JavaScript 기초 2) 싱글 스레드, Event, Promise 개념 숙지 *React 1) React 기초 *Express.js 1) Express.js 기초 *MongoDB + Mongoose 1) DBMS 기초 2) MongoDB, Mongoose 기초 *데이터 분석 1) Python, SQL 기초 2) Pandas 기초 *인공지능 1) 데이터 과학 기초 2) 이미지 처리 기초 6. 링크 -프로젝트 링크: https://10team.vercel.app/ -프로젝트 시연 영상: https://drive.google.com/file/d/16Qni0swyC8HbAY2iqnEy5QWze9ianjln/view?usp=sharing -개인 블로그: https://chadolbaegi128.tistory.com/

Firebase Error

Firebase authenication을 사용해서 로그인 및 회원가입을 구현했습니다. 그런데 로그인시 첫 번째 로그인은 무조건 에러가 발생하고 두 번째 로그인 때는 로그인이 완료 되는 현상이 일어납니다. 콘솔창을 보면 (auth/network-request-failed)라고 뜹니다 백엔드는 node js로 구현했으며, 공식 문서를 그대로 이용해Promise를 사용해 비동기처리도 시켰습니다 대체 어떤게 문제인가요 ㅠㅠ

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

개발한 앱이 play 프로텍트에서 위험한 앱으로 표시됩니다.

안녕하세요, 앱을 기획 후 외주를 통해 개발했었는데요 작년까지는 구글 플레이스토어를 통해 다운받을 수 있었습니다. 그런데 올해 초에 구글 정책이 바뀌면서 구글 회원가입이 필수가 되었더라구요. 앱을 수정할 여유가 없어서... 구글스토어는 포기하고 원스토어에서 다시 출시를 했는데요 원스토어에서 다운받으려하니 개발한 앱이 play 프로텍트에서 위험한 앱으로 표시되는 것입니다. https://support.google.com/googleplay/android-developer/answer/2992033 위 링크를 통해 이의를 제기하라고하여 진행했지만 답변오는 것도없고 2주가 홀랑 지나가버렸습니다. 여전히 play 프로텍트 제제는 있구요. This application could be downloaded from the Google Play Store until last year. The Google Play Store policy is changing, and it is difficult to implement Google login, so we are preparing for distribution through other app stores. However, this is a situation where the download is being compromised by Play Protect. I am attaching the app link, so please review unblocking. 위와 같이 이의를 작성해서 제출했는데요, 마땅히 들어가야하지만 빠진 내용이 있는 것인지 원래 오래걸리는 것인지 같은 문제를 겪어보신 분들의 조언을 부탁드리고자 질문글을 올렸습니다. 꼭 답변을 부탁드립니다 ㅠㅠ

express로 service 단에서 예외처리 방법

프로젝트 간단한 설명 저희 회사 프로젝트는 프론트엔드 Rect, 백엔드 Spring 으로 되어 있고 보안 회사여서 프론트 파트는 모노레포로 구성 되어있습니다. React와 NodeJS 가 같은 포트를 사용해서 모든 요청이 NodeJS에서 처리 됩니다. NodeJS는 React와 Spring의 중간 단계라고 생각하시면 되고 구성은 Router(프론트에서 받은 요청, 지금은 Controller 분리한 상황), Api(백엔드 요청 로직)으로 구성 되어있습니다. 궁금한 부분 다른 분들의 프로젝트를 봤을 때 Controller에서는 try~catch로 오류를 체크하는데 Service에서는 Promise 객체를 반환만 할 뿐 체크하는 로직은 없었습니다. 여기 프로젝트에서 Api와 Service의 의미가 다르지만 Promise 그대로 반환하면 return 타입이 Promise<any>로 설정 될 수 밖에 없습니다.(타입 설정 불가) 그리고 Controller에서 데이터를 검증해야 하고 res.data로 받아야 될 수 밖에 없습니다. 이렇게 하면 body와 header 등 응답에 필요한 부분을 받을 수 있지만 과연 이게 맞는 것인지 의문이 들어서 같이 나누고자 글을 남깁니다. 정리 1. Api(NodeJS에서 Spring으로 요청하는 로직)에서 Controller와 동일하게 예외 처리해야 되는지 2. Api에서 검증을 수행하고 res.data를 던져도 되는 부분인지 응답을 어떤 형식으로 처리하는지(만약 header의 값이 필요하면 같이 객체로 묶어서 return 해야 함) 코드 예시(해당 코드는 회사와 관련 없으며 이해를 위한 코드 입니다)

node에서 promise.all로 묶인 작업들은 하나의 이벤트 틱안에 작업되는건가요?

안녕하세요~~~ node 작업 중에 궁금한 부분이 있어서 질문 드립니다. promise.all로 묶인 여러개의 비동기 요청이 있습니다. 이 promise.all이 실행될때 비동기 요청들이 하나의 이벤트 룹 틱안에 다 날라가게 되는건가요? 예를 들면, promise.all 안에 비동기 요청이 100개가 있다고 하면 한 틱에 50개 밖에 처리하지 못하고 그 다음 틱에 나머지 50개를 처리하는 경우는 없나요?

firebase 로그아웃 에러가 납니다.

index-30f3030e.js?7426:1267 Uncaught (in promise) TypeError: Cannot assign to read only property 'isRunning' of object '#<ProactiveRefresh>' at ProactiveRefresh._stop (index-30f3030e.js?7426:1267:1) at UserImpl._stopProactiveRefresh (index-30f3030e.js?7426:1681:1) at AuthImpl.directlySetCurrentUser (index-30f3030e.js?7426:2588:1) at eval (index-30f3030e.js?7426:2442:1) _stop @ index-30f3030e.js?7426:1267 _stopProactiveRefresh @ index-30f3030e.js?7426:1681 directlySetCurrentUser @ index-30f3030e.js?7426:2588 eval @ index-30f3030e.js?7426:2442 로그아웃 함수를 실행하면 위와 같은 에러가 나는데요. 로그아웃을 하고 싶은데, 로그아웃이 되질 않아서 useEffet로 로그인 상태를 감지하는 함수에서도 계속 로그인이 된 상태로 나옵니다 ㅜㅜ

Promise.all과 Promise.allSettled 차이

최근 회사에 입사해서 여러 코드를 보고 있는데 Promise.all과 Promise.allSettled를 많이 사용하고 있더라고요. 두 method가 구별되어서 사용되지는 않고 있는데 크게 문제는 없습니다. 검색해보니 Promise.all은 하나만 실패해도 결과를 얻을 수 없고, Promise.allSettled는 전부 결과를 얻을 수 있다고 하네요. 각각을 어떤기준을 가지고 현업에서 사용하는지 알고싶습니다.

aws lambda에서 nodejs promise 비동기 호출하는 방법

안녕하세요~ node.js 14를 aws lambda로 구동시켜서 작업 중에 있는데요. 배치 작업을 하나 만들었는데, 코드 중에 비동기로 다른 서비스를 호출해도 되는 요청이 있어서 await을 걸지 않았는데 로그를 보니 해당 코드가 요청하기 전에 람다가 꺼지는 것 같아서요. 혹시 이유를 아시는분 계신가요?

JS promise 이름은 왜 promise인가요?

안녕하세요~ 자바스크립트의 promise는 왜 promise라는 이름이 지어진건가요?? 구글링해도 잘 못찾겠네요.

Promise.all 에 실행 순서를 보장할 수 있는 방법이 있나요?

안녕하세요! Javascript Promise.all에서 실행 순서를 보장할 수 있는 방법이 있는지 궁금합니다! 추가적으로 Promise.all에서 돌아가는 함수들의 실행 시간을 설정할 수 있는지도 궁금합니다~

Promise에서 then에서 에러가 발생한 경우 catch에서 받나요?

then과 catch가 체이닝이 되어있으니까 then에서 에러가 발생한 경우 catch에서 그 에러를 보고 반응을 할 수 있을 것같은데 맞나요?

자바스크립트 promise관련 질문입니다

Producing code와 consuming code가 나눠져있음의 장점이 Producing code가 선언되어있다면 언제나 consuming code로 원하는 순서에 실행할 수 있다 맞나요