본문 바로가기

TIL✨

 (71)
TIL(33) 숙련과정이 계속 진행되고 오늘부터 일주일 뒤에 프로젝트가 시작이 된다. 숙련과정을 하려면 결국에 입문과정이 탄탄해야해서 오전 중으로는 항상 입문과정의 과제를 계속 만들어보고 있다. 그래서 오늘은 최종정리 겸 글을 쓰면서 전체적인 흐름을 상기시켜볼까한다. 내 머릿속으로 이해한 내용들을 다 적어보려고한다. 1.처음에는 코드 한 줄씩 마다 주석을 달면서 해석을 하는 시간을 가졌고 2. 그 다음은 한쪽은 완성본 한쪽은 빈페이지를 해놓고 내가 생각하는대로 적어보고 바로바로 확인을 하면서 진행을 하고 3.마지막으로는 완성본을 보지 않고 나 스스로 만들어보는 과정을 하고 있다. 내일부터 redux로 투두리스트를 만들어보려고하기 때문에 오늘까지 리액트로 투두를 만들어보자는 생각에 3번째 과정을 실행했다. 처음에 {ch..
redux로 카운터를 만들어 보자_TIL(32) 리덕스는 리액트를 쓸때 생겼던 props drilling을 방지할 수 있다. 전역 state를 store에 저장해놓고 어느 위치이던간에 사용할 수 있도록 한다. Ducks패턴을 이용해서 정리를 해보려고한다! 이 순서에 맞게 정리를 하는 습관을 들여놓으면 코드의 가독성이 좋아질꺼같다. action value : value를 상수로 만들어 준다 action creator : 액션객체를 반환하는 함수 하나씩 type:{ }적을 필요 없이 상수를 적어주면 된다. 이렇게 만들어 주고 리듀서를 작성한다. 초기값을 적어 주고 그 초기값을 state에 넣어주고 ,action(명령)과 함께 작성을 한다. 그리고 switch문을 사용해서 그에 맞는 값을 리턴할 수 있도록 코드를 작성해준다. 리듀서의 기본적인 문법을 저렇게..
Redux_TIL(30) 앞 전의 redux정리를 이어 받아서 이젠 값을 변경해보려고 한다. 먼저 오늘 정리 할 내용✅ 1.Redux는 state변경이 reducer에서 일어난다. 2.만약 counter.js module에 있는 number에 값 변경을 해준다면...?! 1.store에 있는 값 변경하기 위의 질문의 답은 Reducer에게 명령을 보낸다. ( reducer가 명령을 받아서 값을 변경한다라고 생각하면 될 듯) 명령을 redux에서는 "action"이라고 한다. => reducer가 명령을 실행하고 이 보내는 명령은 객체로 보내게 된다 (=action 객체) 이 action객체란? {type: "PLUS_ONE"} //대문자를 사용해준다..? 약속이라던데 위와 같은 type를 꼭 같이 적어서 보내야한다. 왜냐면 이 ..
Redux_TIL(29) 리액트 입문과정이 끝나자마자 아직 투두리스트를 만들어보지도 못했는데 숙련회차를 듣게 되었다.😂 사실 입문과정에서 props랑 state가 이해가 되야한다고 해서 아직 스스로 그 부분이 부족하다는 생각에 숙련강의는 안 듣고 입문강의만 계속해서 공부를 하고 있었다.(주말에 todoList📖 만들어보려고 함) 근데 오늘 튜터님 리덕스 강의가 있다는걸 알고 급하게 조금이라도 알고 시작하자는 마음에 강의를 뒤늦게나마 보기 시작했는데 그래도 튜터님 강의를 듣고나서 공부를 하니까 훨 이해가 잘 됬다. 혼자 들을 때 외계어인줄..ㅎ 그래서 그걸 오늘 주제로 적어보려고한다. 기본적으로 redux에 필요한 패키지들을 설치하고나서 시작해야 된다. (내가 맨날 이런거 설치도 안하고 왜 안되냐 하고 있어서 나중에 내가 봐도 안..
TIL(28) 오늘은 정말 리액트만 보다가 끝난거같다. 하루종일 리액트 강의만 다시 보고 다시보고 하는 중이다. 진짜 얼마나 봤는지 모르겠다 todoList를 만들라는 과제를 받았는데 뭔가 어떻게든 만들려면 만들었을꺼 같은데 주어진 미션대로 완벽히 못만들꺼같았고 막상 하려니까 내가 생각한거보단 내가 아직 많이 모르는거같다. 리액트 중간중간 구조분할,스프레드배열 등 자바스크립트 문법들이 나오는데 아직 그런거에 쫌 어려움을 느끼고 있던지라 더 그런듯 리액트하다가 자바스크립트 문법도 찾아보면서 정리해야할듯싶다. 어쨋든 투두 리스트는 내 머리에는 안 들어왔는데 만들기에 급급해서 코드를 따라쓰기 바쁜 그런 느낌이 났다 ㅠㅠ 그래도 자꾸 쓰다보면 분명 그 코드에 대해서 이해도 잘 되고 얻는 것이 있겠지만 만들다 보면 부딪히는 구..
props란...?TIL(27) 리액트 입문을 공부하면서 props..props..💫 너무 많이 들었다. 분명 부모->자식에게 데이터를 넘겨줄때 받는 인자라고 이해했다.. 여기까지는 좋았다ㅋㅋ 넘겨줄 데이터가 한 줄 밖에 안되니 어떻게 넘어가고 그러는지 눈에 보이니까 쉬웠다. 근데 왠열 점차 시간이 갈 수록 받아야 할 인자들이 많아지니 정신이 없더라...ㅎ💥진짜 props를 이렇게 받아도 렌더링이 된다고?? 이러면서 따라치면 신기하게 되어있더라는.. state는 props를 정확히 알고 넘어가야 된다는 말씀에 ㅠㅠ오늘 props 콘솔에 함 찍어서 확실히 이해하자싶기도하고 기록으로 남겨두면 또 한번 내 지식이 되니까 정리를 해보려고한다. function Card(props){ const classes = "card" + props.cla..
리액트 입문주차TIL(26) 이번 주 부터 리액트 입문주차가 시작되었다. 약간 설렘반 걱정 반인데 ㅠ 그래도 내가 배워야 할 주특기이니 열심히 하자 마음먹었다. 그리고 공부를 해보니까 아직까지는 쫌 재밌는거같다 쉬운부분을 해서 그런가ㅎㅎㅋㅋㅋㅋㅋ 막 터미널 켜고 설치할때도 에러뜨면 어떡하지 하면서 걱정하면서 엔터치고 아니나 다를까 역시 에러가 떴다 오히려 좋아...?... yarn을 설치할때 npm install -g yarn 이렇게 명령어가 떴는데 알 수 없는 빨간 글자들의 에러가 막 나왔다. 역시 구글링을 해보니 npm은 node.js를 설치할때 기본적으로 깔리는 프로그램이고, 이제 yarn은 npm과 같은 역할을 하지만 좀 더 부족한 부분을 개선한 패키지라고 했다. 근데 왜 다들 하라는 명령대로 했는데 나는 오류가 떴을까하고 ..
class TIL(25) 오늘은 어제에 이어서 class에 대해서 정리하려고한다. 1.class class People{ constructor(name,age){ this.name= name; this.age= age; } //함수는 function이라고 적지 않아도된다.그리고 보통 constructor 안보다 밖에 위치한다. display()=>{`${this.name},${this.age}`} } const person = new People('puth', 30); console.log(person) 여기서 class는 템플릿이라고 생각하면 되고 new를 붙여서 그 템플릿을 가지는 새로운 객체를 생성해낼 수 있다. 만약 누군가가 new로 새로운 객체를 만들고 나서 이 상태를 변경하고 싶지 않도록 만들려면 #을 붙이면된다. c..

티스토리툴바