프론트엔드 (React) [1] S3 버킷 만들기 - 버킷 이름 : 도메인과 일치하도록 (Route53 설정 시 필요) - 퍼블릭 액세스 차단 : 해제(비활성화) 빌드한 파일 업로드 [권한] 탭 '버킷 정책' - '정책 생성기' 이용 - "Resource" 부분 arn 뒤에 /* 붙이기 [속성] 탭 '정적 웹사이트 호스팅' 활성화 - React라서 인덱스와 오류문서 모두 index.html - 엔드포인트 생성됨 (이걸로 바로 접속 가능) (참고 : https://velog.io/@jinseoit/AWS-S3-bucket) [2] Route53 S3와 연결 - 레코드 유형 : A - 별칭 사용하여 S3 버킷 선택 (버킷 이름과 도메인 이름 불일치 시 안 뜸) 하위 도메인 www 등록 - 레코드 유형 : C..
흐름 * REDIRECT_URL : 프론트 쪽으로 지정(localstorage:3000/auth/kakao) 프론트 : 카카오 서버에서 인가코드 받기 (/oauth/authorize) => window.location.href 이용 프론트 : REDIRECT_URL 통해 인가코드를 받으면 react-router-dom 이용하여 카카오 로그인 처리용 컴포넌트(KakaoAuthHandle)로 이동 => 백엔드로 인가코드와 함께 JwtToken 요청 백엔드 : 카카오 서버에서 액세스 토큰 받기 (/oauth/token) 백엔드 : 액세스 토큰으로 카카오 유저 정보 받기 (/v2/user/me) => DB 조회 후 프론트에 JWT Token 전송 (회원 아닐 경우 가입 처리) 프론트 : JWT Token 받아 ..
useMediaQuery 이용 여러 파일에서 사용해야하기 때문에 글로벌하게 사용할 수 있도록 따로 파일을 만들었다 다른 파일에서 컴포넌트처럼 사용하면 된다 childeren에 의해 컴포넌트 내에 있는 코드들을 return한다 //mediaQuery.js import { useMediaQuery } from "react-responsive"; const Mobile = ({ children }) => { const isMobile = useMediaQuery({ maxWidth: 1024 }) return { isMobile && children } } const Pc = ({ children }) => { const isPc = useMediaQuery({ minWidth: 1025 }) return {..
https://school.programmers.co.kr/learn/courses/30/lessons/142086 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s) { const answer = [-1] for(let i = 1; i = 0; j--) { if(s[i] === s[j]) { answer.push(i - j) break } if(j === 0) { answer.push(-1) } } } return answer } 0번째 문자는 자신..
https://school.programmers.co.kr/learn/courses/30/lessons/140108 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(s) { const answer = [] const obj = { str: s[0], o: 0, x: 0 } let temp = "" for(let i = 0; i < s.length; i++) { const curS = s[i] temp += curS obj.str === curS ? obj.o += 1 : obj.x += 1 if(obj.o === obj.x)..
