코딩/REACT

마지막 작성일로부터 5일간의 부재 이건 미친 짓 그렇다 난 5일 동안 몇 번의 자살행위를 한 걸까 푸하하 달력을 또 보면 이것저것 한건 많은데 분명..? 코태기(코딩 권태기) 아직 많이 사랑하지도 않는데 왜 이러지 암튼 오래간만에 리액트를 잡고 차차 했다. 당연히 전에 했던 내용은 기억이 안 나서 왼쪽엔 티스토리 블로그, 오른쪽에는 아톰편집기를 켜고 차차 복습했다. 차차 따라갔고 오늘 새로 배운 내용을 정리하고자 다시 돌아왔다. 오늘 배운건 State 물론 오늘 배운 방법으로 쭉 할 건 아니고 State의 운용방식을 이해하고자 이 방법을 썼다 하니 정리하고 복습해보자 표면적인 목표는 맨 처음에 바닐라 js를 이용해 만든 코드에서는 버튼을 클릭하면 화면에 몇 번 눌렀는지 표시가 되었다.지금은 콘솔 창에는 ..

저번시간에 이어 마지막 Container와 root를 묶어 React.createElement하는 방법을 바꾸기 div에 const를 넣기 위해선 const를 함수형태로 바꿔주어야 한다.(+ 이유는 추후 공부하겠지만, 단순히 변수의 기능만 한다면 상호작용 즉 변화감지, 변화를 만들 때 단순히 변수인 상태로는 한계가 있기에 함수로 표현한 것이 아닌가 싶다 단순히 변수가 아니라 component인 것을 기억하자) line 12, 17을 보면 arrow function형태로 바뀐 것을 볼 수 있다. Btn= () => ( ); 는 function Btn() { return ( ); } 와 같은 의미이다. 그 다음 line 22~27을 보면 Container안에 div로 묶어 HTML태그처럼 넣어주었다. 이렇게..

왜 오늘 제목이 등 하 불 명이라는 사자성어가 뜬금없이 나왔는지는 글을 보다보면 알게 될 것이다. 자 아무튼 오늘은 저번시간에 이어 React가 상호작용하는 방식중 저번시간에 사용한 것 보다 더 간결하고 깔끔하게 작성하는 법을 볼 것이다. 먼저 저번시간보다 간단, 간결하게 표현하기 위해서 JSX(자바스크립트를 확장한 문법)을 이용한다. property를 HTML의 태그 속성처럼 적으면 된다.(line12~16 참고) 이 JSX를 브라우저가 온전히 이해하지 못하기에 (line9) script태그를 통해 babel.js를 설치해준다 그 후 마지막 우리의 코드가 적힌 script태그 안 type을 text/babel로 설정한다.(line10) 이와같은 방법으로 우리는 이제 JSX를 통해 createElemen..

무언가의 특징을 알기 위해 흔히 우리는 그 특징을 나열하는 방법도 있지만, 다른 것과 비교, 대조하며 그 특성을 돋보이게 하곤한다. 리액트의 시작도 마찬가지이다. 왜 리액트를 사용하는가? 어떤 점에서 리액트가 더 좋은 특성을 가지고 있는가? 하고 비교해볼 필요가 있는 것이다. 그래서 1-1수업에서는 우리가 기존 js를 통해서 html과 상호작용했는지 먼저 알아보았다. 자 html에 먼저 우리가 직접 span, button을 만들고 js에서 사용하기 위해 span, button을 가져왔다. 우리가 몇 번 눌렀는지 기록해줄 변수 counter를 만들고, 그 후 EventListner를 통해서 실행될 함수(counter라는 변수에 1씩 더하고 counter를 span안에서 넣어 우리에게 보여주는 함수 hand..

리액트.. 유튜브 광고에서나, 프론트엔드, 앱 개발을 조금만 찾아봤어도 리액트에 관한 이야기는 분명 많이 들어보았을 것이다. '혁신적인 라이브러리', '프엔 개발자가 되려면 필수'.. 등등 암튼 뭐 대단한 건가 보다. 언젠가 배워야지 하고 2~4월 초 까지 html, css, js를 배우고 이 각각 과목들을 좀 더 공부하고 실력을 길러볼까 했는데 항상 이 호기심, 충동, 즉흥은 쉬운데 이 끈기가 안된다. 그래서인지 새로운걸 딱 하나만 더 배워보고 그 4개로 같이 으쌰으쌰해서 여러 가지 만들자!라는 계획을 세웠다. 다만, 너무 충동적인 실행은 나도 불안하고 후에 후회가 될 것을 잘 알기에 내가 지금 필요로하는게 뭘까 생각해보았다 프론트엔드에 관련되면서도 내가 지금 뼈대를 배웠으니 여기에 살을 붙여줄 만한 ..