Age of Discovery

props는 자식 컴포넌트가 부모 컴포넌트의 State를 편하게 사용하기 위해 고안된 기능이다. let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['1992년 6월 15일', '1992년생 4월 10일', '1997년생 1월 13일']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) 전편과 마찬가지로 역시나 상단의 배열들을 State로 저장해준 후 자식 컴포넌트를 하나 만들어준다. let Modal = () => { return( 선수 이름 생년월일 주사용발 ..

map함수는 사실 react에 국한되는 내용은 아니다. JS에 있는 함수를 그대로 react에 적용시킨것 뿐 let [player_name, setplayer_name] = useState(['살라', '마네', '디아즈']) let [player_age, setplayer_age] = useState(['92년생', '92년생', '97년생']) let [footed, setfooted] = useState(['Left-Footed', 'Both-Footed', 'Right-Footed']) State로 배열을 생성해놓은 후 { player_name.map(function (a, i) { return ( { a } {player_age[i]} {footed[i]} ) }) } map함수는 배열내의 요소..

todolist를 대부분 로컬스토리지에 저장해서 배열비교로 클라이언트가 볼 수 있게 구현하는거같은데 ​ 로컬스토리지 하위호환인 쿠키를 사용해보면 어떨까 싶어서 도전해봤다. ​ 구글링을 아무리해봐도 투두리스트를 쿠키로 구현하는 사람은 없는것 같고 왠지 도전하는 사람이 내가 최초인거 같아 흥분된다. ​ 아직 만드는중이지만 로컬에 저장하는법보다 쿠키로 저장하는 방법 자체가 조금 까다로워서 생각보다 시간이 걸린다. ​ 조급해 하지말자 급한불부터 끄자

html태그를 덩어리로 묶은 함수를 component라고 하는데 이 component를 조작해 토글버튼으로 켰다 껐다 해보자 let Modal = () => { return( 제목 날짜 상세내용 )} 이렇게 생긴 component를 생성했다. function App() { let [modal, setmodal] = useState('닫힘'); return ( { setmodal(modal == '닫힘' ? modal = '열림' : modal = '닫힘') }}>모달 스위치 { modal == '닫힘' ? null : } )} State로 modal을 생성하고 '닫힘' 문자를 저장한다 버튼을 생성 후 setmodal함수로 modal이 '닫힘' 일때는 버튼 클릭시 '열림'문자로 바꿔주고 '닫힘'이 아닐때는..

​ 이번에 프리미어리그 공동득점왕을 수상한 '살라'와 '손흥민'을 배열로 저장해 state로 조작해보겠다. let [Top_player, setplayer] = useState(['살라', '손흥민']); 버튼을 만든 후 { let copy = [...Top_player] copy[0] = copy[1] setplayer(copy) }}>눌러봐 버튼 속성으로 onClick속성을 넣고 화살표 함수안에 지역변수로 배열을 새로 복사해준다 ​ 기존의 배열을 그대로 사용하지않고 따로 복사하는 습관을 들이는게 좋다 원본을 해치지 않기 때문 ​ 그리고 let copy = [...Top_player] 여기서 [... a] 은 스프레드 연산자로 쉽게 메모리의 주소값을 복사하는게 아니라 새로운 값을 복사해줄 수 있기 때문..

