본문 바로가기

분류 전체보기

 (108)
[Bootstrap-Vue]게시판 만들기 - component 맨 위부분에 있는 Header는 내가 공지사항을 눌렀던 자유게시판을 눌렀던 어떤 페이지로 이동했던간에 항상 그 위치에 있어야한다. 그러므로 header는 라우터로 해주는것이 아니라 App.vue 부분에다 component를 등록해준다! template안에서 위에다 컴포넌트 태그 를 넣어준다. router-view가 URL의 값에 따라 갱신되는, 해당하는 화면을 보여주는 영역이기 때문이다. header는 가장 위에서 보여줘야하기 때문에 제일 위해 태그를 넣어준다.
[Bootstrap-Vue]게시판 만들기 - 게시판 목록 만들기(b-table과 fields) board.vue 파일을 하나 만들어서 bootstrap-vue에 있는 b-table를 가져왔다!! 이제 이걸 방금 만든 데이터를 보여줄 수 있도록 수정하쟈 근데 굳이 보여줄 필요도 없는 요소들이 보인다. 이걸 보여주지 않도록 해주자! 이때 사용하는것이 Fields 속성!!!!!!!!! 내가 출력하길 원하는 데이터만 보여줄 수 있도록 fields를 이용한다. content_id, title,create_at만 보여주도록 한다. 근데 여기서 객체 속성의 이름을 그대로 사용하는것이 좋아 보이진 않다. 컬럼 명을 변경해보쟈!! 실제 속성의 이름은 key로, 보여주고 싶은 이름은 label로 해준다.
[Bootstrap-Vue] 게시판 만들기 - bootstrap세팅하고 header만들기 부트스트랩을 이용해서 게시판을 다시 만들어보쟈 프로젝트를 새로 생성하고, https://bootstrap-vue.org/docs BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org Bootstrap-vue사이트를 참고하면서 설치해 주기! npm install vue bootstrap-vue bootstrap 잊지말기!!!!!! Header 만들기 b-navbar-toggle : 화면이 기준보다 작아졌을 때 메뉴대신 보여주는 버튼(토글)이 뜬다. b-collapse : 화면이 기준보다 작아지면 메뉴들을 안보이게 해준다. 그럼 화면이 작아지는 기준을 정하는 방법은?!! 맨 앞에 있는 b-navbar에 있는 t..
vue를 이용해 게시판 기능 만들기 오랜만에 vue를 이용해서 프로젝트를 하나 만들어 보려니까 가물가물해서 유튜브 강의를 보면서 빠르게 복기시켜보려 한다! '개린이르라나' 님의 vue.js로 게시판 만들기를 보면서 만들었다. vue-cli를 이용해서 프로젝트를 생성했더니 기본적인 틀은 자동으로 만들어준다. components 폴더 게시판의 메인(루트)이 될부분! 게시글 목록을 보여준다. write()는 새로운 글을 작성할 메소드. path가 create로 향하도로 해준다. detail()는 상세페이지. 어떤 글을 클릭해서 그 글의 상세페이지를 보여주기 위해 index를 인자로 보내준다. write메소드는 인자전달 없이 create페이지로 이동하기 때문에 path를 사용하였고, detail메소드는 인자를 전달하기 때문에path가 아닌 nam..
리스트 렌더링 / v-for v-for = "(item in items)" 배열을 기반으로 리스트를 렌더링 할 수 있다. 여기서 items가 원본 데이터의 배열이며 item은 반복되는 배열 요소의 별칭이다! v-for="(value, index) in data " 두번째 전달 인자로 index를 사용할 수 있다. v-for에 key를 사용하는 편이 좋다!! Key값으로 v-for로 인해 반복되어 렌더링이 된 태그를 기억할 수 있도록 해주기 때문에 사용하는 편이 좋다! https://kr.vuejs.org/v2/guide/list.html 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org
vue 설치하기 / 오류 (해결 못함) 1. npm install vue 2. npm install -g @vue/cli 3. vue init webpack my-project (my-project부분에 본인의 프로젝트 이름 쓰기) 일단 잘 됐다고 치고!!!!ㅋㅋㅋ........ 그럼 이름도 입력하라고 하고 router를 사용할것인지~ 등등 물어보는데 각자 맞게 입력하면 된다. 이제 프로젝트를 열어주고 npm run dev 해주면 로컬 호스트가 뜬다. 아까 문제된것 가져와서ㅋㅋㅋㅋ vue를 분명히 설치했는데..?! vue가 없단다^^ㅋㅋ큐ㅠㅠㅠㅠㅠ 찾아보니까 환경 변수의 path를 설정해주면 해결할 수 있다고 해서 C:\User\{사용자이름}\AppData\Roming\npm 이 한줄만 추가해주면 해결 할 수 있다고 한다. 그래서 해줬는데....
사용자 비밀번호 암호화하기 - bcrypt postman에서 보낸 아이디와 비밀번호를 몽고디비에서 받아보면, 비밀번호가 그대로 노출이 되어서 보내지는 것을 알 수 있다. 관리자도 사용자의 비밀번호를 알 수 없도록 암호화를 해줘야한다. 이때 사용하는것이 Bcrypt! 먼저 bcrypt를 인스톨해준다. Npm install bcrypt --save 레지스터 라우터로 가기 유저정보들을 데이터 베이스에 저장하기 직전이 암호화할 타이밍이다! bcrypt 사이트 보면서 진행 할것 https://www.npmjs.com/package/bcrypt Technique 1 : 먼저 salt를 생성하고 생성한 salt를 이용해서 비번을 암호화 해야한다. 그럼 먼저 salt를 생성해야함! saltRounds는 salt가 몇글자인지 정해주는것. saltRounds를 1..
비밀정보 보호하기 - DB 비밀번호 보호하기 위 사진처럼 DB를 연결하였는데, 이대로 git에 올린다면 아이디와 비밀번호가 그대로 노출될 것이다. 파일 하나를 만들어서 그곳에 DB URI를 써주고 가져올 수 있도록 한다. dev.js : 이 파일안에 DB URI를 써주고 local 환경에서 가져올 수 있도록 한다. ( development / 개발모드! ) prod.js : 웹사이트 Heroku 에서 DB URI를 가져올 수 있도록 한다. ( production / 배포후! ) heroku 사이트에다가 URI를 저장해서 여기서 가져올 수 있도록! heroku에서 관리해준다. 그래서 local환경에서와 production 환경에서 가져올 수 있도록 나누어서 생각 해줘야 한다. key.js는 환경 변수 process.env.NODE_ENV을 이용해 내..

티스토리툴바