날씨앱 실습시 다양한 에러와 마주치곤했다. ㅠㅠ


구글링을 해보니 ios/build 폴더를 삭제하고 다시 실행하면된다는 계시글을 발견하고 해봐였으나, 여전히 실행되지않았다.


결론만 말하면 설치되고 설정된 노드버전이 문제가 됬었다. node 설치를 여러버전을 설치를 했었는데, node default 버전이 6.0버전이어서 실행이 정상적으로 동작하지 않았던듯하다. 




nvm alias default  "버전명" 


default 노드버전을 변경하고 react natvie 재실행해본다. 


'React & React Native ' 카테고리의 다른 글

ES6 - 화살표 함수  (0) 2018.10.02
Application Styles has not been registered  (0) 2018.10.01
Can't find variable : Fragment  (0) 2018.09.21
리액트 네이티브란 ?  (0) 2018.09.20
React Native 2/E 실습  (0) 2018.09.20
블로그 이미지

클라인STR

,


리액트 날씨 앱을 연습하다가 다음과같은 에러가 발생하였다.  import 정보가 누락될경우 해당에러가 발생한다. 



import React, {Component, Fragment} from 'react';


<Fragment> 란 무엇인가하면 , React는 최소하나의 엘러먼트가 필요하다. (보통 div를 사용한다.) Fragment를 쓰면  DOM 별도의 노드를 작성하지않고 하위앨리먼트를 그룹화 할 수 있다.


https://reactjs-kr.firebaseapp.com/docs/fragments.html







'React & React Native ' 카테고리의 다른 글

ES6 - 화살표 함수  (0) 2018.10.02
Application Styles has not been registered  (0) 2018.10.01
No bundle URL present  (0) 2018.09.21
리액트 네이티브란 ?  (0) 2018.09.20
React Native 2/E 실습  (0) 2018.09.20
블로그 이미지

클라인STR

,





리액트 네이티브는 iOS와 안드로이드에서 동작하는 네이티브 모바일앱(이하 '앱')을 만드는 자바스크립트 프레임워크이다. 리액트 네이티브는 사용자가 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있다. 하지만 브라우저가 아닌 모바일 플랫폼이 타깃이다. 웹 개발자가 익숙한 자바스크립트 라이브러리를 이용하면서 겉모습과 실제 동작까지 진짜 네이트브인 모바일 앱을 만들 수 있다. 게다가 작성한 코드 대부분을 플랫폼 간에 공유할 수 있어서 리액트 네이티브를 이용하여 손쉽게 iOS와 안드로이드 앱을 동시에 개발할 수 있다. 


  공식 리액트 네이티브 프로젝트는 iOS와 안드로이드에서 모두 동작하는 모바일 앱을 작성할 수 있게 해준다. 커뮤니티 프로젝트를 이용하면 리액트 네이트브로 윈도우, 우분투 , 웹 등 다른 플랫폼에서 동작하는 앱을 만들 수 있다. 리액트 네이티브는 Cordvoa 나 Ionic과 같은 기존의 크로스 플랫폼 앱 개발 방법과는 눈에 띄는 차이점이 있다. 바로 대상 플랫폼의 표준 렌더링 API를 사용한다는 점이다. 자바스크립트, HTML, CSS 를 사용하여 모바일 앱을 만드는 기존의 방법들은 웹뷰를 이용하여 렌더링을 한다. 이러한 방식은 앱을 실행하는데 있어서 성능을 떨어뜨리는 단점이 존재한다. 네이티브 UI를 사용하지 않을뿐 이를 흉내낼 뿐이며 결과는 어색하기만 하다. 애니메이션과 같은 아주 섬세한 부분에 대한 리버스 엔지니어링이 엄청나게 들며 이는 쉽게 구식이 되어버린다. 

  리액트 네이티브는 개발자가 작성한 마크업을 플랫폼에따라서 그에 상응하는 진짜 네이티브 앨리먼트로 전환한다. 리액트 메인 UI쓰레드와 분리되어 실행되어 성능상의 이점이 존재한다.  리액트 네이티브의 렌더링 갱신주기는 리액트와 같다. props와 state가 변경될때 리액트 네이티브는 뷰를 다시 렌더링 한다. 리액트 네이티브와 브라우저에서 실행하는 리액트의 가장 큰 차이점은 HTML , CSS 마크업이 아니라 대상 플랫폼의 UI 라이브러리를 이용하여 렌더링한다는 점이다. 개발 경험과 크로스 플랫폼 개발 가능성이라는 두가지 면에서 리액트 네이티브는 지금까지의 모바일 앱 개발 방법보다 진보했다고 할 수 있다.


