chobyeonggyu03 님의 블로그

앞서 말했듯이 React Native CLI를 사용하기 위해선 초기에 개발환경을 구축해야한다고 하였는데, 이번 글에서는 React Native CLI의 개발환경을 구축하는 방법에 대해서 정리 해보고자 한다.   1. Node.js 설치하기 React Native는 Javascript를 기반으로 하기에 Javascript 언어를 브라우저 외부화경에서 사용할 수 있게 런타임 환경을 세팅해주는 Node.js를 설치해줘야 한다. 또한, React Native를 통해 앱 개발 도중 필요한 패키지들이 있을 때 이를 쉽게 다운로드하거나 관리해주는 기능을 제공하는 npm (Node Package Manager)을 다운로드 해줘야하는데 다행히 npm은 node.js안에 내장되어 있기 때문에 node.js만 설치해주면 n..

React Native의 개발환경 프레임워크에는 React Native Comand Line Interface 와 React Native Expo Comand Line Interface 2가지가 있는데, 2가지 개발 프레임워크의 차이점은 무엇이 있는지 그 차이점에 대해 정리해보고자 한다. React Native CLI ● React Native의 공식 개발 프레임워크로 개발자가 네이티브 코드에 직접적으로 접근할 수 있음, 하지만 따로 초기 환경설정을 해줘야함 React Native CLI의 특징● 앱 개발을 위해선 초기 개발환경 세팅이 필수적임 ● Native code에 직접적으로 접근할 수 있음 ● 원하는 언어로 추가작성이 가능함 ( Java, Kotlen, swift, obj-C 등 ) ● 필요한 기..

이번 글에서는 React Native에 대해 공부하기 전 간략하게 React Native라는 언어가 어떤 언어이고, 어떤 특징을 가지는지에 대해 간단하게 정리하고 넘어가고자 한다. React Native란?● Web 기반 React 기술을 활용하여 iOS와 Android 모두에서 작동하는 모바일 앱을 개발할 수 있는 프레임워크이다. ● React와 동일하게 Javascript 언어를 기반으로 하며, 네이티브 플랫폼의 기능을 최대한 활용할 수 있도록 해주는 프레임워크이다. ● Facebook에 의해 2015년에 처음 출시된 프레임워크이다. (native platform이란 모바일 기기의 OS에 직접적으로 설계된 애플리케이션으로, 각 플랫폼의 고유 API와 직접적으로 상호 작용할 수 있어, 높은 성능과 우수..

이 책은 피그마를 통해 와이어 프레임을 짜는 도중 도움이 될만한 내용이 많을 것 같아 읽게 되었는데 도움되는 TIP들이 많아 해당 TIP들에 대해 한번 정리해보고려 한다. ● Move vs Scale TIP) 해당 툴바에서 move는 한가지 요소만을 선택하지만 scale을 선택하면 드래그한 구성요소의 전체크기를 한꺼번에 조절할 수 있다. 아래에서 현재 작업중인 프로젝트로 예시를 들어보겠다. 예시처럼 scale을 사용하면 비율이 그대로 유지되는 것을 알 수 있다. 하지만, 스케일 툴을 사용하여 크기를 변경하게 되면 크기가 소수점 단위로 떨어지게 되는 경우가 많으니 조심해야한다. ● 프레임 (Frame)TIP) 프레임 프리셋을 이용하여 디자인을 진행할 디바이스 크기를 쉽게 세팅할 수 있음 (단축키는 F임) ..

이번에 한국관광공사와 카카오에서 주체하는 공모전에 나가게 되었는데, 해당 프로젝트를 통해 프런트엔드 개발자로서 많이 성장할 수 있을 것 같아 해당 프로젝트의 진행과정들을 기록으로 남겨두려 한다.해당 공모전에 대해 간단히 설명해 주자면 TourAPI는 필수로 사용하고, 카카오openAPI와 같은 다양한 공공데이터API들은 선택적으로 사용하여 관광 관련 웹, 앱 서비스를 만드는 것이다.우리가 이번에 진행하기로 한 프로젝트는 시골여행과 시골생활체험  서비스를 제공하는 시골스테이 관련 플랫폼이었는데, 다행히 해당 아이디어로 1차 서류평가는 통과할 수 있었다 (서류평가는 대부분 붙어주는 것 같았음 - 서류 합격자들이 1000명이 넘,,)앞으로 프로젝트 진행과정을 기록함에 있어 어떤 프로젝트를 만들려는지에 대한 목..

