티스토리

초보 개발자의 일기

검색하기

블로그 홈

초보 개발자의 일기

jun6060.tistory.com/m

내 공부 올리는 블로그

구독자: 0

방명록 방문하기

주요 글 목록

Pinia란? Pinia란?Pinia는 Vue3에 필요한 Composition API 기반으로 사용할 수 있는 상태 관리라이브러리입니다.기존 Vue에서 사용하던 상태관리는 Vuex였는데 Pinia가 공식적으로 추천하는 상태 관리 라이브러리가 되었습니다. 이번 프로젝트에서 Nuxt3를 적용하기 때문에 Pinia를 채택해 공부하는 중입니다. https://pinia.vuejs.kr/ Vue 3의 공식 Store | Vue.js를 위한 직관적인 스토어직관적이고 타입 안전한 가벼운 그리고 유연한 Vue 스토어pinia.vuejs.kr Pinia의 장점타입스크립트 기반으로 타입에 대한 안정성이 보장이 된다.가벼운 용량모듈식 디자인으로 모듈화Devtools 지원시작해보기설치yarn add pinia 스토어 설정/store/in.. 공감수 0 댓글수 2 2024. 6. 11.
this this는 함수가 호출될 때 정해진다!! 자바스크립트의 this는 다른 언어의 this와는 다르다. this를 콘솔에 찍어보자. 그럼 이렇게 window가 찍히게 되는데 this는 기본적으로 window다. 여기서 window란? window 객체란 window 객체는 웹 브라우저의 창을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. 1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역 객체라고도 부른다. 2. 일반적으로 우리가 열고 있는 브라우저의 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. globalThis js 환경에서는 window node 환경에서는 global이다. 하지만 최근에 globalThis로 합쳐지게.. 공감수 0 댓글수 0 2024. 3. 24.
Jest 설정 중 `fetch` is not available 경고 내용 Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments. jest 초기 설정 후 컴포넌트 랜더과정에서 이런 경고를 보았다. 해결법 whatwg-fetch를 설치하여 import "whatwg-fetch"; 사용 중인 파일 제일 윗 라인에 추가해 해결하였다. https://www.npmjs.com/package/whatwg-fetch whatwg-fetch A window.fetch polyfill.. Latest version: 3.6.20, last published: 2 months ago. Start using whatwg-fet.. 공감수 0 댓글수 0 2024. 2. 17.
Jest를 활용하여 로그인 테스트코드 작성하기 1. jest 환경 설정 npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom npm --save-dev babel-jest @babel/core @babel/preset-env babel.config.cjs module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-typescript', ["@babel/preset-react", {"runtime": "automatic"}] ], }; jes.. 공감수 0 댓글수 0 2024. 2. 15.
테스트 코드란 테스트코드란? 1. 테스트 코드의 작성의 목적 정확성 및 신뢰성 확보 테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인하는 것이다. 다양한 조건 및 입력에서 React 컴포넌트와 코드가 예상대로 작동하는지 확인한다. 수월한 리팩토링 프로젝트가 성장하면 리팩토링이 필요하다 리팩토링 전 테스트코드를 작성하면 최소한의 기준이 만들어진다. 변경사항 또는 최적화가 예상치 못한 버그를 초래하지 않도록 한다. 2. 테스트 코드의 작성의 장점 문서화 및 이해 명확하게 작성된 테스트 코드는 문서의 형태를 이룬다. 내가 작성한 코드가 기획의도를 확실히 반영하는지 확인 가능 기획 내용을 잘 반영하였는지 확인 가능 기획자와의 소통의 도구로도 사용할 수 있다. 다른 개발자들이 테스트코드를 보고 컴포넌트나 함수의 예상되는 동.. 공감수 0 댓글수 1 2024. 2. 13.
호이스팅 호이스팅 자바스크립트에서 코드를 위에서 아래로 읽어가기 전, 변수, 함수, 클래스 등의 선언부를 먼저 읽어 들이는 작업을 말한다. var는 호이스팅이 되면 const x = "x"; console.log(z); var y='gege'; var y; const x = "x"; console.log(z); y='gege'; 이렇게 호이스팅이 된다. 해결법 애초에 호이스팅을 안되게 코드를 작성하는 것이 훨씬 좋다. 이렇게 코드를 고려해서 작성하기 어려우면 eslint를 활용하여 호이스팅 안되게 규칙을 정해 오류를 알려주게 하여 코드를 작성하면 좋다! TDZ TDZ => Temporal Dead Zone 한글로 직역하면 일시적인 사각지대 선언보다 더 위에서 변수에 접근을 하는 것 코드로 예를 들자면 const .. 공감수 0 댓글수 0 2024. 1. 28.
스코프체인 스코프체인 함수에서 어떤 값에 접근이 가능한가? 어떤 값에 접근이 불가능한가?라는 것을 의미한다. { } 블록이 기준이 된다. switch (){ } if (){ } const a = () =>{ } 예시 const x = "x"; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); b(); } a(); c(); 이것을 실행해 보면 이라는 에러가 나온다. anonymous => 파일 전체라고 생각하면 된다. 그 이유는 코드를 보면 나온다. a => anonymous b => c => a.. 공감수 0 댓글수 0 2024. 1. 28.
함수와 함수의 호출, 고차함수 함수 선언 const add= (a,b) => a+b; function calculator(func, a,b){ return func(a,b); } const onClick = () =>{ return ()=>{ console.log('hello') } } const onClick1 = ()=>()=>{ console.log('hello') } 이렇게 함수를 선언하는 방식이다. 함수 호출 add(3,5); //8 calculator(add,3,5); //8 onClick(); 이렇게 알맞게 선언한 함수를 위 코드처럼 호출할 수 있다. 알맞게 선언한 함수 호출은 함수의 리턴값으로 대체하여도 맞다. JS 알맞은 코드 const onClick = () =>{ return ()=>{ console.log('he.. 공감수 0 댓글수 0 2024. 1. 20.
JS 소수 판별법 JS에서 소수를 판별할 수 있는 방법은 총 3가지가 있다. 1. 모든 수로 나누어가며 판별하기 2. 각 숫자의 절반만큼만 나누어가며 판별하기 3. 각 숫자의 제곱근까지 나누어가며 판별하기 1번 일단 숫자가 2면 소수이므로 true로 리턴 그 후 각 숫자까지 모든 숫자로 나누어서 0이 되면 false로 리턴 해당하지 않으면 소수이므로 true리턴 function isPrime(num){ if(num===2) return true; for(let i = 2; i 공감수 0 댓글수 2 2023. 10. 21.
프론트엔드 CI/CD AWS 배포하기3(도메인 등록, 가비아, SSL 적용) 탄력적 IP 연결하기 도메인을 연결하기 위해 고정된 IP가 필요로 하는데 현재 지금은 고정된 IP가 없다. 고정된 IP를 할당하기 위하여 탄력적 IP를 발급받아 IP를 고정시켜야 한다. 탄력적 IP를 할당받고 탄력적 IP주소를 인스턴스와 연동을 하면 IP가 고정이 된다. 도메인 설정 먼저 사용해야 할 도메인을 가비아에서 돈을 주고 구입을 한다. https://domain.gabia.com/ 가비아: 대한민국 도메인 점유율 1위 대한민국 100만 도메인 등록 업체 domain.gabia.com 구입한 도메인을 가비아에 등록한다. Nginx 설정 이제 우리가 배포한 코드를 화면에 띄워보자 1. Nginx 설치 sudo apt-get install nginx 설치가 완료되면 자동으로 /etc/nginx 아래에.. 공감수 0 댓글수 0 2023. 9. 18.
프론트엔드 CI/CD AWS 배포하기2(Code Deploy, S3 코드 업로드) Github actions과 aws CodeDeploy를 사용하여 코드에 수정사항들이 생기면 build를 다시 하고 자동으로 배포되는 작업을 손쉽게 할 수 있다. 권한 설정 이 것을 하기 위해 github actions와 CodeDeploy가 앞에서 만든 내 s3와 ec2에 접근해서 작업을 할 수 있는 권한을 설정해줘야 한다. -> IAM 설정을 통해 권한 설정을 한다. EC2 접속 전에 생성한 인스턴스에 들어와 SSH 클라이언트를 통해 EC2에 접속한다. 위 코드를 복사하여 터미널에 입력하면 이런 에러를 만나게 되는데 이 경고가 나오는 이유는 잘못된 permission으로 ssh 로그인을 접속하려고 했기 때문이다. 해결법 해결법은 간단한데 .pen 파일의 permission을 private key의 p.. 공감수 0 댓글수 1 2023. 9. 17.
프론트엔드 CI/CD AWS 배포하기(EC2 생성, 버킷 생성, S3) AWS EC2 생성 https://aws.amazon.com 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services aws.amazon.com 에 접속하여 EC2를 생성한다. 1. EC2 생성 인바운드 보안규칙을 설정해야 한다. ssh 22 포트는 자신의 집에서만 접근이 가능하게 집 ip로 설정을 하였고 나머지 80 ,443 포트는 어디에서든 접근이 가능해야 하기 때문에 0.0.0.0/0으로 설정을 하였다. 추가로 ::/0로 설정을 하면 ipv4를 허용하는 것이다. S3 버킷 생성 1. s3 생성 버킷 만들기를 클릭하여 버킷 만들기를 시작한다. 2. 버킷 이름, 리전을 선택한다. 버킷 이름은 고유값으로 설정 후 리전은 ap-northeast-2로 설정을 한다. 3. 퍼블릭 액세스.. 공감수 0 댓글수 0 2023. 9. 17.
accessToken, refreshToken으로 서버 인증받기 AcessToken 하나만을 이용한 인증 방식에는 문제점이 있다. 만일 제 3자에게 탈취당할 경우 보안에 취약하다는 점인데 유효기간을 짧게 하여 새롭게 Token을 받아 계속 인증 상태를 업데이트해야 한다. 이렇게 되면 자주 새로운 토큰을 발급받아야 하기 때문에 불편하다. 그래서 유효시간을 길게 하자니 탈취당할 위험에 노출되어 보안이 약해지게 된다. 이렇게 해서 나온 것이 RefreshToken이다. RefreshToken은 AccessToken과 같은 형태의 JWT이다. 처음에 로그인 성공 시 서버에서 AccessToken과 RefreshToken을 내려주게 되는데 AccessToken이 만료가 되면 RefreshToken을 이용해 새로운 AccessToken을 발급받는 형식으로 계속 로그인 상태를 유.. 공감수 0 댓글수 0 2023. 8. 25.
Cookie 도입기 이번 프로젝트를 진행하면서 AccessToken과 RefreshToken을 이용하여 로그인한 사용자를 구분하고 인증하는 방식을 사용하였다. AccessToken은 localStorage에 저장을 하였고 RefreshToken은 Cookie에 저장을 하였다. 쿠키에 저장하는 방법은 react-cookie 라이브러리를 사용하여 저장을 하였다. import { Cookies } from 'react-cookie'; const cookie = new Cookies(); export const setCookie = (name: string, value: string, option?: any) => { return cookie.set(name, value, { ...option }); }; export const .. 공감수 0 댓글수 0 2023. 8. 25.
type='radio' button 처럼 사용하기 문제 input 태그에 type='radio'를 사용하면 체크박스가 나오면 선택을 할 수 있다. 이 체크박스를 제거하고 버튼을 사용할 때와 비슷하게 radio를 구현하고자 하였다. CSS 스타일링은 emotion을 사용하여 스타일하였다. 예제 코드 남자 여자 css export const Label2 = styled.label` display: flex; align-items: center; justify-content: center; color: #969696; background-color: #ffffff; position: relative; box-sizing: border-box; box-shadow: 0 4px 4px 0 #00000040; border: 1px solid #969696; bor.. 공감수 0 댓글수 1 2023. 4. 24.
React-Query 시작하기 React-query 시작 React Query는 비동기 서버 상태 관리 라이브러리이다. React Query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는 데 사용된다. 사용이유 react-query를 사용함으로 서버, 클라이언트 데이터를 분리합니다. 이 개념에 대해 동의 하지 않아도 아래의 장점을 보신다면 사용하고 싶은 생각이 드실 것입니다. 장점 캐싱 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get 하는 api를 자동으로 실행 ) 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries) 동일 데이터 여러.. 공감수 0 댓글수 0 2023. 4. 11.
Re-fetch Re-fetch Re-fetch 어떤 조건 하에서 자동적으로 다시 가져오기 된다. stale 쿼리를 사용 조건 새로운 쿼리 인스턴스 많아지거나 쿼리 키 처음 호출 창을 재포커스 만료된 데이터의 업데이터 여부를 확인할 수 있는 네트워크 다시 연결된 경우 리페칭 자주 변하지 않은 정보는 리페칭을 제한해도 된다. but 실시간 정보는 중요하기 때문에 사용해야 한다. 리페칭을 제한하면 얻는 장점 불필요한 랜더링이 줄어든다 코드 작성하기 전 반드시 알아야 할 개념 staletitme -staleTime 만큼 시간이 지나면 데이터는 stale 상태로 변경된다. staleTime의 default값은 0이다. 따라서 따로 설정해주지 않는다면 useQuery로 받아온 데이터는 받아오자마자 곧바로 stale 한 상태로 변.. 공감수 0 댓글수 0 2023. 4. 10.
불필요한 리렌더링 해결하기 Virtual DOM이란? https://ko.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom Virtual DOM과 Internals – React A JavaScript library for building user interfaces ko.reactjs.org 리액트는 컴포넌트가 바뀔 때 이전 컴포넌트와 비교를 해 다른 부분을 리랜더링 한다. 코드를 보면 return 아랫부분이 Virtual DOM인데 이전 컴포넌트의 Virtual DOM과 현재 상태의 Virtual DOM을 비교한다. 둘이 비교를 하였을 때 달라진 부분이 있으면 그 부분만 리액트에서는 리렌더링을 한다. 예시 return ( 로그인 회원가입 ); }; 이렇게 코드를 작성하면.. 공감수 0 댓글수 0 2023. 2. 4.
antd로 반응형 만들기 사이트의 화면 크기를 줄이고 늘려보면 창의 크기에 따라서 배치가 바뀌는 것을 쉽게 볼 수 있다. 이번에 antd에서 반응형 디자인을 한 번 사용해 본다. grid 사용하는 방법 https://4x.ant.design/components/grid/ Grid - Ant Design Child elements depending on the value of the start, center, end, space-between, space-around and space-evenly, which are defined in its parent node typesetting mode. 4x.ant.design xs: 모바일 sm: 태블릿 md: 작은 데스크탑 이렇게 각 단위마다 화면크기가 정해져 있다. 또 반응형을 만들.. 공감수 0 댓글수 0 2023. 2. 4.
next에서 link 사용하기 react에서는 react router를 이용하여 link를 걸고 페이지를 이동을 하였다. next에서는 import Link from 'next/link';를 작성하면 자체적으로 지원이된다. 형태는 아래처럼 사용을 한다. 노드버드 프로필 회원가입 href 안에 이동하고 싶은 페이지의 이름 태그안에 사용하고 싶은 이름을 작성해주면 이렇게 링크가 걸리며 각 페이지로 이동을 할 수 있다. 또 next에는 react hor loader 기능이 알아서 적용되어있다. 서버를 키고 코드를 바꾸면 알아서 바꾸어 진다. 공감수 0 댓글수 0 2023. 2. 2.
최대 매출 문제 입력 첫 줄에 N(5 공감수 0 댓글수 1 2023. 1. 14.
연속 부분수열2 문제 입력 첫째 줄에 N(1≤N≤100,000), M(1≤M≤100,000,000)이 주어진다. 수열의 원소값은 1,000을 넘지 않는 자연수이다. 출력 첫째 줄에 경우의 수를 출력한다. 입력 예시 5 5 1 3 1 2 3 출력 예시 10 풀이 방법 내 코드 Solution 느낌점 공감수 0 댓글수 0 2023. 1. 13.
연속 부분수열 1 문제 입력 첫째 줄에 N , M이 주어진다. 수열의 원소값은 1000을 넘지 않는 자연수이다. 출력 첫째 줄에 경우의 수를 출력한다. 입력 예시 8 6 1 2 1 3 1 1 1 2 출력 예시 3 풀이 방법 for문을 한번만 돌리면서 왼쪽 변수인 lt, 오른쪽 변수인 rt를 설정하여, rt를 증가시키면서 sum값과 n값을 비교한다 값을 경우 answer를 증가 sum이 n보다 클거나 같을 경우 제일 앞 숫자를 빼면서 값을 비교하며 부분 수열을 만든다. 내 코드 Solution 느낌점 공감수 0 댓글수 0 2023. 1. 11.
두 배열 합치기 문제 입력 첫 번째 줄에 첫 번째 배열의 크기 N 두 번째 줄에 N개의 배열 원소가 오름차순 세 번째 줄에 두 번째 배열의 크기 M 네 번째 줄에 M개의 배열 원소가 오름차순 출력 오름차순으로 정렬된 배열을 출력합니다. 입력 예시 3 1 3 5 5 2 3 6 7 9 출력 예시 1 2 3 3 5 6 7 9 풀이 방법 두 배열을 입력받은 후 배열의 길이 만큼 for문을 돌려 새로운 배열에 push해 배열을 만든다 그 후 새로 만들어진 배열을 sort로 오름차순 정렬을 한다. 내 코드 Solution 느낌점 전에 배운 sort 오름차순 정렬을 알고 나니 쉬운 문제였다. 공감수 0 댓글수 0 2023. 1. 10.
K번째 큰 수 문제 입력 첫 줄에 자연수 N과 K 입력되고, 그 다음 줄에 N개의 카드값이 입력된다. 출력 첫 줄에 K번째 수를 출력합니다. K번째 수는 반드시 존재합니다. 입력 예시 10 3 13 15 34 23 45 65 33 11 26 42 출력 예시 143 풀이 방법 for문을 3번 중복해 풀이하였다. 내 코드 Solution 느낌점 쉽지 않다. 오름차순 정렬 let numbers = [1, 10, 2, 20, 3, 30]; numbers.sort(function compare(a, b) { return a - b; }); console.log(numbers); // [1,2,3,10,20,30] 내림차순 정렬 let numbers = [1, 10, 2, 20, 3, 30]; numbers.sort(functi.. 공감수 0 댓글수 0 2023. 1. 9.
멘토링 문제 입력 학생 수 N 시험횟수 M 그 아래 각 시험에서 나온 학생의 등수를 입력받는다. 출력 첫 번째 줄에 짝을 만들 수 있는 총 경우를 출력합니다. 입력 예시 4 3 3 4 1 2 4 3 2 1 3 1 4 2 출력 예시 3 풀이 방법 내가 직접 시도를 하였는데 내 생각으로 풀리지 않아 풀이를 보고 풀었다. for문을 4중 for문을 돌려서 풀었다. 첫번째로 각 학생의 최종등수인 4를 각자리의 결과값으로 두고 두번의 for문을 더 돌려 [0][0]. [0][1]...[3][3],[3][4]까지의 자리수가 각각 i,j와 일치하는 경우를 변수에 저장한 후 pi가 pj보다 작으면 멘토가 가능하다는 알고리즘으로 문제를 풀었다. 내 코드 Solution 느낌점 어렵다 공감수 0 댓글수 0 2023. 1. 8.
뒤집은 소수 문제 입력 첫 줄에 자연수의 개수 N이 주어지고, 그 다음 줄에 N개의 자연수가 주어진다. 각 자연수의 크기는 100000를 넘지 않는다. 출력 첫 줄에 뒤집은 소수를 출력합니다. 출력순서는 입력된 순서대로 출력합니다. 입력 예시 9 32 55 62 20 250 370 200 30 100 출력 예시 23 2 73 2 3 풀이 방법 주어진 배열을 Number(s[i].toString().split("").reverse().join("") 을 이용해서 숫자들을 뒤집어 준 후 Number를 이용하여 앞에 0이 있으면 자연수로 만들어 주었다. 그 후 소수 판별을 하기위해 2, 3, 5 ,7..으로 나누어서 나머지가 0이 아닌 것들을 골라서 배열에 넣고 값을 출력하였다. 내 코드 Solution 방법 1 방법 2.. 공감수 0 댓글수 1 2023. 1. 7.
자릿수의 합 문제 입력 첫 줄에 자연수의 개수 N이 주어지고, 그다음 줄에 N개의 자연수가 주어진다. 각 자연수의 크기는 10,000,000를 넘지 않는다. 출력 자릿수의 합이 최대인 자연수를 출력한다. 입력 예시 7 128, 460, 603, 40, 521, 137, 123 출력 예시 137 풀이 방법 각 배열에 있는 값을 toString.split("")을 이용하여 각각의 배열로 쪼개어 이중 for문을 돌려서 sum에 숫자를 저장 후 max와 sum을 Math.max로 비교 후 asnwer에 저장하였다. if(sum>max){ answer=eachNum; } else if(sum===max){ if(eachNum>answer){ answer=eachNum } } 그 후 이 코드를 통해 자리수의 합이 같은 숫자끼리.. 공감수 0 댓글수 0 2023. 1. 6.
숫자만 추출 문제 입력 첫 줄에 숫자가 있는 문자열이 주어진다. 문자열의 길이는 50을 넘지 않는다. 출력 첫 줄에 자연수를 출력합니다 입력 예시 g0en2T0s8eSoft 출력 예시 208 풀이 방법 입력 받은 문자을 전부 소문자로 바꿔준 후 정규식을 사용하여 문자를 전부 제거하였다. 그 후 첫번째 자리에 0이 오면 자연수가 아니니 첫 자리에 0이 있을경우 slice를 이용해 0을 제거했다. 내 코드 Solution 느낌점 공감수 0 댓글수 0 2023. 1. 2.
redux 원리 redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리이다. redux 용어 action 상태에 변환을 일으키기 위한 것. const changeCompA = (data) => { return { //action type: "CHANGE_COMP_A", data, }; }; reducer 현재 상태와 액션을 받아 새로운 상태로 반환한다. const reducer = (prevState, action) => { //디스패치 된 액션은 미리 만든 reducer에 걸려서 다음 state를 만듬 //새로운 state를 만들어준다. switch (action.type) { case "CHANGE_COMP_A": return { ...prevState, compA: action.data, }; .. 공감수 0 댓글수 1 2022. 11. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.