Interests [관심사] 썸네일형 리스트형 Step 4 Angular, Data Binding ! Data Binding ( 원본 출처 : https://moon9342.github.io/angular-lecture-databinding ) Angular는 View와 Component에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 기능을 제공하는데 이를 Data Binding( 데이터 바인딩 )이라고 합니다. Angular의 데이터 바인딩은 다음과 같이 크게 두가지 종류가 있습니다. - Two-Way Data Binding : 일반적으로 양방향 바인딩이라고 합니다. Component와 View의 상태 정보를 자동으로 일치시켜 주는 기능입니다. - One-Way Data Binding : 일반적으로 단방향 바인딩이라고 합니다. Component에서 View쪽으로 혹은 View에서 Component.. Step 3 Angular with Bootstrap :-) Angular 프로젝트에서 Bootstrap 을 사용 해 보겠습니다. 아주 쉬워요 :-) npm 으로 Bootstrap 을 해당 프로젝트 경로에 설치 해 줍니다~~ npm i bootstrap 그리고 angular.json 파일을 열어 style 부분에 css 경로를 추가해주세요 ~~ "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ] 그럼 끝! 참 쉽죠 :-) Bootstrap 으로 페이지를 좀 꾸며 보았습니다. 물론 내용은 아무 상관없는 템플릿입니다 ^^;; HOME My First Bootstrap Page Resize this responsive page to see the effect! Column.. Step 2 Angular, Module, Component 생성 오늘은 모듈(Module) 과 컴포넌트(Component) 를 생성 해 보도록 하겠습니다. 쉽게말해서 View(Component의 단위) 를 생성한다고 생각하시면 될 것 같습니다. 오늘 우리는 2개의 View ( intro, history ) 를 추가 할 예정입니다 ~~^^ CLI 사용방법은 이전 블로그 포스팅을 참고 해 주세요 !!! 2018/09/11 - Step 1 Development Environment Setting ng new webProject 새 프로젝트를 생성합니다. 대 소문자로 이루어져야 합니다. 프로젝트 생성 완료 ng generate module app-routing Routing Module 사용을 위하여 app-routing Module 을 생성정상적으로 실행되면 src/app.. Github repository 에서 localhost 로 복사(clone) 해오기 ! 이미 존재하는 Repository를 로컬 호스트로 복사해오는 방법을 알아봅시다. 아주 간단합니다 ! 먼저 복사할 레파지토리를 확인 해 봅시다. 3개의 텍스트 파일이 존재하네요 ~~ CMD 창을 열어서 다음과 같은 명령어를 입력 합니다.git clone https://github.com/NINA525/MyProject.git 깃 허브에서 Clone or download 버튼을 클릭하면 Repository 주소를 쉽게 알 수 있습니다. 그러면 끝 ~~ ^^ 깃 허브에서 레파지토리 복사하기 어렵지 않아요 ~~ Git 과 Github 기초 사용방법 ! 레파지토리 생성과 커밋하기 ~ Git 을 설치 했다면, 사용방법을 알아보겠습니다. GitHub의 레파지토리 (Repositories)를 연결 시키고 커밋 (Commit) 하는 방법을 알아보겠습니다. Git 설치 방법은 이전 포스팅을 참고 해 주세요 ~~ GitHub 회원가입은 생략하도록 하겠습니다 ~^^ 2018/09/11 - Git install in Windows10, 윈도우10에 Git 설치하기 ~~ 아직은 Repository 가 존재하지 않아서 새로 생성을 해야 합니다. 이미지 우측 상단에 보이는 녹색 New 버튼을 클릭 해주세요. 생성하고싶은 Repository 이름을 쓰고 Description(옵션) 을 작성합니다. 그리고 Create repository 버튼을 클릭합니다. 그리고 나면 이런 화면이 나오는데요 ~~ 우선 모.. GET 과 POST 의 차이 ! GET 방식? POST 방식?GET 과 POST 의 차이를 알아 봅시다 ! GET 과 POST 모두 클라이언트(사용자) 에서 SERVER 로 데이터를 전송하는 방식입니다. 하지만 전달되는 방식은 달라요 ~~ GET : 파라미터가 웹 페이지 주소에 노출되는 방식으로 전달 할 수 있는 데이터의 용량제한이 있으며 보안에 취약하다. 중요 정보를 포함하고 있지 않은 대부분의 페이지에서 데이터를 전달할 때 사용 POST : 주소에 파라미터가 노출되지 않으며 전달할 수 있는 데이터 용량 제한이 없다. 로그인, 글 작성, 회원가입 등 중요한 정보를 서버로 전달할 때 주로 사용. * 파라미터 (파라메터, parameter) : name 과 value 로 이루어져 있으며 클라이언트에서 서버로 데이터를 전달할 때 사용. G.. Visual Studio Code, 코드 자동정렬하기 ! Sort code by automatic ! Ctrl + A 로 코드를 모두 선택한 후, Ctrl 을 누른 상태에서 K 와 F 를 차례로 눌러줍니다. 컨트롤 키를 누르고있는 상태에서 K 눌러주고 F 눌러주기 !!! Select all codes with " Ctrl + A "And, Hold down the Ctrl key and press K and F one after the other. " Ctrl + K and F " 참 쉽죠 ^^ So Easy ~~~~:-) 비주얼 스튜디오를 사용하던 도중, 자동 코드정렬에 대해 알아보았습니다. 아무리 수동으로 코드를 정렬한다고 해도 한계가 있더라구요 ㅠㅠ 기존에 쓰던 이클립스와는 코드 자동정렬 단축키가 틀려서 당황했지만 ~~~ 위와 같은 방법으로 Visual Studio Code 의 코드를 자동정렬 해봅.. Java Development Kit (JDK) Install and setting Oracle 사이트에서 제공하고있는 JDK 를 다운받습니다 ~~ http://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads-2133151.html 저는 윈도우 64bit 라서 jdk-8u181-windows-x64.exe 를 다운받아서 설치 했어요 ~~다운로드 하기 전 맨 위의 Accept Licence Agreement 를 체크하셔야 합니다 :-) 기본경로로 설치하셨다면 아래 위치에 설치된 것을 볼 수있습니다.C:\Program Files\Java\jre1.8.0_181다운받아진 위치는 환경변수 등록을 위하여 복사해놓으세요 ! 그리고는 제어판 > 시스템 및 보안 > 시스템 > 왼쪽 상단 메뉴에서 고급 시스템설정을 클릭합니다. 환경.. 이전 1 ··· 6 7 8 9 10 다음
