일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- js
- GitLab
- nextJS
- DevOps
- Docker
- shortcut
- github
- ReactNative
- viewcontroller
- HTML
- ES6
- REACT
- git
- Xcode
- styled-components
- JavaScript
- vscode
- React Native
- commit
- rn
- ios
- react-native
- Swift
- currying
- Android
- xtring.log
- npm
- styling
- Branch
- npm install
- Today
- Total
목록Front-End (45)
xtring.dev
HTML 요소의 종류는 정말 많습니다. 그 중 content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라고 합니다. 말 그대로 요소 사이에 Content 없이 동작하는 요소라는 의미죠. 😃 따라서 빈 요소들은 어트리뷰트만을 가집니다. 아래 예시를 볼까요? React 프로젝트를 시작하면 자동으로 생성되어있는 meta 태그와 link 태그 입니다. 이 처럼 빈 요소가 사용될 때는 Content를 생략하기 때문에 의 형태를 보입니다. 빈 요소 중 대표적인 요소는 아래와 같습니다. 텍스트 안에 줄바꿈(*Carriage Return)을 생성합니다. 가로방향의 Division Line를 생성합니다. 이미지를 생성합니다. 사용자의 데이터를 받을 수 있는 대화..
styled-components를 사용하며 Ant Design를 사용해야하면 아래와 같이 사용해보세요. 기존의 기본 Tag들과 styled-components를 함께 사용하는 방식과 같습니다! 필요에 의해서 사용할 수도 있겠지만 이렇게 사용하는 경우는 크게 없을 것 같네요 🤓 Antd의 class에 일일히 접근해서 모든 스타일을 바꾸는 것 보다 root의 index.css에서 전역으로 Antd 클래스의 스타일을 Tune 해놓은 다음에 사용하는 것이 좋을 것 같습니다! 😎 (저만의 생각입니다..ㅎㅎ)
지난 시간동안 다수의 React 프로젝트를 진행하면서 프로젝트를 빌드해 갈때마다 디렉토리 구조에 대해서 고민했습니다. 어떤 방법으로 디렉토리 구조를 잡을지는 언제나 어려웠으면 최선, 최고의 선택을 위해 고민하게되었습니다. 이 아티클에서는 해당 문제에 대해서 고민하며 얻게된 제 경험과 알아온 것들을 정리해보았습니다. 먼저, React 공식 페이지에서는 어떻게 프로젝트 디렉토리 구조를 잡으라고 하는지 살펴볼까요? Ref. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org React 프로젝트를 구조화하는 권장 방법이 있습니까? React..
React Native(RN) 프로젝트에서 정확한 Simulator를 지정하지 않고 Run하게 되면 임의의 Simulator 모델이 켜지게 됩니다. 가장 최근에 사용했던 Simulator 모델이 실행되기도 합니다. $ npx react-native run-ios 하지만 다양한 기기에 올려보고 싶고 더 정확히 특정 Simulator을 실행시키고 싶을 때는 어떻게 할까요? 실행 명령어 뒤에 아래와 같은 명령어를 입력해주면 됩니다! --simulator="" 더 구체적으로 아래와 같은 패턴으로 우리의 RN 프로젝트를 특정 simulator에 올릴 수 있습니다! // iPhone $ npx react-native run-ios --simulator="iPhone 8" $ npx react-native run-i..
null 병합 연산자 null 병합 연산자(nullish coalescing operator)라고 불리는 ??에 대해서 알아 봅시다. ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다. a ?? b의 결과는 아래와 같습니다. a가 null 또는 undefined가 아니면 a 그 외의 경우는 b(a가 null 또는 undefined) null 병합 연산자 ?? 없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a!== undefined) ? a : b; 이 길어지는 코드를 간단하게 표현할 수 있습니다. 하나의 예시를 더 보겠습니다. let firstName = null; let lastName ..
헷갈리는 부분을 다시 한번 정리하고자 작성했습니다. 정확히 알고 가면 많은 실수를 줄일 수 있습니다. Boolean형 비교 Boolean형의 비교 연산은 하나의 값을 반환합니다. - true가 반환되면, "긍정", "참", 사실"을 의미합니다.(= 1 또는 그 이상의 양수) - false가 반환되면, "부정", "거짓", "사실이 아님"을 의미합니다.(= 0 또는 그 이하의 음수) 예시) console.log(2 > 1);// true console.log(2 == 1); // false console.log(2 != 1);// true 반환된 Boolean값은 다른 값들 처럼 변수에 할당하는 것이 가능합니다. let result = 5 > 4;// 비교연산의 결과를 result에 할당 console.l..
헤르메스(Hermes)는 React Native에서 안드로이드 앱을 구동할 때 최적화하기 위해 사용합니다. 기존의 React Native 앱은 '실행 시점'에서 JavaScript를 bytecode로 컴파일합니다. 하지만 헤르메스를 사용하면 '빌드 시' bytecode로 컴파일을 하여 빌드 파일의 크기를 줄여주고, 실행시점에서의 컴파일이 필요없게 되어 초기 실행 속도가 개선됩니다. 따라서 헤르메스(Hermes)의 이점으로는 아래 세가지가 있습니다. 1. 앱 실행(launch) 속도가 빨라집니다. 2. APK 사이즈를 줄일 수 있습니다.(실제 20%까지 줄여지는 것을 눈으로 확인함) 3. 메모리 사용량을 줄일 수 있습니다.(20% 절감) 이렇게 좋은 헤르메스는 사용법도 아주 간단합니다. 먼저, 프로젝트의 ..
React Native로 개발한 앱을 Play Store에 업로드하기 위해서 Android 앱을 Build해봅시다. 1. PlayStore 개발자 등록하기 먼저 구글 Play에서 developer 계정을 생성하고 등록합니다. developer.android.com/distribute/console?hl=ko Google Play | Android Developers Google Play Console로 앱과 게임을 게시하고 Google Play에서 비즈니스를 성장시키세요. 앱의 품질을 개선하고, 사용자층과 소통하고, 수익을 창출하기 위한 여러 기능을 활용할 수 있습니다. developer.android.com 개발자 계정을 등록할 때 약 5만원의 등록비가 필요합니다... 2. Android 서명키 생성하..