TIL

fetch가 필요하게 된건 스터디 프로젝트에서 백엔드에 데이터(영화리스트)를 요청하고 받아와서 리스트를 뿌려주기 위해서다.options : 선택사항으로, 메서드 (GET,POST 등), 헤더, 요청본문, 인증 정보등을 지정할 수 있음(기본적으로 GET 요청을 수행함)f

스터디에서 진행하는 영화 예매 사이트 작업을 하면서 redux toolkit을 처음 사용하게 되었는데, 사용법이 익숙하지가 않아서 실수하는 부분들이 많았다.혼자서 사용법에 대해서 훑어보고 실수했던 부분들을 상기시키기 위해 TIL 주제로 선정함셋팅하기 : 한 곳에서 관리

영화 예매 사이트를 만들면서 목적에 따라 데이터를 변환시키는 일이 많았는데,그 중에서 객체를 배열로 만들어야 하는 경우가 있었다.객체에서 배열로 바꿔보는건 처음이라 공부해보고 싶어 오늘의 주제로 선택했다.배열로 만들고자 한 객체반환값 : key, value의 형태로 만

요즘들어 이터러블 관련 에러를 많이 보게 되었다.오늘도 이터러블 관련해서 막힌 부분이 있었는데,Object.entries()는 객체를 배열로 변환해고,Array.from()도 유사 배열 객체나 이터러블 객체를 배열로 생성해준다고 하지만둘은 다르다라는걸 제대로 인지하지

0. 주제 선정하게 된 배경 : 로그인 여부와 데이터를 완전히 다 불러오기전의 상태를 알기 위해서는 useQuery를 사용해야한다고 해서 공부해보고자 한다. 1. 제대로 알고 넘어가기 : 1-1. useQuery란? 주로 데이터를 가져와야하는 경우나, 데이터가 변경될

toISOString 메서드를 사용할 경우 한국시간과 차이가 나고,같은 날짜여도 toISOString()을 사용하면 toDateString()와는 다른 값을 반환하는 등원하는 날짜 데이터를 만들고자 할 때 여러 난관들이 꼬리에 꼬리를 물어 나타나다보니 한번에 문제를 해

챗지피티를 통해 코드 최적화할 만한 요소들을 검토한 결과,최적화시킬 수 있는 여러 방법을 알 수 있었다. :이전부터 궁금했던 사항인데 이번에 제대로 짚고 넘어가게 되었다.: 코드 최적화를 시키기 위한 방법으로 몇번 나왔는데,잘 사용하지 않던 방법이라서 정리가 필요했다.

백엔드에서 받아온 영화 정보에는 id값, 영화명, 개봉일자, 포스트URL 등이 있었고, 화면에 필요한 정보만을 가져다가 사용했다. 영화 id값은 단순히 데이터를 필터링할때만 필요하고,화면에서는 보여지는 내용에는 필요하지 않기 때문에 리덕스 툴킷에 영화id값까지 저장할

예매 페이지에서 영화/극장/시간 선택후 좌석선택 페이지로 넘어가려면로그인이 되어 있어야 함.1) 로그인이 되어있는 경우 : 해당 페이지로 이동2) 로그인이 안되어 있는 경우 : 로그인 페이지로 이동 2번째의 경우 로그인을 한 후에는 다시 원래 있던 페이지로 되돌아가고

0. 주제 선정하게 된 배경 : API는 지금까지 정리해온 TIL에서 fetch, redux toolkit, useQuery 에서 몇번이나 나온 개념이지만 아직도 머리에 담기지 않고 헷갈리는 부분이 많다. (아무래도 앞으로 몇번더 주제로 나올것 같다.. 말로 술술 설명

다른 스터디원분이 try catch 문을 쓰는걸 보고 잊고 있었던 문법인데 왜 그동안 나는 안쓰고 있었지? 라는 생각이 들었고개념을 다시 익혀서 나중에 사용할 일이 있을때 사용하고 싶었다.추가로, 또 다른 스터디원의 코드에서 fetch랑 try...catch문이였나?

프로그래머스 문제 풀면서 하루정도 고민하게 된 문제가 있었다. (결국 풀지 못함)단순한 방식이 아니라 내가 원하던 논리방식으로 풀고 싶었는데,그거에 얽매이다가 문제를 못풀었던것같다.다른 사람의 풀이 중에 내가 원하던 논리방식으로 푼 방식이 있었고,그렇게 풀기위해서는 제

영화 예매 프로젝트에서 상태 관리를 redux toolkit으로만 사용했던 점이 아쉬워서react query로 리팩토링할 예정인데 이전에 다른 스터디원분이 react query에 대한 개념을정리해주셨던게 있어서 그걸 바탕으로 다시 정리하면서 공부해 보려고 한다.이전에

어제 공부했던 react query에서 서버에다가 데이터 요청할땐 fetch나 axios 아무거나 사용해도 된다고 했었다.fetch랑 axios는 API를 공부했을때 API를 호출하는 방법들이였다.fetch는 공부했었고, axios도 공부해보고자 한다.: 주로 웹 어플

0. 주제 선정하게 된 배경 : 영화 프로젝트 리팩토링 작업중에 useMutation로 개선하면 좋은 곳이 있어서 적용해보면서 공부를 해보려고 한다. 이전에 정리한 react query, useQuery에 이어서 진행...! 1. 제대로 알고 넘어가기 : 1-1. u

1. 제대로 알고 넘어가기 : 1-0. 정의 async 는 함수를 비동기 함수로 만들어줌 1-1. 장점 1) 가독성, 직관성 : 반환한 Promise 객체를 계속 꼬리에 꼬리를 무는 then보다는 async가 어디서 비동기 처리를 하는지 직관적이고 가독성이 좋다.

