profile
최강 프론트엔드 개발자가 되고싶은 안유진 입니다
태그 목록
전체보기 (755)algorithm(148)python(145)baekjoon(113)JavaScript(78)CodingTest(78)programmers(59)React(56)react.js(49)CSS(37)Lv1(36)git(33)bruteforce(29)masterclass(26)master-class(22)hooks(22)silver3(20)Silver1(20)Lv2(17)dynamicprogramming(16)greedy(15)silver4(15)PythonPlus(14)silver5(14)개발환경(14)silver2(14)shouldToRetry(12)math(12)CODESTATES(11)DataStructure_1(9)Implementation(9)DFS(9)stack/queue(8)네트워크(8)typescript(8)BFS(7)Lv3(6)http(6)error(5)DataStructure_2(5)Bronze2(5)tree(4)백트래킹(4)TwoPointer(4)hash(4)Bronze3(4)Bronze1(3)preonboarding(3)GraphTraversal(3)Analytics(3)zoom(3)기술면접(3)정렬(3)queue(3)API(2)mui(2)beakjoon(2)비동기처리(2)html(2)iron1(2)UI(2)DP(2)ux(2)swiper(2)graphql(2)react router dom(2)node.js(2)Alorithm(2)react-master(1)오류(1)Programmer(1)재귀(1)array(1)bronze4(1)spa(1)backjoon(1)seo(1)JSX(1)기억상자(1)postman(1)CRUD(1)round(1)CS기초(1)datastructure(1)grid(1)Satck&Queue(1)ShuldToRetry(1)redux(1)set(1)vscode(1)cdd(1)유진참고(1)WAI-ARIA(1)sop(1)nextjs(1)scss(1)cors(1)바빌로니아(1)자료구조(1)URI(1)Graph(1)모의고사(1)crome(1)server(1)DNS(1)ubuntu(1)배포(1)REST(1)barkjoom(1)silver(1)useTab(1)객체(1)url(1)coingTest(1)Let me Do it Again~(1)취준(1)client(1)apt(1)이분탐색(1)Hasch(1)await(1)useEffect(1)useState(1)ajax(1)level1(1)fontawsome(1)package.json(1)async(1)study(1)domain(1)Rambda(1)tailwind(1)ip(1)frontend(1)baekjooon(1)POWER(1)datastucture(1)json(1)DataStucture_1(1)gh-pages(1)heapq(1)useMemo(1)useRef(1)axios(1)useCallback(1)CSR(1)SSR(1)

TailwindCSS

NO : 클래스 이름을 동적으로 구성하지 말 것YES : 완전한 클래스 이름을 사용 할 것문제는 이렇게 되면 상위 컴포넌트에서 props 받아서 동적으로 클래스를 생성하는 데에어려움이 있으며, 공식문서에서도 이렇게 하지 말라고 명시하고 있음.NO : 클래스 네임을 동적

6일 전
·
0개의 댓글
·
post-thumbnail

onClick 시 겹쳐진 밑 부분 이벤트 발생 막기 = 이벤트 버블링 막기

겹쳐진 정역을 클릭하면 전체 영역의 이벤트도 발생하는 경우!event의 stopPropagation() 함수를 이용하면 간단하게 해결된다.해당 함수는 현재 발생한 이벤트 이후의 이벤트들을 막아주는 함수이다~이제 stopPropagation()을 넣어주면 겹쳐진 영역을

2024년 3월 19일
·
0개의 댓글
·

css 높이가 다른 이미지, 높이 같게 하기

이거면 퍼지거나 좁혀지는 이미지 없이, 같은 규격으로 줄여진다!

2024년 3월 7일
·
0개의 댓글
·
post-thumbnail

FullCalendar Custom

FullCalendar 디자인중 Border 색상을 커스텀하고 싶었다.그런데 챗GPT한테 물어봐도요녀석이 말한 방법으로 해결되지 않았다.결국인 공식문서 파헤치기이렇게 작성하고 수정하니 반영되었다.참고링크: https://fullcalendar.io/docs/c

2024년 2월 7일
·
0개의 댓글
·
post-thumbnail

Swiper 컴포넌트 렌더링 오류 해결

대충 정리하면 간단하게 구조가 이러했다.근데 여기서 배열입니다 에 새로운 값이 수정되었을때pagination 이 사라지는 오류가 생겼다.하루 내내 고민하다가 ChatGPT 에게 쳐봤더니바로 해결,,이래서 ChatGPT쓰는구나.. 대박

2024년 2월 6일
·
0개의 댓글
·
post-thumbnail

Swiper Event(React)

Swiper 가 움직일 때마다 이벤트를 부여하고 싶다.공식문서를 참고하면 된다.onSlideChange={() => console.log('slide change')}onSwiper={(swiper) => console.log(swiper)}아래와 같이 이벤트를 작성해

2024년 2월 2일
·
0개의 댓글
·
post-thumbnail

Swiper Navigation Custom

Swiper 는 내부 CSS 가 있기 때문에global.css 파일을 루트에 생생해서 기존 Navigation 및 Pagination 을 커스텀 했다.방법은 간단하게 설명 가능하다.개발자 도구를 활용해 현재 먹고 있는 Class Name 을 확인한다.확인한 class

2024년 1월 30일
·
0개의 댓글
·

이미지를 드래그 잔상 방지

위 이미지를 드래그 잔상 방지를 하기위해서아래와 같은 style 옵션을 줍니다.

2024년 1월 26일
·
0개의 댓글
·
post-thumbnail

스크롤바 스타일

