본문 바로가기

Frontend67

Angular 핵심정리 Google이 개발한 강력한 프론트엔드 웹 애플리케이션 프레임워크.개요새로운 기술/라이브러리를 공부하기에 앞서 요즘의 추세를 알아보면 큰 도움이 된다.stackoverflow 설문을 보니 전세계적으로 Angular가 꽤나 많이 사용되고 있음을 알 수 있었다. 무려 17%! 프론트엔드 프레임워크/라이브러리 중에서는 React의 40% 다음으로 높은 퍼센티지를 기록했다. React는 정말 사랑받는 라이브러리구나..! 재밌는 점은 Professional Developers에게 Angular는 거의 20%를 차지하는데Learning to Code들에게는 7% 😂... 아무래도 이제 배우기 시작하는 사람들 입장에서 Angular는 React나 Vue.js에 비해 진입 장벽이 확실히 높기 때문에 그런 것 같다. .. 2024. 8. 19.
자바스크립트와 비동기 자바스크립트는 기본적으로 싱글 스레드이기 때문에 한 번에 하나의 동작만 할 수 있다. 동기 언어. 따라서 코드가 순차적으로 실행된다. 하지만 이렇게 되면 문제가 있다. 네트워크 요청 등의 작업은 시간이 오래 걸리는데, 이런 코드를 동기식으로만 처리한다면 뒤의 작업들은 모두 대기 상태가 된다. 블로킹이 발생하는 것이다. 이걸 해결하기 위한 것이 비동기! 자바스크립트는 웹 개발을 위해 설계되었기 때문에 비동기 처리가 매우 중요하다. 또한 UI에서 상호작용을 즉각적으로 처리하기 위해서는 백그라운드에서 오래 걸리는 작업들이 비동기로 처리되어야 할 필요가 있다.ex. 버튼 클릭할 때 HTTP 요청을 보내는 동안 UI는 멈추지 않고 반응해야.  자바스크립트에서 비동기 작업을 처리하는 방법콜백함수비동기 작업이 완료되.. 2024. 7. 10.
리액트 네이티브 + 타입스크립트에서 className 에러 문제 상황  React Native + TypeScript + Native Wind(TailwindCSS)를 사용해서 프로젝트를 하는 중 마주친 ts 에러!  No overload matches this call. Overload 1 of 2, '(props: ViewProps): View', gave the following error. Type '{ children: Element[]; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'className' does not exist on type 'IntrinsicAttrib.. 2024. 6. 20.
JS의 sort()는 기본적으로 문자열 정렬이다. JS의 sort() 함수는 기본적으로 문자열 정렬let numbers = [10, 2, 1];numbers.sort(); // ["1", "10", "2"] JS의 sort()는 기본적으로 문자열 정렬을 수행하기 때문에 위와 같은 결과가 나온다.이 결과는 숫자 값에 따른 정렬이 아니라 문자열로 변환된 후의 유니코드 값에 따른 정렬. 예상한 대로 수 비교를 해서 정렬을 하고 싶다면 비교함수를 sort()에 전달해야 한다.  let numbers = [10, 2, 1];numbers.sort((a, b) => a - b); // [1, 2, 10]// 다른 방식으로 써보기numbers.sort((a, b) => { if (a b) return 1; else return 0;}  사실상 가장 위의.. 2024. 6. 4.
리액트로 소셜 로그인 구현하기(구글) 개요팀 프로젝트 중, 소셜 로그인 파트를 구현하기 위해 이해한 흐름을 정리해보려고 한다.  흐름구글 로그인 버튼을 누름버튼에 연결된 링크로 이동한다.https://accounts.google.com/o/oauth2/v2/auth? client_id=${GOOGLE_LOGIN_KEY} &redirect_uri=${GOOGLE_REDIRECT_URI} &response_type=code &scope=https://www.googleapis.com/auth/indexing  이 때, GOOGLE_LOGIN_KEY는 발급된 api key이고GOOGLE_REDIRECT_URI는 백엔드 분과 의논하여 BASE_URL + '/login/oauth2/code/google'로 하기로 했다.App.tsx에도 저 주소에 해.. 2024. 5. 16.
TypeScript에서 zustand persist 사용하여 전역 상태 저장하기 개요타입스크립트, 리액트를 사용하여 팀 프로젝트를 하던 중...전역 상태로 로그인 상태를 관리하면서 새로고침 후에도 상태를 유지해야해서 zustand persist를 사용하기로 했다.redux persist 처럼 zustand도 persist middleware를 사용하면 간단하게 로컬 스토리지에 상태값을 저장할 수 있다.  zustand persist 사용법공식 문서에 나와있는 simple example import { create } from 'zustand'import { persist, createJSONStorage } from 'zustand/middleware'export const useBearStore = create( persist( (set, get) => ({ bea.. 2024. 5. 15.