728x90 코딩/REACT28 ~0507 취중코딩 State마무리(km-mile변환기) 요 근래 2일간 쏘주 5병을 마셔부려따 다행히 친구 붙잡아서 토요일 점심에 공부를 오랜만에 이어서 하고있다 오늘은 State단계를 마무리하고 그 과정에서 km - mile변환기를 만들고 저번에 만든 시간-분 변환기랑 같이보여주는게 아닌 두 변환기를 각각 보고플 때 볼 수 있도록 만들었다 자세한 건새로 작성한 코드와 그 설명을 보면서 이해하자 잡담) 요즘 날씨가 부쩍 덥다. 낮에는 여름 밤에는 가을을 보여주는 날씨다. 여름이 오면 내가 좋아하는 복숭아랑(딱복) 포도, 자두를 왕창 먹어야지 작년에는 군대여서 포도는 원없이 먹었지만 복숭아 자두는 못 먹었단 말이야 -------------------------------------------------------------------- 아 출발 --------.. 2022. 5. 7. ~0430 Input&state (minutes -> hours Part.2) 노동 뒤의 휴식이야말로 가장 편안하고 순수한 기쁨이다. -임마누엘 칸트 휴식 뒤의 노동이야말로 가장 불편하고 악랄한 고통이다. -최민규는 칸초 주말에는 적당히 부지런한 민규씨 재밌게 주말을 즐기고 일요일과 월요일의 경계 즉, 쉬어야 할까 공부해야 할까 싶은 이 스릴을 즐기며 글을 작성한다. 목표는 배운거 정리 + 일주일을 미룬 생일 선물 리뷰글 + 가능하다면 약간의 근력운동 후 취침 근데 오늘 리액트 복습에 사진, gif가 많이 들어가고내일 학준이랑 운동해야되서 일찍 자야 하는데 할 수 있을까? 몰라 파이팅이야 민규야 가자! 이번 복습은 저번시간에 코드를 전체 띄우고 하자니 너무 난잡하고 집중하기 힘들어서 이번에는 시간이 오래 걸리더라도 중간중간 메모를 많이 하고 사진을 많이 남기기로 했다 ⍝ ˘ ᵜ ˘.. 2022. 5. 2. ~0427 Input과 state (분 -> 시간으로 바꾸기) 벌써 3번째 쓰는 글이다 쓰다가 수업하고, 쓰다가 잠들고 멘탈나가네 ㅎㅎ ＼(´◓Д◔`)／ 나 힘들어 이번엔 한번에 다 쓰자 고고 ก็็็็็็็็็็็็็ʕ•͡ᴥ•ʔ ก้้้้้้้้้้้ 저번시간에 이어 state에 관한 내용을 다룰 건데 input으로 숫자를 입력받아 그것을 분이라 치면 시간으로 변환해주는 그런 예제를 만들며 state와 관련된 여러가지를 배워 볼 시간이다. 참고로 당연히 분/60==시간 이 원리가 중요한 게 아니라 이 예제를 구현하는데 생각해야하는 state관련 개념들에 집중하자. 3트지만 아자아자!! 중간과정을 꼼꼼히 캡쳐해가면서 설명해야 하는데 ㅋㅋㅋㅋ 큰일 났다 아무튼 기억을 되살리며 한줄한줄 어떤 원리와 무슨 기능인지 떠올려보자 저번시간(입력하면 개수 늘려주는 거)과 관련된.. 2022. 4. 29. ~0424 State Function까지 저번에 뇌를 붙잡고 끙끙대던 State 다음 파트를 마무리했다 호호 행복해라 아 그리고 정리한 날은 생일이었는데 작년에 군대에서 생일을 보내서 그런가 감흥이 없더라 자 아무튼 본론으로 와서 저번에 우리가 렌더링을 했을 때 데이터 값이 수정될 때 매번 새로 렌더링을 해줘야하는 문제가 있어 다른 방법을 배우고자 했다. 일단은 좀 더 직관적으로 이해하기 위해서 부가적인 함수의 내용들은 다 지우고 기존에 있던 Container을 제외하고는 다 지웠다 그리고 강의에서 Container함수의 이름을 App으로 바꿨는데 이건 뭐 큰 상관 없는 듯? 예전에 우리가 했던 방법은 counter라는 변수에 담아서 +1씩 하면서 사용했는데 이번에는 새로운 방법을 사용 하려한다 캡쳐화면 부터 보자 이 사진 전에 했던게 13번째.. 2022. 4. 25. ~0422 State 멈춰 미래의 민규야 불과 며칠전에 공부한다고 해놓고 또 업로드가 없어서 놀랐지? 걱정마렴 민규는 지금 State를 배우는 중인데 뇌정지가 와서 구글링과 강의를 몇번이고 계속 리플레이를 하며 이해중이야 미래의 너는 똑똑해서 왜 여기서 이렇게 시간을 썼지 하고 콧방귀를 뀌겠지? 그치? 그때의 너도 헷갈려하는거 아니지? 암튼 그만큼 노력을 하는 중이니 좀만 기다려줘 올릴거 많으니까 아 그리고 나도 금요일에는 좀 놀자 아부지도 올라왔는디 월화수목 알바하고 운동하고 나름 나태와 부지런함의 경계에서 잘 지내왔잖아 푸하하하 암튼 내일 다시 해보자 아자아자 ~State 빨리 이해해서 리액트 엿먹여버리자 ͡ ͜ʖ ͡ ╭∩╮ 민규의 험난한 리액트 린생 응애 2022. 4. 22. React ~0419 State 이해하기 마지막 작성일로부터 5일간의 부재 이건 미친 짓 그렇다 난 5일 동안 몇 번의 자살행위를 한 걸까 푸하하 달력을 또 보면 이것저것 한건 많은데 분명..? 코태기(코딩 권태기) 아직 많이 사랑하지도 않는데 왜 이러지 암튼 오래간만에 리액트를 잡고 차차 했다. 당연히 전에 했던 내용은 기억이 안 나서 왼쪽엔 티스토리 블로그, 오른쪽에는 아톰편집기를 켜고 차차 복습했다. 차차 따라갔고 오늘 새로 배운 내용을 정리하고자 다시 돌아왔다. 오늘 배운건 State 물론 오늘 배운 방법으로 쭉 할 건 아니고 State의 운용방식을 이해하고자 이 방법을 썼다 하니 정리하고 복습해보자 표면적인 목표는 맨 처음에 바닐라 js를 이용해 만든 코드에서는 버튼을 클릭하면 화면에 몇 번 눌렀는지 표시가 되었다.지금은 콘솔 창에는 .. 2022. 4. 21. React ~0415 렌더링 저번시간에 이어 마지막 Container와 root를 묶어 React.createElement하는 방법을 바꾸기 div에 const를 넣기 위해선 const를 함수형태로 바꿔주어야 한다.(+ 이유는 추후 공부하겠지만, 단순히 변수의 기능만 한다면 상호작용 즉 변화감지, 변화를 만들 때 단순히 변수인 상태로는 한계가 있기에 함수로 표현한 것이 아닌가 싶다 단순히 변수가 아니라 component인 것을 기억하자) line 12, 17을 보면 arrow function형태로 바뀐 것을 볼 수 있다. Btn= () => ( ); 는 function Btn() { return ( ); } 와 같은 의미이다. 그 다음 line 22~27을 보면 Container안에 div로 묶어 HTML태그처럼 넣어주었다. 이렇게.. 2022. 4. 15. React ~0414 JSX, Babel + 燈下不明(등하불명) 왜 오늘 제목이 등 하 불 명이라는 사자성어가 뜬금없이 나왔는지는 글을 보다보면 알게 될 것이다. 자 아무튼 오늘은 저번시간에 이어 React가 상호작용하는 방식중 저번시간에 사용한 것 보다 더 간결하고 깔끔하게 작성하는 법을 볼 것이다. 먼저 저번시간보다 간단, 간결하게 표현하기 위해서 JSX(자바스크립트를 확장한 문법)을 이용한다. property를 HTML의 태그 속성처럼 적으면 된다.(line12~16 참고) 이 JSX를 브라우저가 온전히 이해하지 못하기에 (line9) script태그를 통해 babel.js를 설치해준다 그 후 마지막 우리의 코드가 적힌 script태그 안 type을 text/babel로 설정한다.(line10) 이와같은 방법으로 우리는 이제 JSX를 통해 createElemen.. 2022. 4. 15. React ~0412(React와 기존JS의 상호작용방식 차이) 무언가의 특징을 알기 위해 흔히 우리는 그 특징을 나열하는 방법도 있지만, 다른 것과 비교, 대조하며 그 특성을 돋보이게 하곤한다. 리액트의 시작도 마찬가지이다. 왜 리액트를 사용하는가? 어떤 점에서 리액트가 더 좋은 특성을 가지고 있는가? 하고 비교해볼 필요가 있는 것이다. 그래서 1-1수업에서는 우리가 기존 js를 통해서 html과 상호작용했는지 먼저 알아보았다. 자 html에 먼저 우리가 직접 span, button을 만들고 js에서 사용하기 위해 span, button을 가져왔다. 우리가 몇 번 눌렀는지 기록해줄 변수 counter를 만들고, 그 후 EventListner를 통해서 실행될 함수(counter라는 변수에 1씩 더하고 counter를 span안에서 넣어 우리에게 보여주는 함수 hand.. 2022. 4. 15. 이전 1 2 3 4 다음 728x90
