본문 바로가기

전체 글364

[React] 리액트 탄생 배경 | 웹앱 | 리액트 컨셉 4가지 리액트는 2013년에 처음 생겼다. 그 전엔 html, css, js로 UI를 만들었다. 그리곤 이 언어들이 서버와 연결이 되었다. 하지만 Fire Fox, IE, Chrome, Safari 많은 브라우저들이 있는데 각 브라우저마다 다른 자바스크립트 코드를 짰어야 했다. 그래서 제이쿼리가 나오게 된다. 쉽게 document object model을 이용해 이 모든 브라우저를 사용할 수 있게 되었다. dom은 화면 오른쪽 클릭해서 inspect--> Elements를 보면 나오는 html 태그들이 dom이다. 자바스크립트는 이 element를 업데이트나 삭제하는 등 modify 할 수 있게 되었다. jQuery -> Backbone.js 라이브러리들이 점점 커지면서 자바스크립트 파일을 정리할 수 있는 백본.. 2022. 2. 11.
프리랜서 잡 | 해외 사이트 1. 포트폴리오 만들기 2. 날 신뢰해 주는 클라이언트 리스트 만들기 3. 실제 프로젝트로 실제 사람들과 협업하기 4. 처음부터 돈 잘 받으려하지 말고 포트폴리오 만든다고 생각하고 돈 못받아도 시작하기 5. 사이트 Fiverr Upwork Guru Freelancer oDesk 2022. 2. 11.
[Authentication] Level 5 Passport.js 이용해 Cookies, Sessions 설치 | serialize, deserialize 란? Passport를 이용해서 쿠키와 세션 심는 법에 대해 알아보자. 1. npm으로 다운받기 npm install passport passport-local passport-local-mongoose express-session passport https://www.npmjs.com/package/passport passport-local https://www.npmjs.com/package/passport-local passport-local-mongoose https://www.npmjs.com/package/passport-local-mongoose express-session (express-sessions 아님) https://www.npmjs.com/package/express-session 기.. 2022. 2. 3.
[Authentication] Cookies and Sessions | Passport.js cookies 아마존에서 사고 싶은 물건을 카트에 넣고 체크 아웃을 안한 채, 구글로 화면 전환을 했을 경우 크롬 settings에 들어가서 All cookies and site data에 들어가면 아마존 쿠키가 생겨난 걸 볼 수 있다. csm-hit에 들어가면 제품 아이디를 저장하고 있다 브라우저를 모두 끄고, 다시 아마존으로 가도 내 카트에는 물건이 그대로 있다. 하지만 쿠키를 지우고 다시 아마존에 방문하면 카트에 있는 물건은 기억하지 못하고 지워진다. 아마존이 아닌 페이스북으로 가더라도 내가 검색한 제품들이 광고로 뜬다. 내 브라우저에서 아마존 서버에 get request를 보내면 아마존 서버는 내 브라우저가 아마존 웹사이트를 랜더할 수 있도록 html,css,js 파일을 보냄으로 response를.. 2022. 2. 3.
패키지 에러 발생시 깃에서 확인하는 법 예를 들어 bcrypt 패키지를 다운 받는 중 에러가 났다면 npm bcrypt 해당 페이지에 들어가면 코드가 호스트된 github 주소가 있다. 해당 깃허브로 이동하면 Issues 버튼이 있다. issues 페이지에 들어가면 bcrypt에 관련된 이슈들에 관해 대화를 할 수 있는 공간이다. 이 곳에서 이미 있는 같은 이슈를 찾거나 새로 올려 문제를 해결해 본다. 2022. 2. 2.
Node.js 이전 버젼으로 옮길려면 | NVM 새 최신 버젼을 다운 받았지만 버그가 많아 이 전 버젼으로 다시 돌아가고 싶다면 NVM을 사용한다. https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod.. 2022. 2. 2.
leetcode로 알고리즘 풀이 처음 시도 leetcode로 알고리즘 문제를 풀어야 한다기에 처음으로 문제 풀기를 시도해 보았다. 가장 기초 1번 문제를 들어갔다. 그냥 두 수를 간단하게 더하는 건가 싶었는데 아닌 것같다. 영어로 문제 자체를 바로 이해할 수가 없었다. 찬찬히 살펴보니 더 복잡한 문제이다. indices의 단어 뜻을 모르겠고, 가장 쉽다는 문제인데 일단 빨리 문제 파악부터 되지 않는다. 취업까지는 아직 먼 길이라는 생각이 들었다. 앞으로도 공부해야할 것이 많구나. 알고리즘은 일단 덮고 자바스크립트 기초부터 다시 찬찬히 봐야할 것같다. 그리고 나중에 다시 와야겠다.... 2022. 1. 29.
HTML URL Encoding Reference - 띄어쓰기 있으면? HTML URL Encoding Reference https://www.w3schools.com/tags/ref_urlencode.ASP jack Bauer 찾기 localhost:3000/articles/jack%20Bauer 2022. 1. 26.
REST API까지 끝. 프론트 엔드로 진로 결정 유데미로 안젤라유님의 풀스택 강의를 듣고 있다. 이제 어느 덧 RESTful API까지 다 들어서 이제 Web design, Authentication security, React 이렇게 3개의 강의를 남겨 놓고 있다. 강의도 거의 끝나가기에 이 다음에 뭘 하지? 어느 분야를 더 파야할까 라는 고민을 했다. 그래서 결정한 것은 프론트엔드쪽을 파는 것이었다. 첫 번째 이유는 내가 앞으로 개인적으로 IOS 앱을 만들어보고 싶은데 이게 프론트엔드를 하면 도움이 된다고 들었다. 두 번째 이유는 지금 현 상황에 프론트 엔드 쪽이 취업에 더 가까이 있는 것 같아서다. 누군가에게는 당연해 보일 수 있겠지만 난 이제야 깨닫게 되었다. 지금하고 있는 풀스택 코드도 프론트 엔드가 기본적으로 알아야하는 사항이고 백엔드 부분.. 2022. 1. 25.
[REST API 만들기 1] 데이터 베이스 만들기 | ROBO3T 위키피디아 스타일의 API를 만들어보자. 몽고디비 데이터 베이스를 사용할 것이고 ROBO 3T를 많이 사용한다. ROBO 3T는 shell이 있는 MongoDB GUI 이다. ROBO 3T를 다운로드 한다. https://robomongo.org/ 프로그램이 시작되면 팝업창에 있는 create를 누른다. 디폴트 값이 설정 되어 있는데 그냥 save 누른다 혹시 에러 메세지가 뜨면 mongoDB 서버가 돌아가고 있지 않아서다. 터미널에 가서 mongod 를 실행한다. 그러면 화면에 해당 주소에 있는 데이터베이스가 나온다. 주소가 로컬 호스트로 되어 있어 내 컴퓨터에있는 데이터 베이스가 나온다. 새로운 데이터 베이스를 만들어보자. New Connection -> Create Database를 누른다. 이름.. 2022. 1. 20.
Node.js부터 데이터베이스까지 복습 끝. 이제 REST API 시작했지만.. 벡엔드 처음으로 돌아가 Node.js부터 express, API, Mysql, MongoDB, Mongoose.. 등을 다시 복습했다. TO DO LIST 앱과 블로그를 만들어 보는 과정이기도 했는데 다시 보니 처음보다는 훨씬 이해가 갔다. 하지만 디테일에서 완벽히 이해가 가고 능숙하게 쓸 수 있는 건 아니다. 다시 시간이 지나고 나서 보면 기억이 가물가물 해질 수 있을 것같다. 어쨌든 이제는 REST API에 들어간다. 왜 이 것을 써야하는 지 정확히 이해 가지는 않는다. 그래서 생활코딩님의 REST API 강의를 찾았는데 이 강의를 보려면 HTTP 강의를 먼저 보고 오라고 한다. 그래서 이제 HTTP 강의 듣기를 시작하려고 한다. 이 REST API가 끝나고 보안, 웹디자인 강의를 보고 나면 드텨 R.. 2022. 1. 18.
HTTP란? HTTPS | cache | cookie | web storage | proxy 기본 개념 Web의 4가지 요소 웹이 세상에 처음 나왔을 때 크게 4가지 요소로 이루어져 있었다. 1 HTML - 웹 페이지 만듬 2 URL, URI - 원하는 웹페이지에 방문할 수 있도록 하는 주소 체계 3. Web Browser, Web Server - 웹페이지를 주고 받는 소프트웨어 4. HTTP - Web Browser와 Web Server가 통신 할 때 통신 규칙 웹이 아무리 복잡해도 이 기본 구조를 가지고 있다. HTTP 알아보기 Hyper Text Transter Protocol 처음엔 매우 단순했으나 지금은 HTML 파일 뿐 아니라, 이미지, 오디오, 동영상등 다양한 멀티 미디어 파일을 전송해야하기에 성능, 보안, 안정성을 업그레이드 시켜와야 했고, 지금은 인터넷에서 가장 중요한 통신 규칙이 되어 이.. 2022. 1. 18.
SQL INNER JOIN products 테이블이 있다. customers 테이블이 있다. 주문 내역을 담은 orders 테이블을 하나 더 만들어 보자. orders 테이블 안에 데이터를 집어 넣었다. 테이블 첫 번째 줄을 보면 여기서 customer_id 에서 1이라서 Jaeksuk Yoo 고객이 product_id 가 2 이므로 pencil을 구매한 것을 알 수 있다. 이렇게 customer_id 와 product_id가 foreign key 이다. 여기서 고객 이름과 제품명을 번호로 받아보는 것보다 출력할 때는 실제 이름과 제품명이 나오도록 해보자. 이 때 필요한 것이 JOIN이다. JOIN은 2개 이상의 테이블을 합쳐서 보여주는 것이다. https://www.w3schools.com/sql/sql_join.asp INNE.. 2022. 1. 8.
MYSQL 제약조건 알아보기 | NOT NULL | UNIQUE 등 이메일을 입력하는 자리에 숫자를 입력하거나 이름 입력란에 백 글자를 입력하는 사람들이 있을 수 있다. 이런 경우를 대비해 입력시 제약을 걸어둬서 더 정확하고 확실한 데이터를 입력받을 수 있다. 데이터 타입을 제한하고 테이블 전체에 제약을 걸어 둘 수 있고, 각 column에 걸 수도 있다. 자주 사용되는 MYSQL Constraints NOT NULL 빈 칸으로 두면 안된다, 꼭 입력하라는 뜻이다. 보통 table 만들 때 "id", "first name", "last name" column 등을 빈 칸으로 두면 안되니 NOT NULL로 설정한다. not null vs null: mysql 기본은 null로 되어있다. null은 데이터를 입력하지 않은 것은 빈 칸을 의미한다. 고객에게 전화번호를 입력하라.. 2022. 1. 7.
mysql CRUD MySQL 구조 데이터베이스 서버 > 데이터베이스(스키마) > Tables(표) mysql을 다운 받은 것은 데이터베이스 서버를 다운받은 것이다. MySQL 자체 보안 체계 권한 mysql에 여러 사람 등록 할 수 있다. John은 여러 스키마 모두에 읽고, 쓰고, 지울 수 있다 Sam은 테이블 하나만 제어 가능하다. mysql -uroot -p root은 관리자이기에 모든 권한이 열려있다. 별도의 이름을 만들어서 사용하다가 특별한 일이 있을 때만 root로 들어가는 것을 권장한다. MySQL 특징 1. 대소문자 구분 안함 mysql은 대소문자를 구분하지 않는다. select / SELECT 로 쓰든 상관이 없다. 2. 세미콜론 마지막에 세미콜론을 붙여주는 것은 서버에 SQL명령문 한 줄 이상을 실행시킬.. 2022. 1. 6.
맥에서 mysql 다운받는 법(Monterey OS) 1. homebrew를 다운 받는다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. homebrew repository를 업데이트 한다. brew update 3. brew를 이용해서 mysql을 다운받는다. brew install mysql brew services start mysql 4. 비밀번호를 설정해준다. mysql_secure_installation 5. mysql을 시작한다. mysql -u root -p 비밀번호를 입력하라고 나오는데 비밀번호를 입력한다. mysql로 터미널 내용이 바뀌면 성공 6. mysql을 끝낸다. \q quit 둘 중에 아무거나 입력한다.. 2022. 1. 5.
[CSS] sign-up 페이지에서 z-index 활용 부트스트랩에서 아래와 같은 Sign-up 페이지를 가져왔는데 코드를 그대로 복사를 한 거 같은데 이상하게 버그가 발생했다. 문제점은 입력하려고 빈칸을 클릭하면 파란색 테두리의 아랫 부분이 씹혀 있는 것을 볼 수 있다. First Name 클릭시 Last Name 클릭시에도 하지만 마지막 이메일 입력은 모든 테두리 다 잘 보인다. css에는 아래와 같은 코드가 이미 있는데 z-index가 적용이 안되고 있는 것은 아닐까 하는 생각이 들었다. 그래서 html에서 input에 각각 div를 씌워 class="form-floating"을 적어주고 css에서는 이 div에 position:relative;를 주어 각 div에 z-index가 적용되도록 했다. 다행히 문제가 해결되었다. 이제는 클릭시 해당 div가.. 2021. 12. 15.
To Do List 앱을 몽고디비와 헤로쿠에 올리는 것까지 해보았다. Nodo.js 로 To Do List 앱을 만들고서 내 컴퓨터 안에 서버와 데이터 베이스를 두었던 것을 이제는 외부로 빼서 서버는 헤로쿠, 데이터 베이스는 몽고디비로 옮기는 방법을 배웠다. 하라는 대로 했기에 앱이 헤로쿠에서 작동이 되긴 했지만 나 혼자 해보라고 한다면 아직은 뭔가 뭔지 복잡하고 아직 공부가 되지 않은 상태이다. 이 다음 강의는 이 전에 만든 블로그를 이제 헤로쿠와 몽고디비에 올려보는 것인데 내 실력으로는 아직 할 줄 모를거기 때문에 이 전 강의를 다시 보기로 했다. 백엔드 시작부터 다시 찬찬히 봐야할 것같다. 다시 공부하려니 이 걸 언제 또 보나 하는 생각이 든다. 강의를 다시 보며 막상 내가 해볼 때 얻는게 많아서 하긴 해야한다. 실력 빨리 느는 법을 보면 각 언어에서 나오는 문서로 .. 2021. 12. 3.
[ToDoList DB 7] 대소문자 상관없이 주소창에 같은 내용 나오기 주소창에 home, Home 을 따로 인식하고 있다. 이 건 Lodash를 이용하면 편하다 npm으로 lodash를 다운 받는다. Lodash Doc에서 Capitalize를 보면 그럼 app.js에서 lodash를 불러온다. 이 코드를 이렇게 _.capitalize()로 감싸준다. 이미 Home, home으로 따로 저장된 아이템들이 있으므로 모든 데이터를 삭제 시킨다. Work 대문자 일 때 work 소문자 일 때 Work 일 때의 아이템도 들어가 있다. 대소문자 상관없이 아이템이 모아진 것을 확인 할 수 있다. 2021. 11. 28.
[ToDoList DB 6] 데이터 삭제- 해당 페이지에 있는 데이터 삭제 지금까지의 코드로는 해당 페이지에서 아이템을 지우면 메인인 "Today"로 이동만 되고 막상 해당 아이템은 지워지지 않는다. cleaning rooms를 체크박스에 체크해서 지웠는데, 바로 "Today" 화면으로 이동을 해버린다. 근데 다시 home으로 돌아가면 그 아이템은 지워지지 않고 아직 살아있다. 이 문제를 해결해 보자. list.ejs에서 delete가 일어나는 form은 다음과 같다. method="post" post request를 action="/delete" /delete route로 보내고 input에 설정된 내용을 전달pass over한다. value:"" 는 유저가 지우기를 원하는 아이템의 id이고 onChange="this.form.submit() " 체크박스는 submit 버튼이.. 2021. 11. 27.
[ToDoList DB 5] 해당 페이지에 맞게 아이템 추가 시키기 Adding New Items to the Custom To-Do Lists 타이틀이 coding인 TO-DO LIST에 내용을 입력하여도 입력한 내용은 메인 페이지인 Today에 추가가된다. 이유는 list.ejs에서 + 사인을 누르면 홈으로 가도록 설정되어 있기 때문이다. 그리고 post로 내용들어오면 redirect도 홈으로 가게 설정되어있다. 여기서 각각의 타이틀로 입력한 내용이 가도록 해보자. 할 일을 입력하고 나서 submit인 + 버튼 눌렀을 때 의 name 뿐 아니라 value도 같이 서버로 이동시킨다. 이 때 value의 이름을 타이틀과 같이 맞춰 준다. 이 list 타이틀을 담을 변수를 하나 만든다. 만약 리스트의 타이틀이 메인 페이지인 "Today"인지 아닌지에 따라 다르게 명령어를 .. 2021. 11. 26.
[ToDoList DB 4] Work 페이지 만들기 | Express Route Parameters 이제 오늘 할일 리스트 뿐만 아니라 work list 도 나오게 하려면 어떻게 해야할까? 지금은 아무 것도 연결된 것이 없어서 에러가 난다. home으로 갈려고 localhost:3000/home을 눌렀을 때 home 관련 할 일이 뜨게하려면 어떻게 해야할까? express는 route parameter를 이용해 dynamic route들을 만들어서 이를 해결 할 수있다. get("/work") route를 지우고, Express Route Parameters를 만들어 보자. get과 post route 사이에 적어본다. 주소창에 home을 쓰면 콘솔에도 그대로 나온다. work를 쓰면 그대로 나온다. 라우트 파라미터와 기본 멘트를 담을 새로운 스키마와 모델을 만든다. items:[] array에 담는다.. 2021. 11. 25.
[ToDoList DB 3] 아이템 지우기 To Do List 만들기를 하고 있다. 할 일을 완료해서 체크를 하면 줄이 그어지며 지워져하는데 아이템이 지워지지는 않는다. 아이템 지우는 작업을 해보자. 1. list ejs에서 이미 있는 div를 form으로 감싼다. 2. 브라우저에서 보면 아이템 줄이 안맞는데 이 것은 방금 만든 새 form이 이미 설정된 form에 css 적용되어서 그렇다. 클래스를 설정하여 아래에 있는 form 만 적용되게 한다. 체크 박스가 있는 form에서 delete route로 가게 설정한다. 3. 그리고선 app.js에서 app.post()로 delete route를 만들어 form에서 보낸 내용을 받을 수 있게 한다. list.ejs에서 체크박스 form은 submit 버튼이 없다. 대신 체크 박스를 클릭하면 지워지.. 2021. 11. 25.
[ToDoList DB 2] DB에 아이템 입력하기 To Do List 서버와 몽고디비 데이터 베이스를 연결하는 작업을 하고 있다. 앞 포스트에서 몽구스를 이용해 몽고디비를 연결하고, 데이터 베이스에서 데이터를 찾아서 EJS 파일을 렌더하는 것을 해보았다. 그래서 아래 화면까지 만들었지만 할 일을 입력하면 items 가 정의 되지 않았다는 에러가 난다. 1. 위의 post()로 들어오는 데이터가 데이터 베이스에 저장이 되지 않기 때문이다. post()에 들어오는 데이터를 데이터 베이스에 저장해야 한다. post에 이미 입력된 array에 저장하는 내용을 지운다. list.ejs의 form에서 이름을 가져와서 다음과 같이 데이터 베이스에 저장을 한다. mongosh에 들어가서 데이터베이스에 저장되었나 확인하기 get("/")으로 가서 실행되게 redirec.. 2021. 11. 25.
[ToDoList DB 1] To Do List에 데이터 베이스 연결 | DB 데이터 ejs 로 렌더링 기본 시작 코딩 1. 터미널에서 다운 받은 파일로 이동한다. 2. 터미널에서 package를 다운 받는다. npm i 3. line14~15를 지운다. 더이상 array로 아이템을 담을 필요없이 데이터베이스에 담을 것이다. 데이터 베이스 연결하기 4. mongoose를 실행한다. npm i mongoose 5.mongoose를 불러온다 6. mongoose와 연결하고, 새로운 database를 만든다. 주소 뒤에 붙은 todolistDB가 데이터베이스 이름이다. 스키마, 모델 만든 후 데이터 입력하기 7. schema 만들기 field가 하나 밖에 없음 8. mongoose model 만들기 / schema를 바탕으로 mongoose.model("singularCollectionName", schemaN.. 2021. 11. 25.
[Mongoose] DELETE DELETE https://mongoosejs.com/docs/api/model.html#model_Model-deleteOne deleteOne id로 지우기 blueberries를 지워보자. 1. 어디 지울지 선택 2. 에러 메세지 blueberries가 사라졌다. name으로 지우기 콘솔에서 Peaches 사라짐 mongosh에서 Peaches 사라짐 deleteMany() name이 John으로된 데이터는 모두 지워진다. 콘솔에서 성공 메세지가 떴다. name이 John으로 된 데이터들이 모두 지워졌다. 2021. 11. 21.
[Mongoose] Update Model에 보면 querying, updating, deleting에 대한 내용이 나온다. https://mongoosejs.com/docs/api/model.html UPDATE https://mongoosejs.com/docs/api/model.html#model_Model.update filter: 어떤 것을 업데이트 할지 doc: 무엇을 추가할지 [callback]은 익명함수로 에러인지, 성공인지 콘솔에 메세지 나오게 하기 name 넣는 것을 깜박했는데 집어넣을려면 어떻게 해야할까? 이 때 update이 필요하다. 1. 어디에 2. 무엇을 업데이트 할지 3. 콜백 에러 메세지 mongosh에 추가된 내용이 나온다 맨 마지막에 붙는데 순서는 중요하지가 않다. 나중에 property를 원할 때 fr.. 2021. 11. 21.
[Mongoose] Data Validation | 제약 걸기 데이터 입력해 들어올 때 validation 를 만들어 놓으면 참 편해진다. Validation이란? nosql은 일정한 규격없이 데이터 베이스에 모든 데이터를 다 입력 받을 수 있는데, 이게 나중에 엄청 관리하기가 힘들어진다. 그래서 validation을 이용해 데이터를 가려받을 수 있게 한다. 미리 입력받을 데이터에 프리셋을 주는 것이다. 예를 들어 나이를 입력받는데 Number로만 validation 해놓으면 10,000으로 입력해도 저장이되어버리니 Min 1 Max 120 이렇게 preset을 해놓으면 데이터를 가져 받을 수 있다. 데이터의 validation 넣는 법 https://mongoosejs.com/docs/validation.html 들어오는 데이터의 조건을 코드로 일일이 작성할 필요.. 2021. 11. 21.
[Mongoose] READING | find() | close()연결끊기 native mongodb driver로 데이터 검색할 때는 아래와 같은 코드로 작성하였다. 하지만 이제는 이렇게 긴 코드는 필요없다 Mongoose로 데이터 찾기 mongoose는 간단하다 find() 함수를 사용하고, 콜백 함수까지 받을 수 있다. 콜백함수의 파라미터를 보면 파라미터1 은 err를 넣고 파라미터2 는 검색하고자 하는 내용을 넣어준다. fruits로 collection 안 모든 데이터가 나오게 했다. 에러가 없으면 검색 내용이 나온다. 나오는 데이터들은 array 안에 들어가 있는 자바스크립트 오브젝트이다. dot notation을 이용해서 이 데이터들의 properties를 활용할 수 있고, 2개의 다른 method를 보낼 수 있다. pass around. fruit은 각각 prope.. 2021. 11. 19.
[Mongoose] 몽구스 시작하기 | INSERT | INSERT MANY 지금까지 mongodb 데이터 베이스에 데이터 입력하는 법을 배웠다. 이 mongodb 데이터 베이스를 서버와 연결하려면 2 가지 옵션이 있다. 첫 번째는 그냥 몽고디비(mongodb native driver)를 사용하는 것이고, 두 번재는 몽구스(mongoose)를 사용하는 것이다. 많은 개발자들이 몽구스를 더 선호한다. 이유는 몽구스 코드가 더 쉽고 간단하기 때문이다. 몽구스 문서보기 https://mongoosejs.com/ native mongodb driver로 몽고디비와 서버 연결하기 (비추) native mongodb driver를 사용해서 mongodb와 서버와 연결하려면 아래와 같은 코드가 필요하다. 여기서 db를 입력하는 코드들을 아래 입력한다. 입력 코드는 생략하도록 하겠다. 그럼 이.. 2021. 11. 19.

티스토리툴바