ABC로 선언된 값을 csv파일로 쓰기 할 때 ','(쉼표(Comma))때문에 다른 열로 표시가 된다.

그럴때 그 것을 방지하기 위해 위와 같이 역슬러시를 넣어주면 해결 !!

Fluuter Binding

기본적인 방법

GetPage 선언 할 때 BindingsBuilder 사용하는 방법

바인딩 페이지 이용하는 방법

페이지 이동할 때 바인딩 하는 방법(의존성 주입 참조)

바인딩 되어있는 것을 사용하는 방법

GetBuilder 사용

번외

Get.find<CountControllerWithGetX>().increase();

위의 표현 간단히 하기

컨트롤러에 아래와 같은 선언

사용할 때 는 아래와 같이 사용 Get.find<>() 요로케 번거롭게 작성안해도 됨

더 편리한 방법

StatelessWidget 지우고 GetView<Controller> 로 변경

사용 할 때는 훨씬 더 간결하게 바뀜

GetBuilder<>() 간결하게 사용 (Obx)

아래와 같이 바꾸고 바로 실행하면 에러남

왜냐하면 Obx는 observerable 타입으로 써야함

해당 컨트롤러로 가서

기존 코드를 아래와 같이 Rx... = 0.obs 로 해주면 에러 없이 잘 됨

Get.Put

버튼에 Get.to()를 이용하여 다른 페이지로 이동, 그와 동시에 해당 페이지에서 사용할 컨트롤러 바인딩.

GetPut 버튼을 누르면 해당 페이지로 라우팅 됨

라우팅 되면서 위의 로그와 같이 컨트롤러 인스턴스 생성 및 초기화

뒤로가기 버튼을 누르면 알아서 인스턴스 삭제 및 메모리 제거

Get.lazyPut

lazyPut 사용하기 위한 버튼 생성

lazyPut은 빌더 형식을 쓰기 때문에 <사용할 클래스> 및 ( ()=> ) 형태로 사용

Get.lazyPut 버튼을 클릭하면

Get.Put을 사용했을 때와 달리 인스턴스가 생성 되지 않는다. lazyPut은 해당 컴포넌트 내부에서 무언가가 동작할때 인스턴스를 생성하고 초기화 한다.

해당 페이지로 넘어와 작은 버튼을 클릭하면

그때 인스턴스 생성 및 초기화 / 뒤로가기 버튼을 클릭하면 인스턴스 삭제 및 메모리 제거는 동일하게 작동한다.

Get.putAsync

페이지 라우팅 할 때 데이터를 받아오거나, 가공처리를 오래동안 하고 나서 컨트롤러를 인스턴스화 해야 할 때 사용

위와 같이 사용 await는 테스트 해보기 위해 딜레이를 5초 줌

Get.putAsync 버튼을 누르면

페이지는 라우팅 되었지만 5초동안 인스턴스 생성 안됨

5초후 인스턴스 생성 및 초기화 실행됨

Get.create

위의 Get.put, Get.lazyPut, Get.putAsync 는 싱글톤 패턴으로 작동

Get.create는 인스턴스가 계속 생성됨

Get.create 버튼을 하면 페이지가 라우트 되지만 인스터스는 바로 생성되지 않음

버튼을 클릭하면

인스턴스 생성됨

버튼을 몇번 더 눌러보면

버튼 횟수를 누른 만큼 인스턴스가 생성이 되어버림

결론

Get.put, Get.lazyPut만 잘 써도 나쁘지 않다.

-> Controller 생성

• GetxContoller 상속이 필요없음

-> 컨트롤러 인스턴스 선언

• 상위트리 뿐만 아니라 자기자신 트리에도 선언가능

-> Obx 이용하여 사용

-> 이부분은 단순 상태관리랑 동일

• putNumber 함수 사용시에는 만약에 카운트가 5가 아닐 경우는 화면이 다시 빌드 되지만, 5일 경우에는 화면이 다시 빌드 되지 않음.

-> GetxController 상속받은 후

등등 override 메소드를 사용할 수 있다.

• 주로 사용하는건 onInit(), onClose()

-> Rx 타입들 거의 모든 타입 다 있음

-> 사용방법

끝!

Provider 이용 단순 상태 관리

-> Provider 생성

-> 상위 트리에 있는 파일에 Provider 선언?

