전체 글579

• React Error Rendered more hooks than during the previous render Uncaught Error: Rendered More Hooks Than During the Previous Render. 해당 에러는 회원 가입 처리를 할 때 데이터 list를 select option으로 뿌리려고 할 때 발생한 에러이다. 에러를 직역하면 이전 렌더링 보다 많은 hook을 렌더링했다는 것이다. 에러 해결 const { isLoading, isError, data, error } = getCampusListQuery(); useEffect(() => { campusListFunc(); }, []); const userListFunc = () => { if (isLoading) { // console.log("isLoading"); return ; } if (isError) { consol.. DEV/Frontend 2023. 2. 8.

• Goolge OAuth2 로그인 구현 with React Google Cloud Platform에서 OAuth 설정 먼저하자 구글 클라우드 콘솔에서는 OAuth 동의화면과 사용자 인증 정보를 등록해야 한다. OAuth 동의화면 먼저 OAuth 동의화면에서는 앱 이름, 사용자 지원 이메일과 로고 등을 설정한다. 다음은 범위(scope)를 설정해야 한다. OAuth2를 사용하여 유저 정보에 접근 할텐데 어떤 정보에 접근 할지 알아야 한다. 추후 쿼리 날릴 때 파라미터로 날려야하므로 기억하자 마지막으로, 테스트 사용자에 자신이 사용할 email을 미리 등록한다. 팀원들이 있다면 팀원들도 등록해주자. 사용자 인증 정보 구글 클라우드 콘솔의 API 및 서비스 - 사용자 인증 정보 - OAuth2.0 클라이언트 ID에서 계정을 하나 생성해주자. 사용자 인증 정보에 등록하.. DEV/Frontend 2023. 2. 3.

• nodemon - system limit for number of file watchers reached system limit for number of file watchers reached 에러 원인 nodemon에서 감시하는 파일 갯수가 너무 많아서 발생한다 해결 방안 감시하는 파일 갯수 제한을 풀어주자 echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p DEV 2023. 2. 1.

• AWS에 올린 MySQL 외부 접속 안됨 개요 mysql workbench로 aws에 올린 db에 접근하려는데 connect 에러가 발생했다 에러 해결 과정을 기술 할 것이다 방화벽 3306 포트 해제 Workbench에서 db에 원격 접속하기 위한, 방화벽을 해제 해줘야 한다. AWS LightSail 기준으로 생성한 인스턴스의 Networking에 들어가면 설정 가능하다 바인드 주소 0.0.0.0으로 재설정 my.conf 파일에서 주소를 수정하면 되다 bind-address 등의 설정 파일 위치가 mysql 다운로드 받은 방식이나, mysql 버전에 따라 다르니까 꼭 확인하자 아래처럼, 그냥 임의 경로로 vi해서 추가했을 경우, 에러가 발생한다. 난 mariadb를 사용하고 있기 때문에, /etc/mysql/mariadb.conf.d/에 5.. DEV/Backend 2023. 2. 1.

• It is required that your private key files are NOT accessible by others. This private key will be ignored. It is Required That Your Private Key Files Are NOT Accessible by Others. This Private Key Will Be Ignored vscode에서 ssh로 서버에 붙을 때 발생한 문제이다. 내 private key가 다른 사람들에게 노출 될 수 있다는 건데, 처음엔 바탕화면에 키를 저장해둬서 그런 줄 알았다 해결 방안 Mac에서 private key 접근 권한 때문에 발생한 문제였다. 권한을 chmod로 재설정해주면 해결 된다. 나만 읽을 수 있도록 세팅하는 것이다 chmod 400 레퍼런스 Chmod 사용 방법 DEV/Backend 2023. 2. 1.

• ERROR 1698 (28000) Access denied for user 'root'@'localhost' ERROR 1698 (28000) Access Denied for User ‘root’@‘localhost’ MySql를 쓰다보면 간간히 만나는 문제이다 해결 방안 sudo mysql -u root -p mysql DEV/Backend 2023. 2. 1.

• Package 'mysql-server' has no installation candidate - Ubuntu Package ‘mysql-server’ has no installation candidate AWS LightSail Ubuntu에 mysql-server를 설치하려는데 mysql-server candidate가 없다는 에러가 발생했다 package 업데이트를 안한거라 추측해 sudo apt udpate와 sudo apt upgrade를 했음에도 해결 되지 않았다 해결 방법 mariadb-server로 설치하면 하면 일단 해결 된다 완벽한 해결책은 아니고 임시 방편이다 mysql의 친척이라 mariadb가 되는걸가 sudo apt-get install mariadb-server DEV/Backend 2023. 2. 1.

• Apache Could not open configuration file apache2.conf 에러 해결 Could not open configuration file /etc/apache2/apache2.conf : No such file or director AWS에서 만든 서비스를 아파치로 리다이렉팅 하려는데 오류가 발생했다. 예상 원인은 아파치 vhost 디렉터리를 실수로 통째로 날리고, 다시 재설치했기 때문에 발생한 듯 해결 방안 sudo apt-get purge apache2 sudo apt-get install apache2 purge는 패키지와 그 패키지의 환경설정을 모두 삭제하는 명령어이다. 시원하게 밀고 다시 재설치하면 문제 해결! DEV/Backend 2023. 1. 31.

• TypeORM WHERE 옵션 (Relations, Order) Relations userRepository.find({ relations: { profile: true, photos: true, videos: true, }, }) userRepository.find({ relations: { profile: true, photos: true, videos: { videoAttributes: true, }, }, }) 기본적으로 relations 옵션은 main entity와 함께 로딩 되어야 할 경우에 사용된다. 외래키가 있는 등의 상황을 말한다 즉 Sub relation들도 로딩이 되는 것인데 공식 문서에 따르면 join과 leftJoinAndSelect의 shorthand라는데, 단축어 정도로 이해했다. 위의 code는 아래의 SQL 구문으로 변환된다 SELEC.. DEV/Backend 2023. 1. 30.

• Typeorm unique란? 문제의 코드 @Entity() @Unique(["swid"]) export default class Soon extends BaseEntity { @PrimaryGeneratedColumn() soonid: number; @Column() sjid: number; @Column() swid: number; @ManyToOne(() => User, user => user.userid) @JoinColumn({name: "sjid"}) soonjang: User; @ManyToOne(() => User, user => user.userid) @JoinColumn({name: "swid"}) soonwon: User; @CreateDateColumn() createdate: Date; } Unique를 처음 .. DEV/Backend 2023. 1. 30.

• TypeORM의 Where In 절 문제의 코드 export async function getSoonHistorySJListNotMe(sjid: number, campues: string[]) { return await SoonHistory.find({ where: {sjid, soonwon: {campus: {campusid: In(campues)}}}, relations: {soonwon: true}, }); } 테이블이 여러 개로 쪼개져 있고, JOIN해서 데이터를 출력해야 하는 상황이었다. 프론트 요청에 따라 그냥 데이터를 줄 수 있지만, 필요 이상의 데이터를 주고 싶지 않아 쿼리를 조절하다보니 위와 같이 되었다 TypeORM에서 IN 절은 처음이기 때문에 직관적으로 바로 다가오지 않아 기록해둔다 IN은 언제 사용하는가 기본적으로 .. DEV/Backend 2023. 1. 30.

• Token 방식으로 로그인 구현하기 로그인 방식의 분류 로그인(인증) 방식은 크게 토큰 방식과 세션 방식으로 구현 된다 세션 방식(Session) 세션은 시스템 관리자가 일정 기간 서비스를 이용하는 것을 허락하는 구조이다. 세션 동안 사용자는 허락된 범위 안에서 서비스 자원 사용이 가능하다 세션 기반 인증에서는 서버는 사용자가 로그인하면, 사용자를 위한 세션을 생성한다 세션 ID는 사용자 브라우저 쿠키에 저장되어, 세션 유지하는 동안 사용자는 저장된 세션 ID와 요청을 서버에게 전송한다. 서버는 전송된 된 세션 ID와 메모리에 저장된 세션 정보를 비교하여 사용자의 신원을 확인 후 응답한다 토큰 방식(token) 토큰은 사용자가 자신을 인증하고, 고유한 액세스 토큰을 받는다. 해당 토큰은 웹페이지나 앱 등에 저장되어 토큰이 유효한 동안 자격.. DEV/Backend 2023. 1. 27.