분류 전체보기

🔎 개발자 도구웹 페이지를 디버그, 수정, 성능 분석하기 위한 강력한 도구 모음이다. 개발자 도구를 활용하면 웹 개발의 생산성을 높일 수 있다.크롬에서 윈도우는 F12 또는 Ctrl + Shift + I, 맥은 Command + Option + I를 누르면 개발자 도구가 켜진다. 🧩 주요 패널Elementshtml/css 상태 확인ConsoleJavaScript 코드 실행 및 디버깅로그 확인오류 메시지 표시Sources페이지 소스 검사 및 디버깅break point 지정 및 변수 모니터링Network브라우저에서 발생하는 통신 상태네트워크 모니터링네트워크 요청 상세 정보 확인Performance성능 측정페이지 로드 및 상호작용 성능 분석타임라인 기록Application저장소, 쿠키, 캐시 등을 관리Se..

🧐관통 프로젝트?1학기 마지막에는 싸피에서 1학기에 배운 내용을 '관통'한다는 의미에서 관통 프로젝트를 진행해요~!이전에도 관통 프로젝트를 위한 관련 실습을 진행하긴 하지만, 찐 관통 프로젝트는 싸피에 와서 처음 진행하는 프로젝트예요.전공자 반의 경우에는 여행, 부동산 중에 주제를 선택하는데, 저희팀은 여행을 주제로 선택했습니다!아무래도 여행을 좋아하기도 하고, 집을 구해본 경험도 없기에 여행을 주제로 한 프로젝트가 더 재미있게 진행할 수 있을 것 같았어요!  🎈 프로젝트 개요1. 인원2인반에서 팀을 정하기 때문에 미리미리 반에서 누구랑 할지 정해놓으면 좋아요. 저희 반에서는 학기 초에 조사했을 때, 프론트엔드 지망자가 저밖에 없었는데요. 그래서인지 팀 정하는 시기가 왔을 때 페어오빠가 먼저 제안해 ..

안녕하세요~~~~ㅎㅎㅎ싸피 들어온 지가 엊그제 같은데 벌써 1학기가 끝나가네요😢 이제 곧 관통 프로젝트를 앞두고 있는데요!! 어떤 주제든 지도 API를 사용하실 거 같아요.그래서 지도 API를 미리 사용해 봤습니당! 전 카카오맵 API를 썼고, 이에 대해 정리해 보도록 하겠습니다🧐   1. API 키 발급 먼저 카카오맵 API를 쓰기 위해서는 여기에서 API 키를 발급받아야 합니다.  애플리케이션 추가하기를 누르고 정보를 입력해 주세요. 추가한 애플리케이션을 들어가면 이렇게 뜨는데, 저는 Vue에서 카카오맵을 활용해 개발할 거라 JavaScript 키를 사용할 거예요.그리고 아래 플랫폼 설정하기를 눌러서 도메인을 등록합니다. 저는 처음에 Web에 http://localhost:5173을 등록했고, 이..

Vue - Kakao Map1. Vue3에서 Kakao Map 사용하기 이전 글에서는 카카오맵을 활용해 기본 지도를 띄어 보았다.이번에는 마커 생성하기 예제를 활용해 마커를 띄어 보려고 한다. 📄 코드  🧩 결과

Vue에서 지도를 띄우기 위해 카카오맵 API를 사용하려고 한다. 카카오맵 API Key는 여기에서 받으면 되고, JavaScript 키를 사용하면 된다.플랫폼 등록하는 것도 잊지 말자! 포트 번호가 바뀌었을 때 바보 같이 도메인 등록하는 걸 까먹었다가 삽질했다... 아래는 카카오맵에서 제공하는 기본 지도 생성 예제를 활용해서 Vue에서 지도를 띄우는 코드이다. 📄 코드   options는 카카오맵 Docs에서 확인하고 필요한 대로 조정하면 된다. 🧩 결과

ref()반응형 상태(데이터)를 선언하는 함수 (Declaring Reactive State) ref() 사용인자를 받아 .value 속성이 있는 ref 객체로 wrapping하여 반환한다.ref로 선언된 변수의 값이 변경되면 해당 값을 사용하는 템플릿에서 자동으로 업데이트한다.인자는 어떠한 타입도 가능하다.const {createApp, ref } = Vueconst app = createApp({ const message = ref('Hello, Vue!') console.log(message) // ref 객체 console.log(message.value)}) 템플릿 렌더링반환된 객체의 속성은 템플릿에서 사용할 수 있다.Mustache syntax(콧수염 구문)를 사용하여 메시지 ..

Client-side framework클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반 프레임워크 필요한 이유? 🤷‍♀️웹에서 하는 일이 많아짐 웹에서 단순히 문서를 읽는 것만이 아닌 무언가(음악 스트리밍, 채팅 등)를 하게 되었다.현대적이고 복잡한 대화형 웹 사이트 -> 웹 애플리케이션(web application)Client-side framework를 통해 동적인 대화형 애플리케이션을 쉽게 구축할 수 있다. 다루는 데이터가 많아짐애플리케이션의 기본 데이터를 안정적으로 추적하고 업데이트(렌더링, 추가, 삭제 등)가 필요하다.애플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다. SPA (Single Page Application)페이지 한 개로 구..

🚨 문제 상황심각: 경로 [/spring_ws_08_2]의 컨텍스트 내의 서블릿 [appServlet]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [Request processing failed: java.lang.IllegalArgumentException: Name for argument of type [java.lang.String] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.]을(를) 발생시켰습니다.java.lang.IllegalArgumentExcept..