일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 채팅방
- routing
- 브라우저 렌더링
- Github Actions
- Preview
- imagePreview
- 비동기
- 접근 제한 라우팅
- 미리보기
- useEffect
- 항해99
- S3
- Redux
- 동기
- CI/CD
- updater
- setstate
- 라우팅
- react
- socket.io
- previousState
- 스파르타코딩클럽
- 배포
- FileReader
- rendering
- 후기
- route
- 개발
- qwe
- 7기
- Today
- Total
목록TIL/2022년 5월 (14)
삐옹
배운것 React React Redux의 흐름 리덕스와 컴포넌트 연결 *useDispatch(수정해줘) ,useSelector(갖다쓸게) - action을 부른다 *??? - reducer *새로운 상태값 만들어 반환 - store *reducer (+ options)들을 combine 하여 createStore - 컴포넌트에서 데이터 사용 useRef useRef를 쓰는 이유는 관리하는 변수 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않기 때문입니다. 고유한 값을 설정해야할 떄 유용합니다(이를테면 id 값을 설정 할 때).리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 ..
배운 것 React 언제 컴포넌트를 만드는게 좋은 것인가? html을 반복해야할 때, 큰 페이지들, 자주 변경되는 것들 객체타입 state 변경 시 꼭 복사본을 만들어 변경한다. 그렇지않으면 리액트가 새로 들어올 변수 감지하지 못 하기 때문이다(원본에 사본을 넣어줄 때 두 개의 참조값이 달라야 리액트는 변경을 감지 할 수 있다). 이것을 객체의 불변성을 지킨다 라고 한다. 객체의 불변성을 지켜야 하는 이유는 2가지가 있다. 앞서말한 것 처럼 원본데이터의 불변성을 지켜주어야만 리액트 컴포넌트에서 변경을 감지 할 수 있다. 그럼으로써 리렌더링이 진행된다. 두 번째는 컴포넌트 업데이트 성능 최적화라고 한다. whatever. [name] : value -> name 값을 가진 키 값: value 사용 예)하나..
배운 것 주특기 입문 주차의 개인과제가 마감날이었다. 아쉽게도 마지막 기능을 남겨놓고 미완성인 채로 배포를 하고 제출을 했다. 리액트로 일주일 간의 평점을 남기는 프로젝트 만들기였다. 처음 과제 가이드라인을 봤을 땐 생각보다 금방 끝나겠거니 생각했지만, 역시나 예상을 빗겨갔다. 리액 기본 강의들에서 배웠던 내용들은 리액트의 아주 기본적인 부분이었는데, 이걸 또 살짝쿵 활용하자니 쉬운 일이 아니었다. 나름 혼자 해보겠다고 코드를 짜다보니 아주 사방팔방 지저분하다. 이거 리팩토링 해보아야겠다. 개발자는 망가뜨린 장난감(?) 수 만큼 성장한다는 글을 보았다. 개인과제 때 무엇을 가장 배웠냐고 물어본다면 나는 기본기의 중요성이라고 말할 것이다. state, props, setState, useState, use..

이번엔 안 떨릴 줄 알았는데 오산이었다. 생각보다 많이 들으러 와주신걸 보고 심장이 너무너무 빨리 뛰기 시작했다. 심호흡을 했지만 발표를 하던 내 목소리는 분명 떨고 있었을 것 같다. 이번에 여유있게 준비를 하고있었는데 시간이 가까워지니 뭔가 조바심이 들어 처음했던 실수를 반복해버렸다. 내 머릿속에 내용을 제대로 넣지 못한 점. 어떻게 말할지, 자료를 어떻게 만들지 중요한게 아니고, 내 머릿속에서 제대로 이해하고 있어야한다. 3차 때는 내용들의 flow를 머릿속에서 구조화시키는 연습을 해보자. 내일은 리액트 과제 마무리 달려 문제 자체가 이해가 안가는 알고리즘 문제를 만났다. 그런 문제는 애초에 지문을 이해 못했기 때문에 문제의 접근방식을 생각해보는건 쓸모가 없다. 문제를 빠르게 정확하게 파악하는게 최우..

