일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- JS
- 백준골드
- 알고리즘
- css기초
- dp알고리즘
- CSS
- 백준구현
- 안드로이드 스튜디오
- 리액트
- 백준알고리즘
- js코테
- 포이마웹
- 백준구현문제
- 자바스크립트
- 리액트커뮤니티
- 프로그래머스JS
- 다이나믹프로그래밍
- HTML5
- HTML
- 백준
- 프로그래머스코테
- 백준js
- JS프로그래머스
- 프로그래머스
- 백준nodejs
- 익스프레스
- 몽고DB
- 코테
- 코딩테스트
- 리액트댓글기능
- Today
- Total
목록React (63)
개발새발 로그
순수함수란 순수 함수는 계산만 수행하고 그 이상은 수행하지 않습니다. 자신의 일에만 신경씁니다. 호출되기 전에 존재했던 객체나 변수를 변경하지 않습니다. 동일 입력, 동일 출력. 동일한 입력이 주어지면 항상 동일한 결과를 반환해야 합니다. React는 이 개념을 중심으로 설계되었습니다. React는 여러분이 작성하는 모든 컴포넌트가 순수 함수라고 가정합니다. 즉, 여러분이 작성하는 React 컴포넌트는 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 합니다 순수함수가 함수형 프로그래밍에서 중요한 것은 아니다. 즉 순수하지 않은것이 잘못된 것은 아니다. 순수해야 할 때도 있고, 순수하지 못 할 때도 있다. 그런 것을 판단하는 것이 중요하다. 1.StrictMode로 순수하지 않은 계산 감지하기 R..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/YoXJd/btsDWSJMuRI/KHpk8SyP2eLDOZ6Tg9KXN1/img.png)
리액트 공식문서 "목록 렌더링"에서 중요한 부분이나 알게된 부분만 정리하려고 한다. 1.key로 목록의 항목 순서 유지하기 각 배열 항목에는 해당 배열의 항목들 사이에서 고유하게 식별할 수 있는 문자열 또는 숫자인 key를 부여해야 합니다. ... map() 호출 내부의 JSX 요소에는 항상 key가 필요합니다! key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다. React에 key가 필요한 이유는 무엇일까요? 데스크톱의 파일..
React 공식문서의 "컴포넌트에 props 전달하기 부분"에서 중요 내용이나 처음 안 부분을 정리해볼 예정이다. 1. {...props} function Profile(props) { return ( // 받은 props를 그대로 넘김(ES6의 객체 스프레드가아님) // 잘못된 코드 : props라는 이름의 boolean값을 ture로 넘겨줌 //에러 : 잘못된 행동 어떤 프로퍼티에 할당을 해줘야하는데 그냥 값을 넣어서 오류 ); } {...props}로 객체 스프레드를 이용해 새로운 객체가 넘어가는 것이아닌 props객체 그대로 넘어가게된다. Spread Operator로 복사한 객체(배열)은 1depth의 값에서만 깊은 복사를 실행한다. https://velog.io/@yukyung/Spread-O..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oFyHu/btsDQXwTBKh/UrZ8pi2OcKTL0xvYT7DtH1/img.png)
공공 데이터 포털에 있는 농사로 오픈 API를 이용하면서 생긴 일들을 적어보려고 한다. 먼저 오픈 API 요청하는 방법! https://www.data.go.kr/ 여기 들어가서 원하는 데이터를 찾는다 이때 되도록이면 JSON을 지원하는 곳이면 좋다. 나는 XML만 가능한 API를 선택해서 XML을 JSON으로 바꿔주는 로직이 더 필요했다. 그리고 원하는 오픈 API 데이터에서 보통은 API 인증키를 신청하거나 받아야한다. https://www.nongsaro.go.kr/portal/ps/psn/psnj/openApiLst.ps?menuId=PS65428&pageIndex=1&pageSize=&sLclasCode=&sText=%EC%95%BD%EC%B4%88%EC%A0%95%EB%B3%B4 나는 이 사이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Btgvg/btsDQeyrD2n/9HdREZcXP26AjGa4O9MVuK/img.png)
렌더링이 될 때 불필요한 렌더링을 줄이기 위해서useCallback과 useMemo를 사용하곤 했다. 그러다 과연 나는 이 최적화 도구를 적절하게 사용하고 있는 것일까에 대해 의문이 들었다. 본 내용은 useCallback과 useMemo와 같은 최적화 도구를 언제 사용하는 것이 적절한지에 대해 탐구하면서 작성했다. useCallback과 useMemo useCallback이란? 메모이제이션을 통해 함수 재생성을 방지하고, 의존성 배열을 사용하여 필요한 경우에만 함수를 업데이트할 수 있도록 한다. 이를 통해 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다. useMemo란? 메모이제이션을 통해 연산 결과 재생성을 방지하고, 의존성 배열을 사용하여 필요한 경우에만 연산 결과를 업데이트 할..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/t7ogz/btsDGva7kOT/6zaoOjnVMhACi9RTTsfz11/img.png)
1. 무료 폰트사이트에서 폰트 다운 받기 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 2. ttf 파일을 프로젝트에 저장하기 3. @font-face를 global css 적용하는 곳에 작성하기 import { css } from '@emotion/react' import { Theme } from './Theme' const GlobalStyle = (theme: Theme) => css` @font-face { font-family: 'Murukmuruk'; src: url('src/assets/fonts/KCC-Murukmuruk.ttf'); font-weight: normal; font-style: normal; } @font-face { font-famil..
1. react-router-dom 설치 npm install react-router-dom 2. Router 환경 구축하기 import { createBrowserRouter } from 'react-router-dom' import HomePage from '~/pages/MainPage' export const router = createBrowserRouter([ { path: '/', element: } ]) 3. App.tsx에 라우터 호출하기 import { RouterProvider } from 'react-router-dom' import { router } from './routes/Router' function App() { const [theme, onToggle] = useThem..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b1e8hR/btsDDXLoQ8X/bHhAAmEZP1RnP821RfWsSk/img.gif)
팀 프로젝트를 진행하면서 만났던 문제나 느꼈던 점, 아쉬웠던 점을 정리해보려고한다. 기억이 아직 남아있을 때 얼른 적어야지! 나중에 이 부분들을 따로 나눠서 검색하기 용이하게 만들 예정이다!! 1. 리액트 쿼리를 사용한 이유? - 비동기 데이터를 관리하는데 편리 - Mobx나 Redux를 사용하다보면 BoilerPlate 형태의 코드가 발생하게 되는데, 리액트 쿼리는 비교적 코드의 양이 적고 구조가 단순하여 추후 유지보수가 용이해서 - Caching을 통해 애플리케이션 속도를 향상 - 동일한 데이터에 대한 중복요청을 제거함 - 가비지 컬렉터를 이용해 서버 쪽 데이터 메모리를 관리 - 리액트 Hooksdhk 유사한 인터페이스로 사용이 편리 - 비동기 과정을 선언적으로 관리 가능 정리하자면 리액트 쿼리는 데..