이 책은 이번 관광공사x카카오 공공api활용 공모전에 나가게 되며 읽게되었는데, 앱디자인의 설계과정과 안드로이드와 ios의 차이점 대해 간단히 정리해놓으면 좋을 것같아 한번 정리 해보고자한다. 앱 디자인의 설계 과정 - 자체개발1. 아이디어 : 어떤 제품을 만들어낼지 구상 및 목표설정 2. 분석 : 시장조사와 수요조사, SWAT등의 아이템 분석 3. 와이어 프레임 : 앱의 기본 구조와 레이아웃을 설계 (페이지 구성, 네비게이션 흐름, 주요 요소들의 위치 등을 정의) 4. 프로토타입 : 피그마 등을 이용하여 전체적인 디자인 구성 5. 개발 및 디자인 수정 : 개발 착수 및 디자인 수정을 반복 (+유저 시나리오 (시놉시스 작성) : 대표적인 사용자 유형(페르소나)을 정의하고, 각 페르소나가 앱을 어떻게 사용..

Javascript에서는 C나Java등의 다른 프로그래밍 언어와 달리 자료형을 따지지 않고 변수를 선언할 수 있었다. 그렇기에 나또한, Javascript언어를 사용할 때에는 var, const, let 자료형을 많이 사용했는데 이 자료형들끼리는 어떤 차이점이 있는지 var, const, let 자료형의 차이점에 대해 정리 해보고자 한다. 이 세가지 자료형 중 가장 먼저 나왔던 것은 var였다. 하지만 var 자료형에는 치명적인 단점이 있었고, 이러한 단점을 보완하기 위해 ES6버전에서 let과 const 자료형이 새로 생기게 되었다. (참고로 ES6는 2015년에 업데이트된 Javascript 버전 중 하나이다.) 그럼 var 자료형에 어떤 문제점들이 있었기에 let과 const 자료형이 생기게 되었는..

printf함수란?​​print function 의 약자 (출력함수)​​​-C언어의 기본적인 문자열 출력함수​-함수를 호출하고 그다음 함수를 출력하는 원리​-printf함수 내의 "(큰 따음표)"들을 기준으로 문자열을 쪼개어 저장​-C언어에 내장되어 있는 기본함수임(표준함수), 만들지 않아도 됨​-pirnf, scanf등의 표준함수를 사용하기 위해선 헤더파일을 선언해주어야 함​ex) #include // 헤더파일 선언​​​printf함수 사용방법​1) #include // 표준 함수사용을 위한 헤더파일 선언 (헤더파일 선언은 맨 위에)​2) printf를 사용할 메인함수 선언​3) printf(" 출력하고 싶은 문자열 입력 "); 를 입력​+) 서식문자 활용시에는 printf(" %d", 값); 형..

scanf 함수란?​​scan function 의 약자 (스캔함수)​​-키보드로 부터 문자열을 스캔하여 데이터를 읽어내는 함수​-데이터를 스캔후 입력받은 데이터를 지정된 공간에 저장하는 원리​​-printf함수와 같은 표준함수임 (visual studio에선 예외)​​​scanf함수 사용방법​1) 표준함수를 사용하기 위해 헤더파일 선언해주기​ex) #include // 헤더파일 선언​2) visual studio로 코드 작성시 생기는오류방지를 위하여 #define _CRT_SECURE_NO_WARNINGS의 코드를 헤더파일보다도 위에 선언해주기​​ex) #define _CRT_SECURE_NO_WARNINGS // 버려지는 반환값이 있어도 무시해도 괜찮다는 코드​2) scanf(" %d(입력형식) ..

관계 연산자 (대소비교 연산)>num1 > num2num1이 num2 보다 크면 1반환, 아니면 0반환num1 num1이 num2 보다 작으면 1반환, 아니면 0반환==num1 == num2(num1 = num2)num1이 num2이랑 같으면 1반환, 아니면 0반환!=num1 != num2num1이 num2이랑 다르면 1반환, 아니면 0반환num1 num1이 num2 이하면 1반환, 아니면 0반환>=num1 >= num2num1이 num2 이상이면 1반환, 아니면 0반환​​​논리 연산자 (논리구조를 연산)&&AND 논리 연산자( A && B )A와B가 모두 참이면 1을 반환, 아니면 0을 반환||OR 논리 연산자( A || B )A와B 둘중 하나만 참이여도 1을 반환, 아니면 0을 반환!!= 연산자( !..