리액트바오

프로젝트를 하던 도중 새로 클론을 받아야할 일이 생겼다. git pull 로 새로운 브런치의 파일을 받아오려고 했는데 이러한 에러가 떴다. Access 어쩌고 저쩌고 remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password. 원격: HTTP 기본: 액세스가 거부되었습니다. 제공된 암호 또는 토큰이 올바르지 않거나 계정에 2FA가 활성화되어 있고 암호 대신 개인 액세스 토큰을 사용해야 합니다. 에러 뒤에 읽어볼 수 있는 링크가 있길래 들어가 보았더니 2FA..

카테고리 없음 2023. 1. 31. 16:02

Next.js란 Next는 React 웹 프레임 워크중 하나다. 서버사이드렌더링 방식으로 리액트 기반 이며 Node.js위에서 빌드된 오픈 소스 웹 개발 프레임워크다. Node.js로 서버 렌더링 되는 웹사이트를 빌드하는 해결책의 하나이기도 하다. Next.js는 SSR방식으로 서버에서 사용자에게 보여줄 페이지를 모두 미리 그린 뒤 페이지를 렌더링 하는 방식이다. 리액트에서 추천하는 방법 - React를 배우고 있거나 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App - 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js CSR vs SSR CSR은 클라이언트사이드렌더링(Client-Side-Rendering), SSR은 서버사이드렌더링(Server-Side-Render..

react 2023. 1. 17. 17:06

회사에서 새로 시작하는 프로젝트에서 chakra ui를 사용하게 될 수 도 있다고 들었다. 아직 확정된 상황은 아닌데 chakra ui에 대해 알아볼 필요가 있기에 나는 프로젝트를 앞두고 차크라 ui에 대해 알아보기로 했다. 먼저 내가 궁금한 부분은 버튼 디자인을 자체적으로 해놓았을 경우, chakra ui를 굳이 사용하지 않아도 되지 않을까? 라는 의문이 든다. chakra ui를 사용하는 이유는 디자인 해둔 사항이 없기때문에 디자인을 가져다 쓰는것이라고 생각하는데, 또 어떤 이점이 있는지 한번 알아보자. 차크라 UI 란 ? 우선, Chakra UI의 요소는 API를 사용하여 간단하게 사용자 정의하고 테마를 변경할 수 있다. Chakra UI는 재사용 가능한 사용자 인터페이스 구성 요소를 빠르게 구축할..

카테고리 없음 2023. 1. 17. 14:49

이번에 내가 관심있는 회사에 면접을 보게 되었는데 Redux에 대해 설명을 해야했고, 면접관은 추가로 Flux패턴에 대해 물어보셨다. 난 Flux패턴을 들어보기는 했지만, 잘 몰라서 대답을 하지 못했다. 이제부터는 알기위해 공부해 보기로 했다. Flux패턴은 우선 MVC와 함께 디자인패턴중 하나다. 난 MVC만 알지만 그 외에도 MVP,MVVM 등이 있다고 한다. 우선 나에게 좀 더 익숙한 MVC패턴에 대해 간단히 정리해본 후 Flux는 MVC와 어떤 차이가 있는지 정리해보려 한다. MVC패턴은 디자인패턴 중 하나이다. MVC패턴은 디자인패턴 중 하나이다. 디자인패턴이란? 만약 어떤 서비스를 만들고 유지보수 해야한다면, 다른 팀원들과 함께 공유 해야한다면 코드를 좀 더 가독성있고 깔끔하게 만드는 방법을 ..

react 2022. 12. 12. 18:53

Redux는 사용해 보았는데 Recoil은 들어만 보았다. 며칠전, Recoil을 사용해봤냐는 질문을 들었는데, Redux와 무슨 차이가 있는지 문득 궁금해져서 공부해보기로 했다. Recoil이 무엇인지, Redux와는 무엇이 다른지 알아보며 다음 프로젝트때 Recoil을 사용해볼지 고민해 보는 시간을 가질것이다. Redux의 단점 난 아직 Redux만 써보았기에 비교 대상이 없어 개인적으로 느낀 불편함은 초기세팅이 번거롭다는 것뿐이다. 내가 느낀 불편한 점 외에 또 어떤 단점이 있는지 알아보았다. - React 전용 라이브러리가 아니다. React관점에서는 외부요인으로 Store가 취급되며 동시성 모드를 구현하기에 호환성이 부족하다. - 복잡한 Boiler Plate초기세팅이 요구된다. Store, A..

react 2022. 12. 8. 21:36

react로 작업을 할때면 습관처럼 axios를 함께 설치하곤 했다. axios를 쓰는 나만의 이유는 없었지만 굳이 생각해보자면 fetch보다 왠지 좀 더 간단한 코드인 것 같아서? 그럼 axios는 fetch와 뭐가 다를까? 왜 굳이 설치하여 사용할까? fetch fetch는 ES6부터 들어온 JavaScript 내장 라이브러리로 따로 설치하지 않고 사용할 수 있다. Promise기반으로 만들어졌기 때문에 axios처럼 다루기가 쉽다. class Youtube { constructor(key) { this.key = key; this.getRequestOptions = { method: "GET", redirect: "follow", }; } async mostPopular() { const respo..

react 2022. 11. 22. 13:48

작업을 할때마다 종종 봐온 오류였는데 오늘의 경험을 가지고 정리를 해려고 한다. 유튜브 클론코딩을 하던 중 정말 똑같이 잘 따라한것 같은데 검색어를 입력하고 검색을 하면 검색이 되어야하는 상황이다. 그런데 계속 Uncaught TypeError: youtube.search is not a function 라는 에러가 떴다. Uncaught TypeError: is not a function youtube.search is not a function youtube.search는 함수가 아닙니다. ?? App.jsx: 10번째 라인을 전후하여 살펴보아야겠다. console로 query가 잘 들어오고 있는지 확인해 보아야겠다. 이렇게 콘솔에 query를 찍어본뒤 bts를 검색을 해보면 console에 bts가..

카테고리 없음 2022. 11. 17. 19:32

event loop란 event loop는 Callback Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다. 이벤트 루프를 이해하기 위해서는 먼저 자바스크립트의 특징을 알아야한다. 자바스크립트는 1. 한 번에 하나의 작업만 처리 할 수 있다. (자바 스크립트는 단일 스레드 기반의 언어이다.) 2. 비동기로 동작을 하는데, 비동기로 동작하는것은 자바스크립트가 아닌 브라우저에서 하는 것이다. Memory Heap : 메모리의 힙(heap) 영역은 사용자가 직접 관리할 수 있는 '그리고 해야만 하는' 메모리 영역이다. 힙 영역은 사용자에 의해 메모리 공간이 동적으로 할당되고 해제된다. Call Stack : 실행된 코드의 환경을 저장하는 자료구조로, 함수 호출 시 이곳에 저장된다. 어떤 함수를 저장하..

Javascript 2022. 11. 9. 14:47