-> Provider 사용 with Consumer

    Consumer<CountControllerWithProvider>(builder: (_, snapshot, child) {
            return Text(
              '${snapshot.count}',
              style: TextStyle(fontSize: 30),
            );
          }),
          RaisedButton(
            child: Text(
              '+',
              style: TextStyle(fontSize: 30),
            ),
            onPressed: () {
              Provider.of<CountControllerWithProvider>(context, listen: false).increase();
            },
          )

Provider.of<Provider>(context, listen:false) // 전체 페이지 리빌딩 안함 => 컨슈머가 있을 경우는 false

Provider.of<Provider>(context, (listen:true)) // 전체 페이지 리빌딩 => true 일 경우 생략 가능

GetX 이용 단순 상태 관리

-> GetxController 생성

-> Controller 선언 -> Get.put(Controller선언한 클래스)

• 상위 트리가 아닌 사용하는 트리에서 선언해도 상관없음 (선언 위치에 제약이 크지않다)

-> GetxController 사용

    GetBuilder<CountControllerWithGetX>(
            builder: (controller) {
              return Text(
                '${controller.count}',
                style: TextStyle(fontSize: 30),
              );
            },
          ),
          RaisedButton(
            child: Text('+', style: TextStyle(fontSize: 30)),
            onPressed: () {
              Get.find<CountControllerWithGetX>().increase();
            },
          ),

받는 쪽 (Provider에선 Consumer) 에선 GetBuilder<> 사용 보내는 쪽?(Provider.of(~~)) 에서는 Get.find<> 사용

GetX 사용 시 추가 기능

-> 한 컨트롤러로 두개의 위젯 동시에 사용 할 경우 id 파라미터 추가하여 구분 가능

-> 컨르롤러 부분 함수 정의

-> 버튼에 id값을 인자로 받아 컨트롤러로 전달? 하는 방식

끝!

일반적인 라우트 형태

onPressed: () {
        // 일반적인 라우트 형태 (페이지 이동)
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) => FirstPage()));
                // 일반적인 라우트 형태 (페이지 뒤로가기)
        Navigator.of(context).pop();
            // 일반적인 라우트 형태 (홈으로 가기 (이전 히스토리 삭제))
                Navigator.of(context).pushAndRemoveUntil(
                    MaterialPageRoute(builder: (context) => Home()),
                    (route) => false);

              },

GetX 이용 라우트 형태

onPressed: () {
        // GetX를 사용한 라우트 형태 (페이지 이동)
                Get.to(FirstPage());
         // GetX를 사용한 라우트 형태 (페이지 뒤로가기)   
            Get.back();
                // GetX를 사용한 라우트 형태 (홈으로 가기 (이전 히스토리 삭제))
                   Get.offAll(Home());
              },

GetX 이용하여 라우트 했을 때의 콘솔창

콘솔에 라우트 동작을 찍어줌

=> 엄청 간단하고 깔끔해짐

@ Named 라우트

일반

main.dart에 라우트 설정

 onPressed: () {
                // 일반적 (페이지 이동)
                // Navigator.of(context).pushNamed("/first");              
              },

하는 방식

GetX 사용

main.dart에 getPages로 Named 설정(transition은 페이징 효과?(페이지 이동될 때 효과) 설정)

onPressed: () {
                // GetX (페이지 이동)
                Get.toNamed("/first");
                // 현재 페이지 히스토리 지우고 이동
                Get.offNamed("/second");
                // 모든 히스토리 지우고 홈으로 이동
                Get.offAllNamed('/');
              },

@ Argument 전달

onPressed: () {
                Get.toNamed("/next", arguments: "Juan");
                Get.toNamed("/next", arguments: 30);
                Get.toNamed("/next", arguments: User(name:'Juan', age:30));
              },

$ 결론 : 일반적인 식 보다는 훨씬 간단하게 표현되고, 함수 자체의 기능들이 많으므로 아주 애용할 라이브러리가 될 것 같다.

  <ListView ItemsSource="{Binding FileInfos}" 
                  SelectedItem="{Binding SelectedFileInfo}"
                  Style="{DynamicResource FileLoadListViewStyle}"
                  ItemContainerStyle="{StaticResource FileItemStyle}"
                  x:Name="xFileInfoListView">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate >
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <DockPanel Loaded="FrameworkElement_OnLoaded">
                        <TextBlock  x:Name="xTextBlockInDataTemplate" DockPanel.Dock="Bottom" Text="{Binding Name}" Style="{DynamicResource FileViewerListItemTextBlockStyle}"  />
                        <Rectangle x:Name="xRectangleInDataTemplate" Style="{DynamicResource FileViewerRectangleStyle}">
                            <Rectangle.OpacityMask>
                                <VisualBrush Stretch="Fill" Visual="{DynamicResource BinaryFile}"/>
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </DockPanel>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>

