Code&Data Insights

[문제]: 웹에서는 잘 보이는데, 안드로이드 어플에서 엑박뜸--> img onError 처리해서 이미 아예 display.non하던가 대체 이미지 넣어줘야함   [해결법]여기 링크의 방법을 제일 많이 참고했는데, 제시하는 해결 방법은1) 대체이미지를 넣거나2) 깨지는 이미지를 숨김처리하는 방법이 있다. https://github.com/vercel/next.js/discussions/14772 tag onError function doesn't work · vercel next.js · Discussion #14772" data-og-description="Bug report Describe the bug I'm trying to render an image if it exist and not show ..

react-slick 라이브러리 깔았는데 Slider > 이부분에 에러가.. 1) 시키는 대로 잘 깔았음yarn add react-slickyarn add slick-carouselyarn add @types/react-slick (타입스크립트 써서)  2) 이것저것 찾아보다가  이거 넣었음 -> 그래도 안됨..!  3) 왜죠..? https://www.npmjs.com/package/react-slick  react-slickReact port of slick carousel. Latest version: 0.30.2, last published: 4 months ago. Start using react-slick in your project by running `npm i react-slick`. ..

상태관리 라이브러리를 상황에 따라 선택해야됨! 각 라이브러리에 맞게 성능 향상 방법을 고민하는 것이 중요함!  [ 라이브러리 분류 ] 1) Flux: Redux, Zustand2) Proxy: Mobx, Valtio3) Atomic: Recoil, Jotai Redux - 모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 리듀서에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에서 좋음 - 서버 사이드 렌더링이 가능- redux toolkit [단점]- 보일러 플레이트와 장황한 코드가 필요함 - 방대한 코드량, 익숙하지 않은 원리와 직관적이지 않은 코드 => 러닝 커브 높음 - 리액트 전용 라이브러리가 아니기 때문에, 리액트 내부 스케줄러에 접근하기 어려웠음-..

동기(Synchronous) vs 비동기(Asynchronous)동기(Synchronous) 프로그래밍- 코드가 작성된 순서대로 차례대로 실행- 각 작업이 완료될 때까지 다음 작업이 시작되지 않음 비동기(Asynchronous) 프로그래밍- 코드가 작성된 순서와 상관없이 실행- 한 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 수행할 수 있음 비동기를 사용하는 주요 이유? => 멀티태스킹을 구현하여 시스템 자원을 효율적으로 사용하기 위해서! => 여러 스레드나 프로세스가 동시에 실행됨    비동기 프로그래밍의 발전 순서 1) Callback 함수:  함수를 등록하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해서 실행하는 함수 - 초기 비동기 프로그래밍에서는 콜백 함수를 ..

Flux 패턴 & 단방향 데이터 흐름: 리액트는 단방향 데이터 흐름(Action → Dispatch → Reducer → Store)을 기반으로 하는 Flux 패턴을 사용 Action: 상태 변경을 트리거하는 객체Dispatch: Action 객체를 Store에 전달하는 함수Reducer: Action에 따라 상태를 업데이트하는 함수Store: 애플리케이션의 전역 상태를 관리하는 객체View: Dispatch된 Action을 통해 상태를 변경하고, 상태가 변경되면 UI가 자동으로 업데이트됨 Redux: Flux 패턴을 구현한 라이브러리로, 애플리케이션의 상태를 단방향 데이터 흐름으로 관리 [장점]- 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고 전달할 수 있어 효율적- 상태 변경이 예측 가능..

상태(State)와 상태 관리란?State: 컴포넌트의 데이터 상태(ex) 사용자가 입력한 값이나 버튼 클릭 상태 상태 관리 : 화면을 변경하는 데 필요한 데이터를 관리하는 과정 [ 상태관리의 필요성 & 효과 ]- 상태가 변경될 때, Virtual DOM을 사용하여 관련된 DOM만 효율적으로 업데이트함 => 불필요한 DOM 접근최소화- 상태관리를 통해 코드 간결화와 유지보수성 강화가 가능 => 상태 관리는 필요한 상태만 관리하는 것이 중요! 최소한의 상태를 관리 : 불필요한 상태를 관리하면, 코드가 복잡해지고 렌더링 성능이 저하됨! 상태 관리의 범위1) 로컬 상태 (Local State) => useState: 각 컴포넌트 내에서만 사용되는 상태- 사용자가 입력한 데이터를 처리하거나 UI의 동작을 제어하..

React란?: Meta(구 Facebook)이 개발한 UI 라이브러리 주요 특징 Keyword (1) 컴포넌트 기반 구조(2) Virtual DOM 바탕의 성능 최적화(3) SPA 개발에 필요한 기능과 도구를 제공=> SPA(Single Page Application) : 하나의 HTML 페이지를 처음에 로드한 뒤, 페이지 이동이나 추가 데이터가 필요할 때 자바스크립트를 이용해 서버와 소통하여 필요한 부분만 업데이트하는 방식 React의 특징1) 컴포넌트를 기반으로 UI를 표현할 수 있음 -> 유지 보수 측면에서 매우 효율적임-> 페이지를 컴포넌트 단위로 개발할 수 있음  2) 화면 업데이트 구현이 쉬움-> 리액트는 선언형 프로그래밍(목적만 깔끔하게 명시, 코드가 간결함)의 방식으로 동작함==> 업데이..

(1) "use strict": strict mode 선언시, 선언되지 않은 변수를 사용할 수 없음  (2) 문자열 인덱싱 (string index): 문자열의 특정 인덱스에 접근가능=> str[0]  (3) string literal break up : 문자열을 여러 줄로 나누어 작성이 가능" hello" + "hh" => return hello hh  (4) 예약어를 속성 이름으로 사용 가능 (5) 배열의 모든 요소를 합산하거나, 특정 로직을 적용하여 값을 축약할 수 있음=> Array reduce(), reduceRight() : sum of all numbers in an array  (6) 배열의 모든 요소가 특정 조건을 만족하는지 확인=> Array every() : numbers.every(..