내맘대로 개발일지

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 학생이메일로 기분좋게 WebStorm 을 사용하고 있었는데 갑자기 이메일 정리로 인해 계정이 막혀버렸다 ...😭 아무튼 .. 이 당시 WebStorm 으로 React Typescript 프로젝트를 생성했었는데프로젝트를 실행시킬때마다 One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working be..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 이게 한번씩 consol.log 가 2번씩 출력될때가 있다. useEffect(() => { ... console.log("hi"); ... }, []); 컴포넌트가 처음 랜더링될때 딱 한번만 실행되어야 할텐데 개발자도구를 열어서 확인해보면 2번씩 찍혀있는 경우가 있다. 이런경우는 대부분 개발모드에서 발견되는데 해결방법은 아주 간단하다. // index.tsx const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( // // ); React.StrictMode 때..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" "이미지 클릭 하면 Ref 이용해서 하는거다" 라는건 기억이 나는데 막상 하려니까 가물가물 하더라 .. 역시 사람의 기억은 믿을게 안되나 보다. 그래서 이렇게 기록을 남기기로 했다. 언제나처럼 코드를 분리하기 위해서 쪼개서 작성하는 걸 기본으로 한다. 배울 때 코드는 최대한 쪼개서 작성해야 한다고 배웠기 때문ㅇㅔ ... // Modify.tsx const fileInputRef = useRef(null); { fileInputRef.current?.click(); }} /> // StyledDetail.tsx export const ContentImage = styled.img`..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 에 기본으로 텍스트를 넣어주기 위해 value 에 값을 넣어줬을 때 이후 값을 수정하려고 하면 값이 안들어가게 될 것이다. 그때는 당황하지 말고 value 를 defaultValue 를 사용하면 된다. Before {setTitle(e.target.value)}}/> After {setTitle(e.target.value)}}/>

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" 서버와 통신하기 위해서 axios 사용하고 있었는데, 기존에는 그냥 GET, POST, PUT, DELETE 를 바로바로 사용했는데 그게아니라 인스턴스를 만들어서 재사용성을 높일 수 있도록 하기 위해서 리팩토링을 진행하였다. 만드는 방법은 아주 간단하다. axios.tsx export const axiosInstance = axios.create({ baseURL: BACKEND_API_ADRSS, timeout: 10000, }); .env 에 설정되어있는 BACKEND_API_ADRESS 를 baseURL 에 지정해놓고, timeout 은 10000초로 지정해놓았다. 이외에도..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" ReactQuill 라이브러리를 사용하였고, 여기서 작성한 값을 저장하려고 하니까 태그가 함께 값이 넘어왔고 스타일을 이대로 넣기 위해 dangeroulsySetInnerHTML 을 사용하였다. styled-components 를 사용하여 디자인을 하고있었고 해당 Content 디자인은 아무것도 적용하지 않은 상태였다. 어차피 태그에 적용된 스타일대로 들어갈 것이라고 예상했고, 그냥 그대로 보여주면될 것이라고 생각했기 때문이다. export const Content = styled.div``; 그래도 이렇게 만들어놓은 이유는 나중에 혹시나 디자인이 필요한 경우 작업하기 위해서 만..

😢 내가 겪은 문제 나는 원래 Spring JAVA 개발을 했다. 짝꿍인 jQuery 와 함께 웹 프론트 개발을 처음 시작했었다. 대한민국은 자바 공화국이라 스프링만 할줄 알아도 밥굶을일은 없다고 들었다. 근데 React 가 프론트 개발에서 엄청난 인기를 받고 있다고 해서 궁금했다. React 는 어떤 강점이 있는지 간단하게 확인해보고 이런게 있구나 ~ 하고 내가 쓰는 React 가 어떤 강점이 있는지 확인해보려고 한다. 가상 DOM (Virtual DOM): React는 가상 DOM을 사용하여 효율적으로 UI를 업데이트할 수 있다. 단방향 데이터 흐름: React는 단방향 데이터 흐름을 지원한다. 이로 인해 데이터의 흐름을 예측 가능하고 관리하기 쉽게 만든다. 컴포넌트 기반 아키텍처: React는 컴포..