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 약관동의_받아오기(); } ..

📌웹 캐시의 종류웹 캐시는 웹페이지와 관련된 리소스(HTML, CSS, JavaScript, 이미지 등)를 임시로 저장하여, 동일한 리소스를 재요청할 때 더 빠르게 제공하는 기술입니다. 이를 통해 네트워크 요청을 줄이고, 페이지 로딩 속도를 최적화하며, 서버 부하를 감소시킬 수 있습니다. 💬웹 캐시의 종류브라우저 캐시브라우저에 의해 관리되며, 사용자가 웹페이지를 방문할 때 다운로드한 리소스를 로컬 저장소(디스크 또는 메모리)에 저장합니다.예: 동일한 이미지를 포함한 여러 페이지를 방문할 때, 이미지가 서버에서 다시 다운로드되지 않고 로컬 캐시에서 로드됨. 동일한 페이지에 접속할 때 더 빠르게 접속 가능프록시 캐시클라이언트와 서버 사이의 프록시 서버에서 캐싱을 수행합니다.네트워크 단위에서 여러 사용자가..

📌클라우드 네이티브(Cloud Native)란?클라우드 네이티브란 클라우드 환경에 최적화되어 설계된 애플리케이션과 시스템을 말한다. 클라우드 네이티브 애플리케이션은 마이크로서비스, 컨테이너화, 지속적인 통합 및 배포(CI/CD) 등의 기술을 사용하여 구축된다. 📌리프트 앤 시프트(Lift and Shift) 방식과의 차이리프트 앤 시프트는 기존 온프레미스 환경에서 사용되는 애플리케이션을 구조적인 변경 없이 그대로 클라우드로 옮기는 접근 방식이다. 이에 반해 클라우드 네이티브는 애플리케이션을 클라우드 환경에서 최적화되어 동작하도록 처음부터 새롭게 설계하거나 재구성하는 개념이다. 클라우드 네이티브 방식은 클라우드의 모든 기능을 활용해 더 높은 효율성과 유연성을 제공한다. 🔨클라우드 네이티브 핵심기술 1..

CSS(Cascading Style Sheets)는 웹 페이지의 스타일(디자인)을 정의하기 위한 언어로, HTML이나 XML같은 마크업 언어로 작성된 문서의 시각적 표현(색상, 레이아웃, 글꼴 등)을 담당한다. *CSS 전처리기전처리기는 CSS 확장 언어로 작성된 코드를 컴파일하여 일반적인 CSS로 변환한다.  Sass 등이 있다.장점1. 코드 재사용성 증가변수를 통해 색상, 글꼴 크기 등 반복적으로 사용하는 값을 한 곳에 정의하고 재사용할 수 있다.// 변수 정의$primary-color: #3498db;// 재사용body { background-color: $primary-color;}h1 { color: $primary-color;} 2. 코드 가독성 및 유지보수성 향상중첩을 지원하여, HTML..

📌Git 브랜치 전략Git 브랜치 전략은 협업하는 개발 환경에서 코드 변경 사항을 효율적으로 관리하고 품질을 보장하기 위해서 사용하는 규칙과 워크플로우다. 1. Git Flowmaster: 제품 출시 버전을 관리하는 메인 브랜치develop: 다음 출시 버전을 위해 개발하는 브랜치feature: 새로운 기능을 개발하는 브랜치release: 다음 출시 버전을 준비하는 브랜치hotfix: 출시된 제품의 버그를 고치기 위한 브랜치 2. Github Flow배포는 Git Flow 와 동일하게 master 브랜치에서 수행되지만, 그 외의 release, hotfix 등의 다른 브랜치들 대신 하나의 feature branch 만이 존재한다.  master/ # 프로덕션 배포 상태 (최종..

📌JWT 토큰JWT(JSON Web Token)이란 웹 표준으로, 주로 사용자 인증 및 정보 교환에 사용된다. JWT는 세 부분으로 구성되며, 각각 헤더, 페이로드, 시그니처로 나뉜다. 헤더는 토큰의 유형과 서명 알고리즘을 포함하며, 페이로드는 사용자 정보와 같은 클레임을 포함하며, 시그니처는 토큰의 무결성을 보장한다.JWT는 주로 OAuth와 같은 인증 시스템에서 사용되며, 클라이언트와 서버 간의 안전한 정보 교환을 가능하게 한다. 왜냐하면 JWT는 자체적으로 정보를 포함하고 있어 서버의 상태를 유지할 필요가 없기 때문이다.헤더토큰의 유형과 서명 알고리즘을 포함한다.{"alg": "HS256", "typ": "JWT"} 페이로드사용자 정보를 포함한다. {"sub": "1234567890", "name..

📌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..