분류 전체보기364 [블로그 1] 기본 세팅 강의 자료에서 다운 받았다. 파일 내용은 아래와 같다. 각 파일에 미리 세팅된 코딩을 적어본다. 그리고 파일목록에는 node_modules 가 없다. 필요한 module들을 다운 받기 위해서 콘솔에서 npm install 을 쓴다. css .container-fluid { padding-top: 70px; padding-bottom: 70px; } .navbar { padding-top: 15px; padding-bottom: 15px; border: 0; border-radius: 0; margin-bottom: 0; font-size: 12px; letter-spacing: 5px; } .navbar-nav li a:hover { color: #1abc9c !important; } .footer-pa.. 2021. 11. 7. 11/9 간단 블로그 만들기 끝 | 개발 독학 중인 일상 코딩 독학 중인 일상 손톱 씹는 습관, 입술 만지는 습관이 생겼다. 산만하다. 이 건 독학해서 문제가 아니라 내 문제일 수 있지만 난 쉽게 산만해진다. 화장실 가서 잠깐 유튜브 보려다가 그냥 꼬리에 꼬리를 무는 클릭을 하고 있는 나. 뜬금없이 지디의 근황이 엄청 궁금해지고, 갑자기 영어 실력은 어떻게 향상시키지?하는 복합적인 고민을 하고 있다. 개발 공부를 하는 중에도 계속 진로 고민이 된다. 아는 사람도 없고 아직 구직을 하지 않았기에 앞 날이 그냥 뿌옇게 보인다. 막막하다. 지금하고 있는 유데미 강의를 보면 자바스크립트 리엑트 node.js mongodb mongoose 등 풀스택으로 배우긴 하지만 비전공이라 취업이 될진 모르지만 유튜브를 보면 풀스택으로 취업하지 말라 그러고 내 개인적으로도 프론트엔.. 2021. 11. 6. EJS 끝. To Do List 만들기 EJS 가 끝났다. 아주 편리한 기능을 배웠다. 불필요하게 코드 반복을 하지 않고 간단하게 할 수있는 방법이다. 초반에는 뭔지 감이 안와서 좀 헷갈린다 생각했는데 뒤로 갈 수록 재밌게 공부했다. 강의 내용이 지금 코드를 작성해도 그대로 동작해서 더 재밌게 한 것같다. 하지만 궁금한 내용이 생겼는데 html은 언제쓰나하는 것이다. EJS 를 쓰면 html은 쓸 필요가 없어지는 것 같다. 2021. 11. 3. To Do List 12 ] 최종 코드 EJS 템플릿을 사용해서 To Do List 만들기를 해보았다. 아직 데이터 베이스를 배우기 전이라 입력한 아이템은 저장되지 않는다. 또 원하는 아이템 리스트가 기본인 home 과 work 두 개만 가능하다. 내가 원하는 아이템 리스트를 만들어 거기에 아이템을 입력하고 아이템 리스트를 지우게 할 수는 없다. 다음 강의에서 설명이 나오길 바란다.. app.js const express = require("express"); const bodyParser = require("body-parser"); const date = require(__dirname + "/date.js"); const app = express(); app.set('view engine', 'ejs'); app.use(bodyParse.. 2021. 11. 3. To Do List 11 ] Refactoring 자바스크립트 함수 선언하는 6가지 방법 아래 글을 참고 하면 변수 선언함과 동시에 함수를 만들 수도 있다. https://dmitripavlutin.com/6-ways-to-declare-javascript-functions/ refactoring date.js 코드를 좀 더 간단하고 보기 편하게 정리해보자. 1. 함수 간단히 하기 1차 변수를 선언하면서 = 익명함수 정의 2차 변수도 지우고 바로 모듈과 익명함수로 연결 3차 exports shortcut 를 보면 module.export.getDate 은 더 간단하게 module을 생략해도 된다. export.getDate return 간단히 하기 let -> const let은 reassign이 가능하지만 const는 불가능하다. 이 안에 있는 코드들.. 2021. 11. 3. To Do List 10 ] module | exports | 다른 파일에 있는 function과 data 불러오는 법 지금까지 ejs, express, body-parse 등 node modules 를 사용하였다. 이 node modules은 어떻게 동작하는걸까? node_modules 폴더에서 ejs를 보면 많은 exports를 볼 수 있다. 이 exports는 무엇일까? 그 전에 우선 module에 대해 자세히 알아보자. Module 오늘 날짜를 알려주는 코드를 묶어서 app.js안에 놓지 말고 다른 파일로 옮겨놓자. app.js 안에 모든 코드가 계속 쌓이면 나중에 코드 보기가 어려워진다. route(get, post..) 와 상관없는 코드들은 외부 파일로 빼서 필요할 때 부르는 것이 더 효율적이다. date.js 파일을 만든다. 오늘의 날짜를 알 수 있는 코드인 빨간 박스 안의 코드들을 date.js 파일에 옮긴.. 2021. 11. 3. To Do List 9 ] Templating VS Layouts | header.ejs footer.ejs 따로 빼서 연결 EJS Layouts 이제 to do list 스타일이 아니라 About page, Contact page 처럼 다른 형태의 페이지를 만들 때는 ejs 템플릿을 쓸 수 없다. 하지만 about.html contact.html 파일을 새로 만들었는데 메인 페이지와 같은 css 스타일을 쓰고 싶다면 어떻게 해야할까? 이 때 ejs layouts 기능을 쓰면 편하다. headers, footers를 ejs로 컨텐트로 해놓으면 코드를 반복해서 쓸 필요도 없고, 같은 스타일의 적용을 받을 수 있다. views 폴더 안에 headers.ejs 와 footer.ejs 파일을 만든다. html header해당하는 부분을 잘라서 headers.ejs 파일에 붙인다. footer.ejs에도 마찬가지도 하단 부분을 잘라서 .. 2021. 11. 2. To Do List 8 ] work 페이지에서도 To Do List 되기 지금까지는 localhost:3000/ 홈페이지에서 To do list가 나오게 해보았다. 이제는 work에 관련된 내용만을 보기 위해 localhost:3000/work 주소를 따로 써 보자. work에 관련된 새로운 to do list가 나오게 해보자. 결과물 미리보기 title이 Work List로 바뀌고 새 아이템을 넣을 수 있게 해 놓았다. 1. To do list의 타이틀이 Work List로 뜨게 하기 index.ejs에서 위 제목에 오늘 날짜가 아니라 Work List가 와야하므로 이름을 로 바꿔준다. 2. app.get() 만들기 localhost:3000/work로 페이지 달라는 get request가 들어왔을 때 줄 수 있게 app.get() 을 만든다. 새로운 get에는 render.. 2021. 11. 1. To Do List 7 ] CSS 만들어 연결| index.ejs 수정하기 1. styles.css 파일을 만든다. 2. css 내용을 채운다. css 내용은 강사님이 이미 만들어 놓은 것을 따라 적었다. 3. css 폴더를 만들어 styles.css 파일을 넣는다. 4. index.ejs 에서 css 링크를 건다. (안됨) 이 전에는 컴퓨터 안에서 연습할 때 위 처럼하면 바로 화면에 떴지만 이제는 아무런 적용이 되지 않는 것을 발견할 것이다. express는 자동으로 모든 폴더를 서버에서 보여주지 않는다. 메인 access 포인트인 app.js와 views 폴더에 있는 것을 기본으로 보여준다. css 파일은 https://localhost:3000/css/styles.css로 찾을 수 없다는 말이다. 그럼 express에 css도 서버에서 나오게 하라고 명령 해야한다. css.. 2021. 11. 1. To Do List 6 ] Scope | Local | Globe function 안의 variable은 내부에서 호출한다. function 안의 variable은 외부에서 호출할 수 없다. function 안의 variable은 다른 function에서 호출 할 수 없다. Local variables 외부에서 호출 할 수 없는 variable을 local variable이라고 한다. variable을 함수 밖으로 빼면 function 안밖에서 호출 가능하다. Global variables function이 아닌 경우 if/else, for/while statement 등인 경우 외부에서 var에 접근 가능하다. function인 경우 var, let, const 모두 외부에서 호출 불가능하다. 하지만 if / else, for / while 인 경우 let, cons.. 2021. 11. 1. To Do List 5] 할일 입력하기 | res.redirect() | 아이템 입력시 ul에 자동 추가되게하기 이 전에는 To Do List 맨 위에 들어갈 오늘 날짜가 나오게 하는 법을 알아보았다. 오늘 포스트는 아래 처럼 리스트에 내용 입력하면 리스트에 보이게 하는 법에 대해 알아보자. 브라우저에서 유저가 할일을 입력하면 서버에서는 그 내용을 받아 다시 브라우저 화면에 띄우는 작업을 해야한다. 유저가 입력한 내용 콘솔에서 받아보기 ejs에서 form 으로 입력란 만들기 먼저 유저가 입력한 내용을 서버에서 받을려면 post request가 필요하다. 서버에서 post request를 작성하기 전에 먼저 index.ejs에서 입력 받을 form과 unorder list로 할 일을 미리 적어본다. unorder list 만들고 내용 입력하기 post request에 쓸 form 만들기 index.ejs에서 add .. 2021. 10. 30. To Do List 4] tolocaleDateString( ) Switch로 일일이 지정하지 않고 더 간단하게 설정하는 방법이 없을까? 자바스크립트에서 toLocaleDateString()을 사용하면 날짜, 요일을 한꺼번에 받아서 사용할 수 있다. https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date options 까지 적어주면 숫자로만 나오는게 아니라 옵션 설정한 대로 나온다. day: 날짜 "numeric", "2-digit". weekday: 요일 "narrow", "short", "long". year: 년도 "numeric", "2-digit". month: 월 "numeric", "2-digit", "narrow", ".. 2021. 10. 30. To Do List 3] EJS 탬플릿으로 평일, 주말 글자색 다르게 하기 | EJS 태그 주말인 경우 빨간 글씨로, 평일인 경우 하늘색 한 파일에 js, html 같이 있게 되었다. 각 줄마다 ejs 태그를 씌여준다. js는 html은 결과 ejs 태그 https://ejs.co/ 2021. 10. 30. To Do List 2] EJS 템플릿 시작하기 app.get( )으로 요일 별로 다른 html 문서를 보내야 할 때 html 문서를 일일이 7개 만들 필요없이 템플릿 하나만 써서 문서 안에 내용만 일부 바꿔서 보낼 수 있다. EJS, PUG(구 jade), nunjucks 등 다양한 템플릿이 있지만 지금은 EJS에 대해 알아보겠다. EJS 배우기: https://learn.co/lessons/using-ejs-in-express Templating 이란? HTML template를 만들어서 내용 중 일부분만 변경해 사용하는 것 Express에서 EJS Templates 사용하는 법 1. 터미널에서 ejs 다운받기 npm i ejs 2. views 폴더 만들기 일단 탬플릿 파일을 먼저 만들어 보자. views 폴더 만들기 작업 중인 Todolist 폴.. 2021. 10. 27. To Do List 1] 기본 세팅, app.get( ) 형태 기본 세팅 1. 시작 폴더, 파일 만들기 mkdir todolist-v1 touch index.html app.js npm init npm i express body-parser 2. app.js 기본 문형 완성하기 터미널 실행 후 npm i express body-parser const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.get("/", function(req, res) { res.send("Hello"); }); app.listen(3000, function() { console.log("server started on port 3000") }); app.ge.. 2021. 10. 25. APIs, Git을 끝냈다 APIs 강의 들을 때는 정말 답답함이 많았다. 진도도 나가지 않았다. MailChimp으로 회원가입하면 회원 이메일 주소를 이메일 발송 리스트에 올리는 작업인데 API 강의 촬영 때와 지금의 MailChimp 사이트가 완전 달라져서 화면 안에서 정보 찾기도 어려웠고 메일침에서 제공하는 API 명령어도 배우지 않은 것들이라 생소하고 이해도 가지 않았었다. 막막한 벽에 부딪힌 기분이 계속 들었다. 다시 새 강의로 올려달라는 댓글도 많았다. 어떤 사람이 댓글로 자신이 찾은 방법을 올렸다. 어찌저찌 실행이 되긴 했지만 아직도 찜찜함은 여전히 있다. 나중에 실력이 좋아졌을 때 다시 시도해 봐야 하는 부분이다. 그에 반해 깃은 예전부터 궁금하던 거라서 재밌게 강의를 들었다. 하지만 깃허브 역시도 조금씩 화면이 바.. 2021. 10. 24. 깃 브랜칭, 머징 | Git branching, merging 아래 그림으로 예를 들어 보면 version 1, 2 를 커밋하고 나서 새 아이디어나 컨셉이 생각났다. 이를 실험해 보고 싶을 때 메인 branch인 master branch는 그대로 가고 우리는 사이드 branch를 만들어 거기서 실험을 해 볼 수 있다. 2번 째 커밋을 하고 나서 새로운 branch를 만들어서 여기는 여기대로 또 커밋을 이러갈 수 있다. 동시에 메인에는 3번째 커밋도 진행 할 수 있다. 새로운 브랜치에서 한 실험이 성공적이라서 이 것을 메인 브랜치로 합칠 수 있다. Git branching 하기 3개의 파일이 들어있는 story 폴더가 있다. 아래와 같이 3번의 커밋이 있었다. 새 branch 만들기 git branch 이름 git branch alienPlot 모든 branch 보기.. 2021. 10. 24. 깃 클론하기 | git cloning cloning은 깃헙에 있는 커밋과 모든 버젼을 내 working directory에 가져오는 것을 말한다. Cloning 하기 https://github.com/dkhamsing/open-source-ios-apps 여기에 들어가면 많은 개발자들이 만들어 놓은 ios 오픈 소스들이 있다. 이 중에서 austinzheng / swift-2048 https://github.com/austinzheng/swift-2048 을 내 작업 폴더로 클론해보자. 1. 녹색 code 버튼을 누르고 주소를 복사한다. 2. 터미널에 가서 아래와 같이 입력한다. git clone url 주소 이 전 커밋 확인 하기 이 전 커밋 확인 가능하다 swift-2048 폴더에 들어가서 git log 2021. 10. 24. 보안 문서 깃허브에 올리기 : gitignore 파일을 여러 개 만들었다 file1, file2, file3, secrets 이라는 이름으로 파일을 여러 개 만들었다. 그 중에서 보안이 필요한 문서는 gitignore할 것이다. 1. secrets file.txt secrets 파일에는 내가 보안이 필요한 비밀번호와 api key 번호 등을 적어 놓았다. 이 내용을 깃허브에 공유했다가는 내 정보는 다 털리게 될 것이다. 2. DS_Store file your local settings / your user preferences a settings files that save certain things like how you like your icons be arranged in a particular project folder. ls -a 로 숨겨진 .. 2021. 10. 24. 내가 만든 xcode 파일을 gitignore 하기 내가 만든 xcode 파일을 gitignore 하기 깃허브에서 github/ gitignore 에 들어가면 이미 만들어 놓은 swift, objective C를 볼 수 있다. 클릭한 후 들어가서 내용 복사한 후 내 gitignore 파일 안에 붙여넣기 한다. #은 comment *은 해당 익스텐션 전부 ignore 해라. 2021. 10. 24. 깃허브 a personal access token 에러 해결하기 | remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 내 컴퓨터 커밋된 파일을 깃허브에 올릴 때 아래와 같은 에러가 발생한다. 2021년 8월 13일 이후 personal access token 이 필요하다는 내용이다. remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. [ 1 ] 사용자 정보 아이콘을 누른다. 맨 오른쪽에 있는 동그란 버튼 아이콘을 눌러 아래에 있는 setting을 누른다. [ 2 ] Developer settings를 누른다. [ 3 ] Personal access tokens 를 누르고 Generate new token을 누른다. [ 4 ] Note에 토큰 이름을 입력하고 (.. 2021. 10. 22. 이전 1 ··· 7 8 9 10 11 12 13 ··· 18 다음
