Frontend

면접 파이팅😭GET동기식보안 이슈가 있는것은 GET으로 사용하면 안된다. 브라우저에 히스토리가 남는다.불필요한 요청을 다시 하지않기위해 데이터를 캐시처리 할수있음데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송길이 제한이 있다.POST비동기식등록하는 액션, 로그

요즘 하이차트를 사용하여 데이터를 시각화해서 보여주는 프론트 개발을 하고있다. 차트중에 시리즈 2개를 동시에 보여주지 않고, 라디오 버튼처럼 하나씩만 노출되도록 해야하는 것이 있었다

유효성검사 작업할때 맨날 검색하는게 너무 힘들어서 정리해보기 😉영문 대문자 1자리 이상, 소문자 1자리 이상, 숫자 1자리 이상, 특수문자 (!$^&\*) 만 허용하는 8~20자리 정규식영문과 숫자와 . 포함한 이메일 형식의 정규식특수문자와 공백 제외한 1~20글자

엑셀 다운로드 버튼 컴포넌트를 새로 만들어야 하는 상황에서 겪었던 일들을 작성하려고 한다!현재 개발하고있는 프로젝트는 Nuxt를 사용하여 개발중이다. 기획된 사항은 아래와 같다.Table이 있는 페이지 상단에 모두 엑셀 다운로드 버튼이 있어야 한다.다운로드 시 전체데이

엑셀 다운로드 버튼 컴포넌트를 새로 만들어야 하는 상황에서 겪었던 일들을 작성하려고 한다!현재 개발하고있는 프로젝트는 Nuxt를 사용하여 개발중이다. 기획된 사항은 아래와 같다.Table이 있는 페이지 상단에 모두 엑셀 다운로드 버튼이 있어야 한다.다운로드 시 전체데이

개발할때 디버깅용으로 console.log를 많이 찍는다.이렇게 작성하면 텍스트만 있는것보다 훨씬 가독성있게 콘솔로그를 찍을 수 있다!!

aws-sdk 라는 라이브러리를 사용해서 s3에 있는 객체를 다운받는 기능을 구현했다! 해당 s3의 경로를 보여주면 안되기때문에, @aws-sdk/s3-request-presigner 에 있는 getSignedUrl을 활용했다. 해당 프로젝트는 Nuxt와 vue3를 사

기존의 어드민 페이지는 레거시라서 패키지매니저가 npm 이었다.그래서 pnpm으로 변경하려고 한다! 변경하는 이유는 패키지 별 설치 순서가 병렬로 설치되어 더 빠르다는 장점, 여러 프로젝트에서 전역에 설치된 패키지를 사용하기 때문에, 같은 패키지를 사용하는 프로젝트에서

공유할때 보이는 썸네일인 og:image 를 변경했는데 카카오톡에서 링크를 공유할때 변경이 안됐다는 문의가 들어왔다!이미지가 캐싱이 된것같아서 구글링을 해보니까카카오에서는 같은 url에 대해 1시간동안 캐싱을 한다고 한다. 카카오 공유 디버거여기에서 캐시 초기화를 하면

우리 회사 서비스는 웹사이트로 이루어져있다.단점은 유저가 웹사이트를 북마크 해두지 않는 이상 진입하기가 어렵다는 것이다😅그래서 이번 요구사항은 웹 브라우저에서 홈화면에 추가하면 앱처럼 깔리는 기능을 구현하는것이었다.Progressive Web App의 줄임말이다. 폰

어느날 뒤로가기에 대한 이슈들이 나왔다..이슈는 바로..🚨 1. 상품리스트 무한스크롤 페이지에서 스크롤을 내린 후 상품상세 갔다가 뒤로가기 하면 스크롤위치가 유지가 되지않고 이상한 곳으로 간다.🚨 2. 인증이 필요한 페이지에서 로그인으로 보낸 후, 카카오 로그인 완

최근에 디자이너분과 함께 디자인 시스템을 새롭게 구성했다.기획 초기부터 Figma ↔ 코드 ↔ 실제 앱 간의 연결성을 고려했고,특히 Nx 기반 모노레포 구조를 사용하는 만큼 확장성과 테마 유연성에 초점을 맞췄다.이 글에서는 내가 어떻게 설계했는지, 어떤 구조로 잡았는지

그저께 무한루프로 돌아가는 메인 페이지 배너 스와이퍼를 구현하면서 머리아픈 아픈 버그를 만났다. 로컬에서는 분명히 잘 됐는데, 빌드 후 배포된 개발 서버에서는 역방향으로 스와이프할 때만 클릭이 안 되는 현상이었다."로컬에서 됐으니까 괜찮겠지"라는 생각이 얼마나 위험한지