COCO World

코드 구조 const Page = () => { const onChanged = useCallback((e) => { e.target.value = e.target.value.trim() const value = e.target.value; onChange(e); },[onChange]); return ( ) } onChange의 역할 : 입력 상태가 실시간으로 업데이트되어 최신 상태를 유지하며, 사용자에게 실시간 피드백을 제공 단점: 상태 업데이트가 발생할 때마다 컴포넌트가 재렌더링되어 성능에 영향을 줄 수 있다. 따라서, onChange 메서드 값의 변경이 있을 때에만 onChanged의 함수가 실행될 수 있도록 useCallback을 통해 onChange를 의존성 배열에 넣어두었고, input의 입..

1. 리덕스 사가(Redux Saga) Redux-Thunk는 함수를 디스패치 할 수 있게 해주는 미들웨어였다면, Redux-Saga의 경우엔, Action을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 수행하는 방식으로 사용한다. 야기서 특정 작업이란, 특정 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 Dispatch하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있다. Redux-Thunk 다음으로 가장 사용되고 있는 라이브러리로써 주로 애플리케이션에서 비동기적으로 API를 호출하여 데이터를 가져오는 일과 같은 부수 효과(Side Effect)를 쉽게 처리하기 위해 사용하는 라이브러리이다.위의 특정 작업에 API의 비동기 호출 행위가 포함되며, 때에 따라 기존 요..

ERP & 생산 파트 1. ERP : Enterprise Resource Planning (전사적자원관리) :기업 내 생산,물류,재무,등 경영 활동 프로세스들을 통합적으로 연계해 관리해주며,기업에서 발생하는 정보들을 서로 공유하고 새로운 정보의 생성과빠른 의사결정을 도와주는 전사적자원관리시스템 2. MES : Manufacturing Execution System (제조실행시스템) :제조업체의 공장 관리를 위한 개념이자 구현 도구이다.환경의 실시간 모니터링,제어,물류 및 작업내역 추적 관리,상태파악,불량관리 등에 초점을 맞춘 현장 시스템. 제품의 주문을 받고 난 후 제품이 완성될 때까지 생산의 최적화를 위한 정보를 제공하며 생산 현장에서 발생하고 있는 최신 정보를 관리하여 생산 공정과 기능을 개선하게끔 ..

🌎 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 ..

🌎 문제 설명🌎 문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을..

🐼 Java와 JavaScript의 차이점이 무엇인가요? : 둘 다 프로그래밍 언어이지만, Java는 객체지향 프로그래밍 언어이고, JavaScript는 객체지향 스크립팅 언어이다. 따라서 Java는 가상 시스템 또는 브라우저에서 응용 프로그램을 작성하는 반면, javaScript 코드는 주로 클라이언트측 웹 개발에 사용된다. 🐼 call by value와 call by reference의 차이점이 무엇인가요? : call by value는 값에 의한 호출로 인자로 받은 값을 복사하여 처리한다. 원래의 값이 보존되며, 복사하기 때문에 메모리 사용량이 늘어난다. call by reference는 참조에 의한 호출로 인자로 받은 값의 주소를 참조하여 직접 값에 영향을 준다. 복사하지 않고 직접 참조하기에 빠..

🪴 들어가기에 앞서 MVC, MVP, MVVM 패턴은 소프트웨어 개발에서 주로 사용되는 아키텍처 디자인 패턴이므로, 이정도는 숙지하고, 흐름이 어떻게 진행되는지 알아보고, 각각의 장단점을 파헤쳐 보자. 🪴 디자인 패턴이란 ? 소프트웨어 디자인에서 공통적인 문제를 해결하기 위해 재사용이 가능한 해결책이다. 이러한 패턴은 개발자들 사이에서 검증되고 테스트된 설계 아이디어와 방법론의 집합을 의미하는데, 디자인 패턴을 사용하면 소프트웨어 시스템을 구축하고 유지보수 하데 도움이 되는 구조화된 접근 방식을 제공한다. 1. 디자인 패턴의 세 가지 범주 생성(Creational) 패턴 : 객체의 인스턴스화 과정을 다루는 패턴이다. 이러한 패턴은 객체를 생성, 조립 및 표현하는 방법에 초점을 둔다. 대표적인 예로 싱글턴..

🥕 개요 TS 라이브러리 설치하기 tsconfig.json 생성하기 파일 확장자 변경하고, 코드 수정하기 기타 주의사항 🥕 TS 라이브러리 설치 리액트의 새로운 프로젝트(CRA)에서 TS 설치하기 # npm 버전 npm create-react-app my-app --template typescript # yarn 버전 yarn create react-app my-app --template typescript 기존 리액트에 프로젝트가 존재하고, TS만 추가설치하기 # npm 버전 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # yarn 버전 yarn add typescript @types/node @t..