​ 할일 완료시 Done 함수를 이용한다. ​ function done_onclick(id, event) { axios({ url: `/todos/done/`, method: 'post', headers: { "content-type": "application/json", 'X-CSRFToken': getCsrfToken(), }, data: { 'id': id, }, }) .then(function(response) { let result = response.data['is_success'] if (result === true) { let event_target = event.target; let parent = event.target.parentElement; let parent1 = parent.p..

Update 함수는 위 사진과 같이 작동한다. ​ ​ ​ function change_input_onclick(id, event) { // 1. 해당 노드의 정보 받기. // 2. 그 노드를 인풋 텍스트로 바꾸기 // 3. 버튼도 이제 수정완료로 바꾸기. !! 온클릭 이벤트 제대로 연결줘야함 let Edit_button = document.createElement('button'); let new_input = document.createElement('input'); let current_input = document.querySelector('.new_input'); let event_parent = event.target.parentElement; let thirdNode = event_parent..

Delete_onclick 함수는 다음과 같이 작동한다. ​ ​ function delete_onclick(id, event) { // 1. 해당 노드의 정보 받기 // 2. 비동기 통신 보내기 // 3. 성공하면 해당 노드 지우기. //4. 실패하면 안되게 하기 axios({ url: `/todos/delete/`, method: 'post', headers: { "content-type": "application/json", 'X-CSRFToken': getCsrfToken(), }, data: { 'id': id, }, }) .then(function(response) { let result = response.data['is_success'] if (result === true) { let eve..

HTML파일에 장고템플릿을 입혀서 사용해야했고 덕분에 장고템플릿 사용법을 아주 약간 익혀야했다. (자바스크립트와 유사했고 구글이 있기 때문에 수월했다.) ​ 다음은 장고템플릿을 입힌 HTML 소스코드이다. 추후 나올 자바스크립트 소스코드를 보다 쉽게 이해하게하기 위해 첨부한다. ​ To do 오늘 할 일 {% csrf_token %} Add {% for i in todolist %} {% if i.is_completed == True %} {{i.todo}} {% else %} {{i.todo}} {% endif %} {% endfor %} ​ ​ ​ ​ ​ ​ 자세한 동작원리는 잘 모르지만 백과 연동하기 위해서는 HTML파일을 동적으로 만들어 줄 필요가 있다. 장고템플릿 for문을 통해서 데이터를 전달..

대부분의 개발자 지망생들이 으레 그렇듯 나 역시 첫 프로젝트를 To-Do-List로 완성했다 ​ 어느정도 자바스크립트를 배웠다고 생각하고 호기롭게 시작했으나 프로젝트를 진행하면서 배운 것들이 훨씬 많았다고 단언할 수 있겠다. ​ ​ 백엔드 개발자로 일하시는 분을 대학교 지인을 통해 알게 돼서 투두리스트를 만드려면 도와줄테니 백이랑 연동해서 해보는게 어떻겠냐는 질문에 둘도없는 기회라 생각했고 바로 시작하게 됐다. ​ ​ 비동기통신으로 연결한 자바스크립트 To-Do-List ​ ​ 완성된 모습을 먼저 보이자면 위와 같다. CRUD 기본기를 다지는데에 이만한 프로그램이 있을까 싶을 정도로 간소하지만 알차게 구성된 프로젝트다. ​ 투두리스트를 만들면서 JS뿐만 아니라 ​ CLI 사용법 서버통신에 대한 약간의 이..

확실히 블로그에 기록을 남기면서 공부를 하다보니 훨씬 기억에 오래남는다. ​ 이번엔 State사용해서 눌렀을 때 바로 숫자가 변하는 버튼을 만들어보자 ​ let [like, btn_change] = useState(0) { btn_change(like + 1)}}>좋아요! {like} like라는 state에 0을 할당하고 button을 만들어 onClick속성을 함수로 넣어주었다. ​ 여기서 let [like, btn_change] = useState(0) 두번째 인자(btn_change)는 첫번째 인자를 변화시킬 수 있는 함수를 뜻한다. { btn_change(like + 1)}}>좋아요! onclick속성안에 btn_change(like+1)을 넣어주면 버튼을 클릭할때마다 {like} 제일 위의 s..

그 동안 JS 변수 var, let, const에 대해서만 배웠었는데 리액트에서 쓰는 State라는 변수를 알아보자 ​ let title_1 = 'YNWA'; {title_1} 이렇게 사용하던 변수를 let [title_1, b] = useState('YNWA') {title_1} 이렇게도 사용할 수 있다. ​ 왜 굳이 더 길게 써야하느냐? 변수가 변경됐을 때 새로고침없이 재렌더링이 가능하기 때문이다. ​ ​ 기존 변수를 사용했을 경우엔 새로고침을 해야 유저가 변하는 부분을 확인할 수 있지만 State를 사용했을 시 변수가 변경돼도 홈페이지를 리로드하지않고 바로 변화시킬 수 있다 ​ 사실상 react를 사용하는 핵심이유라고 생각한다. ​ 또한 let [TeamName, a] = useState(['LIV..

언젠가 꼭 학습해야하는 걸 알고 있었지만 바닐라 JS를 완벽하게 마치고 하려다보니 그 핑계로 자꾸 미루는 거 같아서 오늘부터 당장 배우기 시작했다. import blahblah; function App(){ return ( // 원하는 코드 )}; 리액트 설치와 환경세팅은 생략하고 기본 틀은 이렇다 ​ 주석처리된부분에 본인이 원하는 코드를 집어 넣으면 되는데 HTML파일을 따로 두지 않고 JS파일내에서 html 태그를 사용하며 바로 동작 시킬 수 있다. ​ 그로인한 문법의 변화는 감안해야하고 이 문법을 JSX 라고 한다. ​ ​ JSX의 특징 1) // 원하는 코드 html 에서는 class명을 삽입할때 class = "aa"였지만 JSX 에서는 className="" 으로 선언한다. ​ ​ 특징2) f..

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다. 그게 Hoisting이다. ​ function 함수(){ console.log(이름); var 이름 = 'Klopp'; } 이런 함수를 만들었다고 가정할 때 함수를 실행하면 콘솔에 이름이라는 정의되지않은 변수가 먼저 찍혀야하니 에러가 떠야한다. (원래대로라면) ​ 하지만 에러대신 undefined가 뜬다 ​ 그 이유는 function 함수(){ var 이름; console.log(이름); 이름 = 'Klopp'; } 자바스크립트라는 문법은 호이스팅이 일어나기 때문에 위의 함수처럼 인식을 하고 위에서부터 읽어내려간다. 그럼 var 이름;

한동안 프로젝트 진행으로 블로그 업로드가 뜸했지만 막히는게 많고 기본기가 부족하단 걸 절실히 깨닫게 되어 기초부터 다시 돌아가서 시작하는 의미로 문법부터 차근차근 포스팅하려고 한다. ​ 자바스크립트 변수는 ES6 업데이트 전에는 var 변수만 있었으나 호이스팅과 재할당(이 부분은 다음 포스팅때 설명) 관련 불편함 개선을 목적으로 업데이트 후 let, const 변수가 추가되었다. ​ 기본적으로 변수는 선언과 할당의 특징을 가진다. var name = 'klopp' // var name 까지는 선언 // name = 'klopp' 부분은 할당 var name = 'klopp' // 이 부분은 선언과 할당을 같이 해준 것 ​ let과 const도 이렇게 사용하면 된다. ​ 하지만 var는 재할당과 재선언이 ..