'Web Development' 카테고리의 글 목록

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ Array 자료형 변수에 여러 자료형 사용 // 여러 자료를 한 곳에 보관하기 위해 array 자료형 사용, 자료형 섞어서 사용 가능 let a = ['Tomatoes', 'Pasta', 'Coconut', 20, 30] array에서 데이터 하나만 꺼내기 위해서는 인덱스 사용 console.log(a[0]) array 데이터 수정은 등호 사용 a[0] = 30 html에 적용 상품목록 {상품[0]} $40 {상품[1]} $40 {상품[2]} $40

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ 장바구니 페이지 제작 /list로 접속 시 상품목록페이지 보여주기 url 만드는 기준은 개발자 마음 Routing (라우팅) : url로 페이지를 나눔 일반적인 웹서버 프레임워크에서는 라우팅을 하려면 어떤 사람이 /list를 접속하면 ~~.html을 보내주는 코드를 짬 하지만 Next.js는 자동 라우팅 기능이 있음 -> 파일, 폴더 하나 만들면 라우팅 끝 app/폴더생성/page.js생성 폴더명이 url이 됨 /list로 접근 시 page.js 내용 보여..

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ 리액트에서 쓰는 html문법을 JSX라고 함 html을 넣을 때 유의 사항이 있음 1. return()안에 html 넣을 때 하나의 html태그에서 하나의 html태그로 끝내야 함 1-1. 옳은 예시 - page.js return ( 안녕! ) 1-2. 올바르지 않은 예시 - html 태그를 두 개 이상 넣지 못함 2개 태그 넣고 싶으면 로 감싸거나 이렇게 무의미한 태그로 묶어도 됨 return ( 안녕! ) 2. css를 적용하기 위해서 클래스를 만들때 ..

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ https://nodejs.org/ko LTS로 설치 (신버전 Next.js를 사용할 것이므로 18버전 이상으로 설치) 계속 진행 에디터는 vscode 사용 프로젝트 폴더 만들고 vscode에서 열기 nextJs 프로젝트 생성 터미널 -> new Terminal npx create-next-app@latest --experimental-app 프로젝트명은 쿠팡프레시를 유사하게 만들 것이므로 fresh typescript는 사용 안함 tailwind css도..

1. 하이차트 접속 https://www.highcharts.com/ 2. Demos → Highcharts JS Demos 3. 사용할 그래프 선택 4. VIEW OPTIONS 선택 5. 코드 복사 // Data retrieved from https://netmarketshare.com Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in May, 2020', align: 'left' }, tooltip: { pointFormat: '{series.name}: {..

