IT (197) 썸네일형 리스트형 [멋사10/Session] 2. Github 블로그 개설하기 220329 화 1. 깃블로그 개설하기 오늘 세션은 깃허브 블로그를 만드는 날이다! 맨날 깃허브 블로그를 만들어야겠다 만들어야지.. 했었는데 이번 세션을 통해 만들게 되었다! vuepress를 이용해 만들었다! https://parkjju.github.io/vue-TIL/vuepress/start.html#vuepress-%E1%84%87%E1%85%A2%E1%84%91%E1%85%A9 Vuepress 시작하기 | Today I Learned Static Site Generator 뷰프레스는 Vue 기반의 정적 사이트 생성기입니다. 하나부터 열까지 페이지를 직접 제작할 수도 있지만 현실적으로 어려운 경우가 많기 때문에 다양한 장점을 갖는 정적 사이트 parkjju.github.io 위의 운영진님이 블로그.. [생활코딩/React] 21.delete 구현 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. delete 구현 //App.js 👉🏻받아온 _mode값이 'delete'일 때 삭제하는 코드를 짜자 window.confirm을 통해 다시 한 번 더 확인을 한다. 만약 '확인'을 눌렀다면 contents state를 복제한 리스트를 돌리면서 현재 선택한 리스트(selected_content_id)와 id가 같다면 splice를 이용해 삭제한다. mode state는 'welcome'으로 contents state는 아까 삭제한 리스트 _contents로 바꿔준다. 🐰length를 lentgh로 오타내서 10분동안 해맸다ㅜㅜ [생활코딩/React] 20.update 구현 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. update 구현 내가 선택한 요소를 넘겨보자 //App.js getReadContent(){ var i = 0; while(i < this.state.contents.length) { var data = this.state.contents[i]; if(data.id === this.state.selected_content_id) { return data } i = i + 1; } } getContent(){ var _title, _desc, _article = null; if(this.state.mode === 'welcome') .. [생활코딩/React] 19.create 구현 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. 소개 📌CRUD: Create Read Update Delete 지금까지는 Read만 해왔기 때문에 나머지 CUD를 해보자! create 버튼을 누르면 TOC 부분에 리스트가 하나 더 생기는 기능을 만들것이다! 2. mode 변경 기능 //Control.js import React, { Component } from 'react'; class Subject extends Component { render () { return ( create update ); } } export default Subject; 👉🏻create, upda.. [생활코딩/React] 17. 컴포넌트 이벤트 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. 컴포넌트 이벤트 만들기 1 //App.js return ( ); 👉🏻Subject component에 onChangePage라는 이름의 이벤트를 만들어 props로 전달한다. 이 이벤트를 실행하면 이벤트에 설치한 함수를 호출한다. //Subject.js class Subject extends Component { render () { return ( {this.props.title} {this.props.sub} ); } } 👉🏻Subject component에서 onChangePage 이벤트(이벤트가 컴포넌트로 넘어올 때는 함수의 .. [생활코딩/React] 16. 이벤트 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. 이벤트 state props 그리고 render 함수 state 값에 따라 화면을 다르게 출력해보자! 💡리액트는 state 값이 변경되면 render 함수가 다시 호출된다. render는 HTML대로 화면을 다시 그리는 함수라고 생각하면 된다. //App.js this.state = { mode: 'welcome', subject: {title: "WEB3", sub: "world wide web!3"}, welcome: {title: "Welcome", desc: "Hello, React!!"}, contents: [ {id: 1,.. [생활코딩/React] 15. State 참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 1. State 소개 👉🏻props는 사용자가 component를 조작할 수 있는 중요한 존재이다. ex) 전자 제품의 버튼 👉🏻state는 component 내부적으로 사용되는 것으로 사용자가 알 필요도 없고 알아서도 안 되는 것이다. ex) 전자 제품의 전선 2. State 사용 👉🏻현재는 props를 통해 값을 넘기는 하드코딩 상태이다. constructor(props) { super(props); } } 👉🏻어떠한 컴포넌트가 render될 때 어떠한 값을 먼저 초기화해야 한다면 그 내용을 constructor에 작성한다. const.. [010/Django] secret.json | API KEY 숨기기 1. 문제상황 2022.04.19 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Naver API | 블로그, 카페 글 크롤링 해오기 이전 포스팅을 보면 Naver API KEY를 view에서 그냥 변수에 할당해 사용했다. 하지만 API KEY를 이렇게 관리하면 안 된다! 다른 사람이 악의적으로 이용할 수도 있기 때문이다. 그러므로 이러한 현상을 막기 위해 API KEY를 secret.json으로 관리하는 법을 알아보자! 2. API KEY 관리 secret.json 파일 만들기 👉🏻먼저 secret.json 파일을 만든다. { "Naver_id": "본인 API KEY", "Naver_secret": "본인 SECRET KEY" } 👉🏻이러한 형식으로 API KEY를 적어준다... 이전 1 ··· 8 9 10 11 12 13 14 ··· 25 다음
