시작하기 앞서... 이번에 우아한 테크코스 6기 웹 프론트엔드에 지원하게 되었다! 최종 인원을 뽑기 직전에 4주 동안 다른 지원자들과 함께 공부하고, 우테코 과정을 미리 경험해 볼 수 있다. 그래서 공부한 내용을 정리하면서 내가 한 내용을 공유하고 싶어 글을 작성하였다. 관련 내용은 메일로 오니깐 메일을 잘 확인하는 것이 중요하다!! git 프로젝트 관리 매주 미션은 GitHub를 통해 제출해야 한다. 프로젝트 fork 하기 프로젝트 fork를 해서 나의 깃허브 저장소에 프로젝트를 가져온다. 그러면 정상적으로 내 깃허브에 프로젝트가 생긴다. 프로젝트 clone 하기 이제 프로젝트에 코드를 작성하기 위해 clone을 해야 한다. clone은 깃허브에서 초록색 code 버튼을 클릭하여 아래 url을 복사하..

☘️ 스택(stack) 스택은 LIFO(Last In First Out) 로 "나중에 들어간 것이 먼저 나온다" 라는 개념을 가진 선형 자료구조이다. 예를 들어 아래부터 1, 2, 3, 4, 5 상자를 순서대로 넣으면, 뺄 때 순서대로 5, 4, 3, 2, 1 이렇게 되는 구조이다. 여기서 요소를 넣는 것을 Push, 빼는 것을 Pop 이라고 하며, 제일 위에 있는 요소를 Top이라고 한다. ☘️ 자바스크립트에서 스택(stack) 구현 자바스크립트에서 스택을 구현하기 위해 배열(Array)를 사용할 수 있다. 이미 배열에 push와 pop 함수가 구현되어 있어서 보다 편리하다. 그래서 아래 코드와 같이 배열을 사용하여 스택을 구현할 수 있다. 코딩 테스트에서 스택을 사용하는 경우로는 짝을 맞춰야 하는 문..

☘️ 시작하며... 지금 프로그래머스에서 내일배움코스로 FE 채용 과제로 배우는 자바스크립트를 수강하고 있고 지금 1주차를 끝냈다. [16회차] 2023.10.11 ~ 2023.10.24 국비 지원이라 내일배움 카드를 가지고 있어야 하며, 기간은 2주로 매우 짧은 편이다. 정해진 시간대에 듣는 것이 아니라, 온라인으로 기간 안에 내가 원하는 시간에 강의를 들을 수 있다는 장점이 있다. 참고로 나는 개인적으로 신청한 것이 아니라 국민취업제도를 통해 기관에서 신청해 준 것이다 ☘️ 1 주차 후기 사전 테스트 지금까지 React로 된 코드를 보다가 자바스크립트로만 된 코드를 보니깐 뭐가 뭔지 하나도 모르겠다,, 그래서 요구한 문제를 한 10% 해결한 듯..? ㅋㅋㅋㅋㅋㅋㅋㅋ쿠ㅜㅜㅜㅜㅜ 사전 테스트는 2시간! ..

[React] TanStack Query(리액트 쿼리) V5☘️ 시작하며... 내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다. 그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이jjang-j.tistory.com현재 게시물보다 위에 게시물 추천  시작하며...지난 동아리 프로젝트때 React-Query + recoil 조합으로 개발을 하였다.그래서 간단하게 React-Query를 활용해서 api 데이터를 요청하고 보내는 방법에 대해 설명하기 위해 글을 작성하기로 했다.(React-Query를 사용했던 경험으로 글을 작성하는 거라서 자세한 내용은 공식 문서에) TanStack Query ..

☘️ 연결 리스트 사용하는 이유 그 전 글에서 배열을 알아보았는데, 배열 같은 경우 원하는 위치에 데이터를 추가하고 삽입하는 경우에 시간 복잡도가 O(n) 으로 크다. 그래서 요소 추가와 삭제가 반복되는 로직 같은 경우는 배열을 사용하지 않고 연결 리스트를 사용하고, 배열은 탐색이 많은 로직에서 사용하면 좋다. 배열 - 탐색 유리 연결 리스트 - 요소 추가, 삭제 유리 ☘️ 연결 리스트란? 연결 리스트 정의 연결 리스트는 각 요소를 포인터로 연결하여 관리하는 선형 자료구조로 각 요소는 노드라고 부르고, 각 노드에는 해당 노드의 값이 있는 데이터 영역과 다음 노드를 가리키는 포인터 영역으로 구성된다. 그리고 첫번째 노드를 헤드(Head)라고 부른다. 연결리스트의 핵심 로직은 요소 찾기 요소 추가 요소 삭제..