Vue 서버를 실행하자마자 브라우저를 함께 여는 방법 vue project - package.json "scripts": { "serve": "vue-cli-service serve --open --host localhost", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, host의 디폴트는 0.0.0.0이나 localhost인데 난 0.0.0.0이 제대로 동작되지 않아 명시적으로 입력하였다.

댓글일 경우 들여쓰기를 하기 위해서 bGroup, bStep, bIndent 필드 생성 BoardDto.java private int bId; // 글 번호 private String bName; // 작성자 이름 private String bPw; // 작성자 비밀번호 private String bTitle; // 글 제목 private String bContent; // 글 내용 private String bFILE; // 파일 private Date bDate; // 작성 날짜 private int bHit; // 조회수 private int bGroup; // 그룹 번호 private int bStep; // 답글 순서 private int bIndent;// 들여쓰기 게시글일 경우 들여쓰기와 답..

반복적인 작업 간단히 처리 이렇게 긴 코드를 다음처럼 2라인으로 줄일 수 있음! 복잡한 쿼리는 직접 쓰는 경우가 많음 (템플릿에 의존 X) 1. pom.xml → jdbcTemplate 설정 - pom.xml org.springframework spring-jdbc 4.1.4.RELEASE 2. servlet-context.xml → 빈설정 - servlet-context.xml 3. BController → jdbcTemplate @Autowired 설정 - BController.java // 컨트롤러부터 요청들어오므로 여기서 선언! private JdbcTemplate template; //템플릿 받을 수 있는 필드 선언 @Autowired public void setTemplate(JdbcTempl..

2023.02.17 - [Web/Spring] - [Spring] MVC 게시판(1) DB 생성 및 연결 [Spring] MVC 게시판(1) DB 생성 및 연결 DB 생성 -- 테이블 개설 create table mvc_board( bId number(4) primary key, bName varchar(20), bTitle varchar2(100), bContent varchar2(300), bDate DATE DEFAULT SYSDATE, bHit NUMBER(4) DEFAULT 0, bGroup NUMBER(4), bStep NUMBER(4), bIndent NUMBER(4) ); 0206cho.tistory.com 2023.02.17 - [Web/Spring] - [Spring] MVC 게시판(2..

- MVC 게시판(1) DB 생성 및 조회 2023.02.17 - [Web/Spring] - [Spring] MVC 게시판(1) DB 생성 및 연결 [Spring] MVC 게시판(1) DB 생성 및 연결 DB 생성 -- 테이블 개설 create table mvc_board( bId number(4) primary key, bName varchar(20), bTitle varchar2(100), bContent varchar2(300), bDate DATE DEFAULT SYSDATE, bHit NUMBER(4) DEFAULT 0, bGroup NUMBER(4), bStep NUMBER(4), bIndent NUMBER(4) ); 0206cho.tistory.com 게시판 세팅 BDto.java packa..

DB 생성 -- 테이블 개설 create table mvc_board( bId number(4) primary key, bName varchar(20), bTitle varchar2(100), bContent varchar2(300), bDate DATE DEFAULT SYSDATE, bHit NUMBER(4) DEFAULT 0, bGroup NUMBER(4), bStep NUMBER(4), bIndent NUMBER(4) ); --자동증가 create sequence mvc_board_seq; -- 예시 값 추가 insert into mvc_board (bId, bname, btitle, bcontent, bhit, bgroup, bstep, bindent) values(mvc_board_seq.nex..

js → client에서 처리 방식 ajax - 비동기 통신 - 새로고침을 하지 않아도 데이터 검사 가능 → 속도 빠름 server단에서 처리 → validator 이용 컨트롤러에서 validator 두고 처리 검사할 객체 → 커맨드 객체 그 객체를 넘겨줘서 컨트롤러에서 검사. [ 기본 예제 ] createPage.jsp - 입력페이지 createPage.jsp 이름 : 아이디 : createDonePage.jsp - 유효성 검사 정상적으로 끝나고 출력 createDonePage.jsp 이름 : ${student.name } 아이디 : ${student.id } Student.java - 커맨드 객체 package com.all.test; public class Student { private Strin..

HttpServletRequest사용 @RequestParam 커맨드객체를 이용해서 많은 데이터를 처리 @PathVariable 사용 HttpServletRequest사용 - url : http://localhost/test01/board/confirmId?id=abcd&pw=1234 - get으로 보낸 값을 request를 이용하여 받아서 model로 뷰에 보내줌 - confirmId.jsp ID : ${id} PW : ${pw} - HomeController.java 추가 @RequestMapping("/board/confirmId") // 요청경로 public String confirmId(HttpServletRequest httpServletRequest ,Model model) { // http..

1. 파일 - import 2. Gradle - Existing Gradle Project 3. next 4. vue 프로젝트 경로 설정 5. 완료 6. 터미널 열기 7. 실행 - npm run serve

유튜브 아프리카 도서관님의 'Vue 3 강의 - 스프링부트 REST API를 이용하여 쇼핑몰 만들기(JPA, MariaDB, JWT)' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=htYYSszfzv0 1. 프로젝트 폴더 생성 2. 경로 이동 윈도우 - powershell - cd 경로 cd C:\project\gallery 3. vue 프로젝트 생성 vue create 프로젝트명 vue create frontend 4. 키보드 화살표 이용하여 Vue3 선택 5. 생성한 프로젝트로 이동 cd 프로젝트명 cd frontend 6. 서버 실행 npm run serve 7. 윈도우 + r에서 local..

입력 npm run lint -- --fix

vue 설치 시 run ‘npm fund’ for details 오류 발생 npm config set fund false 입력 그 후 다시 설치

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA 아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다. https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode 유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I 0206cho.tistory.com https://0206cho.tistory..

티스토리툴바