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. [백준/연결리스트/JS] 거울냥이는 죽어서 거울을 남긴다 문제 설명 16226번: 거울냥이는 죽어서 거울을 남긴다 격자판으로 이루어진 디디몬 어드벤쳐의 어느 섬. 그 곳에는 거울냥이들이 모여 살고 있다. 거울냥이들의 생태계를 조사하던 디디는 충격적인 사실을 알게 되었다. 거울냥이들은 닿는 생명체를 www.acmicpc.net 거울: 거울냥이의 하단, 냥이가 죽어도 거울은 남음, 거울 있으면 빔 통과하지 못함 (1,1)부터 시작 빔은 상하좌우 발사 거울냥이가 사라지면 자기 차례와도 빔 쏘지 못함 입력값: 거울냥이 마릿수, 빔 쏘는 순서대로 거울냥이 위치 출력값: 살아남은 거울냥이 갯수 시간 복잡도 시간 초과도 났고, 정답을 확인해보니 방향성도 틀렸다. 알고리즘 설계 처음 설계 방식 - 틀린 방식 1. 2차원 배열 생성 2. 거울 위치 구하기 => mirror로 .. 2023. 7. 6. 자료구조 - 배열 1. 읽기 1단계로 배열에서 값을 찾을 수 있다. 2. 검색 값이 어떤 인덱스에 있는지 찾는 것이 검색이다. 선형 검색(한 번에 한 셀씩 확인하는 방법)의 경우 N개의 셀로 이루어진 배열은 최대 N 단계가 소요된다. 3. 삽입 배열의 어디에 데이터를 삽입하는가에 따라 효율성이 다르다. 배열을 할당할 때 항상 배열의 크기를 기록하기 때문이다. 맨 뒤에 데이터를 삽입하는 경우 => 1단계 그 외(N개의 원소 전부 이동 + 실제 삽입 단계) => N + 1 단계 4. 삭제 최대 N단계(삭제 + 데이터 이동) 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 7. 5. 10일간의 해커톤 - 기획부터 배포까지(포텐데이 후기, 회고) 전에 인스타그램에서 보았던 해커톤 프로그램인데 백엔드 개발자와는 협업해본 경험이 있지만, 기획자와 디자이너와는 협업해본 경험은 없어, 취업 전에 이러한 경험을 하면 좋을 것 같아 신청하게 되었다. 비사이드에서 진행하는 프로그램인 포텐데이는 딱 10일간 몰입하여 서비스 하나를 완성시키는 온라인 해커톤이다. 비사이드 : IT 프로젝트 경험을 통해 성장하세요! bside.best 결론부터 말하자면.. 밤 새지 않는 온라인 해커톤이라고 하는데, 욕심이 난다면 밤을 무조건 새게 될 것이라는 것과.. 팀원을 잘 만나면 정말 좋은 경험이 될 수 있다는 것이다! 나는 정말 운이 좋게도 팀원을 너무 잘 만나서 10일간 잘 으쌰으쌰해서 배포까지 이어질 수 있었던 것 같다. 보통 팀은 기획자, 디자이너, 프론트, 백엔드 이.. 2023. 7. 5. 실행 컨텍스트 실행 컨텍스트 실행 컨텍스트는 자바스크립트가 실행되는 환경이다. 여기서 환경은 this, 변수, 객체, 함수 등 코드의 실행에 필요한 기반들이다. 좀 더 구체적으로 말하자면, 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하고 관리한다. 이 중에서 식별자, 스코프, this 등은 실행 컨텍스트의 렉시컬 환경을 기반으로 관리되고, 코드의 실행순서는 콜스택(실행 컨텍스트의 스택)을 통해서 관리된다. 실행 컨텍스트 종류 1. 전역 실행 컨텍스트 처음으로 자바스크립트 코드가 실행될 때 생성된다. 2. 함수 실행 컨텍스트 함수가 호출될 때마다 생성된다. 각각의 함수 호출은 모두 각자의 실행 컨텍스트를 생성하고 가진다. 3. eval 실행 컨텍스트 strict mode(엄격 모드)에서 독립적인 스코프를 생성한.. 2023. 6. 14. 이벤트 루프 작동 원리 자바스크립트는 하나의 프로그램에서 하나의 코드만 실행할 수 있는 싱글 스레드 프로그래밍 언어다. 하지만 자바스크립트의 동시성을 지원해주는 것이 바로 이벤트 루프다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만, 브라우저는 멀티 스레드로 동작하는 것이다. 이 말은 아래의 작동 원리를 보면 조금 더 이해가 잘 될 것이다. 먼저 v8 자바스크립트 엔진이 어떤 절차로 동작하는지 간단하게 작성했다. 아래의 이미지를 보면서 흐름을 읽는 것이 이해하기가 쉽다. 1. 힙 영역에서 메모리를 할당 2. 콜스택에 맨 처음으로 선언한 코드들을 가지고 있는 anonymous 푸시 3. 그 다음에, 호출된 코드들이 순차적으로 콜스택에 푸시되고 실행 4. 호출된 코드들 중 비동기 함수는 Web APIs로 이동 5. Web A.. 2023. 6. 1. 이전 1 2 3 4 5 6 7 ··· 15 다음 728x90 반응형
