본문 바로가기
[CSS] 반응형 공간 작업 (with SASS) 만약 반응형 시안이 1000px 이라 가정하자 1000px 기준으로 모바일 미리보기를 잡아놓고 만약 위의 간격을 30px로 줘야한다 가정하면, vw 함수를 사용하여 padding-top: vw(30); 을 주면 된다. _vw.scss // 미디어 쿼리 사이즈 $mediaResponsiveSize: 1024px; // 시안 사이즈 $mediaPSD: 1000px; $mediaPSD-function: remove-unit($mediaPSD); @function vw($val, $std: $mediaPSD-function) { @return ($val / ($std / 100)) * 1vw; }
[React.js] github pages로 배포했을 경우 새로고침 OR 직접 입력시 에러 해결 이번 포트폴리오를 리액트로 완성하여 깃허브 페이지로 배포를 했는데 문제는 깃허브 페이지는 SPA 를 지원하지 않는다. 즉 history API 기능을 제공하지 않아서 렌더링 없이 URL만 이동하는 것은 불가능하다. 그래서 포트폴리오 메인에서 다른 페이지로 이동후 다시 그상태에서 새로고침을 할경우 github pages의 404 페이지 화면이 나오는 문제가 발생했다. 또한 직접 메인아닌 서브페이지의 URL를 입력하고 접근 시도시에도 동일한 현상이 생겼다. 다음과 같이 해당 문제를 해결하였다. [spa-github-pages 오픈소스] 이를 해결해주는 오픈 소스가 있다. https://github.com/rafgraph/spa-github-pages GitHub - rafgraph/spa-github-pag..
[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..
[Github] Github Pages 이용하여 홈페이지 배포 + 기존에 간단히 포스팅했던 글에 업그레이드 버전의 포스팅을 하려한다. (기존 포스팅 바로가기)
[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 파일 설정 (...

티스토리툴바