TIL & 일지34 TIL, 06.30 최적화에 대해 발전된 TodoList에 코드리뷰를 진행하고 부족한 부분을 채우기로 하였다. 여러 가지 조언을 받았는데 그중 하나가 바로 useCallback과 useMemo에 대한 것이었다. 필요하지 않는 부분까지에도 useCallback을 사용했다는 피드백을 받게 되었다. 나는 useCallback과 useMemo를 잘 사용하면 최적화를 할 수 있어서 필요할 거 같은 함수마다 useCallback을 걸어두었는데 오히려 최적화에 악영향을 끼쳤던 것이다. 그래서 이번에 최적화에 대해서 알아보았다 리액트 최적화를 찾아보니 처음에는 Container component와 Container hooks에 대한 내용을 찾아서 처음 보는 개념이라 알아보았다. Container component와 Container ho.. 2023. 7. 1. TIL, 06.28-29 발전된 TodoList 배운 리덕스를 이용하여 저번에 만든 TodoList를 발전시켜 보기로 했다 내용이 긴 경우 생략하고 ...으로 표시를 했는데 그 전체 본문을 보여주는 상세페이지를 만들려고 했는데 상세페이지모다는 모달을 이용하여 만들어 보았다. 처음에는 scss로 되어있는 스타일을 이번에 복습한 스타일 컴포넌트로 바꿔보았는데 같은 스타일이기 때문에 간단하게 태그로 만들고 복사 복붙하면 똑같이 나올 줄 알았는데 그건 나만의 생각이었다 바로 어그러진 UI에 눈물이 나올뻔했다. 흐름을 하나하나씩 쫒아가며 바꾸니 원래와 똑같은 모습을 되찾았다 그 후 리덕스로 상태관리를 해보았는데 지금 TodoList는 props drilling이 되고 있어서 그 부분(todos)을 전역으로 빼어 관리해 보았다. 배운 흐름.. 2023. 6. 29. TIL, 06.27 항해 리액트 공부 리액트 최적화와 Redux 그리고 Dynamic Route에 대해 공부했다. Redux는 처음 공부하는 거라 내용 이해가 어려웠다. 그래서 리덕스에 대해 다시 되새김질하면 리덕스는 전역상태 관리 라이브러리로 props로 state 불편함을 해결해 준다. state 공유를 할때 부모 관계가 아니어도 되고 중간에 의미 없는 컴포넌트를 거치지 않아도 된다. 리덕스 흐름에 대해 알아보면 view에서 액션이 일어나면 dispatch에서 action이 일어나고 action에 의한 reducer 함수가 실행되기 전에 middleware가 작동된다. middleware에서 명령 내린 일을 수행하고 난 뒤 reducer 함수를 실행한다. reducer의 실행결과 store에 새로운 값을 저장한다. st.. 2023. 6. 28. TIL, 06.26 리액트 공부 스타일링에 대해 리마인드 했다 그중 스타일 컴포넌트를 중점으로 공부했다 리액트 훅 useState의 주의해야할 점에 대해 알게 되었다. 일반적인 업데이트와 함수형 업데이트의 차이가 있고 일반적인 업데이트는 리액트에서 최적화를 위해 배치 처리하지만 함수형 업데이트는 순차적으로 그냥 실행된다 또한 useEffect에서 중요한 의존성 배열과 cleanup 그리고 useRef에 대해 공부했다 만든 페이지네이션 코드리뷰 리액트 스터디에서 만든 페이지네이션에 대한 자체 그리고 매니저님과 코드리뷰를 했다 페이지네이션은 백이랑 같이 한다. 전체 데이터를 가져오는 것이 아닌 유저가 선택한 페이지를 백에서 가져와서 프런트가 보여주는 방식이다. 즉 버튼을 눌렀을때 해당 페이지 정보를 가져오는 식이다 나는 백이랑.. 2023. 6. 27. TIL, 06.24-25 리액트 다루는 기술 공부 스타일링에 대해 배워봤다. 나는 기본적인 CSS만 배워서 다른 스타일링에 이번에 처음 배워 보았다 먼저 sass는 css 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 준다. 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지보수를 쉽게 해준다 기존 CSS작성하는 방식과 비교해서 문법이 크게 다르지 않아서 CSS를 해본 사람은 쉽게 접근할 수 있다. 그리고 변수나 믹스인은 다른 파일로 따로 분리하여 필요한 곳에 쉽게 불러와서 사용할 수 있다 또한 최고 장점은 node_modules에 필요한 라이브러리를 불러와 쉽게 사용할 수 있다. 몇개의 예제를 따라 사용해 보니 나와 잘 맞았다(CSS를 해봤던 나에게는 좀 더 익숙한 느낌이었다) 두 번째로 스타일 컴포넌트가 있.. 2023. 6. 26. TIL, 06.23 리액트 입문주차 강의 듣기 항해 99에서 리액트 입문주차 강의를 들었다. 리액트 책을 초기이긴 하지만 봐서 그런지 강의 이해가 잘 되었다 React에 대한 소개부터 반복되는 컴포넌트 처리하고 추가 삭제하는 방법에 대해 익혔다 My Todo List 만들어봄 리액트 입문주차 강의를 듣고 그것을 기반하여 TodoList를 만들어보았다 강의 내용에서 나온 추가 삭제하는 방법을 이용하여 만들고 나름대로 로직을 짜 완료하고 취소하는 등에 기능을 만들었다 만들다 보니 내가 생각한 데로 뚝딱하고 나왔으면 좋았을 텐데 계속해서 오류가 계속 생겨 console.log와 한 몸이 되어 코드를 짰다 처음에 만났던 큰 문제는 react Cannot update a component에러였는데 찾아보니 컴포넌트 렌더링을 하는 동.. 2023. 6. 24. TIL, 06.22 프로그래머스 풀기 알고리즘에 대해 생각하기 0단계를 풀다가 1단계를 같이 풀기 시작하니 아직까지 초보 JS자로써 쉽지 않다 문제 중에 긴 문제를 풀게 되면 쉽게 가는 길이 있는데 나도 모르게 자꾸만 훨씬 더 어려운 문제라는 편견으로 코드도 복잡하게 짜게 되고 한참 고민하게 된다 또한 사람이 그 문제를 풀 수 있는 방법은 아는데 그것을 컴퓨터로 옮겨서 컴퓨터가 풀 수 있도록 코드를 짜는 것이 어렵다. 내가 푸는 것은 슥슥 풀 수 있는데 컴퓨터의 생각으로 컴퓨터가 동작하도록 하는 것이 쉽지 아직까지는 쉽게 되지는 않다 비밀지도 비트연산을 할때 |을 이용했는데 계속해서 내가 원하는 답이 나오지 않았다. 처음에는 2진법으로 만든 후 문제의 요구대로 앞에 0으로 채워 지정된 길이에 2진법으로 만들고 |을 하니 내.. 2023. 6. 23. TIL, 06.21 프로그래머스 코테 풀기 시저암호 아스키코드를 이용하여 문제를 풀었다 문제를 보자마자 어?! 아스키코드를 이용하면 좋을 거 같다 하고 푸는 것은 금방 풀었는데 조건문이 많이 들어가서 가독성은 많이 떨어졌다. 나름대로 조건도 조금도 편하게 고쳐보고 continue를 이용하여 속도도 높였다 문제를 나름대로 리팩토링 한후 다른 사람이 풀이를 비교해 보니 와우 내가 너무 아스키코드에 미쳐있었나 생각이 들었다 나처럼 아스키코드를 사용하신 분들도 계셨지만 n의 조건을 이용하여 긴 문자열을 만들어 빠른 속도로 푸신분도 계셨다 너무 한 가지에 집착하지 말고 좀 더 넓게 세상을 봐야겠다 신규아이디 추천 신규아이디 문제를 보면서 어?! 정규표현식으로 풀면 너무나도 좋을 것 같은 문제다라고 생각하여 이참에 정규표현식에 대해서.. 2023. 6. 21. TIL, 06.20 프로그래머스 코테풀기 filter에서 없는 index를 비교할때 없는 index라도 undefined으로 뜨기때문에 비교는 가능하다는 것을 알게되었다 코테를 점점더 어려운걸 풀어보고 있는데 시간이 점점 많이 들고 한번에 풀기도 어려워졌다 문제가 어려워질수록 문제를 보고 계산을 하는 것보다는 어떻게 해야 문제를 풀 수 있을지 어떻게 해야 빠르고 더 쉽게 풀수 있을지 생각해야한다 현재는 내 힘으로 문제를 풀어보고 다른 사람이 풀이를 보고 더 쉽게 풀거나 생각하지도 못한 기발한 풀이가 있으면 풀이를 따라가보고 그 풀이를 이용해 다시 짜보는 식으로 하고 있는데 아직까지는 다른사람처럼 이쁘게 짜기가 너무나 어렵다 그래도 반복해서 풀고 여러개를 풀어보니 조금식 뇌가 열리는것 같다. 앞으로도 열심히 풀어야지 아 그리.. 2023. 6. 20. 이전 1 2 3 4 다음
