본문 바로가기

DEVELOP

 (150)
[React.js] props와 state에 대하여 props & state 둘다 데이터를 다루는데 사용된다. props 부모로 부터 상속받은 데이터를 뜻한다. 데이터 기원이 자신이 아닌 부모에 있다. 물려준대로 사용. 그 데이터의 원천을 변경할수는 없다. state 현재 자신 컴포넌트에서 생성 또는 수정할 수 있다. 그래서 state, setState를 사용하여 데이터를 담고, 각자의 페이지에 맞는 용도로 가공하여 사용한다. 입장에 따라 달라지기도 한다. App 컴포넌트가 Sample 컴포넌트에게 count라는 데이터를 주었다고 가정하면, App 컴포넌트 입장 : count를 준 입장이니, App 컴포넌트에겐 count 데이터가 state. Sample 컴포넌트 입장 : count를 받은 입장이니, Sample 컴포넌트에겐 count 데이터가 props.
[React.js] 메모리 누수에 관하여 리액트를 사용하다 보면 간혹 콘솔창에 빨갛게 memory leak.... 어쩌고 경고문이 나올때가 있다. 몇번 마주칠때마다 구글링을 해봐도 와닿지 않았는데 결론은 데이터를 담아 사용 useState()를 다시 비워주지 않아서 발생한다. React는 DOM를 직접 건드리지 않고 선언적(원하는 바를 간접적으로 명시?)으로 돌아가는데 (이부분은 좀더 공부가 필요) 그럴때 사용하는 것이 react의 useState이다. (참고: javascript나 jquery에서는 DOM에 접근하기 위해 아이디 값이나 클래스값을 직접 호출하는데 React에서 요소를 변경하려면 react의 useRef()를 사용한다. 이부분 공부 필요...) 즉, 이해한 바로는 메모리 누수는 말그대로 메모리가 계속 새고 있다는 것인데, 한번 ..
[Firebase] storage 사용 전 CORS 설정하기 [Firebase 가입 및 프로젝트 추가] (자세한 설명 바로가기) [gsutil 설치 및 인증] https://cloud.google.com/storage/docs/gsutil_install?hl=ko gsutil 설치 | Cloud Storage | Google Cloud 의견 보내기 gsutil 설치 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이 페이지에서는 HTTPS를 사용하여 명령줄에서 Cloud Storage에 액세스할 수 있는 도구인 g cloud.google.com [자동 Cloud SDK 경로의 cmd 활성화] gsutil 폴더를 다운로드 받고 정상 인증까지 완료하면 cmd 창이 자동 오픈될것이다. You must log in to continue. W..
[React.js] Typescript로 초기 셋팅4 - firebase 연동 및 호출 firebase 사용 방법 포스팅 (바로가기) 8. firebase에 json 파일을 올려 최종 프로젝트 호출하기 준비한 json 파일 (참고 : json 파일은 보통 아래와 같이 작성한다.) { "WorkList" : { "first" : [ { "id": "general1", "title": "welcome general1" }, { "id": "general2", "title": "welcome general2" }, { "id": "general3", "title": "welcome general3" } ], "second" : [ { "id": "special1", "title": "welcome special1" }, { "id": "special2", "title": "welcome spec..
[React.js] Typescript로 초기 셋팅3 - firebase로 db 붙이기(Realtime Database) firebase는 백단의 개발 도구의 집합인 SDK를 구축할 수 있는 개발 플랫폼이다. firebase안에 많은 상품이 있는데 그중에서 Realtime Database를 통해 db를 구축해볼 것이다. 1. 회원가입 및 프로젝트 추가 2. 좌측 사이드바에서 빌드 메뉴 > Realtime Database 리전은 한국과 가까운 곳이나 한국이나 마음대로 3. 웹앱에 Firebase 추가 이 모양 버튼이 웹앱 추가 버튼. 4. firebaseConfig 변수 안의 값을 별도 보관 5. 만든 Realtime Database 페이지에서 규칙 텝에 read를 true로 변경하기. false로 두면 읽을 권한이 없어서 데이터가 해당 프로젝트에서 호출되지 않는다. 5. 적용하려는 프로젝트 최상위에 .env 파일 설정 (...
[React.js] Typescript로 초기 셋팅2 - Router 사용 하기 React 하얀 바탕에서 부터 시작(전편)은 아래 링크 참고 https://jintrue.tistory.com/entry/Reactjs-Typescript%EB%A1%9C-%EC%B4%88%EA%B8%B0-%EC%85%8B%ED%8C%85 [React.js] Typescript로 초기 셋팅 타입스크립트로 코드를 작성하면 오류사항이 즉각 보여 개발할 때 좀더 꼼꼼히 작업할 수 있는 이점이 있다. 확장자는 .tsx이며 Typescript로 React를 셋팅 하는 법을 기록하고자 한다. 셋팅 버전 참 jintrue.tistory.com 8. gnb에서 페이지 이동을 위한 라우터 설정 📜Component/Header.tsx styled-components를 이용한 태그 및 스타일 설정 framer-motion를..
[React.js] Typescript로 초기 셋팅 타입스크립트로 코드를 작성하면 오류사항이 즉각 보여 개발할 때 좀더 꼼꼼히 작업할 수 있는 이점이 있다. 확장자는 .tsx이며 Typescript로 React를 셋팅 하는 법을 기록하고자 한다. 셋팅 버전 참고 (참고 : react17 과 react-router-dom5 | react18과 react-router-dom6) "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.32", "@types/react": "^18.2.7"..
[CSS] 부모가 display: flex; 일때 특정 내용물 한줄로 나타내기 제목 : 내용 이런 구조가 있는데 제목 부분이 반응형일때 아래처럼 두줄 이상으로 안내려가길 원한다. 이럴땐 flex-shrink 를 사용하면 된다. flex-shrink 란 해당 요소가 화면 크기 변화로 인해 축소될 경우 비율을 선택하는 것인데 이 상황에선 한줄로 표현되길 원하는 것이므로 축소가 되지 않게 아래와 같이 스타일을 적용해주면 된다. flex-shrink: 0; 참고) flex: 1 1 auto 에 대해서 알아보자면, 위의 언급한 flex-shrink가 여기서 가운데 1 자리에 해당된다. 즉, 첫번째 1은 flex-grow 두번째 1은 flex-shirnk 마지막 auto는 이 요소가 최소한으로 줄어들수 있는 min-width 값을 설정해주는 것이다. auto로 할 경우에는 자동으로 비율을 조..

티스토리툴바