발췌 빠른 모바일 앱 개발을 위한 React Native 2/E [이종은 저 ]

'React & React Native ' 카테고리의 다른 글

ES6 - 화살표 함수  (0) 2018.10.02
Application Styles has not been registered  (0) 2018.10.01
No bundle URL present  (0) 2018.09.21
Can't find variable : Fragment  (0) 2018.09.21
React Native 2/E 실습  (0) 2018.09.20
블로그 이미지

클라인STR

,



Create React Native 으로 생성한프로젝트를 npm start로 실행시 아래스샷과 같은 에러가 발생하였다.


해결방법 


**npm start 시 아래에 에러가발생한다면 https://git.io/v5vcn URL 을 참조하여 

brew 업데이트하고 watchman 을 설치한다.**




brew update

brew install watchman


Expo앱이 정상동작한결과




블로그 이미지

클라인STR

,

프로젝트 생성방법은 2가지가 있다.

  • Create React Native App
    • expo에서 제작한 도구
    • 자바스크립트로 작성된 앱만지원한다. (네이티브X)
  • react-native init
    • react-native 팀의 공식 도구
    • native 모듈을 사용하게되면 필수이다.


1) Create React Native App 설치 



npm install -g create-react-native-app


create-react-native-app 을 이용하여 앱프로젝트 생성하기 



create-react-native-app 프로젝트명 



2) React-native 개발환경 설정 (전형적인방법)


  • node.js
  • 리액트네이티브
  • ios 개발환경 (Mac OS,  XCode)
  • 안드로이드 개발환경 (JDK, 안드로이드SDK, 안드로이드 스튜디오)






'React & React Native ' 카테고리의 다른 글

ES6 - 화살표 함수  (0) 2018.10.02
Application Styles has not been registered  (0) 2018.10.01
No bundle URL present  (0) 2018.09.21
Can't find variable : Fragment  (0) 2018.09.21
리액트 네이티브란 ?  (0) 2018.09.20
블로그 이미지

클라인STR

,

Spring Security를 처음으로 프로젝트에 적용해보았다. 몇년전 프로젝트를 하고있을때 Spring Seucrity를 프로젝트에서 적용하기 위해서  부단히도 노력했었던적이 있는데 그땐 책을 봐도 잘 몰랐었던거같은데, 새로운직장으로 이직을 하면서 적용해본 나름에 경험을 조금씩 남기고자 한다.  대부분의 기본적인 용어는 Spring Security3라는 책을 참조하였다.


https://spring.io/projects/spring-security#overview 예 서문에서는 아래와 같이 스프링 시큐리를 정의하고있다. 한마디로 얘기해서 

Spring Security is a powerful and highly customizable authentication and access-control framework. It is the de-facto standard for securing Spring-based applications.

Spring Security is a framework that focuses on providing both authentication and authorization to Java applications. Like all Spring projects, the real power of Spring Security is found in how easily it can be extended to meet custom requirements


한마디로 정의하면 강력하고 사용자정의 가능한 인증 및 엑세스제어 프로그램이고 킹왕짱 좋다는 식으로(?) 으로 기술하고있다. 하지만 Spring Security를 커스터마이징 하는건 생각만큼 간단하지 않았었다는걸 경험으로 뼈저리게 느꼈었던거 같다. 물론 제대로 이해하지 못하고 적용하기위해서 온갖 삽질을 다해서 그럴지도 모른다.


기본개념 

  • 인증 (Authentication)
    • 인가된 사용자인지 확인하는 절차
    • 크리덴셜(Credential) 기반인증, 이중인증, 하드웨어 인증
  • 권한부여 (Authorization)
    • 인증된 주체에 권한을 확인하고 특정 기능 또는 데이터 접근을 허용하는 기능
  • 사용자 (Principal)
    • 보호된 대상에 접근하는 사용자 (User)
  • 비밀번호(Credential)
    • 사용자가 보호된 대상에 접근할 수 있는지 확인하기 위한것