알럿창을 어디서든 쓰일 수 있게 컴포넌트 상단에 위치시키고,store에 알럿창에 필요한 문구, 버튼명, 버튼 클릭시 함수를 저장함으로써유연한 컴포넌트를 만들고 싶었다. dispatch 함수에 action을 담을 때 함수를 전달하고 싶었다. 알럿창마다 확인 버튼 혹은 이

내일 진행되는 코테를 준비하고자, 그동안 프로그래머스 풀면서 내가 자주 사용했던 자바스크립트 개념들을 정리해보려고 한다!: 매칭 결과를 불리언 값으로 반환: 매칭 결과를 배열로 반환 ⭐️ 다른 메서드와 달리 대상 문자열.match(정규표현식) 이런 순서임!!!!!!플래

클라이언트와 서버 간 통신을 위한 "통신 규칙 세트" 또는 프로토콜프로토콜 : 통신하기 위해 사용하는 규칙의 집합으로,데이터 전송 방법이나 형식을 정의예: "나는 이렇게 줄테니 너는 이렇게 받고 난 너가 준거 그렇게 받을게"상태가 없는 프로토콜이다.= 각각의 데이터 요

0. 주제 선정하게 된 배경 : 브라우저 작동원리를 이해하지 못한 상태에서 애플리케이션을 최적화할 수 없다는 글을 보고 나니 TIL 주제로 선정해서 공부해야겠다 싶었음 1. 제대로 알고 넘어가기 : 1-1. HTML 파싱 -> DOM 트리 생성 html 파일을 렌더링

영화 프로젝트 배포 작업할때 환경변수 설정을 해줘야 했는데 정확히 알고 싶어 공부해보려고 한다.보안 정보 보호 : 보안키나 암호 같은 중요한 정보는 환경변수를 사용한다.환경에 따른 분리 : 개발 환경, 테스트 환경, 프로덕션 환경에 대해 각각 다른 구성을 제공함..en

코딩테스트 중에서 해시 개념으로 풀어보려고 했으나, 키-값으로 된 자료구조라고만 생각하고 푸니 문제를 못 풀겠다.: 자바스크립트에서 해시란 일반적으로 해시 테이블(Hash Table)또는 해시 맵(Hash Map)과 같은 자료구조에서 사용되는 용어라고 한다.해시는 데이

0. 주제 선정하게 된 배경 : 영화 프로젝트 배포 후 프론트에서 백엔드 주소를 정상적으로 불러오지 못했다. 그 이유가 프론트에서 사용하고 있는 프록시 서버는 개발할때만 사용 가능하고, vercel에서는 사용할 수 없어서 그런걸거라는 백엔드 지식이 있으신 팀원분의 도움

많은 사람들이 사용하고 있고, 프론트엔드 개발자가 되려면 알아야하니까..? 🤔그렇다면, 왜 많은 사람들이 React를 선택한걸까?UX(사용자 경험)이 좋아짐: SPA여서 화면깜박임 없이 자연스럽게 동작해서 앱과 비슷한 느낌이나서 UX가 좋아짐데이터-화면 일치: 데이터

0. 주제 선정하게 된 배경 : react 애플리케이션을 만들때 CRA로 만들기도 하고 VITE로 만들기도 한다. 그러니 두 개가 비슷한 역할을 한다고 생각했다. 그런데 CRA와 VITE를 같은 비교군에 있지 않다는 얘기를 듣게 되었고, 두개는 서로 다른건데 왜 둘다

0. 주제 선정하게 된 배경 : react 프로젝트 생성할때 CRA를 사용하기도, VITE를 사용하기도 하기 때문에 성능 차이 말고는 사용하는 이유가 별로 다르지 않다고 생각했다. 1. CRA가 하는 역할 : 1-1. 초기 프로젝트 설정 : React앱의 "초기 프로

