티스토리

YEV.log
검색하기

블로그 홈

YEV.log

3d-yeju.tistory.com/m

yediobjet@gmail.com

구독자
5
방명록 방문하기

주요 글 목록

  • 2년차 프론트엔드 개발자의 2023년 회고 이직 첫 회사에서 1년 3개월의 경력을 마무리로 새로운 회사로 이직을 했다. 이직을 한 이유는 많은 사용자가 사용하고 있는 플랫폼에서 더 많은 성장을 하기 위해서였다. 개발팀은 크게 웹개발팀, 앱개발팀, 백엔드팀 이렇게 나뉘어 있었고 나에게도 프론트엔드 사수가 생겼다는 점이 많이 설렜다. 경력직으로 이직한 것은 처음이라, 생각보다 많은 부담을 가지고 첫 출근을 했었고 주니어 동료 한 명과 먼저 인사를 나눴다. 자기소개나 온보딩등 신규입사자가 잘 적응할 수 있도록 회사문화가 잘 갖추어져 있어 빠르게 적응할 수 있었다. 회사 문화중 매달 선정된 책을 읽고 회사의 업무에 적용할 수 있는 점을 독후감형식으로 남기는 문화 덕분에 1년에 한두 권 책을 읽을까 말까 했던 내가 벌써 9권의 책을 읽었다! 회사의 업무는.. 공감수 0 댓글수 1 2023. 12. 31.
  • React | Next.js 환경에서 나이스(PASS) 신원인증 구현하기 나이스에서 제공하는 개발 가이드에 있는 내용은 보안상 백엔드, 서버에서 처리하는 것이라 생각하시면 됩니다. 프론트에서는 서버에서 나이스에게 요청하여 발급받은 암호화 토큰을 가지고 신원인증 창을 열어주고, 사용자가 신원인증을 완료하고 난 후 받은 데이터를 서버에 주어 서버에서 해당 정보를 복호화하여 유저의 신원인증 정보를 얻을 수 있습니다. 자 그럼 프론트에서 할 일은 암호화 토큰을 요청하여 나이스 인증창을 띄어주고, 유저가 성공하고 리턴받은 토큰을 다시 백에 전달해주면 됩니다. 그래서 저는 신원인증에 사용할 빈 페이지 두개를 만들었습니다. 1. auth page: 서버(나이스)에서 전달받은 토큰을 가지고 나이스 폼 제출하여 본인인증(pass) 창을 띄어주는 페이지 2. complete page : 본인인.. 공감수 3 댓글수 0 2023. 11. 5.
  • React | 서버없이 메일 보내기 및 구글스프레드시트에 저장 포트폴리오 사이트나 회사 소개 홈페이지를 보면 하단에 contact us라고 적혀있는 연락하기 폼을 많이 보았을 것 같아요. 메일 주소에 mailto를 사용하면 구현은 가능하지만 컴퓨터 메일 앱이 켜지면서 직접 보내는 형태이기 때문에 서드파티 앱을 한번 거쳐야 하기 때문에 사용자 경험이 그리 좋아 보이진 않았기에 페이지 내에서만 해결하려고 했습니다. 기능을 찾아보던 중, EmailJS는 월 200건만 무료로 보낼 수 있기에 다른 방법을 찾아보던 중 google에서 제공하는 기능을 사용해보고자 합니다! - 백엔드(db) 없이 프론트엔드로만 구현 - 각 정보를 입력하고 submit 버튼을 누르면 스프레드시트에 데이터 저장 및 지정한 메일로 메일이감 - form 액션으로 요청하는 것이 아닌 fetch, axi.. 공감수 0 댓글수 2 2023. 6. 7.
  • css | 부모의 너비를 무시하고 자식의 요소를 화면 전체 너비로 설정하기 PC 버전을 구현할 때, 메인의 너비를 1024px로 설정하고 margin:0 auto; 를 사용하여 가운데 정렬하여 작업을 하는 도중, 메인 콘텐츠의 중간 요소의 너비를 화면 전체로 구현하고 싶었습니다. .넓히고자하는요소 { width: 100vw; margin-left: 50%; transform: translateX(-50%); } 해결법은 간단했으며, 전체 풀로 채우고자 하는 요소에만 css를 추가하면 됩니다. 결과화면 https://www.milindsoorya.com/blog/css-to-ignore-parent-padding 공감수 0 댓글수 0 2023. 5. 15.
  • 알고리즘문제 | 다중포인터 패턴 문제설명 오름차순으로 정렬된 int arr을 받는 sumZero라는 함수가 있다. 해당 함수는 두개의 요소의 합이 0이 되는 첫번째 쌍을 배열로 반환하며, 합이 0이 되는 요소가 없다면 undefined를 반환한다. 예시 arr return [-4,-3,-2,-1,0,1,2,3,10] [-3,3] [-2,0,1,3] undefined [1,2,3] undefined 💡문제풀이 function sumZero(arr) { let leftIdx = 0; let rightIdx = arr.length - 1; while (leftIdx < rightIdx) { let sum = arr[leftIdx] + arr[rightIdx]; if (sum === 0) { return [arr[leftIdx], arr[ri.. 공감수 0 댓글수 0 2023. 5. 14.
  • React | Kakao Map Api를 사용하여 주소로 지도 그리기 kakao api는 키를 발급받아야 사용가능하며, 키를 발급받았다는 전제하에 작성하였습니다. kakao든 google이든 하루에 무료로 제공되는 횟수는 정해져 있으니 확인해 보고 본인에게 맞는 서비스를 선택하면 될 것 같아요. *kakao api 키 발급하기 가이드 및 map api 전체 가이드 테스트용 도메인: http://localhost:3000 https://apis.map.kakao.com/web/guide/#ready 1. 루트경로에 .env 파일 생성하여 키값 세팅하기 # .env NEXT_PUBLIC_KAKAO_APP_KEY=de100000010f46c4a290000000 kakao에서 받은 api key는 .env 파일에 넣어 사용합니다. 2. 지도 화면 출력하기 kakao에서 제공하는 .. 공감수 0 댓글수 0 2023. 5. 14.
  • 알고리즘 문제 | 빈도수세기_anagram 문제설명 2개의 문자를 인자로 받으며 두번째 문자열이 첫번째 문자열의 anagram인지 확인하는 validAnagram 함수이다. (서로 가지고있는 문자의 개수가 똑같은지 확인) 예시 str1 str2 return aaz zza true awesome awesom false texttwisttime timetwisttext true 🤔 문제 풀이 (before) function validAnagram_before(str1, str2) { let obj1 = {}; let obj2 = {}; //1. 길이 비교 if (str1.length !== str2.length) { return false; } //2. str1, str2의 요소를 객체로 카운팅하기 for (let e of str1) { if (ob.. 공감수 0 댓글수 0 2023. 5. 10.
  • 알고리즘문제 | 빈도수세기 문제설명 2개의 배열을 인자로 받는 same이라는 함수가 있다 첫번째 배열의 요소에 제곱된 값들이 두번째 배열에 있다면 참을 반환해야 한다.(순서는 상관없으며 빈도수는 같아야함) 예시 arr1 arr2 return [1,2,3] [4,1,9] true [1,2,3] [1,9] false [1,2,1] [4,4,1] false 🤔 문제 풀이 function same(arr1, arr2) { // 1. 배열의 길이 비교 if (arr1.length !== arr2.length) { return false; } // 2. 배열 1의 요소에 제곱을 한 값이 배열 2에 있는지 indexOf를 사용하여 있다면 // 배열 2에 해당하는 요소를 삭제 / 없다면 false반환 for (let i = 0; i < arr1.. 공감수 0 댓글수 0 2023. 5. 3.
  • 프론트엔드 개발 면접 질문 및 답변 (61개) ⭐️ 주소창에 naver.com을 입력하면 (https://velog.io/@khy226/브라우저에-url을-입력하면-어떤일이-벌어질까) 1. www.naver.com 의 IP 주소를 찾기위해 DNS 서버를 방문합니다. 2. 캐시에서 DNS기록을 확인한후, 만약 요청한 URL이 캐시에 없다면, ISP(Internet Service Provider)의 DNS 서버가 DNS 쿼리로 IP 주소를 찾습니다. 3. 브라우저가 해당 IP 를 가지고 있는 서버와 TCP 연결을 합니다. 4. 브라우저가 해당 서버에 HTTP 요청을 합니다. 5.서버가 요청을 받고 response 를 다시 HTTP 에 실어보냅니다. 6. 브라우저가 해당 응답을 받아 HTML을 파싱하여 브라우저 내에 출력합니다. ⭐️ HTTP와 HTTPS.. 공감수 1 댓글수 0 2023. 5. 3.
  • 자주 사용하는 git 명령어 모음 작업시 사용하는 명령어 # 변경사항 스태시에 올리기 & 커밋 & 푸시 git add . git commit -m "커밋메세지" git push origin 작업 브랜치 # master 브랜치 rebase 하기 (작업 중 마스터,디벨롭 브랜치의 푸시된 변경사항을 작업중 브랜치에 적용할 때) git rebase -i master # commit 되돌리기 (변경사항 살아있음) git reset commit주소 # commit 되돌리기 (변경사항 삭제) git reset --hard commit주소 Branch branch 조회 # 로컬, 원격 저장소의 branch 출력 git branch -a # 원격 저장소의 branch 출력 git branch -r branch 삭제 # 로컬 브랜치 삭제 git branc.. 공감수 0 댓글수 0 2023. 3. 29.
  • Next.js 에서 Next/Image를 사용하여 이미지 처리하기 Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-elementeslint@next/next/no-img-element nextjs에서는 react에서 사용하는 것과 동일하게 img 태그로 이미지 처리를 하게 되면 eslint가 경고를 띄웁니다. 를 사용하면 LCP속도가 느려지므로 next.js에서는 를 사용하여 이미지 최적화를 하라는 경고입니다. 위 문구를 무시하고 사용할 수는 있지만 근본적인 해결방법은 아닙니다. 그럼 어떻게 바꿔서 사용하면 될까요? 사용법.. 공감수 0 댓글수 0 2023. 2. 16.
  • Next.js | Next.js + Styled-Components 초기 세팅 (next 13) styled-components는 CSR로 작동하기 때문에 SSR인 next-js에서는 styled이 적용되도록 따로 설정이 필요합니다. (설정을 하지 않으면 스타일이 적용되기 전에 렌더가 되어 화면이 보이는 현상이 나타납니다..🤦🏻‍♀️) 1. 설치 npm i styled-components npm i -D @types/styled-components babel-plugin-styled-components 2. next.js에서 사용하도록 설정하기 1) .babelrc 생성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, // SSR을 위한 설정 "fileName": true, // 코드가 포함된 파일명을 알.. 공감수 0 댓글수 0 2023. 2. 14.
  • Next.js | Next.js + typescript 초기 세팅 (next 13) 1. 설치 및 실행 설치 npx create-next-app --typescript # or yarn create next-app --typescript # ... What is your project named? (프로젝트 이름) Would you like to use ESLint with this project? (eslint를 쓸건지 => yes) 실행 # 개발자 모드 npm run dev 2. ESLint, Prettier 세팅 1) 설치 npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier eslint-config-prettier : prettier와 충돌할 수 있는 eslint 규칙들을 꺼줍니다. eslint.. 공감수 0 댓글수 0 2023. 2. 14.
  • React | web3를 사용하여 메타마스크(Metamask) BSC 네트워크 변경 및 추가하기 들어가며 메타마스크 지갑 연결 부분은 아래 포스팅에 설명되어 있습니다. 본 글은 전 글에 이어 chain id를 가지고 네트워크를 변경 및 추가하는 내용만을 정리하였습니다. https://3d-yeju.tistory.com/90 React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기 서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수 3d-yeju.tistory.com BSC (chain id: 56), Binance Smart Contract의 네트워크를 추가해 보겠습니다. 네트워크를 추가하는.. 공감수 0 댓글수 0 2023. 1. 25.
  • React | axios interceptors header에 token값 설정&추가하기, 삭제하기 이번 프로젝트에서는 jwt 방식을 사용하여 로그인을 진행하였기에 헤더의 값을 유동적으로 설정해야 했습니다. 간단하게 jwt 로직을 설명해 보자면, 1. 로그인을 하면, 서버에서 accesstoken 과 refresh token을 받습니다. 2. 개인정보가 들어간 데이터들은 api를 요청할 때 header에 token 정보를 함께 담아 요청을 하는데 서버에서는 이 토큰값으로 개인에 맞는 데이터들을 뽑아서 전달해 줍니다. 3. 로그인했을 때에는 header에 토큰 값이 들어가진 상태로 api를 요청을 해야 하며 로그아웃 상태일 때에는 토큰 값이 없는 상태로 api를 요청해야 합니다. 저희는 프로젝트에 공통값(header, 에러)들을 한 곳에서 처리하기 위해 axios interceptors을 사용했었는데요 .. 공감수 0 댓글수 0 2023. 1. 17.
  • React | web3-react를 사용하여 메타마스크(Metamask) 서명 요청하기 서론 메타마스크 지갑 연결 부분은 아래 포스팅에 설명되어 있습니다. 본 글은 전 글에 이어 서명 부분만 추가한 프로세스를 정리하였습니다. https://3d-yeju.tistory.com/90 React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기 서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수 3d-yeju.tistory.com 라이브러리 설치 ethers 라이브러리는 web3.js와 같이 이더리움 네트워크를 조회하고 조작할 수 있는 인터페이스를 제공합니다. npm i ethers 지갑 연.. 공감수 0 댓글수 0 2023. 1. 17.
  • React | web3-react를 사용하여 메타마스크(Metamask) 지갑연결하기 서론 web3.js란? web3.js 는 내부적으로 HTTP 나 IPC를 통해 JSON RPC API를 호출하도록 되어있습니다. 만약, 스마트 컨트렉트의 함수를 실행하고자 한다면 1.스마트 컨트렉트의 주소 2. 실행할 함수 3. 함수에 전달할 변수들을 전달해야 합니다. 이더리움 네트워크는 노드로 구성되어 있고, 각 노드는 블록체인의 복사본을 가지고 있으며 이더리움 노드들은 JSON-RPC로만 소통할 수 있는데 web3.js는 쉽고 편리하게 자바스크립트 인터페이스로 상호작용할 수 있게 해주는 라이브러리입니다. web3-react란? react 앱에서 Context를 이용해 web3의 Dapp과 관련된 특정 주요 데이터(사용자의 현재 계정, chain id, web3 provider 등)를 최신상태로 유지해.. 공감수 0 댓글수 0 2023. 1. 16.
  • 1년차 프론트엔드 개발자의 2022년 회고 나에게 2022년은 프론트엔드 개발자로 커리어 변경을 하면서 많은 성장을 한 해이다. 첫 회사 1월, 가상자산과 블록체인 기술 관련 사업을 하는 회사에 입사를 하였다. 회사에는 퍼블리셔와 백엔드 개발자 사수 두 분이 계셨고 함께 입사한 동기 2명(BE 1명, FE 1명)과 총 5명이 개발팀이 되었다. 우리에게 당장에 주어진 업무는 1,2월 동안 안드로이드 앱으로 운영되고 있는 서비스를 웹으로 고도화하는 작업이었다. 프론트엔드 사수가 없어 직접적으로 물어볼 수도, 참고할 만한 코드도 없었던 상황이었기 때문에 나와 프론트엔드 동기 둘이서 프로젝트 초기 세팅부터 라이브러리 사용, 깃 규칙등을 정하여 작업을 진행했다. 당시에는 속도도 느렸을뿐더러, 실제 서비스를 배포하는 것은 처음이라 세세하게 신경 써야 하는 .. 공감수 0 댓글수 0 2023. 1. 1.
  • TypeScript 환경에서 React Query 사용하기 도입 계기 입사 후 첫 프로젝트에서는 서버에서 받아오는 비동기 데이터들을 redux를 사용하지 않고 state로 관리하였고 그렇게 사용하다 보니 생기는 불편함이 몇 가지 있었습니다. 1. 컴포넌트 간에 데이터를 Props로 넘겨주어 사용하는 경우가 다반수였습니다. 2. 하나의 컴포넌트에서 사용된 api가 다른 컴포넌트에서도 필요할 때 api를 요청하는 부분이 중복으로 사용되는 경우가 있었습니다. 3. 비동기데이터가 컴포넌트 마다 흩어져있어 한번에 관리하기 어려웠습니다. 새롭게 시작하는 프로젝트에서는 비동기 데이터를 잘 관리하고 싶었고 전역상태관리로만 사용했던 redux를 미들웨어를 사용하여 써볼까 했지만 큰 기업들에서react-query를사용하고 있는 추세였기에react-query와을 선택하였습니다. R.. 공감수 0 댓글수 0 2022. 11. 28.
  • React | Swiper.js를 사용하여 카드 슬라이드 구현하기 (Slides per view) Preview 카드 형식의 컴포넌트들을 swiper를 사용해 슬라이드 형식으로 구현하였고 반응형을 적용하였습니다. Swiper 라이브러리에 관한 기본적인 설명은 아래 글을 참고하여 주세요. https://3d-yeju.tistory.com/86 { fetch(`/data/swiper/swiper_card.json`) .then(res => res.json()) .then(res => { setSwiperList(res.data); }); }, []); return ( {swiperList && swiperList.length > 0 ? ( { swiperRef.current = swiper; }} slidesPerView={1} breakpoints={{ 800: { slidesPerView: 2, },.. 공감수 0 댓글수 0 2022. 11. 25.
  • React | Swiper.js를 사용하여 이미지 슬라이드 구현하기 Preview swiper 기본 세팅 및 무한 루프 기능 swiper.js 설치 npm i swiper --save 서버에서 받아오는 데이터 처럼 .json 형태의 파일을 fetch로 가져와 slide를 map으로 돌리려 합니다. // swiper_event.json { "data": [ { "img": "https://images.unsplash.com/photo-1661956603025-8310b2e3036d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80", "url": "https://www.naver.com/" }, { "img": "https://images.unspl.. 공감수 0 댓글수 0 2022. 11. 25.
  • React | 모바일, 데스크톱기기 구분하여 url 리다이렉트 시키기 이슈 도메인을 PC용, 모바일용으로 분리하면서 모바일 기기에서 PC 도메인으로 접속 시에 css가 깨져 보이고, pc버전과 같은 api를 쓰기 때문에 리다이렉트 하는 주소를 맞춰주어야 하는 이슈가 생기면서 모바일 기기로 PC url을 접속하면 모바일 url로 리다이렉트를 시켜야 하는 필요성이 있었습니다. 고정 메인 도메인으로만 이동하는 것이 아닌, path와 query도 동일하게 변경되어야 했습니다. 목적 모바일 기기에서 PC 도메인에 접속 시, 모바일 도메인으로 변경하기. (PC 프로젝트에서 작업) https://domain.com/search?login=success ⬇️ https://m.domain.com/search?login=success 방법 src> index.tsx 에서 useAgent를.. 공감수 0 댓글수 0 2022. 11. 24.
  • React | javascript 로 받은 form형태 react form으로 변환 하기 (에스크로 인증마크 설정) 전달받은 코드 회사에서 프로젝트가 1차 마무리 될 쯤, 운영팀 쪽에서 에스크로 인증 마크를 푸터 하단에 넣어달라는 요청을 받았습니다. 단순히 인증마크 이미지만 추가하면 되는건가 생각했는데, 전달 받은 내용엔 자바스크립트가 포함이...🧐 전달받은 코드를 간단하게 살펴보자면, 인증마크 버튼을 누르면 전달받은 키를 은행쪽의 주소로 전달하게 되고 그 전달받은 값을 윈도우 팝업형식으로 띄어주는 코드네요. index.html 파일에 전달받은 코드 그대로 복붙하게 되면 결과를 바로 볼 수 있지만 저는 원하는 위치에 삽입해야했고 react에 그대로 적용했을때는 타입에러가 나서 그대로 사용할 수 없었기 때문에 react form 형식으로 바꿔보려 했습니다. React form const key = "전달받은키" cons.. 공감수 0 댓글수 0 2022. 11. 21.
  • React | 간단하게 public 경로의 파일 (소개서, 템플릿) 다운로드 1. public 경로에 파일 넣기 2. a태그 추가 회사소개 💡 로컬에서는 잘 나오는데 배포시 다운로드 파일이 열리지 않을 때, 다운로드 파일의 용량이 1KB로 나올 때 = aws로 배포되는 프로젝트라면 아마존 세팅값을 확인해보아야 합니다. 공감수 0 댓글수 0 2022. 11. 18.
  • React SEO | Sitemap에 동적페이지 추가 및 배포시 자동생성하기 프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이 글은 react-router-sitemap 등의 사이트맵 라이브러리를 사용하지 않고 javascript 파일로 사이트 맵을 생성합니다. 정적인 페이지와 API로 데이터를 받아 동적인 페이지를 함께 사이트맵에 입력하는 스크립트입니다. ✅ 정적인 페이지만 사이트맵에 생성하고 싶다면 밑에 글을 참고해주세요. https://3d-yeju.tistory.com/70 React SEO | Sitemap과 robots.txt 생성하기 사이트맵이란? 사이트 맵(Sitemap.xml) 파일 형식 프로젝트에 사이트맵 생성하기 사이트 맵 확인 하기 robots.txt 설정하기 ✋🏻 잠깐! 들어가기 전에... 이.. 공감수 0 댓글수 0 2022. 11. 15.
  • VS Code | git branch 사라졌을 때, source control 레파지토리 연결 끊길 때 해결 방법 git에 올라간 작업들을 vscode에 연동하여 작업을 주로 하는데 아~~주 가끔 희박한 확률로 github 저장소와 연결되지 않는 것처럼 뜨는 일이 있다. (소스컨트롤에 변경사항이 적용되지 않을 때) 그런데 막상 터미널로 git log 나 git branch를 치면 아주 잘 연동이 되어있다고 보여주는데 vs code나 컴퓨터를 껐다켜도 똑같은 상황 🤦🏻‍♀️ 다시 돌아오는 것도 정말 랜덤으로 돌아오는 것 같은데 정확한 해결 방법을 찾지 못하다 이번에 찾게 되어 공유하고자 한다. 해결 방법 1. extension 에서 @builtin git를 검색한다. 2. Enable이라고 나오지만 Disable을 눌러주고 다시 Enable을 눌러준다. 해결 🧚🏼‍♀️ 작업표시줄에도 잘 뜨고, 소스컨트롤에서도 잘 연동.. 공감수 0 댓글수 0 2022. 10. 12.
  • GitHub | private 저장소의 작업 잔디에 추가하기 평일 5일 동안은 꼭 1일 1커밋을 실천하여 잔디밭을 채워놔야지 하는 생각으로 1년 가까이 잔디밭을 꾸준히 가꾸어왔다. 요새 git 레파지토리를 정리하면서 다른 계정으로 내 작업 계정 프로필을 들어가보았는데 이게 왠걸,, 낯선 비어있는 나의 잔디밭이 날 반겨주었다 😭 알고보니, 기본 설정은 public 저장소에 있는 잔디만 보여지기 때문이라고 한다는 것을 알게되었고, private 저장소에서 커밋을 많이 했었기에 모두 같이 보여지는 옵션을 찾아보았는데 의외로 정말 간단했다! 해결 방법 1. 잔디밭 위에 있는 Contribution settings 옵션창 클릭 2. Private contributions 선택 돌아온 나의 잔디밭! 🌱 공감수 0 댓글수 0 2022. 9. 29.
  • javascript | Cookie 설정하기, value 가져오기, 삭제하기 오늘 하루 보지 않기 기능을 구현할 때, Local Storage나 Cookies를 사용합니다. Local Storage는 간단하게 key-value 형식으로 저장할 수 있지만 Cookies를 사용하게 되면 만료기간을 설정 시에 저장할 수 있어서, 만료기간이 지나면 자동으로 쿠키가 삭제되기 때문에 더 유용하게 쓸 수 있습니다. 🍋 구현 방법 저 같은 경우에는 프로젝트를 진행할때 쿠키 관련 스크립트를 utils 폴더에 넣어놓고 사용합니다. setCookie 함수에서는 쿠키이름, 쿠키의 value, 만료일자(1일, 2일, 3일...) , getCookieValue와 deleteValue 함수의 인자로는 앞단에서 설정한 쿠키의 이름만 설정해주면 됩니다. const setCookie = (name: string.. 공감수 0 댓글수 0 2022. 7. 19.
  • jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달) CSS 컨트롤 css 속성 지정하여 추가하기 $('#searchBtn').css('display', 'none'); class 추가 하기 , 삭제 하기 $('#searchBtn').addClass('disabled-btn'); $('#searchBtn').removeClass('disabled-btn'); class 가 있는지 없는지 확인 $('#searchBtn').hasClass('on') // true & false 로 반환 태그 속성 컨트롤 a 태그 href 변경하기 마이페이지 $('#mypage').attr( 'href', `/mypage?offset=0&limit=20` ); a 태그의 href 제거하기 (클릭 disabled) $('#mypage').removeAttr('href'); but.. 공감수 0 댓글수 0 2022. 7. 18.
  • Typescript 에러 | 객체의 key를 변수(객체키)로 접근 하기 'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다. 'string' 형식의 매개 변수가 포함된 인덱스 시그니처를 찾을 수 없습니다.ts(7053) 게시판 기능을 구현 중에 카테고리 - 세부카테고리를 상수 데이터로 미리 정의하고, 사용자가 선택한 카테고리(writeBody.board_type)값에 맞는 세부카테고리를 보여주고자 했습니다. 객체명[변수명] 이렇게 접근하면 될 줄 알았지만 타입스크립트는 호락호락하지 않았고 빨간줄을 띄며 에러를 또 내뱉엇습니다. 이 에러는 상수객체에 타입을 지정해주지 않았기에 접근할 수 없다는 에러였으며, 타입을 지정해주면 해결할 수 있었습니다. 🚧 해결 방법 interface BoardDetailType { [props.. 공감수 0 댓글수 0 2022. 7. 16.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.