능히 해낼 수 있다

✍️✍️✍️ 위 글은 면접을 위한 CS 전공지식 노트를 읽고 학습한 내용으로 구성되었으며, 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). Singleton Pattern은 하나의 Class에 오직 하나의 Instance만 가지고 패턴이다. 하나의 Class를 기반으로 여러개 개별적인 Instance를 만들 수 있으나, 싱글톤 패턴은 하나 대 하나로 로직을 만들 때 사용하며 보통 DB연결 모듈에 많이 사용한다. 장점 단점 하나의 Instance를 기반으로 해당 Instance를 타 모듈이 공유. 때문에 Instance생성비용이 줆 높은 의존성 I/O(Input/Output) Bound 작업에 사용됨(인스턴스 생성에 많은 비용이 드는 작업) TDD(Test Driven Dev..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. MVC 패턴 MVC 패턴은 Flux가 등장하기 전 대부분의 앱이 사용하던 소프트웨어 디자인 패턴이다. 주로 웹 및 응용 프로그램에서 사용되며, 코드의 재사용성을 높이고 유지보수를 용이하게 하기 위해 설계되었다. Model: 데이터 보관. 비즈니스 로직을 관리한다. View: 데이터를 화면에 보여주는 역할. UI를 나타낸다. Controller: 사용자의 입력을 받아 데이터에 대한 수정, 조회등의 역할. 모델과 뷰의 결합도를 낮춰 유연한 구조를 유지할 수 있도록 도와준다. MVC패턴의 가장 큰 장점은 역할을 분리함으로써 코드의 모듈성과 재사용성을 높여준다는 점이다. 이로 인해 개발자들은 각각의 역할에 ..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 브라우저 이벤트, 이벤트 핸들러 가령 사용자가 웹사이트 상에서 버튼을 클릭했다면, 그때는 click 이벤트가 발생하고, 우리는 이 click 이벤트가 발생했을 때 실행할 코드를 설정할 수 있다. 이벤트 발생에 따라 실행될 함수를 설정하는 것을, 이벤트 핸들러 를 할당한다고 말한다. 자바스크립트에서 이벤트 핸들러의 할당은 html 태그에 on이벤트 = "실행될함수" 속성을 설정해주는 것으로 할 수 있다. // JS에서 사용하는 방법 Alert Button in JS // React에서 하는 방법 Alert Button in React 코드블럭을 비교 했을 때 React의 특징은 아래와 같다 jsx 형태..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 리액트 컴포넌트에는 Life Cycle(생명주기)라는 것이 있다. 컴포넌트가 표시되고 사라지는 순간까지를 나타낸 표현 인데, react에서 사용할 시점은 크게 mout → update → unmount로 나뉜다. 0. mount(컴포넌트가 표시될 때) useEffect(컴포넌트가 표시될 때 실행할 함수, [빈 대괄호]); 1. update (컴포넌트 내부 요소가 업데이트될 때) useEffect(요소들이 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수/State]); 2. unmount (컴포넌트가 사라질 때) useEffect(() => {return () => 컴포넌트가 사라질 때 실행..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 프로젝트 생성 yarn create vite 프로젝트이름 --template react 1. 모듈 설치 및 실행 yarn ↓ yarn dev 2. React 의 변수와 상태 (props, state) 최종적으로 보여주는 페이지인 app.jsx에서 css 초기화 만들어 놓고 진행하기 import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' ReactDOM.createRoot(document.getElementById('root')).render( , ) 2 - 1. props 비구조화 할당 props..