조미혜
📝 작성한 글
가이드 작업
초기세팅 세팅 role 난이도/등급
HCS > Import CSV
HCS > Import CSV - 형식에 맞게 자동으로 엑셀 넣어주기 팝업, csv 다운로드는 기본 input download로 진행하였음. 업로드시 형식에 맞게 업로드 되게 하였고, 형식에 맞지 않는 코드가 있으면 에러 팝업을 띄움 js// hcs/network/secgrp const fileUpload = async (file) => { const data = await uploadCsv(file) fileUploadD
을 위한 Next.js 15와 Supabase 템플릿 만들기.png)
1편, 유저 인증(Auth)을 위한 Next.js 15와 Supabase 템플릿 만들기
Next.js 템플릿 만들기 먼저, Next.js 앱을 아래와 같이 만듭니다. js pnpx create-next-app@latest supabase-nextjs-test or npx create-next-app@latest supabase-nextjs-test 그러면 아래와 같이 여러 가지 세팅이 나오는데요. App Router 그리고 Turbopack 이 보이네요. js➜ pnpx create-next-app@latest sup
2편. Google OAuth를 이용한 로그인 구현
Google Cloud에서 API 및 서비스 설정하기 Google Cloud에서 API 및 서비스 설정하기 Google Cloud로 가서 OAuth 관련 API 관련 설정을 해야 하는데요. 굉장히 복잡합니다. 아래와 같이 쭉 따라서 하시면 됩니다. Google Cloud는 console.cloud.google.com 여기로 가시면 됩니다. 위와 같이 왼쪽 상단에 "프로젝트 선택" 버튼을 클릭해서 아래와 같이 프로젝트 선택 창이 뜨면 오른쪽
Google 로그인연동
1. 구글 클라우드 플랫폼에 앱 등록 https://console.cloud.google.com/auth/overview?inv=1&invt=Abrnyg&project=chatting-app-453302 구글 클라우드 플랫폼 계정을 생성하고 설정을 진행해보자. 구글 클라우드 플랫폼 > 콘솔 > API 및 서비스 > 사용자 인증 정보 접속 구글 프로젝트 생성 후 생성한 프로젝트로 이동 Project Name : My Next App
Next 셋팅방법
1. 설치하기 npm create cloudflare@latest 프로젝트명 -- --framework=next 2. node 버전 변경 1) .nvmrc 파일을 생성한다. 2) node -v 을 파일 안에 기재한다. 3. 보통 next에서 많이 사용하는 구조 및 라이브러리 app 라우터 구조 css 는 tailwind
Go 셋팅방법
1. 설치하기 npx create-expo-app [App-Name] 2. 로그인 cd [App-Name] npx expo login 3. 연결하기 eas init --id 32b5bc82-a96a-49e3-a568-70c0749fa397
Branch 원격 저장소와 로컬
1. Branch 로컬과 원격저장소와 싱크 맞추기 git push --set-upstream origin 브랜치이름 2. Branch 로컬 원격지 확인 git branch -vv
Branch 생성
1. Branch 확인방법 git branch 2. Branch 사용 git checkout 브랜치이름 3. Branch 새로 만들기 git branch 새로운 브랜치이름 4. Branch 삭제 git branch -D 브랜치이름 5. Branch 원격에서 올리려면 git push origin 브랜치이름 6. Branch 원격에서 삭제하려면 git push origin -D 브랜치이름
Stash 임시저장
1. git stash란? git stash는 Working Directory(단 git add 자체가 안된 것은 제외, modified 것은 stash됨)와 Staging Area의 작업물을 임시 저장공간에 저장하는 명령어이다 git stash git stash save 2. git stash pop을 이용해 저장된 코드 꺼내기 git stash로 저장된 변경 사항은 다시 git stash pop을 이용해 꺼낼 수 있다. git sta
BlackDuck 작동방법
Blackduck 정보 접속 주소: - 계정: - 프로젝트: - Version: - 1. 처리 요청 Security Risk – Critical, High(11건) License Risk - Critical, High(0 건) 2. 처리 방법 java, jdk 설치 환경변수 설정 synopsys-detect.jar 상위 폴더에 넣기 아래의 코드와 같이 실행 실행시 주의 할 사항 노란색으로 칠한 부분은 변경 되어야 할
SonarQube 작동방법
테스트방법 환경 설정을 간소화 하기 위해 Docker를 사용합니다. 또한 다음 방법이 절대적인 것은 아니지만, 그대로 따라했을 때 동작하는 것을 목적으로 하기에 제가 수행한 방식을 그대로 작성하는 점 참고 부탁드립니다. Docker Desktop을 설치합니다. docker.com에 개인 회원으로 가입합니다. Docker Desktop을 실행합니다(로그인 필요). 터미널에서 다음 명령어를 실행합니다. docker run -d --name
 copy.png)