스크롤을 다루기 위해서는 관련된 가상 요소에 스타일을 적용하면 됩니다.여러 가지 가상요소가 있지만, 주로 아래 3가지 요소만 스타일을 적용해 주면 충분합니다. (chrome 기준)::-webkit-scrollbar 스크롤바 전체::-webkit-scrollbar-thu

2024년 1월 22일
·
0개의 댓글
·
post-thumbnail

MUI 커스터마이징

MUI에서 가져온 컴포넌트들은 수정이 살짝 어렵다.그래서 비교적 편하게(?) 하는법선택한 컴포넌트의 class 명의 마지막 클래스 이름을 기억해 둔 뒤,주석처리된 부분처럼 작성하면 된다.이렇게 작성하면색상을 쉽게 변경할 수 있다.

2024년 1월 18일
·
0개의 댓글
·
post-thumbnail

How to make mui circular progress with gradient in react js?

MUI의 CircularProgress 컴포넌트를 그라디언트 색상으로 만들기 위해 방법을 찾았다.디자이너 님이 기존의 단색 컬러에서 그라데이션으로 바꿔달라고 하셔서 해내고 싶었다.npm i "@mui/styles"조만간 mui/style -> mui/system 으로

2024년 1월 12일
·
0개의 댓글
·
post-thumbnail

구글 서치 콘솔 에러: 적절한 표준 태그가 포함된 대체페이지

구글서치콘솔을 이용하다 보면 '적절한 표준 태그가 포함된 대체페이지'라고 뜨는 걸 본 적 있음구글서치콘솔에서 '색인 생성 범위'중 제외된 문서를 발견한 후 해결하는 방법에 대해 살펴보도록 하겠다.먼저 구글서치콘솔을 검색 한 뒤 - 색인 - 색인 생성 범위를 선택. 위에

2023년 12월 14일
·
0개의 댓글
·
post-thumbnail

구글 애널리틱스 기초_설정

구글 애널리틱스의 구조계정을 만들면 속성이 자동으로 만들어지고, 속성 내에 해당 계정의 보기가 만들어 진다.각 애널리틱스의 계정에는 여러개의 속성이 들어가고 각 속성은 여러개의 보기로 구성된다.일반적으로 비즈니스 별로 또는 비즈니스의 단위 별로 애널리틱스 계정을 만드는

2023년 12월 4일
·
0개의 댓글
·
post-thumbnail

구글 애널리틱스 기초_작동 방식

구글 애널리틱스: 데이터를 수집하여 유용한 보고서에 컴파일 하는 플랫폼구글 애널리틱스 가입사이트의 각 페이지에 자바스크립트 추적 코드 추가사용자가 방문시마다 추적코드는 익명 정보 수집,기기 및 브라우저 정보 수집, 트래픽 소스(접근 출처)수집세션: 페이지가 로드될 때

2023년 12월 4일
·
0개의 댓글
·
post-thumbnail

구글 애널리틱스 기초_디지털 애널리틱스

마케팅에서는 구매 유입 경로의 개념을 활용하고 있으며, 고객의 상호작용에 대해 설명하는 유입경로에는 여러 단계가 있다.기본 구매 유입경로는 다음과 같다.획득 단계 : 인지도 제고와 사용자 관심 분야 확보 시점행동 단계: 사용자가 귀사에 참여하는 시점전환 단계: 사용자가

2023년 12월 4일
·
0개의 댓글
·
post-thumbnail

axios config

구성(Config)은 우선 순위(order of precedence) 규칙에 따라 병합됩니다. 순서는 lib/defaults.js에 있는 라이브러리 기본 값, 인스턴스의 defaults 속성, 그리고 요청에서 설정한 인자 순입니다. 후자는 전자보다 우선합니다. 예제를

2023년 11월 20일
·
0개의 댓글
·
post-thumbnail

axios intercepter

then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다.나중에 필요할때 인터셉터를 제거할 수 있습니다.커스텀 인스턴스에서도 인터셉터를 추가할 수 있습니다.JWT 인증방식 로그인 + 토큰 로컬스토리지에 저장특정 프로젝트에서 밑과 같이 구현했다.JWT토큰

2023년 11월 20일
·
0개의 댓글
·
post-thumbnail

Socket.io 와 ws 의 차이

NestJS는 두 기능 다 지원한다고 하였는데, 각 모듈은 서로 미세한 차이가 있다. 그 차이는 다음과 같다.ws는 new WebSocket(’서버주소/네임스페이스’)로 객체 바로 생성 가능socket.io는 js 파일을 추가해야함소켓io는 event 명과 데이터를 명

2023년 11월 17일
·
0개의 댓글
·
post-thumbnail

MaterialUI - Zindex

업로드중..기존 라이브러리에 만들어져 있는 컴포넌트들을 사용하면내가 만든 컴포넌트들과 위치가 중구난방이 될 때가 있다.그래서 아예 MaterialUI 의 정형화 된 zIndex 는 기록해두고자 한다.mobile stepper: 1000fab: 1050speed dial

2023년 11월 13일
·
0개의 댓글
·

html 또는 react에서 /r 또는 /n 으로 줄바꿈(개행)이 안됨

html texthtml의 요소 안 텍스트가 /r 또는 /n으로 줄 바꿈을 하고 있는데 줄 바꿈(개행)이 동작하지 않는다.웹에서 보여줄 때 몇몇 문자들은 자동으로 인코딩이 하여서 보여주지 않는다.해결 방법위의 css를 해당 요소에 추가하거나react의 JSX에서는 위와

2023년 11월 13일
·
0개의 댓글
·