SimCoding

Git mirror 다른 계정 또는 다른 플랫폼의 git으로 repository를 이동 시키고 싶을 때 사용하는 방법입니다. Commit 등의 개발이력까지 전부 이동시킬 수 있습니다 ! 저의 경우는 gitlab에서 작업했던 팀프로젝트 repository를 개인 github으로 이동 시키기 위해 사용했습니다. git clone --mirror {기존 리파지토리 주소} cd {기존 리파지토리 명}.git git remote set-url --push origin {신규 리파지토리 주소} git push --mirror

React Hooks - useEffect() 를 활용한 렌더링 관리. useEffect함수가 실행되는 4가지 경우에 대한 예시코드입니다. 1. Component가 Mount 될 때 useEffect(()=>{ console.log('컴포넌트 마운트') },[]) 2. Component가 Unmount 될 때 useEffect(()=>{ console.log('컴포넌트 마운트') // return -> 언마운트시 실행 return console.log('컴포넌트 언마운트') },[]) 3. Componet가 Rerendering 될 때 마다 useEffect(()=>{ // depth가 없는 경우 렌더링 될 때마다 실행된다. console.log('렌더링 될 때 마다 실행') }) 3. Component..

1. [React] React, HTML 에서 dataset을 활용해 Dom요소에 값 저장하기. @ dataset : Dom요소에 값 저장하기 지정 : = “지정” data-이름 불러오기 : Dom.dataset.name data- 뒤에 사용불가능 : 대문자 영문 data- 뒤에 사용가능 : 소문자 영문, 점(.), 하이픈(-), 로우데시(\_), 콜론(:) @ 예시 코드를 통해 dataset사용법을 확인해 보도록 하자. function Dataset() { const onClick = (e) => { const name = e.target.dataset.name; console.log(name); // Eungwang }; return ( 클릭 ); }

1. [React] 리액트 Reack-Hook-Form 이번에, 리액트로 프로젝트를 진행하면서 폼을 어떤식으로 다루면 좋을지에 대해 서칭하던중 Reack-Hook-Form 이라는 엄청나게 유용한 Hook을 알게 되었다. Reack-Hook-Form에서 useForm을 이용하면, 폼을 다루는데 있어 불필요한 렌더링을 막아주고 내장 되어있는 validation을 활용할 수도 있다. 이 외에도 정말 편리한 기능들을 많이 제공하고 있다. React-Hook-Form 공식문서에 자세히 나와있으니 공식문서를 보도록 하자 ! https://react-hook-form.com/kr/api/#watch API 설명서 Performant, flexible and extensible forms with easy-to-use..

1. [React] 리액트 localStorage를 활용해서 페이지데이터 유지하기 프로젝트를 진행하던 중, 게시글 작성 페이지에서 데이터 유지관련하여 문제가 있었다. 게시글 작성 페이지가 4개로 나뉘어져 있는데, 페이지를 이동할 때 페이지가 재렌더링이 되어 입력된 데이터가 초기화 되는 것이 문제였다.. 페이지 이동시에도 데이터가 유지될 수 있는 방법을 찾던 중, 로컬 스토리지를 알게 되었고 이를 활용해서 문제를 해결 할 수 있었다 ! 문제를 해결하기 위해 사용한 코드와 관련 자료를 남긴다. /// useEffect와 watch를 활용해 데이터 값이 바뀔때 마다 localStorage에 데이터를 저장해 주었다. const { register, watch, setValue } = useForm(); useE..

1. [JS] FormData에 다차원 object append하기. setFormData : 다차원 오브젝트를 Formdata에 append 할 수 있도록 도와주는 함수. function setFormData(formData, data, parentKey) { if (!(formData instanceof FormData)) return; if (!(data instanceof Object)) return; Object.keys(data).forEach((key) => { const val = data[key]; if (parentKey) key = `${parentKey}[${key}]`; if (val instanceof Object && !Array.isArray(val)) { return set..

1. [JS] FormData의 객체에 파일과 String데이터를 한번에 담는 방법. 다음과 같은 형태의 JSON을 FormData로 전달하려고 합니다. const testArray = [ { "title" : "제목1", "image" : [File object] }, { "title" : "제목2", "image" : [File object] } ] formData에 추가해주기 for (let i = 0; i < testArray.length; i++) { formData.append('testArray[' + i + '].title', testArray[i].title); formData.append('testArray[' + i + '].image', testArray[i].image); }