728x90 반응형 분류 전체보기145 react-query의 useQuery 언제 사용할까? react에서 비동기 로직을 리엑트스럽게 다루게 해주는 라이브러리다. 기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하기엔 다소 까다롭거나 귀찮은 기능을 제공해준다. 따라서 위와 같은 코드를 구현 할 때 사용한다면 그 매력에 빠지게 될 것이다! 기존 fetch 방식은 어땠을까? 기존 fetch 방식부터 살펴보자! 이 귀찮은 작업들을 React Query를 사용하면 자동으로 실행되게끔 코드를 작성할 수 있다. const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await .. 2023. 7. 12. [원티드] 프리온보딩 프론트엔드 챌린지 1-1주차 정리 강의를 듣고 정리한 내용입니다. MPA를 활용한 사이트의 특징과 장단점은 무엇인가요? MPA는 Multi Page Application으로 여러 개의 HTML 파일로 웹 애플리케이션을 구성하는 방식입니다. 라우팅에 필요한 라이브러리나 번들링에 필요한 여러 자바스크립트 툴체인이 필요 없고, 정적 페이지를 그대로 서빙하기 때문에 SEO나 페이지 로딩 속도 측면에서 장점이 있습니다. 하지만 새로고침 시 새로운 내용이 반영된 HTML 페이지를 가져오는데까지의 시간이 소요되기 때문에 유저가 빈 화면을 보게 된다는 단점이 있습니다. 추가로 MPA의 통신 상황은 아래와 같습니다. 1. 유저가 서버의 GET 요청을 보내고, blog.html을 받습니다. 2. 유저는 브라우저에서 blog.html을 열어 웹 사이트를 이.. 2023. 7. 10. [원티드] 프리온보딩 프론트엔드 챌린지 7월 - 사전과제 원티드 7월 챌린지에 참여하게 된 이유는 Next.js에 대해 공부해보고 싶어서였다. 2주동안 주2회 3시간씩 진행이 되는 실시간 강의이다보니깐 깊게 배우지는 못해도 얻어가는 게 분명히 있을거라고 생각했다. 사전과제는 총 3개였다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부.. 2023. 7. 7. 자료구조 - 연결 리스트 연결 리스트는 배열과 마찬가지로 항목의 리스트를 표현하는 자료 구조다. 메모리에 곳곳에 흩어진 연결된 데이터를 노드라고 부르고, 각 노드는 다음 노드의 메모리 주소도 포함한다. 이를 링크라고 한다. 노드와 연결리스트를 직접 코드로 구현해봤다. 여기서 length는 노드의 개수이고, head는 첫 노드의 주소이다. class Node { next = null; constructor(data) { this.data = data; } } class LinkedList { length = 0; head = null; } 데이터를 추가, 검색, 삭제하는 메소드도 추가로 구현해보았다. class Node { next = null; constructor(data) { this.data = data; } } class.. 2023. 7. 7. [백준/연결리스트/JS] 에디터 문제 설명 1406번: 에디터 첫째 줄에는 초기에 편집기에 입력되어 있는 문자열이 주어진다. 이 문자열은 길이가 N이고, 영어 소문자로만 이루어져 있으며, 길이는 100,000을 넘지 않는다. 둘째 줄에는 입력할 명령어의 개수 www.acmicpc.net 소문자만, 600000글자까지 커서 위치: 문장 맨 앞, 문장 맨 뒤, 문자 사이 맨 처음에 커서는 맨 뒤에 위치 L: 왼쪽으로 한칸 D: 오른쪽으로 한칸 B: 왼쪽에 있는 문자 삭제 P$: $를 커서 왼쪽에 추가 입력값: 문자열, 명령어 개수, 명령어들 출력값: 입력값에 모든 명령어 수행한 후의 결과값 시간 복잡도 arr.splice() 삭제하려는 요소의 위치, 배열 개수에 따라서 시간 복잡도가 달라진다. 삭제하려는 요소가 배열의 맨 끝에 위치할 경우.. 2023. 7. 6. 이전 1 ··· 4 5 6 7 8 9 10 ··· 29 다음 728x90 반응형