0. 주제 선정하게 된 배경 : CRA랑 VITE는 같은거 아닌가? 둘다 리액트 프로젝트를 생성할때 사용하니 같은 비교선상에 있다고 생각했다. 그렇지만, VITE는 빌드도구이며, CRA와 비교할 수 있는건 create-VITE라는 것이라고 한다. VITE는 ES모듈로

0. 들어가며 : Next.js에 대해서 대략적으로 어떤건지 알고 싶었다. 무엇인지에 대해서만 우선 맛보기로 파악만 해보자...! 1. Next.js란? : 풀스택 웹앱을 만드는 리액트 프레임워크 2. 특징 2-1. 라우팅(Routing) : 파일 기반 라우팅 ->

새로운 깃 레파지토리 만들고 리액트 앱을 만들면 똑같은 이름의 폴더가 두 개 생겨서 안 까먹게 기록하기!git push로만 하고 싶은데 자꾸 오류가 나서 찾아봤다.리액트 앱 GIT 연동하기로컬에서 원하는 위치에 리액트 앱 만들기리액트 앱이 위치한 곳에서 깃허브에서 레파

유저가 데이터를 요구하면 데이터를 보내주는 프로그램예) 유저가 유투브 서버한테 영상을 보내달라고 요청하면 유투브 서버는 영상을 보내줌=> 단, 이 방법은 브라우저가 새로고침됨=> 새로고침없이 데이터 받아옴Asynchronous Javascript And XML서버하고

: 비동기 작업을 처리하되, 콜백지옥을 해결하려고: fetch 같은 비동기 함수는 promise 객체를 반환하는데,then과 catch 메서드를 사용할 수 있다.둘다 콜백함수를 인자로 받음.then: fetch 호출한 결과가 성공했을때 response객체를 전달함.c

: 압축되어 있는 값을 풀어준다.: 여러개의 값을 하나로 압축시킴: 단, 배열에서는 rest를 먼저 쓸수 없고 마지막에 써야함!: 모든 요소들을 배열로 모음스프레드와 rest문법\[JavaScript]rest와 spread 차이

회원가입/로그인 폼을 만들어 보려는데,비밀번호 유효성 검사할때 이해하지 못한채로 복사붙여넣기하는건 아닌것같아서정규표현식 복습도하고, 사람들이 자주 사용하는 비밀번호 유효성 검사 방식에 대해 알아보려고 한다./^(?=.a-zA-Z)(?=.\\d)(?=.\*\[!@\`\`

href를 통해 이동페이지를 새로 불러오면서 기존의 상태값들이 전부 초기화됨속도 저하브라우저 히스토리를 관리하지 않음주로, 외부링크 처리할때 사용: react에서의 a 태그to를 통해 이동페이지를 새로 불러오지 않음 (필요한 부분만 재렌더링함)속도 저하 방지HTML5

React에서 상태관리하기React + Redux 플로우의 이해

inputtype="file" 에서 업로드된 파일을 미리보기로 확인하고 싶을때fileReader, createObjectURL 2가지 방법을 사용할 수 있다고 한다.: 파일에 저장된 정보의 형태나 형식을아래와 같은 이유들로 다른 형태로 변환하는 처리데이터 표준화처리속도

대규모의 복잡한 단일 페이지 애플리케이션(SPA)을 개발하는 팀의 일원입니다. 애플리케이션은 사용자 인터페이스(UI)가 다이나믹하게 변화하고, 수많은 상태(state)를 관리해야 합니다. 상태 관리와 성능 최적화가 중요시되는 상황입니다. React를 사용하여 이 애플리

클래스에서 메소드를 정의하는 두 가지 방식이 존재합니다. 하나는 메소드를 직접 정의하는 방식, 다른 하나는 this 키워드를 사용해 메소드를 정의하는 방식입니다. 이 두 방식이 어떤 차이점을 가지고 있는지 생각나는 대로 말씀해주세요.문법적 차이:직접 정의: method

웹 애플리케이션에서 Content Delivery Network(CDN)를 사용하여 성능을 최적화하는 방법을 설명하고, CDN이 웹 페이지 로딩 시간과 대역폭에 어떤 영향을 미치는지 설명해주세요. CDN을 사용할 때 발생할 수 있는 잠재적인 문제와 해결하기 위한 방안을

React의 Suspense와 Concurrent Mode를 사용하여 비동기 작업의 성능을 최적화하는 방법을 설명하고, 두 기능이 사용자 경험에 미치는 영향을 설명하세요.suspense는 비동기작업이 렌더링될 동안 fallback에 지정한 컴포넌트를 보여줌으로써 사용자

React에서 useTransition과 useDeferredValue 훅을 사용하여 사용자 인터페이스의 응답성을 개선하는 방법을 설명하고, 각각의 훅이 언제 적합하게 사용될 수 있는지 얘기해주세요.: 상태 업데이트를 긴급하지 않은 것으로 표시하여 더 중요한 업데이트가