Frontend

이 화면에서 content에 맞게 border를 바꾸고 싶었다. html step1 프론트엔드 취업에서 가장 중요한 것은 포트폴리오이다. css @charset "utf-8"; #wrap{ width: auto; height: auto; } .box01{ width:auto; box-sizing:border-box; border:50px solid yellow; } .box01>p{ font:bold 15px "돋움",sans-serif; } box01에 width 값을 여러개 바꿔보다가 찾은 width:fit-content; 처음 보는 속성 값이였는데 왠지 내가 찾던 것일 것 같아 해보니 content에 맞게 딱 ! 바뀌었다. box-sizing도 바꿔보고 display를 넣어야하나 했는데 다시 css..

css란? CSS는 웹페이지에 "디자인"이라는 시각적 가치를 부여하기 위한 언어입니다. HTML문서의 레이아웃과 스타일을 정의한다. W3C에서 표준안을 만들어 내고 있으며 1996년 CSS Level1 이후, 현재 CSS Level2.1에서 Level3까지 보급되어 있다. Internal style sheet html 문서 사이에 css를 선언하는 방식 External style (권장) 요소로 외부 화일 사용하기 서식 선택자{ 속성 : 값; 속성 : 값; 속성 : 값; }

✅react update update = create + read 컴포넌트의 props -> 사용자가 컴포넌트로 전달한 일종의 명령 props -> 사용자가, 외부자가 내부로 전달하는 값 state -> 내부자가 사용하는 데이터 / state는 컴포넌트 안에서 얼마든지 바꿀 수 있다. prop을 state로 바꿔야한다. / prop은 수정되지 않는다. function Update(props) { return Update { event.preventDefault(); const title = event.target.title.value; const body = event.target.title.value; props.onUpdate(title, body); }}> ✅props과 useState 동시에 사용..

✅ react create function Create() { return Create # submit을 눌렀을 때 } function App() { // const _mode = useState('welcome'); // const mode = _mode[0]; // const setMode = _mode[1]; const [mode, setMode] = useState('WELCOME'); const [id, setId] = useState(null); const topics = [ {id:1 , title:'html', body:'html is ....'}, {id:2 , title:'css', body:'css is ....'}, {id:3 , title:'javascript', body:'jav..

✅react state prop과 state 모두 값이 변경되면 새로운 return값을 만들어서 ui를 바꾼다. 하지만 prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고 state는 컴포넌트를 만드는 내부자를 위한 데이터이다. function App() { const mode = 'READ'; const topics = [ {id:1 , title:'html', body:'html is ....'}, {id:2 , title:'css', body:'html is ....'}, {id:3 , title:'javascript', body:'javascript is ....'}, ] let content = null; if(mode === 'WELCOME'){ content = } else if(mode..

✅props 이용해 이벤트 전달하기 function Header(props){ console.log('props',props.title); return ( { event.preventDefault(); //리로드를 방지 props.onChangeMode(); }}>{props.title} ) } return ( { alert('Header'); //props의 값으로 함수 전달하기 }}> ); - react에서 사용하는 것은 유사태그이다. 그래서 html과 똑같이 사용하지 않고 onClick={}등 다른 표기를 사용해주는 것이다. - { props.onChangeMode(); } } > 여기서 a태크를 클릭하면 props.onChangeMode(); 함수가 호출되는 것이다. 꼭 props. 를 붙여 사용..

✅component react는 사용자 정의 태그를 만드는 기술이다. 이것이 react의 본질이다. react에서 사용자 정의 태그를 만들 때는 무조건 대문자로! , 소문자 태그는 html태그이다. react는 이 사용자 정의 태그를 component라고 하는 것이다. function Header(props){ return ( {props.title} ) } function App() { return ( ); } export default App; function Header(props){}와 처럼 함수명과 component 태크명 일치시키기! ※ 함수는 x라는 입력값에 따라 y라는 결과가 나온다. 함수의 x -> 변수 , 파라미터 ✅props props - 속성 props 는 properties 의 줄..

✅src - index.js 파일 (입구파일) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // ./ -> 현재 디렉토리를 의미한다. import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for exa..