본문 바로가기

매일 해내는 개발/Develog62

기술 면접 대비 질문과 답 #1 1. 웹의 동작 방식에 대해 설명해주세요. 웹의 동작 방식은 클라이언트-서버 모델로 이루어져 있습니다. 클라이언트는 브라우저에서 실행되며, 서버는 웹 애플리케이션을 호스팅하는 서버입니다. 클라이언트는 서버에 HTTP 요청을 보내고, 서버는 이 요청을 처리한 후 클라이언트에 HTTP 응답을 반환합니다. 클라이언트는 이 응답을 받아서 브라우저에 결과를 렌더링합니다. 2. HTTP와 HTTPS의 차이점에 대해 설명해주세요. HTTP는 인터넷 상에서 데이터를 주고받을 때 사용되는 프로토콜이며, 암호화되지 않은 평문으로 데이터를 전송합니다. 반면, HTTPS는 SSL 또는 TLS 프로토콜을 이용하여 데이터를 암호화하고 인증하는 보안 프로토콜입니다. HTTPS는 기밀성, 무결성, 인증성을 보장하여 중간자 공격이나 .. 2023. 3. 10.
[Develog] D-day와 옵저버 D-day 기능 구현과 옵저버 유저 피드백을 받으면서 D-day가 생겼다. 마감일을 기준으로 프로젝트 모집이 며칠이나 남았는지 보였으면 좋겠다는 피드백이었다. 처음 짠 코드는 이랬다. //디데이 계산 export const getDays = (milliseconds: number) => { const date = new Date(milliseconds); const day = `${date.getDate() - 1}`.padStart(2); return `${day}`; }; 생략 const day = Number(getDays(deadline - today)); return( {isRecruiting && day >= 0 && ( // 현재 모집 중이고 남은 일자가 0일 이상이면 {day === 0 ?.. 2023. 3. 9.
[Develog] yarn berry Yarn Berry란 무엇인가요? Yarn Berry는 Facebook에서 개발한 오픈소스 자바스크립트 패키지 매니저인 Yarn의 새로운 버전이다. Yarn Berry는 이전 버전인 Yarn Classic에서 겪었던 문제점들을 해결하고 개선된 기능들을 제공한다. 주요 기능으로는 Plug'n'Play (PnP)이 있다. PnP는 의존성 설치 및 관리를 더욱 효율적으로 수행할 수 있도록 도와주고 이를 통해 패키지 설치 속도 상승에 도움을 준다. 또한, PnP를 선택적으로 사용할 수 있기 때문에 기존의 Yarn Classic에서 사용되던 node_modules 디렉토리와 함께 사용할 수 있다. Yarn Berry는 Workspaces를 지원하며 Workspaces는 여러 개의 패키지를 하나의 프로젝트로 관리할.. 2023. 3. 6.
[Develog] 좋아요 기능 구현2 이전 글 [Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬렉션(문서는 각 유저)으로 나눠져있고 좋아요로 증가 또는 감 subtlething.tistory.com React Query를 처음 쓰는데 생각보다 옵션들이 너무 많아서 제대로 활용하지 못하는 것 같았다. 그리고 내가 짰던 좋아요 로직에 대한 의심이 계속 들었던 와중에 좋아요가 적용이 안되는 오류가 발생했다. 그래서 하루종일 좋아요만 붙들고 수정했다. 커밋 링크 [PR] 프로젝트 상세보기 페이지 수정 by jeLee94 · Pull Request #261.. 2023. 3. 1.
[Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬렉션(문서는 각 유저)으로 나눠져있고 좋아요로 증가 또는 감소한 숫자는 post 컬렉션의 like 필드에 저장되고 내가 좋아한 프로젝트는 myproject 컬렉션의 likedProjects 필드에 배열로 저장이된다. 1. 초안 처음에는 좋아요를 누를 때마다 데이터를 업데이트 해주는 방식으로 구현했다. 대신 데이터를 조회하는 건 초기 렌더링 한번만 할 수 있도록 했고 이 후 토글될 때 마다 클라이언트 사이드에서는 state로 상태를 관리할 수 있도록 했다. //api/projectDetail.tsx //좋아요 수 업데이트 export const updateLike =.. 2023. 2. 25.
[Develog] VS Code 꿀팁! 단축키 정리 변수나 단어 찾기, 바꾸기 Ctrl + F 현재 문서에서 일치하는 텍스트 찾기 Ctrl + Shift + F 전체 문서에서 일치하는 텍스트 찾기(현재 오픈돼있는 폴더) Ctrl + H 일치하는 텍스트 찾아 바꾸기 (Ctrl + Alt + Enter 모두바꾸기) 창 열기 닫기 Ctrl + ,(콤마) 설정창 열기 Ctrl + `(백틱) 터미널 열기/닫기 Ctrl + B 왼쪽 탐색기 창 끄기/ 켜기 Ctrl + '+' or '-' 폰트 사이즈 키우기/ 줄이기 Ctrl + Shift + P 확장 기능 선택하기 주석 처리하기 Ctrl + '/' 한 줄 또는 여러 줄 주석 처리하기 Alt + Shift + A 블록 주석 처리하기 이동하기 Ctrl + P 파일 이동하기 Ctrl + (← , →) 덩어리 단위로 커서 .. 2023. 2. 11.
[Develog] Craco란? Craco 설치 방법 Craco란? Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지 Webpack의 번거로운 설정을 줄이기 위해 다양한 오버라이딩 패키지들이 등장했으며, 대표적으로 Craco, react-app-rewired 등이 있다. 일단 craco를 이해하려면 eject를 알아야 한다. CRA 즉 Create React App으로 프로젝트를 만들고 나면 최소한의 필요한 기능만으로 설정이 되어 있다. 이 때 package.json 파일에서 script 파일을 보면 eject 라는 명령어를 볼 수가 있다. "scripts": { "start": "react-scripts start", "build": "react-scripts b.. 2023. 2. 8.
[Develog] 최종프로젝트 S.A 프로젝트 S.A 1. 팀 소개 팀 이름 Detto (Develop Together) 팀원 성효진 (L) 이상원 이유정 (VL) 이정은 배성완 위하연 (D) 2. 그라운드 룰 소통 채팅 - Discord / 프로젝트 관리 - Notion 상호 존댓말 사용하기. 노션 게시글에 댓글 달아주기. Discord 이모지 반응 남기기. ✅👍👀👏 질문이 있을 때, Discord 옥상/진실의방 허들 사용하기. 시간표 ✨ 자율 출퇴근 제도 ✨ 지각비 1000원 / 30분 💸 재택근무🏠 가능 데일리 일정 ~10:00 자율 출근 10:00 데일리 스크럼 (특이사항, 일정 공유, 논의가 필요한 사항) 12:30~14:00 점심 18:00~19:30 저녁 21:00~ 마무리 인사, 자율 퇴근 주기적인 일정 코드 리뷰 - 월,수,.. 2023. 2. 7.
[Error] vecel로 배포 후 파이어베이스 구글 로그인 안됨 The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (gnd-project.vercel.app) to the OAuth redirect domains list in the Firebase console -> Authentication -> Settings -> Authorized domains tab. 난 이런 오류가 떴고 파이어베이스 Authentication -> Settings 에서 승인된 도메인에 저 오류에 있던 도메인을 넣어줬더니 .. 2023. 2. 4.

티스토리툴바