chobyeonggyu03 님의 블로그

이번글에서는 공모전에 나가게 되는 프로젝트의 와이어프레임이 완성되어 해당 프로젝트의 와이어프레임에 대해 정리해보고자 한다. (자세한 리뷰는 프로젝트x 교내활동이 끝나면 정리할게요)              [로그인 화면] API만을 사용한 로그인화면을 구현함     [메인 화면] 바로 장소를 검색하거나 추천장소와 주변 축제정보를 볼 수 있는 페이지를 구현함      [검색 화면] 하단 아이콘을 누르거나 메인화면에서 검색하기를 누르면 원하는 어르신들의 숙소를 검색할 수 있음     [숙소 정보 화면] 원하는 숙소를 누르면 해당 숙소에 대한 정보와 무료로 제공할 수 있는 서비스에 대한 아이콘을 같이 띄워주며 후기와 지도화면으로 넘어가 자세한 정보를 조회할 수 있고, 이 화면을 통해 해당 숙소를 예약할 수 잇음..

이번글에서는 React Native을 본격적으로 공부하기에 앞서, React Native를 공부하는 데에 도움이 되는 기본 React 개념들에 대해 정리해보고자 한다.  State란?● State는 React 기본문법으로, 컴포넌트 내에서 렌더링 되는 데이터를 저장하고 관리하는 Javscript언어의 객체이다.   State의 특징캡슐화 : state는 일반적으로 해당 컴포넌트 내에서 관리되기에, 컴포넌트 외부에서 직접적으로 접근할 수 없어  캡슐화하여 렌더링 할 데이터를 관리하는데 유용하다. 데이터 유지 보수 및 관리 편의성 : state를 사용하게 되면 따로 렌더이할 데이터들을 객체로 묶어 관리할 수 있게 되며, 직접 텍스트를 하나하나 렌더링 하는 것보다 한번 필터링된 데이터를 선별적으로 출력하는 것..

이번에는 Javascript의  ES6버전에서 추가되어 최근에 JS에서 자주 사용되는 Rest 연산자와 Spread 연산자에 대해 한번 정리해보고자 한다,  Rest 연산자(' . . . ')란?● Rest 연산자는 2015년에 업데이트된 Javascript 버전인 ES6에서 새로 추가된 연산자로 이름처럼 남은 매개변수들을 하나의 배열로 묶어주는 연산자이고, 변수 앞에 '. . .' 를 붙여 선언한다.   Rest 연산자는 무엇이고 어떤 특징을 가졌는지에 대해선 아래 예제를 통해 자세히 알아보도록 하자.   function rest_operator(num1, num2) { console.log(num1, num2);}rest_operator(1, 2, 3, 4, 5);     위의 예제는 함수가 전..

이번 글에서는 for ~ of 반복문과 for ~ in 반복문의 차이점에 대해 정리해보려 한다.   for ~ of 반복문● for ~ of 반복문은 Array, String, Map, Set 등의 반복가능한 객체를 순회할 때 사용하는 반복문으로, 객체 안의 값들을 직접 접근하는 반복문이다.   for ~ of 반복문의 특징은 어떤 것이 있을까? 아래 예제에서 확인해 보도록 하겠다.  let array = [10, 20, 30];for (let value of array) { console.log(value); }      위의 예제에서 array라는 배열을 선언하여 해당 배열의 value값들을 array[i]의 형태로 반복문을 돌려 출력하지 않고도 for ~ of 반복문을 활용하여 각 인덱스들을 ..

앞서 말했듯이 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. 개발 및 디자인 수정 : 개발 착수 및 디자인 수정을 반복 (+유저 시나리오 (시놉시스 작성) : 대표적인 사용자 유형(페르소나)을 정의하고, 각 페르소나가 앱을 어떻게 사용..