stonesy

1. v-text {{myText}} 2. 데이터 타입 Vue에서 데이터타입은 숫자형, 문자형, Boolean이 있다. {{ myPrice * 1.08 }} {{ "안녕하세요~ "+ myName + "님" }} {{ myName.substr(0,1) }} 3. v-on이벤트 지정. 약어로 @를 사용할 수도 있다. 1번 버튼 2번 버튼 4. v-bind속성에 vue 인스턴스의 속성이나 메소드, JavaScript 구문을 사용할 수 있게 해준다. 네이버 구글 5. v-model양방향 데이터 바인딩..

💬실무에서 클린코드란? = 유지보수 시간의 단축흐름 파악이 어렵고도메인 맥락 표현이 안 되어동료에게 물어봐야 알 수 있는 코드 💬기존 코드 파악function QuestionPage(){ const [popupOpened, setPopupOpened] = useState(false); // 추가코드 async function handleQuestionSubmit(){ // 추가코드 start const 연결전문가 = await 연결전문가_받아오기(); if(연결전문가 !== null){ setPopupOpened(true); } // 추가코드 end const 약관동의 = await 약관동의_받아오기(); if(!약관동의){ await 약관동의_받아오기(); } ..

📌SpringSpring이란 엔터프라이즈급 애플리케이션을 만들기 위해 모든 기능을 종합적으로 제공하는 경량화된 솔루션이다. 개발자가 복잡하고 실수하기 쉬운 Low Level에 신경 쓰지 않고 Business Logic 개발에 전념할 수 있도록 해준다. 주요 특징  Spring이란 엔터프라이즈급 애플리케이션을 만들기 위해 모든 기능을 종합적으로 제공하는 경량화된 솔루션이다. 개발자가 복잡하고 실수하기 쉬운 Low Level에 신경 쓰지 않고 Business Logic 개발에 전념할 수 있도록 해준다. 주요 특징1. 경량 컨테이너스프링은 자바객체를 담고 있는 컨테이너이다.스프링 컨테이너는 자바 객체의 생성과 소멸과 같은 라이프사이클을 관리한다. 언제든지 스프링 컨테이너로부터 필요한 객체들을 가져와서 사용할..

📌JSP(Jakarta Server Pages, 이전명칭: Java Server Pages)JSP는 HTML 내에 Java 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이드 스크립트 언어이다. Java EE 스펙 중 일부로 WAS에서 동작한다. JSP는 실행시에는 Java Servlet으로 변환된 후 실행되므로 서블릿과 거의 유사하다고 볼 수 있다. 하지만, 서블릿과는 달리 HTML 표준에 따라 작성되므로 웹 디자인하기에 편리하다. JSP의 기본 객체1. pageContext(=page)- 하나의 JSP 페이지- 페이지는 하나의 JSP이므로, 한 페이지에서 다른 페이지의 정보를 사용할 수 없다.2. request- 하나의 http 요청 정보- 클라이언트로부터..

📌웹 애플리케이션의 기본 아키텍처1. Client(클라이언트)Web Browser(웹 브라우저)사용자가 데이터를 입력하거나 요청(Request)를 보낼 때 사용하는 애플리케이션으로, 클라이언트는 웹 브라우저를 통해 서버에 데이터를 요청하고, 서버로부터 응답(Repsonse)를 받는다.2. Server(서버)서버는 Web Server와 Web Application Server로 나뉘며, 클라이언트의 요청을 처리하고 결과를 반환하는 역할을 한다.(1) Web Server클라이언트로부터 요청을 받아 응답을 전달하는 역할을 한다.클라이언트의 요청을 처리한 뒤, WAS로 전달한다.주로 정적 리소스(HTML, CSS, JS 파일)을 처리하고, 동적 요청은 WAS로 넘긴다.(2) Web Application Ser..

Page Router와 App Router의 가장 큰 차이점은 서버 컴포넌트이다. 서버 컴포넌트란?서버 컴포넌트는 서버에서만 실행되며, 클라이언트에 JavaScript를 전달하지 않는다. JavaScript 번들 크기를 줄이고 초기 로딩 속도를 개선하는데 도움이 된다. 단, 클라이언트에서 직접 상호작용하는 이벤트 핸들러는 사용할 수 없고, 서버에서 렌더링된 HTML만 클라이언트로 전달한다. page router에서는 페이지 전체를 SSR로 처리할지, SSG로 처리할지, 혹은 CSR으로 처리할지 결정할 수 있었지만 app router에서는 컴포넌트 단위로 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다. 만약 서버 컴포넌트가 클라이언트 컴포넌트의 자식으로 있다면 클라이언트에서 서버 컴포넌트가 렌더링되는 것이..

useEffect컴포넌트가 렌더링될 때 특정 작업을 수행하거나, 상태가 props가 변경될 때마다 특정 작업을 수행할 수 있도록 한다. useStatestate의 값이 변경되면 컴포넌트가 리렌더링 된다. useState: 상태가 업데이트되면 컴포넌트가 다시 렌더링된다. 렌더링에 반영되어 UI에 영향을 미치는 상태를 관리할 때 사용한.useRef: 값이 변경되더라도 컴포넌트가 다시 렌더링되지 않는다. 즉, useRef는 값이 변경되더라도 화면에 영향을 미치지 않는 상태를 관리할 때 사용한다.따라서 입력 값이 화면에 즉시 반영되거나 다른 컴포넌트가 해당 상태를 참고해야 하는 경우가 아니라면 useRef를 사용하여 리렌더링을 방지할 수 있다.  useMemouseMemo는 여러 개의 state가 있을 때 불필..

📌빌드란?웹 개발에서 소스 코드를 최적화하고 변환하여 프로덕션 환경에서 사용할 수 있는 형태로 만드는 것을 말한다. 널리 사용되는 빌드 도구로는 Webpack, Vite 등이 있다. ✔👀 Webpack가장 널리 사용되는 자바스크립트 모듈 번들러 중 하나다. Webpack은 CommonJS와 ES 모듈을 모두 지원하며, 별도의 변환 없이도 require와 module.exports를 인식하고 처리할 수 있다. 반면 모든 모듈을 분석하고 의존성을 파악하며 이로인해 프로젝트의 규모가 커질수록 빌드 시간이 길어질 수 있다. ✔👀 ViteVite는 빠른 빌드 속도와 즉각적인 모듈 업데이트를 제공한다. ES 모듈을 기반으로 동작하여 브라우저가 ES모듈을 직접 해석할 수 있다. 이로 인해 초기 빌드 없이 필요한..

✨타입과 집합 타입은 여러 개의 값을 포함하는 집합으로 생각할 수 있다. 그리고 타입 간에는 서로 포함 관계(슈퍼-부모 타입, 서브-자식 타입)이 존재한다. ✔타입 호환성A와 B 두개의 타입이 존재할 때 A 타입의 값을 B 타입으로 취급해도 괜찮은지 판단하는 것업캐스팅: 서브 타입의 값을 슈퍼 타입의 값으로 취급하는 것 ✔다운캐스팅: 반대로 슈퍼 타입의 값을 서브 타입의 값으로 취급하는 것 ✖→ 집합의 포함 관계처럼 업캐스팅은 모든 상황에 가능하지만, 다운 캐스팅은 대부분의 상황에 불가하다. ✔Unknown(전체 집합)모든 서브 타입을 부분집합으로 갖는 전체 집합으로 unknown 타입 변수에 모든 타입의 값을 할당할 수 있다. 반대로 unknown 타입의 값은 any를 제외한 어떠한 타입의 변수에도 할..

📌TypeScript 개요 및 기초✨TypeScript 개요TypeScript란 어떤 언어인가?TypeScript란 JavaScript를 더 안정적으로 사용할 수 있도록 Type이라는 안전장치를 추가한 확장판 JavaScript라고 할 수 있다.※참고: tsconfig.js → TypeScript의 컴파일러 옵션 파일이다.※참고: tsconfig.js → TypeScript의 컴파일러 옵션 파일이다.  ✨TypeScript의 원시타입: number, string, boolean, null, undefinedTypeScript의 원시타입인 Type number, string, boolean, null, undefined에 대해 TypeScript를 사용하는 방법은 다음과 같다.// type 주석 또는 t..