DataTemplate의 요소의 이름을 주어도 직접적으로 접근을 할 수 없음.

해결방법

VisualTreeHelper를 사용하여 해결

    private childItem FindVisualChild<childItem>(DependencyObject obj)
            where childItem : DependencyObject
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                DependencyObject child = VisualTreeHelper.GetChild(obj, i);
                if (child != null && child is childItem)
                {
                    return (childItem)child;
                }
                else
                {
                    childItem childOfChild = FindVisualChild<childItem>(child);
                    if (childOfChild != null)
                        return childOfChild;
                }
            }
            return null;
        }

        public void DataTemplateElementsColorChange(ColorBuffer buffer)
        {
            var xListView = _FileInfoComponentV.xFileInfoListView;
            foreach (var item in xListView.Items.SourceCollection)
            {
                System.Windows.Controls.ListViewItem myListViewItems =
                    (System.Windows.Controls.ListViewItem)(xListView.ItemContainerGenerator.ContainerFromItem(item));
                if (myListViewItems != null)
                {
                    ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListViewItems);
                    DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
                    DataTemplate myDataTemplate2 = myListViewItems.ContentTemplate;
                    TextBlock myTextBlock = (TextBlock)myDataTemplate.FindName("xTextBlockInDataTemplate", myContentPresenter);
                    Rectangle myRectangle = (Rectangle)myDataTemplate.FindName("xRectangleInDataTemplate", myContentPresenter);

                    myTextBlock.Foreground =
                        new SolidColorBrush(buffer.TextForegroundColor);
                    myRectangle.Fill = new SolidColorBrush(buffer.TextForegroundColor);
                }
            }
        }

여기서 요소의 제일 안쪽에 있는 ContentPresenter에 접근하여 바꿀 수 있었다.

WPF 아주 어렵다.

bcrypt 설치

$ npm install bcrypt --save

설치가 끝나면 package.json 의 dependencies에 자동으로 추가 됨

DB와 연관된 .js 파일에 bcrypt 및 saltRounds 변수 선언

필자는 User.js 파잎에 선언

save하기 전에 암호화 해야함

saltRounds => 암호화 후의 글자수

postman으로 정보 send

DB로 전송된 데이터

DB 정보같은 비밀 정보는 보호되어야 한다

소스코드상에 DB 정보가 담겨있으면 github 같은 코드를 확인 할 수 있는 곳에 업로드 되면 보안이 취약해진다.

Local & Production

local 과 Production 에서 정보를 따로 관리해야한다.

dev.js ( Local 환경 )

prod.js ( Production (배포) 환경 )

key.js (local 환경인지 prod 환경인지 체크해서 값 리턴)

index.js 에서 변수 선언

index.js에서 mongoDB연결

config.mongoURI 입력

nodemon 이란?

코드 내용을 변경 후 서버를 죽였다가 다시 실행해야하는 귀찮음을 없애기 위해 저장하고 새로고침하면 바로 반영 될 수 있도록 해 주는 것

nodemon 설치

$ npm install nodemon --save-dev

package.json에 추가된 nodemon

nodemon 을 통해 시작 하기위한 스크립트 작성

"backend" 대신 아무거나 적어도 상관없음

nodemon 을 통해 시작

$ npm run backend

코드상 변경 내용을 적용하고 웹페이지를 새로고침 하면 변화된 부분이 바로 적용됨!

- 자바스크립트를 서버 사이드에서도 쓸수있는 언어

Express js

- Node js 를 좀더 쉽게 사용할수 있게 해주는 프레임워크

Node js 다운로드

다운로드 후 버전 체크

documents에 node_js_test 폴더 생성

$ npm init

VSCode로 해당 폴더 열면 package.json 생성되어 있는 것을 확인 할 수 있음

index.js 생성 ( 시작점 )

Express js 다운로드

터미널에서 --save 하면 package.json 에 자동으로 저장됨

express js 예제

package.json 에 script에 start 생성 ( index.js 시작점 )

node js 실행 -> $ npm run start

실행 결과 -> localhost:5000