5월 8일 부터 5월 29일까지 진행된 팀프로젝트에 대해 주차별로 회고록을 남기고자 한다. 프로젝트 : 총 인원 : 프론트 4명 + 백엔드 2명 [1주차] > ✔️ 기획구성 팀 구성원들과 함께 프로젝트에 대한 아이디어를 mix & mingle 하는 시간을 가졌다. >

새로운 프로젝트를 진행하기 위해 새폴더를 생성하고vscode의 터미널에서 yarn create next-app을 했더니,위와 같은 에러가 발생했다.permission denied라고 하여 sudo로 다시 명령어를 실행했지만,폴더를 생성하고 삭제를 할 때도 sudo로 해

Docker Docker 란? 부팅 등 운영체제의 핵심 기능(커널)은 공유하는 가상머신 => 운영체제를 새로 설치하지 않아도 됨! node와 mysql등 프로그램이 이미 설치된 도커도 만들 수 있음/ 도커는 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 저장

스태틱 라우팅으로 제작한 페이지는 직접 주소를 입력하여 접근할 수 있어서 S3에 업로드하여 조회할 수 있으나, 다이나믹 라우팅으로 제작한 페이지는 실제 주소가 존재하지 않아 직접 접근이 불가능하다.그렇기 때문에 다이나믹 라우팅은 SSR 배포를 통해서 접근이 가능하도록

트러블슈팅: 문제를 해결하는 과정 기능을 만들 때 중요시 되지 않고, 백엔드 💡 와이어샤크(SSL과 HTTPS) > 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구 중 하나입니다. 💡 패킷이란? 네트워크상에서 주고받는 메시지 데이터 블록의 기본

AWS 콘솔에 로그인상단의 검색창에 S3을 검색하거나, 서비스 메뉴에서 직접 찾아 접속버킷 만들기 클릭구매한 도메인을 입력하고, 2번 부분은 아시아 태평양(서울) 리전을 선택하기(버킷 이름에 http:// , www 등은 입력하지 않는다.)객체 소유권 블럭에서

💡 AWS(Amazon Web Service) 배포 흐름 및 역할 >- S3 : Simple Storage Service (단위 : 1 Bucket) 무제한 용량을 제공하는 온라인 스토리지 서비스 >>데이터를 객체 형태로 저장하여 관리하며, 비용이 매우 저렴하다. 무

💡 테스트 코드 >마우스로 클릭을 통해 api를 요청하는 작업같은 것들을 대신해주는 것 💡 테스트코드의 필요성 > 몇달간 개발한 사이트의 1차개발이 완료된 후, 2주 정도 버그여부를 확인 및 수정하여 테스트를 가진다. 버그를 열심히 잡은 결과 깔끔한 어플리케이션이

✅ OG태그를 미리보기로 구현해주는 과정 >[실습 section32] opengraph-provider.tsx 사이트를 만들어 사이트 주소를 카카오, 슬랙, 디스코드 같은 곳에 보내게 되면 만들어 뒀던 OG태그가 보이게 된다. > OG태그가 보이는 이유는 카카오,슬랙

scraping(스크래핑) > 특정 사이트를 스크래핑을 한다 => 특정 사이트의 한 페이지를 쭉 긁어와 1번 가져오는 것 > 라이브러리 : Chreerio crawling(크롤링) > 크롤링을 한다 => 특정 사이트에서 돌아다니며 버튼을 클릭해 여러 페이지를 가지고

LazyLoad > 페이지를 읽어주는 시점에 중요하지 않은 리소스 로딩을 추후에 하는 기술로, 스크롤을 내리면서 이미지가 보여져야 할 때마다 이미지를 로드한다면,* 데이터의 낭비를 방지*할 수 있다! > https://www.npmjs.com/package/react

✔️ 기존 이미지업로드방식의 문제점 > > 이미지 경로(주소)를 상대주소 ‘../../’와 같은 형식으로 사용하는데, 다른 사람 컴퓨터에 해당 이미지가 없을 경우에는 오류가 뜬다. 클라우드를 통해 주소를 전달받는 과정에서 미리보기가 느리다. 등록버튼을 눌러야 디비에 저

문제 설명카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다.갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을

게시물의 좋아요를 누르게 되면 환경에 따라 좋아요의 수가 올라가는 속도가 다르다.왜?느린환경의 컴퓨터, 혹은 백엔드 컴퓨터가 굉장히 먼 곳에 있다면 해당과정이 굉장히 지연될 수 있음!옵티미스틱 UI란?요청이 서버에 도달하기도 전에 화면의 값을 미리 바꿔버리는 것!lik

✔️ 브라우저에서 렌더링을 해주는 과정 > > 화면을 그려주는데 필요한 리소스(html,css,js)를 다운로드 해온다. HTML과 CSS에서 화면에 렌더해야 할 요소들을 구분 후 렌더되어야 할 HTML,CSS 요소를 합쳐 화면에 그려준다. 화면에 그려줄때 해당 요소들

✅ 알아두면 유용한 개발자 도구 > 설치는 구글 웹스토어에서 진행 > 1. Apollo Client Devtools → 설치후 app.tsx에서 client 설정 부분에 connectToDevTools : true로 설정해야 한다. > 2. wappalyzer →

문제 설명네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.지도는 한 변의 길이가

문제 설명자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요.제한 조건n은 1 이상 100,000,000 이하인 자연수입니다.입출력 예입출력 예 설명문제풀

useQuery : 페이지에 접속하면 자동으로 바로 실행되어 data라는 변수에 fetch해온 데이터를 담아주며, 리렌더링 된다.useLazyQuery : useQuery를 원하는 시점에 실행(버튼 클릭시)후 fetch해온 데이터를 data변수에 담아준다.useApol

💡 RefreshToken 이란? > 발급된 AccessToken의 유효 기간이 지나 만료 되는 시점에서 RefreshToken을 통해, 로그인 과정 없이 새로운 AccessToken을 받아올 수 있다. > RefreshToken은 2주~1개월 정도의 긴 만료 기한을