본문 바로가기

All50

[React] Deck of cards The Modern React Bootcamp / Colt Steele API와 React Lifecycle methods 중 하나인 componentDidMount를 사용하는 실습이었다. 사실 강의를 들으면서도 이 lifecycle methods를 정확히 어느 때에 사용을 하는건지 잘 모르겠지만, 이 componentDidMount의 경우 API를 fetch할 때 사용하는 거 같다. 리액트의 컴포넌트가 render될 때 constructor - render - componentDidMount 순으로 되는데 이 componentDidMount의 경우 받아오는 데이터가 로딩되기에 좋은 곳이라고 하네... 아무래도 API에서 데이터를 받아오는데 시간이 걸리니까 갖춰져있는 걸 먼저 다 보여준 뒤에 그리고 데이.. 2021. 9. 1.
[React] To Do List 이번에는 리액트로 기능 구현뿐만 아니라 스타일링까지 조금 넣었다. 리액트를 쓰면서 느낀 것은 state의 흐름을 읽지 못하면 그냥 끝나는 거구나 싶었던... 그래서 리덕스나 모벡스와 같이 쓰는 건가 싶었다. 그래서 보통 리액트를 배울 때 세트로 리덕스를 함께 배우는 것인가. 이것 역시 리액트에서 Form을 사용하여 데이터를 받아오고 그걸 출력하는 거라서 어제 했던 상자 만들기와 비슷하지만 조금 더 까다로운 부분이 있다면 내가 입력했던 리스트를 수정하는 부분이다. 컴포넌트의 구성은 App > TodoList > NewTodoForm - Todo class Todo extends React.Component { constructor(props) { super(props); this.state = { isEd.. 2021. 8. 31.
[React] return을 알맞게 써줘야 합니다. 강의 Udemy The Modern React Bootcamp 이번 강의에서는 Form을 리액트에서 다루는 거 였다. 이것 역시 component를 여러 개로 나눠서 하나는 form을 구성하는 component, box를 만들 때 필요로 하는 데이터를 받고 전달해주는 component, 그리고 box를 만들어내는 component. 이렇게 모아놓고 보니까 JS에서 썼던 MVC 모델이 생각나네. 리액트 자체가 그렇게 사용할 수 있도록 만들어진 프레임워크인건가? 아무튼 처음에 대략적인 설명을 듣고 코드를 짰을 때는 remove 버튼을 작동할 수 있게끔 하는 거 빼고는 얼추 작동하게 했는데 풀이강의 듣고 나서 다시 처음부터 싹 다 코드를 쓰는데 어라? 왜 form에서 입력한 게 box로 만들어져야 하는데 왜 .. 2021. 8. 31.
[React] Lights Out : 셀의 불을 모두 끄자 노란색으로 된 셀이 불이 켜진거라는 가정하에 노란색 셀을 다 진한 회색으로 만들면 이기는 게임 그리고 완성된 결과물(이 게임에 자신이 없어서 끝에 YOU WON이 나오도록 조작함...). 사실 초반에는 설명만으로도 감을 잡을 수 없어서 강사분이 어떻게 짜는 지 보고 코드를 나름대로 짜봤다. 설명을 보기 전에 이런 결과물만 보고 어떤 식으로 component를 나눌지, defaultProps와 state는 어떤 것으로 정할 지 생각해보라고 했는데 이 때부터 감이 잡히지 않았다. 난 셀에다가 켜지고 꺼지는 state를 반영해야 하나 싶었는데 풀이방법은 여러가지가 있겠지만 셀은 담고 있는 보드를 만들 때부터 각각의 셀에 랜덤으로 true와 false의 값을 부여한다. 그리고 이 값으로 게임 시작 때부터 색상을.. 2021. 8. 30.
티스토리 스킨 수정 요즘 꽂혀있는 색이 레몬🍋과 관련된 색이라 티스토리에서 제공하는 스킨에서 헤더 약간, 색상 약간 바꿔서 스킨을 변경했다. 인프런에 티스토리 스킨에 관한 강의가 있어서 그거 듣고서 싹 다 바꿀까 생각도 했는데, 강의가 짧긴 하지만 그거 듣고서 하루만에 바꾸기는 무리인 거 같아 조금씩만 바꿨더니 분위기가 맘에 든다. 이런 맛에 블로그도 하고 하는거니까! 그리고 티스토리에서 제공하는 코드블럭이 너무 안 예뼈서 코드블럭 바꾸는 거 구글링했더니 바로 나오더라. 그분 포스팅 보고 원하는 테마로 바꿨다. 저번보다 훨씬 가독성이 좋아졌어. 2021. 8. 29.