rhanziy

리액트를 사용하며 css 병행하는 것이 귀찮고 속도 향상에 관심이 있다면 styled components 라이브러리를 사용해보자. 설치방법 npm install styled-components 터미널에 위 코드를 치고 다운을 받는다. 그리고 다시 npm run. 적용할 js파일에서 import 후 사용할 수 있는데, css 코드를 `` 백틱 안에 짜면 됨. 컴포넌트기때문에 작명 시 앞자리는 대문자로 작성하자. import styled from 'styled-components'; let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` let Btn = styled.button` background: ${ props..

1. css 클래스 네임 주고 background주기 2. html안에서 style속성으로 url 넣기 import bg from './bg.png' function App(){ return ( ) } 3. 하던대로 img 태그 src로 경로지정( 외부 이미지는 절대경로 그대로 작성) 상품명 상품정보 4. public 폴더에 파일 밀어넣고 이미지 경로 사용(import 안해도 된당) //권장되는 형식 하위 경로에 배포하면 파일을 못찾을 수도 있으니 홈페이지 URL 기재 권장!

var products = [ { id: 0, price: 70000, title: 'Blossom Dress' }, { id: 1, price: 50000, title: 'Springfield Shirt' }, { id: 2, price: 60000, title: 'Black Monastery' } ] // 데이터 형식 function addTemplet(data){ data.forEach((e)=>{ var card = ` ${e.title} 가격 : ${e.price} 구매 ` $('.row').append(card); }) } // 데이터에 맞게 카드형식으로 html append 우선 데이터를 카드 식으로 화면에 뿌려준다. $('.buy').click(function(e){ var title = ..

const button = $('.tab-button'); const content = $('.tab-content'); $('.list').click(function(e){ tabOpen(Number(e.target.dataset.id)); }); function tabOpen(i){ button.removeClass('orange'); button.eq(i).addClass('orange'); content.removeClass('show'); content.eq(i).addClass('show'); } tab버튼 구현하다가 맞닥뜨린 문제. li에 data-id ="0" 데이터 값을 부여해서 그에 맞는 컨텐츠를 보여주는 코드인데.. 제이쿼리랑 같이 쓰다보니 data값을 못가져오는 오류가 났다. tab..

const id = document.getElementById('id').value; const pwd = document.getElementById('pwd').value; $('form').on('submit', function(e){ if(id == ""){ alert('아이디를 입력해주세요.'); return false; } if(pwd == "") { alert('비밀번호를 입력해주세요.'); return false; } if(pwd.length

interface SStorage { [key:string] : T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value; } remove(key:string){ delete this.storage[key] } get(key:string):T { return this.storage[key] } clear(){ this.storage = {} } } const stringsStorage = new LocalStorage() stringsStorage.get("key") stringsStorage.set("hello", "how are you") const booleanSt..

abstract class User { constructor( protected firstName: string, protected lastName:string ){} abstract sayHi(name:string):string abstract fullName():string } class Player2 extends User { sayHi(name:string){ return `Hello ${name}. My name is ${this.fullName()}` } fullName(){ return `#{this.firstName} ${this.lastName}` } } 타입스크립트에서 추상클래스를 구현하면 자바스크립트에서 컴파일했을 때 일반적인 클래스로 바뀌어버림. class User { constru..

개발환경 JDK8, 톰캣8버전 설치되어있어야함 STS4오류나서 STS3 설치 spring-tool-suite-3.9.9.RELEASE_64.zip 파일 압축 풀고 안에 번들을 STS3으로 바꾼 후 C드라이브에넣기. sts3 > workspace-spring 폴더 생성(경로) sts.exe실행 환경설정->workspace utf8, 웹 web browser external 크롬, web css,html,jsp 3개 utf-8 +톰캣서버 연결 file new > others > spring legacy project 프로젝트 생성 템플릿 아래쪽 Persistence > Spring MVC Project src폴더의 s를 따라가서 sevlet-context.xml, root-context.xml(스프링코어)에..