TIL & 일지34 TIL, 07.11 코테풀기 오늘도 간단한 코테를 풀었다 sort를 할 때 문자를 비교할 때는 -를 쓸 수 없고 작고 크고를 비교해서 -1이랑 1로 지정을 해주어 오름차순이랑 내림차순을 해줬어야 했는데 오랜만에 하니 결과가 한 번에 나오지 않아 엥?! 왜 정렬이 안되지 하고 당황했다 금방 잘못된 지점을 찾아 고쳐 문제를 풀었지만 오래 쉬지 않고 반복적으로 풀어야지 까먹지 않고 오래 가지고 있을 수 있다는 것을 다시 한번 느꼈다 쉬운 문제라도 계속해서 꾸준히 풀어야겠다 리액트를 다루는 기술 외부 API를 연동하는 뉴스 뷰어 만들기 이제까지 스터디하면서 강의를 보면서 api 연동하는 것을 몇 번 해봐서 그런지 책 공부를 하는데 매우 수월했다 저번에 강의를 듣거나 스터디에서 api 할 때는 많이 허우적거렸는데 이번에 책을 따라가.. 2023. 7. 12. TIL, 07.10 코테풀기 오늘도 간단한 코테를 풀었다 리액트를 다루는 기술 리액트 다루는 기술 한강을 완독했다 바로 리액트 라우터로 SPA 개발하기 장인데 문제는 책에 나오는 버전은 react-router-v5로 현재 쓰이는 react-router-v6 많은 차이가 있어 책을 완독하지만 v5랑 v6버전을 비교하며 신버전으로 공부하였다 크게 다른 몇개가 있는데 그 중 하나는 구버전은 component로 되어있는 것을 볼 수 있는데 신버전은 component가 사라지고 element를 사용해야 한다 그러면서 한가지만 매칭되어 여러 라우팅을 매칭시키고 싶다면 URL 뒤에 *을 사용하면 된다 중첩된 라우트와 Oulet이라는 컴포넌트를 사용하면 페이지끼리 공통적으로 보여줘야 하는 레이아웃이 있을때 유용하게 사용될 수 있다 이것외.. 2023. 7. 11. TIL, 07.08-09 모달, 버튼을 포함한 웹페이지 리팩토링 리팩토링 간단한 코드리뷰를 한 뒤 부족한 부분을 채우기로 했다 코드리뷰를 하면서 제일 처음에 본 것은 아이콘!! 아이콘을 넣으려고 고 자리는 만들어놨는데 정작 아이콘 넣는 것을 까먹었다 라이브러리에서 필요한 아이콘을 assets 폴더에 넣어놓고 필요한 곳에 사용하도록 하였다 또한 이름을 더욱 명시적으로 바꾸었고 모달도 재사용성을 높이기 위해 text까지 props로 주는 것으로 바꾸었다 거슬리는 UI도 살짝 바꾸었다 코드리뷰까지 마치니 자주 쓰는 컴포넌트를 재사용하기 위해서는 데이터는 최대한 배제한 채로 UI만 가꾸고 안에 내용을 props로 넣어주는 식으로 만들어야 하는 것을 알게 되었다 toLocaleString 인풋으로 받은 숫자 데이터를 3자리 수마다 ', .. 2023. 7. 10. TIL, 07.07 모달, 버튼을 포함한 웹페이지 연습하기 여러가지 버튼, 인풋, 모달, 설렉트를 구현해보았다 이번에 중요하게 생각한것은 스타일 컴포넌트를 이용한 재활용, 폴더구조 그리고 이름(변수명, 함수명 등)이다 저번에 코드리뷰때 이름에 대한 조언을 받아서 이름을 짤때 함수에 쓰임새에 맡게 그리고 이 변수가 어디에 쓰이는지에 맞추어 쓸려고 노력했다 폴더구조도 컨테이너와 컴포넌트로 나눠 관리하고 스타일 컴포넌트도 색깔과 크기로 종류를 나누어서 재사용하게 만들었다 이번에 여러가지 메세지 박스도 써보았는데 나는 alert만 알고 있었지만 이번에 만들면서 메세지 박스가 여러종류가 있다는 것을 알게되었다 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 alert, 사용자에게 메세지를 보여주고 [확인/취소] 둘중 하나를 선택하.. 2023. 7. 8. TIL, 07.06 코테풀기 이중배열에 약한것 같아서 쉬운 문제중 이중배열을 골라 풀었다 역시 반복학습은 중요하다 반복적으로 풀다보니 쉬운레벨을 푸는것이긴 하지만 빨리 빨리 풀수 있게 되었다 이것이 메타인지의 힘인가 모자른 부분을 알게되면 반복학습하기 좋은거 같다 강의듣기 React Query 기존 미들웨어의 단점은 코드량이 너무 많고 Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아닌 규격화 문제가 있다 리액트 쿼리는 코드량이 많아가지고 오류가 날일이 없고 사용방법이 기존 thunk 대비 너무 쉽고 직관적이다 React Query는 서버 데이터를 위한 표준을 이미 제시하고 있기 때문에 개발자들 마다의 특성에 따라 바뀔 염려가 없어 return 문에 도착하기 전에 isLoading 또는 isError에 따라 별도.. 2023. 7. 7. TIL, 07.05 강의듣기 Thunk 리덕스에서 dispatch를 하면 action이 리듀서에 전달되고 리듀서는 state를 반환한다 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 할 수 있다 흐름은 dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)이다 thunk를 사용하려면 thunk 함수를 만들고 extraReducer에 thunk를 등록하고 dispatch하고 테스트 해보면 된다 리덕스 툴킷에서 thunk 함수를 생성할 때는 createAsyncThunk를 이용한다 createAsyncThunk의 첫번째 자리에는 action value가 두번째 자리에는 함수가 들아가고 두번째에 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데 첫번째 인자는 컴포넌트에서 보내준 pa.. 2023. 7. 6. TIL, 07.04 코테풀기 코테를 풀면서 몰랐던 함수를 정리했다 every랑 some인데 나는 every를 안쓰고 문제를 풀었지만 좀더 쉽고 편하게 풀수 있는 방법이 없을까 찾아보다 알게되었다 every는 배열의 모든 원소가 조건에 맞는지 검사하는 메소드이다 모든 원소가 조건을 만족하면 true를 반환하고 하나라도 만족하지 않으면 false를 반환한다 그렇기에 원소가 없는 빈 배열은 조건을 만족하지 않는 원소가 없으므로 true를 반환한다 every를 알게 되면서 유사한 some도 같이 공부하였는데 some은 every랑 반대로 배열의 원소가 하나라도 조건에 맞는지 검사하는 메소드이다 모든 원소 중 하나라도 조건을 만족하면 true를 반환하고 모두 만족하지 않으면 false를 반환한다 원소가 없는 빈 배열은 조건을 만족하.. 2023. 7. 5. TIL, 07.03 코테풀기 코테를 안 풀면 코테적 머리가 굳는 것을 우려해 쉬운 거라도 하루에 한 개씩 풀어야겠다고 생각해 오늘도 3개 정도 풀어보았다 긴 조건문을 쓸 때 가장 좋은 가독성을 가지고 있는 switch!! 나는 switch문을 많이 써보지 않아서 이참에 코테 문제 풀면서 연습해 보았다 확실히 switch문으로 적으니 확실히 가독성이 좋고 나도 정리하기 편했다 자주자주 써먹어야겠다 리액트를 다루는 기술 컴포넌트 성능 최적화 컴포넌트 성능을 최적화하기 위해서는 불필요한 리렌더링을 방지해주어야 한다 컴포넌트에 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하면 되지만 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없기에 React.memo라는 함수를 사용한다 하지만 R.. 2023. 7. 4. TIL, 07.01-02 TodoList 리팩토링 최적화에 대해 고민해보고 고쳐야 하는 부분을 개선해보기로 했다 먼저 GlobalStyle과 reset css를 분리하고 코드를 간소화 하기 위해서 CDN css를 추가하여 css를 초기화하였다. 그 다음으로 커스텀 훅을 만들어 반복되는 재활용하기로 했다. 파일을 하나 만들어 자주쓰는 훅을 넣어놓고 필요한곳에서 꺼내썼다. 그리고 필요없는 로직을 제거하거나 좀 더 나은 방향으로 바꾸었다. 다 정리한다음 혹시나 실행중에 잘못된 곳은 없는지 여러가지를 실험해보니 수정상태가 고정되는 것을 확인하여 고치고 사용자가 쓰기 편하게 UI를 좀더 개선하였다. 마지막으로 다른사람한테도 의견을 물어서 잘못된 행동을 했을때 alert창으로 알려주었다(공백만 받았을경우에는 업데이트를 하지 않고 alert.. 2023. 7. 3. 이전 1 2 3 4 다음
