새로워지기/서른의 생활코딩234 [생활코딩따라가기] 예고 목차 우앗~ 오늘 올라온 업데이트 정보 !! https://ko.reactjs.org/?fbclid=IwAR3ZrQ5T0X3Vju0s0ZIattPl3ys807lcTgOXsTD9OVItPvWYG15CgoQJUdo React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 1. 활용 - 기존 홈페이지 react로 개편하기 https://www.normalstory.com/ normalstory think normal, 일상 UX 기획자의 홈페이지 www.normalstory.com 2. 불변성 - https://opentutorials.org/module/4075 JavaScrip.. 2019. 6. 1. [생활코딩따라가기] React CRUD 중 UD ~ go~ (그전에 수정할 내용) 이고잉은 오류가 안뜨는데 나만 떠는 오류.. JSX문법에 안맞는다는 말인데.. 그래서 뭐가 틀렸단말인가?! 봤더니.. 를 작성하는 경우 ' _ '를 사용하면 안된다는 오류였다. 컴포넌트를 생성하면서 한줄이 추가되는걸 보고 알았다. 그동안은 따라가느라 정신이 없었나보다. 암튼 그동안 작성했던 컴포넌트의 ' _ '를 모두 삭제하니까 말끔해졌다.~ (이제 고고~ 얼마 안남았다~) https://opentutorials.org/module/4058/24861 Update & Delete 기능 구현 - React 수업소개 웹앱의 수정 기능을 React로 구현해봅시다. 강의 - update 구현 코드 변경 사항 강의 - update 구현 : form 작업 코드 변경 사항 강의 - update.. 2019. 5. 29. [생활코딩 따라가기] REACT, 대망의 CRUD~ 중, create https://www.youtube.com/watch?v=nwwJ2xU7E8w&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=28 1. Create 1. CRUD별 state.mode 값을 변경하기 1) 일단 CUD목록을 만들자 import React, {Component} from 'react'; import './App.css'; import Subject from "./component/Subject" import TOC from "./component/TOC" import Content from "./component/Content" class App extends Component{ constructor(props){ super(props); this.stat.. 2019. 5. 28. [생활코딩 따라가기] React 16 event 풀~패키지 챕터 https://www.youtube.com/watch?v=kviidk347nU&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=19 수업의 목표 TOC(목차)를 클릭하면 클릭한 항목에 해당 콘텐츠가 목록 아래 영역에 출력될 수 있도록 할 수 있다. 1. Subject의 콘텐츠를 변경하는 이벤트 구현하기 1. React의 특징 이해하기 1) state(또는 props) 값이 바뀌면 화면이 다시 그려진다. - state(또는 props) 값이 바뀌면 그 state(또는 props)를 가지고 있는 컴포넌트의 render()가 다시 호출된다. - render() 2019. 5. 27. [생활코딩 따라가기] React 15 props와 state https://www.youtube.com/watch?v=rOpg2KUPW2M&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=16 1. 개요 State - 내부에서 컴포넌트를 구현하기 위한 요소(개발자가 내부 구현하기 위해 조작되는 내부 개발 문법 ) Props - 외부에서 컴포넌트를 사용하기 위한 요소(사용자가 컴포넌트를 사용하기 위한 인터페이스) State can be changed (Mutable) Whereas Props can't (Immutable) 2. 이번 수업의 첫번째 목표 아래 노출되어 있는 속성 값을 감춘다. 1) app.js (before) import React, {Component} from 'react'; import './App.css'; .. 2019. 5. 26. [생활코딩 따라가기] React 12~14 deep dive컴포넌트 여기까지 하면, "나 리엑트 할 줄 알아" 라고 말할 수 있다고 합니다~ 화이팅! https://www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13 https://reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces reactjs.org 1. 목표 app.js에서, 동일한 Tag에 대한 개별 속성까지 조절할 수 있도록 한다. 이 과정은 리팩토링한 효과를 준다. 2. 사용자정의 속성 1) 속성까지 사용자정의 하고자 하는 영역 //*컴포넌트들이 '.. 2019. 5. 26. [생활코딩 따라가기] React 10,11 컴포넌트 만들기 react의 인프라라고 할 수 있는 컴포넌트 패턴익히기 위한 챕터 https://www.youtube.com/watch?v=QG4RxNHz-bc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=10 1. 이번 챕터의 목적 컴포넌트를 만드는 패턴을 확실히 내제화 시키기 2. 구현하고자하는 기본 구조 만들기 puer.html WEB world wide web ! HTML CSS JS HTML HTML is HyperText 3. puer.html to react app.js에서 컴포넌트를 활용해서 puer.html 와 동일한 페이지 구성하기 app.js import React, {Component} from 'react'; import './App.css'; //*컴포넌트들.. 2019. 5. 26. [생활코딩 따라가기] React 7~9.샘플 웹앱 배포 복습 특징 - component 1. 가독성 사용자 정의코드 : ex) 2. 재사용성 3. 유지보수 변경시 모두 적용 목표 1. 개발환경, 어디를 수정할 수 있는지 2. run 실행 3. deploy 배포 실습 전 준비사항 1. 워크스페이스 폴더 생성 2. 해당폴더에서 react 프로젝트 생성 : npx create-react-app space-r1(프로젝트명) React - 7. JS 코딩하는 법 https://www.youtube.com/watch?v=LEPiRfPD9Uw&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=7 1. 화면에 노출되는 코드는 어디인가 public/ 폴더 안에 있는 index.html 의 안쪽에 내가 정의한 component들이 들어가게 된다.. 2019. 5. 26. [생활코딩 따라가기] React 1~6.샘플 웹앱 실행 생코 React 수업 : https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React - YouTube www.youtube.com 완전 가장~ 따끈 따끈한 the new 수업~ 1. 기기~기본환경 세팅 ( 생코 Link : 04. npm을 이용해서 create react app 설치 ) 1-1) npm 버전확인 npm -v 추가, 참고용 외부 블로그 : https://velopert.com/1351 [Node.js] TIP: Node.js 와 NPM 최신버전으로 업그레이드 하기 | VELOPERT.LOG 이번 포스트는 기존에 node.js 가 설치 되어있는 상태에서 Node.js 와 NPM 을 최신버전으로 업그레이드 하는 .. 2019. 5. 1. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_14 생성자를 통한 상속 javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24630 생성자를 통한 상속 - JavaScript 객체 지향 프로그래밍 수업소개 이 수업은 불필요하게 어렵습니다. 동일한 역할을 하면서도 훨씬 이해하기 쉬운 class 상속 수업을 보실 것을 권해봅니다. 물론 보셔도 됩니다. ㅎㅎ 강의1 강의2 코드 constructor-inheritance.js (변경사항) function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } Person.prototype.sum opentutorials.org 14. 생성자를 .. 2019. 5. 1. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_13.prototype과 __proto__ javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24629 prototype vs __proto__ - JavaScript 객체 지향 프로그래밍 수업소개 자바스크립트의 시크릿을 여는 열쇠 prototype과 __proto__에 대해서 알아봅시다. 강의 opentutorials.org 13. prototype과 __proto__ 0. 앞서, 0-1. 자바스크립트는 프로토타입 지향(prototype-oriented) 혹은 인스턴스 기반(instance-based) 프로그래밍 이라고 한다. https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%.. 2019. 5. 1. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_12.객체와 함수 javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24628 객체와 함수 - JavaScript 객체 지향 프로그래밍 수업소개 자바스크립트는에서 함수는 혼자 있으면 개인이고, new가 앞에 있으면 객체를 만드는 신이고, call을 뒤에 붙이면 용병이고, bind를 붙이면 분신술을 부리는 놀라운 존재입니다. 자바스크립트의 함수의 놀라움을 느껴보세요. 강의1 수업의 오리엔테이션입니다. 강의2 call을 통해서 실행할 때마다 this의 값을 변경하는 방법을 살펴보세요. 코드 object_function.js (변경사항) var kim = {name:'kim', first: opentutorials.org 12.객체와 함수 1. .. 2019. 5. 1. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_11.객체간의 상속 javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24626 객체 간의 상속 - JavaScript 객체 지향 프로그래밍 수업소개 JavaScript는 객체(인스턴스)와 객체 간의 상속 관계를 자유롭게 설정할 수 있습니다. 이 수업에서는 클래스가 아닌 객체를 통해서 상속하는 방법을 알아봅니다. 강의1 자바스크립트의 상속이 클래스 기반 언어와 어떻게 다른지 소개해드립니다. 강의2 __proto__를 이용해서 상속을 구현하는 방법을 소개합니다. 코드 prototype-inheritance.js (변경사항) var superObj = {superVal:'super'} va opentutorials.org 11.객체 간의 상속 1.. 2019. 5. 1. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_10.super javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24620 super - JavaScript 객체 지향 프로그래밍 수업소개 서브(자식) 클래스에서 상위 클래스를 호출할 때 사용하는 super 키워드를 소개합니다. 강의 코드 class.js (변경사항) class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum(){ return this.first+this.second; } } class PersonPlus extends P opentutorials.org 10. super 1. .. 2019. 4. 30. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_09. class 상속 javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24619 class 상속 - JavaScript 객체 지향 프로그래밍 수업소개 JavaScript에서 클래스를 상속해서 서브 클래스를 만드는 방법을 소개합니다. 강의 코드 class.js (변경사항) class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum(){ return this.first+this.second; } } class PersonPlus extends Pers opentutorials.org 09. class 상.. 2019. 4. 30. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_06~08 javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24614 class - JavaScript 객체 지향 프로그래밍 수업소개 JavaScript ES6부터 포함된 Class 에 대한 소개입니다. 강의1 클래스 문법에 대한 오리엔테이션입니다. 강의2 클래스를 생성하고, 객체를 만드는 방법을 소개합니다. 코드 class.js (변경사항) class Person{ } var kim = new Person(); console.log('kim', kim); // kim.sum = function(){ // return 'this : '+(this.first+this.sec opentutorials.org 06. class JavaS.. 2019. 4. 30. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_05. prototype javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24610 prototype - JavaScript 객체 지향 프로그래밍 수업소개 JavaScript의 prototype이 필요한 이유와 prototype을 통해서 코드의 재사용성과 성능을 향상시키는 방법을 알려드립니다. 강의1 prototype이 필요한 이유를 소개합니다. 강의2 prototype을 이용해서 코드의 재사용성을 높이고, 성능을 향상시키는 방법을 소개합니다. 코드 prototype.js (변경사항) function Person(name, first, second, third){ this.name=name; opentutorials.org 05. prototyp.. 2019. 4. 30. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_02~04 javascript 객체 지향 프로그래밍 생코 수업 Link : https://opentutorials.org/module/4047/24604 객체의 사용 사례 - JavaScript 객체 지향 프로그래밍 수업소개 객체를 실제로 활용하는 사례를 살펴보면서, 객체란 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것이라는 말의 의미를 음미해봅시다. 강의1 이미 우리가 객체를 사용해왔음을 확인해봄으로서 객체가 멀리 있는 것이 아니라는 것을 느껴보는 영상입니다. 코드 built-in.js (변경사항) console.log("Math.PI", Math.PI); console.log("Math.random()", Math.random()); console.lo opentutorials.org 02. 객체의 사용.. 2019. 4. 30. [생활코딩 따라가기] javascript 객체 지향 프로그래밍_01배열과 객체 javascript 객체 지향 프로그래밍 01. 배열과 객체 생활코딩의 새로운? 수업,,, 사실 최근에 리엑트 수업이 떴다... 으흐흐 https://opentutorials.org/module/4047 JavaScript 객체 지향 프로그래밍 수업소개 JavaScript의 객체의 특성을 깊게 살펴보는 수업입니다. 이 수업에서는 아래와 같은 내용을 다루고 있습니다. prototype __proto__ 생성자 함수와 new class 상속 수업대상 클라우드 컴퓨팅에 관심이 있는 학생과 선생님. ac.kr, edu와 같은 도메인으로 끝나는 이메일을 가지고 있는 분들에게만 혜택이 제공됩니다. 수업을 보는 다른 방법 Youtube 재생목록 수업에 참여조건 자바스크립트가 처음인 분은 이 수업을 보시면 opentu.. 2019. 4. 23. 비쥬얼 스튜디오 코드 egoing님 덕분에 오늘?도 새로운 비쥬얼 스튜디오 코드라는 툴을 새로 알게 되었다. '또 새로운 툴이네? 이건 똔 뭐가 다른거야?' 하며 툴툴툴 할 수 있겠지만, 써보면 오호~ 좋은데~ 할꼬다 ㅎㅎㅎ 써보면 여러가지가 편하다. 일단 무료, 동시에 여러 프로젝트를 돌리기 쉽고.. 가장 크게 오는 장점은 터미널을 바로 쓸 수 있다 ^^ 마치 JAVA의 이클립스나 스프링처럼 ^^ 아, 내가 모르는 다른 툴들도 되는거면 쏴리~ 기존에 아톰만 쓰다가 비쥬얼 스튜디오 코드를 보고 화들짝 놀라서 ㅎㅎㅎ 2019. 4. 23. 자가동력미션 01. 집에 있는 책들을 데이터 베이스화 하기 3. 새로운 계획, 구현, 배포 그리고 개선 자가동력미션 01. 집에 있는 책들을 데이터 베이스화 하기 3. 활용계획 1. 목표 작업 초기에 엑셀 데이터를 담은 html table의 빈 칸들을 검색 API를 활용해 채워넣기 2. 실행 계획 1부 1) 다시, 코딩하기 전에 생각을 해야할 타이밍인 것 같다...... 음... 그전에 일단) 리뷰 제일 처음.. 엑셀 작업할때 ... 그 많은 내용을 쓰지않아도..책 이름만 적으면 됐었다는걸.. 깨우침 ㅜㅜ 비싼 공부.. 실전이닷! 방법 1 ) 엑셀로 업로드 하자마자 (= html 테이블이 생성되자 마자 )자바스크립트로 빈 값을 찾아서 해당 레코드(가로열)의 '책 이름'을 가져와서네이버 api 로 던져서 값을 가져와야하나? 방법 2)빈 html 에서 버튼 클릭하면,엑셀로 업로하고, 이걸 바로 뿌리지 말고 -.. 2019. 3. 20. 자가동력미션 01. 집에 있는 책들을 데이터 베이스화 하기 2- 2) 관련 정보 크롤링 하려다가 2-3) API 활용하기 자가동력미션 01. 집에 있는 책들을 데이터 베이스화 하기 2. 코딩하기 2- 2) 크롤링해오기 1. 목표 데이터 베이스에 기록된 제목을 기반으로, 크롤링을 통해 원하는 값들을 불러온다 2. 실행계획1) 리서치 - Snoopy 를 이용한 크롤러 http://happycgi.com/164692) 코딩 - 참고 블로그 예제 응용 : 코드 3) 이슈? 발생 - 음.. 사실 이런 결과를 원한건 아니었다. - 나는 내가 원하는 키워드에 해당하는 상세 내역을 받아오길 원했다.. 2- 3) 검색 API 이용하기 1. 목표 수정 데이터 베이스에 기록된 제목을 기반으로, 검색 API를 이용해 통해 원하는 값들을 불러온다 2. 실행계획1) 리서치 (1) 공공데이터포털 -> 내가 설정했던 컬럼 중 가격 정보가 없고 분류명 .. 2019. 3. 18. 자가동력미션 01. 집에 있는 책들을 데이터 베이스화 하기 1-1)구상/엑셀로 정리하기 자가동력미션 01. 집에 있는 책들을 데이터 베이스화 하기 1. 데이터베이스 구상하기1-1) 엑셀로 정리하기 봄, 서재를 정리하다가 문득,여기에 있는 책들의 분류와 비율을 정리하면 나는 어떤 사람인가? 에 대한 데이터를 추출할 수 있지 않을까? 하는 호기심이 발동했다. 1.데이터를 만들어보자!1-1 일단 컬럼은 구분, 책이름, 저자, 출판사, 가격, 부제 또는 개요 로 구성해보았다.1-2컬럼 선정 기준은구분은 카테고리 비중으로 개인의 기호를 파악책이름은 단순히 구분용이 아닌, 키워드 또는 어떤 유형의 카피에 뽐뿌가 오는가를 추정저자는 빈도가 높은 저자를 통해 개인의 캐릭터를 부여할 수 있지않을까?가격은 사실, 수량 보다 더 중요한 지표가 될 수도 있다는 추정을 해본다.부제 또는 개요는 사실 욕심사항이다... 2019. 3. 18. 생활코딩 따라하기 WEB2 - PHP _ CRUD를 MySQL로 구현해보기 php 생활코딩 2019.03.03생활코딩 따라하기 WEB2 - PHP _ CRUD를 MySQL로 구현해보기 실습 내용 : https://opentutorials.org/course/3167실습 결과 : http://127.0.0.1:8080/index.php ( mysqli or PDO_MySQL* 추천 : PDO_MySQL 객체를 기준으로 사용, 오라클 등과 손쉽게 연계(교체)할 수 있다. MySQL = MySQL Improved가이드 : http://php.net/manual/en/book.mysqli.php데이터베이스 제어함수방식 & 객체방식 : http://php.net/manual/en/mysqli.quickstart.dual-interface.php 실습 mysqli_connect( );ht.. 2019. 3. 4. 삼팔광땡 MYSQL 입문기 - MYSQL 삭제, 그리고 새로운 설치 삼팔광땡 MYSQL 입문기 - MYSQL 삭제, 그리고 새로운 설치 예전에 설치하고 잘 돌아갔던 mysql 이... 비트나미 설치 후 예전 처럼 접속 안된다!!! 으악~~ 덕분에 한시간 반을 까먹었다 ㅜㅜ ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 비트나미가 이것저것 다 묶여있어서 어느정도 예상은 했는데... 포트만 조정하면될줄 알았는데.. 아닌거 같다.. 삽질의 시간이 너무 길어지는 것 같아.. 기존에 brew 방식으로 설치했던 mysql을 삭제하고 다시 설치해보기로 한다. 1. 삭제먼저 homebrew 로 설치한 mysql 삭제하는 방법이다. 외국어 링크이긴한데.. 첫 챕터에 있.. 2019. 3. 2. 생활코딩 따라하기 WEB2 - PHP _ CRUD를 FILE로 구현해보기 php 생활코딩 2019.03.01 생활코딩 따라하기 WEB2 - PHP _ CRUD를 FILE로 구현해보기 PHP를 배워야겠다는 다짐은 생활코딩에 한 챕터가 모두 더해서 6시간 조금 넘을 뿐이다. 라는 점에서 자신감이 생겼다. 삼월 일일. 정오 뉴스와 대통령 선언을 보고 미세먼지도 많은데 내 마음속 독립을 위해 7시간 정도를 주욱 매진했다. 이고잉 덕분에 하루에 다 끝낼 수 있었다. 늘 고마우신 분이다. 별도의 실습과정을 포스팅 할까? 하다가.. 아무래도 이고잉 동영상만큼 깔끔할 수는 없을 것 같고 괜한 시간 낭비일 것 같아 생략하기로 했다.다만 나중에 기억을 최대한 빨리 회상할 수 있도록 학습 과정에 정리해둔 키워드들을 블로그에 포스팅 해두기로 한다. 한가지 더 기분좋은 일은 막연했던 PHP 학습의 .. 2019. 3. 2. 스프링 부트에서 토비 3.1 따라하기 : 1장 - 1.7 DI 의존관계 주입 (작성 중) 스프링 부트에서 토비 3.1 따라하기 : 1장 오브젝트와 의존관계 - 1.7 DI 의존관계 주입 개발환경 - OS : mac- STS : 4.0.1- MySQL : Server version: 8.0.13 Homebrew- Frame-Work : 일단 최대한 의존성 없이 운영될 수 있도록 jar로 만 진행 관련 링크 - 스프링 사용자 모임_홈페이지 http://www.ksug.org/- 스프링 사용자 모임 질의응답 https://groups.google.com/forum/#!topic/ksug/13vB4tCFqrI- 2017 스프링캠프 https://www.youtube.com/playlist?list=PLdHtZnJh1KdZ6NDO9zc9hF4tONDLTSEUV 1장 오브젝트와 의존관계 1.7 DI 의.. 2019. 2. 28. 스프링 부트에서 테스트 주도 개발 실습 - 5장. 솔직히 말하자면 STS 4.0.1(스프링 부트)에서 TDD(테스트 주도 개발 Test Driven Development) 실습하기 들어가는 글. 대다수의 사람들은 다음 두 가지 단순한 법칙을 따름으로써 잠재력을 한껏 발휘할 수 있다.1. 어떤 코드건 작성하기 전에 실패하는 자동화된 테스트를 작성하라.2. 중복을 제거하라. 요구사항 및 개선사항 목록 - $5 + 10CHF = $10 (환율이 2:1일 경우) - $5 x 2 = $10 - amount를 private로 만들기 - Dollar 부작용(side effect)? - Money 반올림? - equals( ) 동질성 기능을 구현 - hashCode( ) - Equal null- Equal object - 신규 : 5CHF X 2 = 10CHF 2019. 2. 27. 이전 1 2 3 4 ··· 9 다음
