Dev13 [처음 배우는 리액트 네이티브] 3장. 컴포넌트(Component) - JSX, props, state, event 3장. 컴포넌트 - 리액트 컴포넌트 연습을 위한 프로젝트 생성 expo init react-native-component 3.1 JSX - 객체 생성과 함수 호출을 위한 문법적 편의를 위해 만들어진 확장 기능 - html, xml과 유사 중첩된 구조를 나타내기 용이 3.1.1 하나의 부모 - JSX 하나의 부모로 감싸진 객체를 반환할 수 있음 - 각각의 요소를 반환하고자 할 경우 컴포넌트로 감싸줘야 함 - 컴포넌트는 로 단축해서 사용 가능 3.1.2 자바스크립트 변수 - JSX내부에 자바스크립트 변수 전달 가능 선언 const name = "skan"; 활용 My name is {name}. 3.1.3 자바스크립트 조건문 - 즉시 실행 함수 형태로 if문 구현 가능 - 삼항연산자 사용 가능 - AND 와.. 2022. 2. 6. [처음 배우는 리액트 네이티브] 2장. 리액트 네이티브 시작하기. (개발 환경 세팅, 프로젝트 만들기) 2장. 리액트 네이티브 시작하기 - 맥, 윈도우, 리눅스 환경에서 개발 가능 2.1 개발 환경 준비하기 - 공통 : Node.js, JDK, 안드로이드 스튜디오 - Mac : 왓치맨, Xcode - Window : Python - 그밖에 OS와 설치 경로에 맞게 환경 변수 설정 2.2 리액트 네이티브 프로젝트 만들기 - Expo : 리액트 네이티브의 사용을 편리하게 해주는 툴 https://expo.io 아이폰과 안드로이드 폰이 있으면 Xcode, 안드로이드 스튜디오 없이도 해당 플랫폼 테스트 가능 expo에서 제공하는 API만 사용 가능 expo-cli 설치 : npm install --global expo-cli 프로젝트 생성 : expo init my-first-expo / choose a remp.. 2022. 1. 15. [처음 배우는 리액트 네이티브] 1장. 리액트 네이티브란? 장단점, 동작방식 새해를 맞아 미루던 공부 시작. 시작은 한빛미디어에서 출판한 [처음 배우는 리액트 네이티브] 서점에서 훑어보지도 않고 바로 공부 시작할 계획으로 온라인 서평만 보고 즉흥적으로 구매. 목차대로 공부해나가면 엄청 깊이 있고 전문적이지는 않아도 원하는 어플 한두개는 만들고 배포까지 경험해 볼 수 있을 것 같아서 이 책을 선택했다. 시작부터 완벽하게 잡아나가고 싶어하는 성격을 최대한 제쳐두고, 가볍게 읽어가면서 클론코딩 완성에 목표를 두고 공부해보려고 한다. 올해 안에 작게나마 내 어플 마켓에 등록하는 것을 목표로..! 화이팅!! 1장. 리액트 네이티브란? - 2015년 3월 페이스북에 의해 공개(오픈소스) - 리액트 기반(자바스크립트 프레임워크) - IOS, 안드로이드에서 동작하는 네이티브 모바일 앱 프레임워.. 2022. 1. 2. [Lottie] 웹 퍼블리싱 아이콘, 이미지 애니메이션 / 로티(Lottie) 사용법, web 적용 Lottie란? Airbnb에서 제작한 애니메이션 구현 라이브러리이다. 활용 플로우는 다음과 같다. 애프터이펙트에 Bodymovin 플러그인을 설치 애프터이펙트로 애니메이션 작업 작업물을 .json 또는 .lottie 확장자로 추출 lottie 라이브러리 import 후 간단한 스크립트 추가로 애니메이션 로드(웹, 앱 모두 가능) 활용 전달받은(또는 제작한) 소스를 웹에 적용시키는 방법을 알아보자. 소스상에서 lottie 라이브러리를 import 하는 방법으로는 cdn 방식과 download 후 직접 import 방식이 있다. cdn : https://cdnjs.com/libraries/bodymovin download : https://github.com/airbnb/lottie-web/tree/mas.. 2021. 9. 8. [VScode, PowerShell] vue : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 파일을 로드할 수 없습니다. 증상 npm install -g @vue/cli 설치 후 VScode 터미널에서 vue create 명령어 실행 시 스크립트 실행 불가 원인 Window 자체적으로 스크립트 실행 권한 제한 해결방안 PowerShell 관리자 권한으로 실행 후 스크립트 실행 권한 변경 Set-ExecutionPolicy RemoteSigned 입력 후 [A] 모두 예 선택 Get-ExecutionPolicy 입력 후 변경된 권한 확인 2021. 6. 27. [VSCode] 파일 클릭 시 자동 열림 해제 / 파일 열림 모드 설정 VSCode를 사용하면서 편한듯 불편한 기능이라고 생각하던 옵션인 클릭 시 파일 자동 열림 기능 해제에 대해 알아보자! VSCode의 기본 설정대로 singleClick 시 파일이 열리는 기능을 평소에는 크게 개의치 않고 작업을 하다가, 오늘 여러개의 파일명을 변경할 일이 있어서 작업을 하다보니 클릭할 때마다 파일이 열리는게 거슬려서 설정을 찾아보게 되었다!ㅋㅋㅋ 설정은 간단하다! 먼저, 설정에 들어가서 아래와 같이 open mode 를 입력한 후, open mode를 doubleClick으로 변경해주면 끝! 설정 방법을 알았으니 경우에 따라 single, double 유형을 선택해서 적합한 모드로 사용하면 유용할 것 같다! 끝! 2021. 6. 9. [Slack] 요즘 가장 핫한 협업 툴, Slack 요즘 가장 핫한 협업 툴 Slack에 대해서 알아보자! 구조 기본 구조는 사이드바, 채널, 메시지 필드, 탐색 막대로 이루어져 있다. 사이드바 : 채널 목록, 다이렉트 메시지 목록, 앱 연동 목록 등을 표시한다. - 채널 : 프로젝트별, 파트별 그룹 채팅이라고 보면 된다. - 다이렉트 메시지 : 슬랙에 참여한 구성원과의 1:1 채팅을 할 수 있다. - 앱 : 현재 슬랙에 연동되어 있는 앱에 접근하거나 새로운 앱을 추가할 수 있다. 채널 : 채널에 따른 대화나 공유 자료들의 히스토리를 확인 할 수 있다. 메시지 필드 : 메시지 작성을 위한 에디터와 메시지 관련 기능들로 구성되어 있다. 탐색 막대 : 대화 내용 검색 및 활동에 대한 내역에 접근할 수 있는 요소들이 배치되어 있다. - undo, redo - .. 2021. 5. 17. [VScode] 확장프로그램 - Live Sass Compiler 설정 Live Sass Compiler 설치 후 SASS/SCSS 파일을 작성하고 저장하면 .map 이라고 된 원치 않는 파일이 생성되는 것을 발견할 수 있다. 이를 방지하면서 CSS 파일로 compile되는 방식이나 저장경로 변경 등을 위해 몇가지 설정을 잡아줘야 한다. 우선 VScode에서 설정 창을 연 후 live sass compile을 입력한다. 그 후에 Edit in settings.json 을 클릭해서 setting 에디터를 열어준다. 버튼이 여러개라 헷갈릴 수 있는데 어떤 것을 클릭하더라도 결국엔 하나의 settings.json을 열기 때문에 아무거나 클릭해도 상관없다. settings.json 파일을 열어서 원하는 값으로 설정을 해주면 끝이다. 단, live sass compiler와 관계없는.. 2021. 5. 9. [VScode] 추천 필수 퍼블리싱 확장프로그램 - HTML CSS Auto Rename Tag - Html에서 특정 태그를 변경할 경우 닫는 태그도 자동으로 변경됨 - 사용법 : 자동적용 CSS Peek - Element에 어떤 스타일이 적용되었는지 확인할 수 있음 - 사용법 : class에 커서를 두고 ctrl + 마우스 클릭 HTML CSS Support - CSS에 정의되어 있는 선택자(id, class)를 Html에 입력할 때 자동완성 - 사용법 : id나 class 값 입력 위치에 커서를 두고 ctrl + space Live Sass Compiler - SASS/SCSS 사용 시 css파일로 compile할때 양식이나 경로 등을 설정할 수 있음 - 사용법 : 최초 setting.json을 설정하고 VScode 하단에 있는 버튼을 클릭해서 실행시켜두면 SASS,.. 2021. 5. 8. 이전 1 2 다음 반응형
