profile
웹개발자가 되자

npx cra global 삭제 이슈

CRA를 npx로 설치하고 싶었는데 자꾸 global remove를 하라는데 삭제해도 안되는 이슈가 있었다.당연히 저기 친절하게 써준 명령어를 치고 npx로 설치해도 실패sudo로 삭제하라고 했는데 필자는 window라 관리자 권한으로 git bash를 실행하여 삭제해

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

react.js -> ts로 변경하기(1)

안녕하세요. 마지막으로 글 쓴 실전 프로젝트를 혼자 마무리 짓기위해 서버리스로 구현하려고 하는데 먼저 typescript를 적용하려고 합니다.우선 참고 글에서 먼저 아주 간단하게 typescript를 적용해서 테스트를 해보라고 한다.typescript 모듈 다운tsco

2022년 6월 15일
·
0개의 댓글
post-thumbnail

항해 99 React 실전 프로젝트 회고

침몰하는 항해의 말로

2022년 6월 8일
·
0개의 댓글
post-thumbnail

FormData로 사진 여러장 배열로 넣기

form-Data에 파일객체를 배열에 담아서 보내려고 했었다.포스트맨에서는 정상적으로 파일이 들어갔다.그래서 포스트맨에서는 어떤 방식으로 보냈는 지 찾아냈다.오른쪽 코드 스니펫 클릭여기서 javaScript-Fetch 클릭postMan에서 보내는 방식 확인완료레시피 추

2022년 5월 25일
·
0개의 댓글
post-thumbnail

커스텀 라디오 버튼

직접 구현했는데 더 쉬운 방법이 있었다.input 태그에 display: none을 주고 label클릭시 useState로 변경

2022년 5월 12일
·
0개의 댓글
post-thumbnail

MUI TABS

글자색과 크기 선택되면 나타나는 바탭 크기글자 색테마생성선택시 나오는 바(indicator)출처공식문서:https://mui.com/material-ui/react-tabs/이슈: https://github.com/mui/material-ui/issu

2022년 5월 11일
·
0개의 댓글
post-thumbnail

React-Slick(슬라이더)

css전체코드웹에서 모바일로 봤을때 dot을 클릭하고 슬라이드 하면 점이 변경이 안됐다.그래서 공식 깃허브 이슈에 가서 해당 상황을 확인했고 해결도했다.이슈 확인한 내용: https://github.com/akiran/react-slick/issues/2082

2022년 5월 11일
·
0개의 댓글
post-thumbnail

드롭다운 하는법

마우스에 버튼을 hover되면 뜨긴 했지만 버튼으로 가려고 할 때 사라졌다.그 부분은 div로 감싸고 버튼까지 닿는 크기로 만들고 hover시에 이 전체를 보여주고 감싸는 애한테 hover가되면 버튼을 보여줬다.자식이나 형제 관계에서 style-component를 선택

2022년 5월 11일
·
0개의 댓글
post-thumbnail

MUI Navigation

처음에 네비게이션을 혼자 만들어 보았다.근데 MUI로 쓰면 코드가 너무 간결해졌다!코드가 간결해진다.내가 만든거 보다 이쁘다.커스텀이 내가 만든게 아닐라서 조금 힘들다.

2022년 5월 11일
·
0개의 댓글
post-thumbnail

useNavigate() may be used only in the context of a <Router> component

그저 위에서 선언만했다고 에러가 났는데 useNavigate()가 Router안에서 선언을 안해줬다는 뜻이다. 소스코드BrowserRouter 안에서 Navigate를 사용해줘야 한다.

2022년 5월 11일
·
0개의 댓글

깃허브 폴더 대소문자 변경

깃 허브에서 폴더에 대소문자만 변경하고 push하면 적용이 안되어있어서 pull로 가져온 코드에서 vscode에서 자동 리팩토링시켜준 경로에서 에러가 났었다.즉 리팩토링된 경로 코드는 푸시가 되었지만 가져온 경로의 폴더가 변경이 안되어서 에러가 났었다.git bash에

2022년 5월 8일
·
0개의 댓글
post-thumbnail

redux-toolkit적용과 persist 적용

toolkit만 적용했을때 파일구조toolkit, persist 적용했을 때 파일구조새로고침 해도 값이 있다.전체코드 보기공식문서: https&#x3A;//redux-toolkit.js.org/usage/usage-guidenpm 문서: https&#x3A;//www.

2022년 5월 8일
·
2개의 댓글
post-thumbnail

react-router-dom v5 에서 v6로 업데이트

크게 변경점은switch -> Routescomponent = {Compo} -> element={&lt;Compo/>}중첩라우팅을 업데이트 해보았다.변경전변경후변경전변경후변경전변경후react-router-dom redirect https&#x3A;//gist.gith

2022년 5월 7일
·
0개의 댓글

padding으로 인한 부모크기 무시

box-sizing: content-box로 설정해주면 부모크기 무시 안한다출처:https&#x3A;//developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

2022년 5월 7일
·
0개의 댓글
post-thumbnail

항해 99 React 심화반 PBL 2주차 & 3주차 회고

와이어 프레임과 구현해야할 기능 요구 사항을 만족한 인스타그램 비슷한 사이트를 만드는 것이다. 다음 단계로 구성되어있다. LV1 와이어프레임과 기능 구현LV2 백 엔드와 연동 API 서버 통신LV3 프로젝트 최적화(코드 스플리팅, 레이지 로딩)LV4 Typescript

2022년 4월 24일
·
0개의 댓글

React useReducer

사용이유 useState의 대체 함수로 컴포넌트 상태관리하는 값이 많고 복잡하다면 useReducer를 사용하여 읽히기 쉽게 바꿔준다. 사용법 > const [state, dispatch] = useReducer(reducer, initialState); state:

2022년 4월 24일
·
0개의 댓글
post-thumbnail

항해 99 React 심화반 PBL 1주차 회고

React 1주차 내용 와이어 프레임을 보고 디자인 후 redux를 이용하여 상태 관리하고 redux-thunk 미들웨어로 firebase와 통신하여 데이터를 CRUD 한다.데이터 구조를 생각하여 뷰, redux, 서버, 미들웨어간의 데이터를 주고 받는 흐름을 통해 r

2022년 4월 24일
·
0개의 댓글

옵셔널 체이닝

?. 연산자로 사용하며 .(체이닝 연산자)와 비슷하지만 참조하는 값이 null이나 undefined이라면 에러발생하는 것 대신에 리턴 값이 undefined로 리턴된다.객체, 배열, 함수에 사용할 수 있다.객체함수객체나 배열에 접근할 때 error를 내고 프로그램을 정

2022년 4월 10일
·
0개의 댓글
post-thumbnail

let vs const (hoisting,scope)

브라우저에서 자바스크립트를 해석할때 변수와 함수의 메모리 공간을 선언전에 미리 할당하는것을 의미합니다.변수의 선언과 초기화를 분리한 후, 선언만 최상단으로 옮기는 것이라고 합니다.위와 같은 경우 함수를 호출할 때 에러가 발생해야하는데 javascript에서는 호이스팅(

2022년 4월 6일
·
0개의 댓글
post-thumbnail

margin과 padding

마진은 컨텐츠 외부에 여백을 주는 방식패딩은 컨텐츠 내부에 여백을 주는 방식margin은 여백을 줬을 때 컨테츠 크기는 그대로padding은 여백을 줬을 때 컨텐츠 크기가 커짐

2022년 4월 5일
·
0개의 댓글