스프링시큐리티는 인증된 주체를 고유하게 식별하는데 사용되는 자바 표준 보안 개념인 인증 (java.security.Principal)을 확장해서 사용한다. 전형적인 Principal에서는 시스템 사용자에 대한 1:1 매핑을 사용한다. Principal == 사용자 라고 보면된다.

권한부여라고 하면 두가지 작업을 아우르는데, 첫 번째 작업은 인증된 주체를 하나 이상의 권한 (역할)에 매핑하는 일이다. 예를 들어 웹 사이트를 단순 방문한 사용자는 방문자 권한을 부여받지만 웹 사이트 관리자는 관리자 권한을 부여받는다. 두 번째 작업은 보호된 리소스에 대한 권한 체크이다. 이러한 권한 체크는 주로 시스템이 개발될때 코드상에 명시적으로 선언하거나 설정 매개변수를 통해 이뤄진다. 예를 들어 온라인 애완 동물 상점의 재고를 관리하는 화면은 관리자 권한을 가진 사용자만 볼 수 있다.


보호된 리소스는 사용자의 권한에 따라 조건적으로 나타나야 하는 시스템 상의 모든 영역이 될 수 있다.

웹 어플리케이션에서 보호된 리소스는 개인 웹 페이지나 웹 사이트 전체 또는 개인페이지의 일부 영역이 될 수 있다. 이와 비교해 보면 보호된 비즈니스 리소스는 클래스에 대한 메서드 호출 또는 개별 비즈니스 객체가 될 수 있다.






블로그 이미지

클라인STR

,





 

1
2
3
4
5
6
7
<link href="/css/jquery-ui.css" rel="stylesheet" type="text/css"  />
<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css"  />
 
 
<script type="text/javascript" src="/js/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/js/jquery/i18n/grid.locale-kr.js"></script>
<script type="text/javascript" src="/js/jquery/jqgrid/js/jquery.jqGrid.src.js"></script>
cs

jQuery js파일을 jqGrid에 js파일보다 먼저 선언해주어야 한다.

'자바스크립트' 카테고리의 다른 글

DOM API - Document 객체에 접근하는 API  (0) 2018.12.12
자바스크립트 객체지향 프로그래밍  (0) 2018.10.10
객체 생성방법 3가지  (0) 2018.10.09
동적 colModel  (0) 2016.01.05
jqGrid 기본속성  (0) 2015.12.15
블로그 이미지

클라인STR

,
1
2
3
4
5
6
7
8
9
SELECT 
                    AA.XXX                  
                  , MAX(DECODE(BB.CODE_CD,'1',BB.CODE_YN,'N'))CODE1_CD
                  , MAX(DECODE(BB.CODE_CD,'2',BB.CODE_YN,'N'))CODE2_CD
                  , MAX(DECODE(BB.CODE_CD,'3',BB.CODE_YN,'N'))CODE3_CD
                  , MAX(DECODE(BB.CODE_CD,'4',BB.CODE_YN,'N'))CODE4_CD
                  , MAX(DECODE(BB.CODE_CD,'5',BB.CODE_YN,'N'))CODE5_CD
    FROM 
....(중략).....
cs

 

IBATIS 를 사용하여 쿼리 출력시 행을 열로 변경해서 출력하는 경우 다음과 같은식으로 작성하였다.

코드컬럼에 값이 변경되는 경우가 발생하면 쿼리를 매번 수정해줘야되는 경우가 발생하여, 고민끝에 iterate를 사용하여 코드를 정리하기에 이르렀다.

 

 

1
2
3
4
5
6
7
8
9
<select id="XXX" ... remapResults=”true” > 
SELECT 
                    AA.XXX 
                    <iterate  property="paramList"   conjunction=""  >
                      , MAX(DECODE(BB.CODE_CD, #paramList[]# ,BB.CODE_YN,'N')) CODE_$paramList[]$
                    </iterate>                                     
    FROM 
....(중략).....    
</select>
cs

 

paramList 는 배열형태의 파라메터 이며 개수만큼 동적으로 컬럼을 생성하게끔 하였으며 컬럼이 동적으로 변경하는경우 remapResults=”true”

프로퍼티 속성을 명시해준다.

 

 

 

출처 : http://blog.naver.com/jkhljesus/70016617377







블로그 이미지

클라인STR

,