월루를 꿈꾸는 대학생

$data 현재 인스턴스의 데이터 객체에 접근하기 위한 속성 Vue인스턴스 내의 데이터를 동적으로 조작할 수 있음 {{ message }} Update Data Using $data $data.message로 데이터 바인딩을 할 수 있음 --- {{ option }} export default { data() { return { title: '', type: 'movie', number: 10, year: '', filters: [ { name: 'type', items: ['movie', 'series', 'episode'] }, { name: 'number', items: [10, 20, 30] }, 반복문 사용할 때 양방향 데이터 바인딩을 써서 각 셀렉트들의 값들을 어느 변수랑 연동할지 $data[..

뷰의 router에서 제공하는 컴포넌트 유저가 해당 부분을 누르면 라우터를 통해 해당 페이지 전환을 처리함 새로고침을 하지 않고 화면을 새로운 거로 재랜더링함 보통 a 태그 대신 사용한다고 보면 되고 해당 링크를 눌렀을 때 활성화한 스타일 저장을 위해 active-class속성 사용이가능 Home 1. router-link 부분을 누름 = a 2. to속성이 href 대신으로 이동할 링크를 알려줌 3. 해당 링크 활성화시 적용할 클래스를 active-class에 지정하면 클래스가 별도랑 "active"로 새롭게 지정이 됨 nav-pills클래스를 사용해서 꾸밀 수 있음 https://getbootstrap.kr/docs/5.0/components/navs-tabs/ 내비게이션과 탭 Bootstrap에 포..

라우팅을 통해 변경되는 컴포넌트의 내용을 표시 라우터가 변경될 때 마다 즉 url이 변경이 될 때마다 그에 맞는 정보를 route파일에서 찾아서 해당하는 url과 컴포넌트를 확인한다 그 후에 해당 컴포넌트를 빌드함 ! 동적인 컴포넌트 전환 및 다른 경로를 탐색할 때 쓴다 const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ]; const router = new VueRouter({ routes }); url 맞는 컴포넌트르 자동으로 빌딩해주니까 아주 달달한 컴포넌트다

npm run dev 명령어를 입력했을 때 밑에 에러가 뜸 [webpack-cli] Unable to load '@webpack-cli/serve' command [webpack-cli] TypeError: devServerFlags is not iterable 그냥 새로 설치하면 에러 사라짐 npm list webpack-cli npm install --save-dev webpack-cli rm -rf node_modules rm package-lock.json npm install

메뉴얼 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 타임리프 특징 서버 사이드 html 랜더링 ssr 네츄럴 템플릿 스프링 통합 지원 서버사이드 html 랜더링 타임리프는 백엔드 서버에서 html 동적으로 랜더링 네츄럴 템플릿 html 파일을 순수하게 유지하려고 함 = 파일만 열어도 안 깨짐 서버를 통해 뷰 템플릿을 동적으로 변경하고 값을 덮어씌워서 랜더링함 순수 html을 유지하면서 뷰 템플릿도 사용할 수 있는 것을 네츄럴 템플릿이라고 한다 스프링 통합 지원 스프링과 통합이 아주 잘 되어 있음 타임리프 기본 기능 타임리프 선언 기본 표현식 https://www.thymeleaf.org/doc/tutorials/3.0/usingthym..

요구사항 분석 상품 도메인 모델 상품 ID 상품명 가격 수량 상품 관리 기능 상품 목록 상품 상세 상품 등록 상품 수정 흰색 - 컨트롤러 검은색 -뷰 https://javacan.tistory.com/entry/what-is-a-domain-model @Data는 데이터모델에 쓰기엔 예측하지 못한 동작을 할 수 있기에 게터 ,세터 정도만 쓰는 것이 좋음 쓸려면 확인하고 쓰자 ! 레포지토리 작업 @Repository // 안에 @Component가 있으니 컴포넌트 스캔 public class ItemRepository { private static final Map store = new HashMap(); //static 사용 private static long sequence = 0L; //static ..

소비자의 요구사항은 항상 바뀐다 ➡️ 기능 추가는 쉽고 유지보수가 간편한 코드가 필요 동작 파라미터화 어떻게 실행할 것인지 결정하지 않은 코드 블록 나중에 프로그램에서 호출 즉 실행이 뒤로 미뤄짐 2.1 변화하는 요구사항에 대응하기 예제 : ==기존의 농장 재고목록에서 녹색 사과만 필터링 하는 기능 추가== 2.1.1 첫번째 시도 : 녹색 사과 필터링 public static List filterGreenApples(List inventory) { List result = new ArrayList(); for (Apple apple : inventory) { if (apple.getColor() == Color.GREEN) { // 녹색 사과만 선택 result.add(apple); } } return ..

1.1 역사의 흐름은 무엇인가? 멀티코어 CPU 대중화에 의한 하드웨어적 변화가 소프트웨어에도 영향을 미침 자바의 경우 코어 하나만 사용을 했었는데 이젠 하나로는 하드웨어를 온전히 다 활용하지 못하는 경우가 발생하게 되었고 자바 8에서도 쓰레드가 아닌 병렬 실행을 통해서 보다 나은 성능을 제공 ==스트림 api== ==메서드에 코드 자체를 전달 ==인터페이스의 디폴트 메서드 스트림 api로 인해서 코드를 전달하는 간결 기법(메서드 참조 & 람다) 와 인터페이스의 디폴트 메서드를 사용할 수 있다. 메서드 코드 전달 기법 파라미터화 구현 조금 다른 기능을 하는 비슷한 메서드 두개를 하나로 통합한 후 인수를 통해서 다른 동작을 하도록 하는 것 1.2 왜 아직도 자바는 변화하는가? 자바는 처음부터 잘 설계된 객..

Welcome 페이지 Jar를 사용하면 /resources/static/index.html 위치를 기본 웰컴페이지로 인식함 로깅 간단히 알아보기 운영 시스템이는 println으로 정보를 출력하는 것이 아니라 별도 로깅라이브러리를 써서 로그를 남긴다 로깅 라이브러리 @RestController public class LogTestController { // 내 클래스를 지정 private final Logger log = LoggerFactory.getLogger(getClass()); @RequestMapping("/log-test") public String logTest(){ String name = "Spring"; //보통 개발 할 때는 프린트로 로그를 남기면 수만 개 출력이 생기니까 안 됨 Sy..

스프링 MVC 전체 구조 그 전 공부했던 프레임워크 구조 ==스프링 프레임워크 == 동작 순서 핸들러 조회 : 핸들러 매핑을 통해 url에 매핑된 핸들러 = 컨트롤러 조회 핸들러 어댑터 조회 : 핸들러 실행할 어댑터를 조회 핸들러 어댑터 실행 : 핸들러 어댑터 실행 핸들러 실행 : 어뎁터가 핸들러=컨트롤러를 실행 ModelAndView 반환 : 핸들러 어댑터가 핸들러가 반환한 정보를 ModelAndView로 변환해서 보냄 viewReslover호출 : 뷰 리졸버를 찾고 실행 : 논리를 물리로 View반환 : 물리적 경로 기반으로 랜더링할 뷰를 반환한다 뷰 랜더링: 뷰를 받아서 랜더링함 비교 FrontController -> DispatcherServlet handlerMappingMap -> Handle..