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

material ui 활용

sx 객체를 지정할 때 나는 단순 코드를 문자열로 짰다.하지만 함수형으로 지정할 수 있어서 기록하고자 한다.color의 다크모드, 화이트모드를 지정하기 위해 화살표 함수로 기능구현까지 했다.참고하자.

2023년 9월 19일
·
0개의 댓글
·

[eslint] Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig

문제상황 로그 ` [eslint] Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig » /vercel/path0/nodemodules/react-scripts/nodemodules/eslint

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

Failed to parse source map Error

Failed to parse source map Error~개발을 하다가 갑자기 이런 경고문들이 여러개 떴다. 로컬에 node_modules에서 해당하는 파일들을 찾을 수 없어서 뜨는 경고문이다. 이것은 webpack5와 CRA5의 문제라고 한다.폴더 최상위에 환경변수

2023년 8월 16일
·
1개의 댓글
·
post-thumbnail

npm install --force 와 --lagacy-peer-deps

npm install을 하는데 "unable to resolve dependency tree" 에러가 떴다.에러를 읽어보니 npm install --force or npm install --legacy-peer-deps를 하면 된다고 한다.저 둘의 차이점은 무엇일까?n

2023년 8월 4일
·
0개의 댓글
·

Error_'C:\Users\syrine\management\node_modules\stylis-plugin-rtl\src\stylis-rtl.ts'

문제가 최신 버전과 관련된 것 같다.npm i stylis-plugin-rtl@2.1.1프로젝트의 루트에 .env를 추가하고 env 파일에 GENERATE_SOURCEMAP=false 이 줄을 추가하면 문제가 해결된다.

2023년 7월 20일
·
0개의 댓글
·

Error_Manifest: Line: 1, column: 1, Syntax error

<head>매니페스트 파일이 루트 수준(index.html이 있는 위치)에 있는 경우 index.html 파일의 태그 에서 다음과 같이 참조할 수 있습니다 . 또한 매니페스트 파일의 startUrl은 다음과 같아야 합니다.index.html에서 코드를 구성하는

2023년 7월 20일
·
0개의 댓글
·

Error_Failed to parse source map Error 에러 해결 방법

개발을 하다가 갑자기 이런 경고문들이 여러개 떴습니다. 로컬에 있는 제 node_modules에서 해당하는 파일들을 찾을 수 없어서 뜨는 경고문들입니다. 조금 찾아보니 webpack5와 CRA5의 문제라고 합니다.폴더 최상위에 환경변수를 설정할 수 있는 .env 파일을

2023년 7월 20일
·
1개의 댓글
·
post-thumbnail

TIL_error:0308010c:digital envelope routines::unsupported

배포시 갑자기 나타난 오류..OpenSSL 3.0이 포함된 Node.js V17+는 MD4 알고리즘을 OpenSSL 3.0의 레거시 공급자로 옮겼습니다. 공급자는 필요할 때 응용 프로그램에 추가할 수 있는 알고리즘 모음입니다. 레거시 공급자에는 보안 측면에서 안전하지

2023년 7월 18일
·
1개의 댓글
·
post-thumbnail

리액트 아임포트 결제 연결하기

리액트에서 아임포트 결제 연동하기 리액트 환경에서 아임포트 결제 연동을 위한 안내입니다. 1. 가맹점 식별하기 IMP 객체의 init 함수 첫번째 인자에 가맹점 식별코드를 추가합니다. 가맹점 식별코드는 아임포트 관리자 페이지 로그인 후, 시스템 설정 > 내정보에서

2023년 6월 16일
·
0개의 댓글
·
post-thumbnail

Web Socket(stomp)

웹페이지가 열리는 브라우저가 websocket을 지원하면 websocket 방식으로 동작하고 지원하지 않는 브라우저라면 http를 이용헤 websocket을 흉내내는 방식으로 통신을 지원한다.socket.io는 nodeJS에 종속적이다.스프링에서 위와 같은 문제를 해결

2023년 6월 16일
·
0개의 댓글
·
post-thumbnail

HTTP 헤더의 종류 및 항목

요청 및 응답 메시지 모두에서 사용 가능한 일반 목적의(기본적인) 헤더 항목HTTP 메시지를 생성한 일시 (RFC 1123에서 규정)Date: Sat, 2 Oct 2018 02:00:12 GMT클라이언트와 서버 간 연결에 대한 옵션 설정(다소 모호한 복잡성 있음)Ex)

2023년 6월 16일
·
0개의 댓글
·

헤더로 정보 받기

로그인 했을 때 헤더에 유저정보를 담아서 보내줬는데 프론트엔드 팀원들이 정보가 없다고 함☞ Access-Control-Expose-Headers기본적으로 브라우저에 노출이 되는 Http Response Header는 6가지 뿐이다.따라서 직접 만든 커스텀 헤더를 접근하

2023년 6월 16일
·
0개의 댓글
·
post-thumbnail

브라우저에 URL을 입력하면?

회사원 처럼 일을 처리하는 역할(중앙처리장치)이다.구성요소Core: 각종 연산을 수행하는 핵심요소 (Tread 단위)Cache MemoryContoroller컴퓨터 안에 데이터를 저장하는 장소그래픽 처리를 용이하도록(단순반복 작업): 실행가능한 파일 (코드로 작성한

2023년 6월 16일
·
0개의 댓글
·
post-thumbnail

useTitle

문서 제목을 업데이트 하는 hooks를 만들어보자useTitle 을 통해 useEffect(updateTitle, title); componentDidMount, ComponentDidUpdate를 알 수 있다.

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

useEffect

useEffect는 2개의 인자를 받는데 첫번째는 function으로써의 effect 이다. 두번째 인자는 dependency 리스트이다.useEffect로부터 function이 리턴된다. 그것이 componentWillUnmoun이다.지금은 이에 대한 설명이 없지만

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

useTabs

웹 페이지에서 자주 사용하는 Tab 기능을 구현하기 위해 필요한 useTabs을 간단히 알아보자.content 라는 배열을 만들어 TabList 를 넣어준다.onClick 함수를 호출할 때마다 idx값을 전달하고, 현재 Tab 값이 변화하며 화면이 re-render 되

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

useInput

useInput은 기본적으로 Input을 업데이트 한다.이렇게 만들어 이벤트를 분리된 파일, 다른 entity에 연결해서 처리할 수 있다.알고는 있었지만, 다시 한번 정리해서 좋다.이는 hooks와는 관계 없지만, 더 예쁘게(검증기능을 가진) function을 만들

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

useState

hooks는 react 의 state machine에 연결하는 기본적인 방법이다.코드를 더 예쁘게 만들어주고, 더이상 class를 사용하지 않고, 모든 것이 함수형 프로그래밍이 되는 것이다.즉, nice한 프로그래밍을 위함이다.useSatate는 항상 2개의 값을 re

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

구름EDU_A+B

반올림소수점 대체 출력알아야 할 것은1\. round 함수2\. format 함수 사용법 ★★★★★"{:.소수점갯수f}".format(N)

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

구름EDU-태민이의취미

정육면체의 부피는 한변의 길이가 n일 때 nnn 이다길이가 1부터 n까지의 정육면체의 부피들의 합을 구하는 문제인데반복문을 이용하여 n을 세제곱 하여 합을 구하게 된다면 시간초과로 오답을 출력한다.반복문으로 구하지말고 "세제곱의 합 공식"을 이용하여 풀면 된다.참 어렵

2023년 4월 21일
·
0개의 댓글
·