☘️ 배열 배열은 연관된 데이터를 연속적인 형태로 저장하는 복합 타입으로, 배열에 포함된 원소는 순서대로 인덱스가 붙는다. 또한 배열은 탐색이 유리한 자료구조이다. 만약 배열의 요소를 추가 및 삭제하면 O(n) 이 소요된다. 그래서 요소의 추가와 삭제가 반복되는 로직일 경우 배열을 사용하지 않는 것이 좋다. ☘️ 배열 생성 자바스크립트에서 배열은 다음과 같이 다양한 방법으로 배열을 생성할 수 있다. 또한 자바스크립트에서 배열은 크기가 고정되어 있지 않고, 필요에 따라 줄이거나 늘릴 수 있다. ☘️ 배열 요소 추가, 삭제 - push, pop, splice push와 pop을 사용할 경우 빅오 표기법이 O(1) 이다. 그러나 splice를 사용하여 중간에 값을 추가하거나, 제거하면 빅오 표기법이 O(n) ..

☘️ 빅오 표기법 빅오 표기법은 시간 복잡도를 표현하기 위해 사용되는 것이다. O (log n) O (n) O (n log n) O (n^2) ☘️ 성능 측정 방법 자바스크립트 Date 객체 이용 다음과 같이 측정하고 싶은 명령어의 앞 뒤로 시간을 구하여 그 시간의 차이를 사용하여 성능을 측정한다. ☘️ 계수 법칙 n이 무한에 가까울 수록 상수 k의 크기는 의미가 없어 생략한다. ☘️ 합의 법칙, 곱의 법칙 빅오 표기법은 서로 더해질 수 있고, 곱해질 수 있다. ☘️ 빅오 표기법 핵심 상수항은 무시 O(4n) => O(n) 가장 큰 항 이외엔 무시 O(n^2 + n) => O(n^2) 해당 게시물은 프로그래머스 - 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 참고하여 작성한 글입니다...

☘️ 자료구조란? 자료구조(data structure)는 컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 의미한다.더 정확히 말해, 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미한다.신중히 선택한 자료구조는 보다 효율적인 알고리즘을 사용할 수 있게 한다. 이러한 자료구조의 선택문제는 대개 추상 자료형의 선택으로부터 시작하는 경우가 많다. 효과적으로 설계된 자료구조는 실행시간 혹은 메모리 용량과 같은 자원을 최소한으로 사용하면서 연산을 수행하도록 해준다. [출처 - 위키백과] ☘️ 현실 세계에서 자료구조 만약에 영화 예매 소프트웨어를 만든다면 영화 검색(Trie), 고객이 많을 경우 줄을 서야함(Queue), 고..

☘️ 시작하며... 지난 게시물에서 GraphQL API를 만들어 보았고, 이번에는 Rest API를 GraphQL로 바꿔볼 것이다. 해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ 비주얼 스튜디오(vs code) GraphQL 확장 프로그램 Apollo GraphQL Rest API를 GraphQL로 바꾸기 전에 먼저 확장 프로그램에 대해 알아 볼 것이다. 아래 사진과 같이 GraphQL의 typeDefs를 작성하면 글씨 색이 초록색이라 가독성이 떨어지는 것을 볼 수 있다. 이럴때 vs code에서 Apollo GraphQL 확장 프로그램을 ..

☘️ 시작하며... 지난 게시물에서 GraphQL에 대해 알아보고 테스트 하였고, 이번에는 직접 GraphQL API를 만들어 볼 것이다. 해당 게시물은 노마드코더 강의를 참고하여 작성했다.(무료 강의) GraphQL로 영화 API 만들기 – 노마드 코더 Nomad Coders GraphQL for Beginners nomadcoders.co ☘️ GraphQL API 만들기 초기 세팅 Apollo Server 란? Apollo 서버란 GraphQL API를 사용하는 서버를 개발할 수 있도록 도와주는 패키지 이다. 프로젝트 생성 비주얼 스튜디오에서 원하는 이름의 디렉토리를 만들고 node.js 프로젝트를 초기화하는 명령어를 입력해 준다. npm init -y 그리고 apollo server와 graphQ..