TypeScript 유틸리티 타입 (Pick, Omit, Partial, Record 등)
omit이란? Omit을 선언한 후 첫 번째 제네릭 타입에 대상 타입을 넘기고, 두 번째 제네릭 타입으로 제외할 속성 이름을 문자열 타입 또는 무자열 유니언 타입으로 선언한다. Course 에 지정된 타입(rating, reviewsCount, studentCount)을 무시하고 다시 정의하는 형태이다. jsonexport interface Course { title: string; subtitle: string; course
RouterView와 NuxtPage 차이
RouterView 와 NuxtPage 차이 RouterView - 컴포넌트가 마운트 될 때 한번만 렌더링 됨. NuxtPage - 기본적으로 라우트 path가 변경되었을 때 다시 렌더링 됨.
카카오톡, 구글, 네이버 연동시 문제점
카카오톡, 구글, 네이버 연동 하면서의 문제사항 기록 1. 구글 카페24와 연동하기 아래의 이미지와 같이 redirectURL 을 넣어야하며 개발자 url이 아닌 도메인 형태의 url로 들어가서 테스트를 해야 가능하다. 2. 네이버 카페24와 연동하기 아래의 가이드 대로 신청하지 않을 경우 신청이 안될 수 가 있음. https://developers.naver.com
카페24 FTP 설정하는 방법
Setting 1. 기본적으로 VSC를 설치했다 가정하고 (네이버에 VISUAL STUDIO CODE 검색해서 설치하면 된다.) 실행을한다. 2. 확장 메뉴를 열고, ftp-simple을 검색해서 설치를 해주자. 상단부 검색창에 ">ftp-" 까지만 검색하면 사진에서처럼 여러가지가 좌르륵 뜨는데, 그중에 "ftp-simple : config - FTP connection sett
vitepress 와 cloudflare 로 배포하기
vitepress 로 github-page 에 action으로 배포하기 1. pages 구조로 작성하기 위와 같은 페이지 구조로 작업하다보면 경로 문제가 생기는 경우가 발생한다. 그럴경우 아래의 코드를 꼭 적어야 한다. //.vitepress/config.mjs rewrites: { "pages(/:path)*/(.*)": "(/:path)*/(.*)", }, 2. vitepress 로 배포 테스트하기 vitepress
삼성 디버깅
삼성 디버깅 하는 법 휴대폰 설정 변경 디바이스와 PC를 케이블로 연결 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 7번터치 설정 > 개발자 옵션 > USB 디버깅을 on chrome chrome://inspect/#devices 브라우저에 해당 내용을 입력한다. 밑에 디바이스 정보, 브라우저 정보 등등이 뜬다면 성공! 👾 주의 별로 문제 없을것 같은 상황이지만 의외로 케이블 문제가 있었다. 꼭 알맞는 CtoC 케이블을 연결
애니메이션 플러그인
애니메이션 플러그인 모음집 1. Matter.js 링크 : https://brm.io/matter-js/ 2. Scradar.js 링크 : https://gist.github.com/Kim-Chuljoong/381e911942e18eee4f5dc3851810a78b 사용법 : html <div id="anchorBoxId_{$product_no}" class="cont-box scradar" data-scradar="{progres
spotify 클론하기
셋팅 전 버전 확인하기 nuxt3 tailwind vue3 버전: 3.4.34 pinia node 버전 : 20.9.0 프로젝트 셋팅 1. Nuxt3 설치 npx nuxi init project-name 2. Tailwind Css 설치 Require and install the NuxtTailwind module by installing it via NPM: npm install -D tailwindcss postcss
사용중인 port 죽이기, port kill
사용중인 port 죽이기, port kill - lsof -i :portnum lsof -i :portnum 명령어로 사용중인 해당 Port의 PID를 확인할 수 있다. gillog@Gillogui-MacBookAir DevTool % lsof -i :80 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 17689 gillog 156u IPv
spotify 클론 로그인 구현시 oAuth2.0 문제
구글 oAuth 2.0 사용 문제 2016년 8월, Google 측에서 '보안 강화를 목적으로 임베디드 브라우저 환경에서 구글에 대한 OAuth 요청을 허용하지 않을 것' 이라고 발표를 했다. -> 해결방안은 어려워서 안 찾아봄
Input 태그 버그문제
Input 태그 버그문제 💡 Input 태그는 사파리에서 호환이 되지 않는다. 크롬 기준 아래와 같이 사진상에서 봤을 때 업로드를 클릭시 파일을 선택할 수 있게 잘 눌리는 걸 확인 할 수 있다. 사파리 기준 아래와 같이 사진상에서 봤을 때 파일 선택이 안되고, 샘플 csv 파일 을 선택시 다운이 안되는 버그가 발생 하고 있다.
원자로, 운영 구분 짓는 코드
원자로, 운영 구분 짓는 코드 💡 useDev() 에 있는 deployEnv 으로 구분하여 arc, prd 인지 체크 1) html 영역 jsexport default { { <a class="d-flex align-center text-primary-900" :href="`${isProduction ? '/console/' : '/'}docs/${locale}/security_group_rule_
Commit 이모지 설정
# <이모지> <제목> # <본문> # ------------------------------------------------ # # 제목은 50자 미만, 본문은 한 줄에 최대 72자까지만 입력 # 제목의 시작이 영어라면 첫 글자는 대문자로 # 제목은 명령문으로 작성하며 제목 끝에 마침표(.)는 금지 # (e.g., :sparkles: Ajax로 실시간 데이터 호출) # 본문은 생략 가능 # 본문 작성시에는 제목과 한 줄 띄운 후 작성 #
Reset 복원방법
1. Reset 복원방법 💡 푸시된 커밋을 이전으로 되돌리고 싶을경우 1) commit log 조회 git log --oneline HEAD 가 있는 커밋이 현재 브랜치를 가리키는 포인터이자 가장 최근의 커밋을 가리킨다. 2) reset 복구시키고 싶은 커밋의 id를 복사해놓고 git reset을 실행하자. git reset --hard "commit ID" -hard 옵션을 사용하면 복구시키려는 커밋 이후의 모든 내용은 지워버
Audit > Tooltip 컴포넌트 정의
Audit > Tooltip 컴포넌트 정의 💡 tooltip 컴포넌트 정의가 안되어 있음 / (열림, 닫기) 기능 추가 1) 사용할 테이블 jsexport default { { title: 'User Name', key: 'userName', sortable: false, control: { tag: 'TableContent', props: ({ value
HKS > Cluster NodePool 관련 운영
HKS > Cluster NodePool 관련 운영 ::: 기존 50개, 수정 시 기존 + 50개 가 되어야함 ::: 클러스터 신규 생성 또는 노드풀 추가시 한번에 만들수 있는 노드개수를 50개로 제한 (why. 한번에 너무 많은 노드를 만들경우 오류 발생) 클러스터 수정시 현재 가지고있는 모든 노드풀의 count 값 합산 + 50 으로 제한으로 밸리데이션 체크 jsexport default { { id: 'np_05_totalN
중복값 찾기 유효성검사
중복값 찾기 유효성검사 💡 배열안의 객체 순서가 바뀌기 때문에 깊게 검사를 해야함 1) HCS > 중복값 (javascript 사용) -> 요구사항 Rules 들의 중복 체크 -> 문제점 Rules 들의 중복체크가 안됨 -> why? 자동으로 필터링 되어 등록되면서 배열의 위치가 바뀌는 현상 발생 이를 해결하기 위하여, 깊은 복사를 통해 중복체크를 진행 jsexport default { { id