프론트엔드 배포는 EC2로만 해봤었는데 이번에 UMC 미션하면서 netlify를 알게 되었다. vercel과 비슷한 사이트인 것 같은데 정적 사이트를 아주 쉽게 배포할 수 있어서 앞으로 많이 사용할 것 같다. https://www.netlify.com/ 100GB까지 무료로 사용할 수 있고, Build도 300분까지 무료라서 AWS의 과금이 두려운 사람에게 완전 추천한다.🤩🤩 회원가입하고 로그인하면 아래와 같이 뜰 건데, 깃허브 리포지토리와 연동해주면 된다. 원하는 브랜치를 선택해주고, 아래에서 빌드 설정을 해주면 된다. 자동으로 빌드를 해주기 때문에 따로 vscode에서 npm run build를 해줄 필요가 없다. 프로젝트 폴더가 안에 들어가있다면 Base directory를 설정해주면 되는데, 나는..

개요 맨날 로컬에서만 개발하면서 화면공유해서 진행상황을 공유했었는데ㅎㅎ,,, 프론트 결과물을 수시로 다른 파트 분들이 확인할 수 있게 적당히 배포할 필요성을 느꼈다. 아직 EC2 파서 배포해본 경험이 많지는 않아서 깃헙 페이지로 배포해보기로 했다. html 처음 공부할 때였나 한 번 배포해보려다가 실패한 기억이 있었어서 어려운 줄 알았는데 진짜 겁나 쉬웠다.. 버튼 3번 클릭 정도?ㅠㅠ 배포하기! 일단 레포지토리 만들어서 프로젝트에 연결하셔야 해요! 저는 이미 레포 파놨어서 이건 생략할게요. git remote add origin 링크복붙 git add . git commit -m 브랜치명 하시면 됩니당 그 다음부터 차근차근 하시면 돼요~! 1. 프로젝트 폴더 가서 npm install --save gh..

ChatGPT가 나오고 코드 짜기 진짜 편하다~~ 한 지 0.3초 된 거 같은데 Vercel에서 무려 리액트 컴포넌트를 만들어주는 인공지능을 만들었다. 2023년 9월 15일에 출시했는데 난 방금 알았다.. 아직 Private Alpha 버전이라 쓰고 싶으면 대기해야 하고 2주 정도 뒤에 메일이 오면 사용할 수 있다. https://v0.dev/ v0 by Vercel Generate UI with simple text prompts. Copy, paste, ship. v0.dev 아직 승인메일이 안 와서 직접 사용해보진 않았지만 다른 분들이 하신 걸 보면 정말 엄청난 것 같다. 여름쯤 figma dev mode Anima 플러그인 보고도 놀랐던 것 같은데 사실 피그마 디자인부터 잘 생각하고 만든 거 아..

개요 프로젝트에서 소셜 로그인을 쓰기로 해서 카카오 로그인을 구현해야 했다. 카카오 developers 공식 문서와 많은 블로그들(진짜 거짓말 안 하고 모든 블로그를 다 본 것 같다...) 을 봤는데도 어려운 점이 있었다... 프로젝트 시작할 때 포기했다가 프로젝트가 중후반쯤 온 지금에서야 드디어 완성을 했다...ㅠㅠ 결론은... 프론트에서 카카오 로그인을 구현하는 건 진짜 간단하다..!! 백엔드 개발자분과 충분히 회의를 안 하고 바로 시작해서 좀 엉켰던 것 같다. 프론트에서 인가코드를 백엔드로 넘겨주고, 토큰을 받는 형식으로 진행해야 편한 것 같당☺️☺️ [카카오 소셜 로그인 과정] 1. 로그인 버튼을 누른다. (클릭하면 kakaoAuthUrl로 가게 설정) 2. KakaoAuthUrl에서 로그인 처리..

개요 프로젝트에서 클릭한 위치에 이미지를 배치하고, 새로고침을 해도 이미지가 고정되어야 하는 페이지가 있었다. 그런데 문제는 웹앱이다보니 기기가 달라지면 그 위치가 달라지는 문제가 있었다. 해결법 1. 현재 창의 X,Y 좌표를 구한다. getBoundingClientRect().x getBoundingClientRect().y 2. 브라우저에서 사용자에게 웹페이지가 보여지는 영역의 x,y 좌표를 구한다. clientX clientY 3. 2번에서 1번을 뺀 값을 이미지가 들어갈 컴포넌트의 높이, 너비로 나누어주고, 100을 곱한다. 매번 컴포넌트 높이, 너비가 달라지기 때문에 비율을 구한 것이다. ✳️컴포넌트의 높이, 너비 구하는 법 컴포넌트 속성에 ref = {componentRef}를 해주고, 아래 ..

지금 만들고 있는 페이지가 버튼을 클릭했을 때 페이지가 바뀌지 않고 처리할 것들이 많아서 useState를 이렇게나 많이 써버렸다... 사실 이 hook을 자유자재로 잘 쓰지는 못 했었는데 이번 기회에 아주 확실하게 익히게 되었다. 몇 가지 정리를 해보자면 1. styled-components을 이용해 스타일을 적용할 때 useState를 이용해 그 값을 바꾸고자 한다면 props로 넘겨주면 된다! const Sticker_Img = styled.img` display: flex; width: ${(props) => props.size}; height: ${(props) => props.size}; margin: 2vw; `; const [imgSize, setImgSize] = useState("37v..