생활코딩
-
[Node.js + AJAX] 편집 페이지(Author) - 무한 스크롤 / Fetch API생활코딩/WEBn 2021. 2. 14. 21:33
생활코딩 AJAX 강의를 완료하고, 기존에 Node.js로 백엔드를 구현해놓은 코드에 AJAX를 적용해보았다. 가장 큰 차이는 기존에는 MySQL 쿼리문으로 직접 받아왔던 데이터를, fetch API에서는 URL로 받아온다는 것. Node.js의 app 라우팅 부분에 데이터 리턴을 추가해서 프론트의 fetch API와 URL로 소통할 수 있도록 했다. 이쪽을 참조했다: node-js-mysql-how-to-do-the-ajax-call-and-access-the-data-on-server-js 작업하다보니 내용이 길어져서 글을 나누었다. 기본 페이지(Rread): [Javascript - AJAX] Node.js + AJAX - 기본 페이지 편집 페이지(Author): 현재 포스팅 편집 페이지(Creat..
-
[Javascript - AJAX] Node.js + AJAX - 기본 페이지생활코딩/WEBn 2021. 2. 9. 14:10
생활코딩 AJAX 강의를 완료하고, 기존에 Node.js로 백엔드를 구현해놓은 코드에 AJAX를 적용해보았다. 가장 큰 차이는 기존에는 MySQL 쿼리문으로 직접 받아왔던 데이터를, fetch API에서는 URL로 받아온다는 것. Node.js의 app 라우팅 부분에 데이터 리턴을 추가해서 프론트의 fetch API와 URL로 소통할 수 있도록 했다. 이쪽을 참조했다: node-js-mysql-how-to-do-the-ajax-call-and-access-the-data-on-server-js 작업하다보니 내용이 길어져서 글을 나누었다. 기본 페이지(Rread): 현재 포스팅 편집 페이지(AuthorPage): [Javascript - AJAX] Node.js + AJAX - 편집 페이지(Author) ..
-
[JavaScript - Ajax] 개요생활코딩/WEBn 2021. 1. 28. 15:25
Asynchronous Javascript And Xml 웹페이지의 정보를 부분적으로 변경(갱신)하는 기술. 갱신이 필요하지 않은 부분은 재사용함으로써 사용자의 경험을 개선해주고 서버 운영자의 리소스를 절약해준다. 이런 효과를 가지는 웹페이지를 SPA(Single-Page Application)라고 부르기도 한다. SPA의 발전형으로 PWA(Progressive Web Apps)가 있는데, SPA에 offline 동작을 지원하는 어플리케이션을 말한다. Fetch API Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작할 수 있도록 인터페이스를 제공해준다. [MDN] Fetch-API 예제: fetch라는 버튼을 누르면 text.html의 파일을 읽어와서 출력하게 만드는 ..
-
[Gitn] Cherry-pick, Rebase, Pull request생활코딩/Gitn 2021. 1. 27. 18:48
Cherry-pick 특정한 커밋으로 생긴 변화만을 대상 브랜치에 병합하는 작업 master 브랜치와 other 브랜치가 있는 상황에서, other 브랜치의 other1 커밋을 가져오고 싶다면 # git checkout master # git cherry-pick commit-id *conflict 원인과 해결 파일의 같은 부분이 동시에 수정되었을 때 (master의 마지막 커밋과 other의 해당 커밋이 둘다 같은 부분을 수정했을 때) merge시와 똑같이 conflict 부분을 해결하고나서, 파일을 add하고 나면(머지툴을 사용한다면 파일을 수정저장하고나면 add가 완료된다.) 아래처럼 마저 진행을 하면 된다. # git cherry-pick --continue Rebase base(병합할 브랜치들의..
-
[Gitn] GIT CLI - Branch, BackUp(push, pull, clone), Conflict생활코딩/Gitn 2021. 1. 27. 14:03
Branch # git remote add 원격저장소 주소 같은 뿌리를 가졌지만 서로 다른 역사를 써가고 있는 가지들 깃 공식홈페이지(git-scm.com/book/ko/v2/Git-브랜치-브랜치란-무엇인가)에는 이렇게 나와있다: 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 것이 브랜치다. # git branch // 브랜치 목록 출력 # git branch apple // apple 브랜치 생성 # git checkout master // master 브랜치로 이동 # git log --all --graph // --all: 모든 브랜치를 보여주는 옵션, --gr..
-
[Gitn] git CLI - 버전관리생활코딩/Gitn 2021. 1. 25. 11:14
저장소 만들기 # git init 대상 디렉토리(현재 디렉토리라면 .) 상태 확인 # git status 파일 git 버전관리 대상에 포함시키기(staging area로 올리기) # git add ... # git add . // working tree의 모든 파일을 올리고 싶은 경우 버전 생성(Commit) # git commit -m "커밋 메시지" # git commit -am "커밋 메시지" // add 작업 + commit 작업 동시 수행 /* 새로 추가된 Untracked 파일은 자동으로 add 되지 않으므로 유의 */ 기록 보기 # git log # git log --stat // 파일 상태도 보고 싶다면 # git log --name-only // 파일 목록까지만 보고 싶다면 # git l..
-
[Gitn] Git의 목적과 쓸모 - 버전관리/백업/협업생활코딩/Gitn 2021. 1. 25. 10:00
git: -(문서의) 버전관리/백업/협업에 특화된 도구 -구체적으로는 자주 변경되는 수많은 문서를 관리해야 하는데, 그 문서들이 어떻게 변경되었는지 알아야하고, 백업도 해야하고, 다른 사람과 공유해서 공동으로 작업해야 하는 경우에 사용하면 아주 좋다. [강의 출처] opentutorials.org/course/3837/22435 생활코딩 수업을 따라가다가 WEB3 즈음에서 코드가 슬슬 복잡해지면서 Git의 필요성을 느끼고 잠시 방향 전환했다. 이참에 Git을 잘 배워서 코드는 Github에 올리고 여기에는 진행 과정만 적어두도록 해야겠다. 버전관리가 왜 필요한가? 작업을 진행하면서 여러 경우의 수를 만들어야 할 때, 특정 작업 이전의 원본을 따로 보관해두어야 할 때, 버전관리를 사용하지 않는다면 파일_1..
-
[Node.js & MySQL] 코드 리팩토링, 이슈 정리생활코딩/WEBn 2021. 1. 24. 11:47
다음 단계인 Express로 가기전에 나름대로 코드를 정리하는 시간을 가졌다. 생활코딩에서는 다음 단계로 넘어갈 때 원초적인 골격 코드를 가지고 해당 주제에만 초점을 맞추는데 아까워서 전 단계에서 실습했던 코드를 그대로 가지고 추가추가 하는 과정을 거쳤더니 WEB3까지 마친 지금은 코드가 조각조각 이어붙인 넝마주이가 되고 말았다. 현재 이정표는 아래와 같다. WEB1 HTML&Internet -> WEB2 CSS -> WEB2 JavaScript -> WEB2 Node.js -> WEB3 Node.js & MySQL WEB1 HTML&Internet: 기본적인 HTML 페이지 골격 작성 WEB2 CSS: 디자인 부분을 스타일시트로 이동 & 로 연결 WEB2 JavaScript: Night Day 버튼으로..