BrowserRouter : 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨준다. 최상위 컴포넌트에서 감싸준다.() 리액트 개인 과제를 진행하면서 오늘 날짜로부터 일주일 간의 요일을 매일 갱신해주는 코드를 짰다. 고민하다가 도저히 답이 안나와서 같은 조의 윤영님께 도움을 받아 로직을 짤 수 있었다. 문제는 알고리즘이 이해가 가지 않는다는 것.. 애당초 접근방법조차 생각이 나지 않았는데 이런 코드를 짜는 사람들이 너무 대단하게 느껴졌다. 나도 알고리즘 잘 하고싶다. 우리 조 조원들을 대상으로 리액트 팀 과제 발표를 했다. 아무래도 항해톡1차 때 마주했던 인원에 비하면 매우 적은 인원을 대상(3명)으로 하는 발표였기에 편한 마음으로 발표를 했다. 팀원분들이 내 발표를 재밌게 봐주시고 도움이 된..
어떤 식으로 공부하는게 내게 맞는지 맞춰보면서 어느덧 정신없던 2주가 지났다. 매일 빼먹지 말아야 할 공부, 정리하는 법, 시간관리하는 법, 사람들과 소통하는 법을 조금은 알게된 것 같다. 배운 내용 React ref 리액트 공홈을 보다보니 선언적 해결이 가능하면 ref의 사용을 지양하라는 내용이 이해가 가지안ㅇㅎ아 기술매니저님께 여쭤봤다. 결론은 ref나 state나 상황에 따라 쓰면된다고 하셨다. 아아까 답변 적어놓은거 어디갔지; 찾아서 ref 정리글에 추가해야겠다. clean up 컴포넌트가 사라지면 가지고 있던 이벤트를 반드시 지워줘야한다. clean up 순서(클래스형): componentWillUnmount(렌더링 된 후에) 라이프 싸이클 함수 안에 넣어 이벤트를 삭제해준다. clean up..
다시 만난 리액트. 반갑다! 문법을 많이 까먹었지만 내용은 익숙하다. 덕분에 강의자료로 빠르게 공부 중이다. 알고리즘에 시간을 많이 뺏기는 느낌이다. 왜인지 생각해보니 문제를 푸는 와중에 집중을 잘 못 해서 자꾸 시간을 버린다. 알고리즘도 스터디에 들어가야겠다. 그래도 오늘 알고리즘 깃 정리 템플릿을 잘 만들어놨으니 앞으로 코드 정리는 문제없다. 오늘 알고리즘을 풀면서 스프레드 연산자에 대해서 배웠다. 객체, 배열, 매개변수 복사에 아주 요긴하게 쓰인다. 0522 *** 리액트 강의 3주차 까지, 알고리즘 ** 블로그 정리 * 항해톡 발표 준비, 리액트 팀 과제 준비 —오전— 10” cs책 읽기 + 블로깅 11” cs스터디, 알고리즘 2문제 —오후1— 1” 알고리즘 3문제 2” 알고리즘 정리 + 리액트 ..
한 일 알고리즘 5번~13번 문제를 팀원들과 풀고 3문제를 설명했다. 정리하는데 초집중해서 시간을 더 알차게 써보자! 냉면프젝에 들어갈 리드미 꼼꼼히 작성 중이다. 배운 것들 알고리즘을 5번~13번까지 풀었다. 생각보다 재밌다. 그런데 모르는 문제에 너무 시간을 뺏기면 안되겠다. 조절하자. 팀원에게 풀이방법을 설명하기 전 정리해보는 시간도 매우 중요하다. 그 시간이 곧 내가 풀이를 정말 이해했냐 못 했냐를 가리기 때문이다. 앞으로 할 일 물냉면 프젝 기본 기능 얼른 구현해서 웹종반~웹종반 플러스 내용 전체 복습 매일 알고리즘 리액트 과제(근데 이거하려면 자스도 좀더 보충해놔야 하려나..) 매일 회고 지금처럼!
알고리즘 주차에 들어왔다. 새로운 팀원들과 4문제를 풀고 회고해봤는데 알고리즘 푸는게 꽤 재밌다. 아직은 하하, 하 수준의 문제들이라서 반복문, 조건문을 잘 활용하면 풀 수 있는 정도이다.(그럼에도 4문제 중 3문제는 못 풀었다) 하다보면 늘겠지요. 아무리 생각해도 첫 미니 프로젝트에 큰 아쉬움이 남는다. 첫 계획, 설계를 제대로 하지 않고 무작정 개발부터 들어간 탓이다. 중반까지는 어찌저찌 잘 구현해가는 듯 했는데, 후반부로가면서 이건 안되겠다는 생각이 커졌다. 하하.. 결국 제출 1시간 전에 되는 것만 붙이고 짜집기해서 부랴부랴냈다. 설계의 중요성을 절실히 깨달은 프로젝트였다.