본문 바로가기
반응형

react3

[React] 리액트 배포 전 보안 설정 후 빌드 React로 개발이 끝나고 배포를 위해 가비아에서 도메인도 구매했고, aws Amplify를 이용하여 main 브랜치와 연결도 했다.이 과정은 나중에 언젠가... 머지만 하면 도메인에 올라가는 것은 맞는데, 개발 환경 그대로 올려도 되는 건가?다른 작업은 따로 필요하지 않는 것인가? 하는 의문이 들었다면,절대 안된다!개발 환경 그대로 배포하게 되면, 일반 사용자들도 개발자 도구를 통해 우리가 작성한 소스 코드와 콘솔 내역까지 모두 열람할 수 있다.Sources > Page, Console 코드는 당연히 지켜야 하고, 콘솔 또한 백엔드 API URL을 지키기 위해서 삭제할 필요가 있다.  1. Source우리의 소스 코드는 그대로 사이트에 올라가는 것이 아니다. 모듈 번들러를 거쳐 조각난 후에, jsx/t.. 2024. 9. 9.
[React Native] M3 Macbook Pro에 리액트 네이티브(React-Native-Cli) 초기 세팅하기 (개발 환경 구축부터 Android, iOS 기기 Build까지) 설레는 마음으로 개봉한 M3 맥북 프로.개발의 세계에서 가장 어려운 게 세팅이라 했건만 인텔 아이맥 한번 세팅해 본 경험만으로 자만감이 차올랐던지, 신중함 없이 신나게 세팅하다 실패하여 구매한 지 하루만에 결국 포맷을 하게 되었다.검색해 보니 아직 M3 Macbook Pro의 React Native Cli Setting 방법이 없길래 다른 사용자들이 필자처럼 삽질하지 않기를 바라는 마음에 포맷 후 세팅 기록을 정리했다.부디 이 긴 여정을 끝까지 함께하길 바라며 버전 정보부터 정리한다.Version InfoSystem: OS: macOS 14.3 CPU: (11) arm64 Apple M3 Pro Memory: 78.47 MB / 18.00 GB Shell: version: "5.9" p.. 2024. 4. 16.
[React] 리액트 스타일링 (css module, classnames) 기본적인 html 파일에서는 DOM 요소에 특정 class, id명을 붙여서 원하는 스타일을 적용할 수 있다.... 이렇게 style 태그 안에 넣어둔 class명을 활용하면 여러 클래스를 사용할 수도 있다. 그러나 리액트에서는 class를 사용하지 않고 JSX문법으로 className을 활용한다.return (); 일반 HTML처럼 style 태그 안에 넣어둔 class명을 사용하기도 하지만, 보통 styled-component와 module css를 주로 비교해서 사용한다. 그러나 이 글의 주인공은 이 둘이 아니라 classnames이므로, module css만 간단히 소개하고 활용법을 소개하겠다. CSS Module일반 css와 달리 각 css 파일을 컴포넌트 단위로 import하여 사용한다.즉 특.. 2024. 3. 29.
반응형