전체 글

프론트엔드(frontend)웹의 화면 즉, 사용자 인터페이스(User Interface)를 구현하는 개발자이다. ​슬라이더, 드롭다운(drop-down) 메뉴, 레이아웃, 폰트, 컬러 등 모든 요소들이 프론트엔드 개발을 이루는 부분이다. 백엔드(backend)사용자 눈에 보이지 않는 서버를 전체적으로 담당한다. 데이터를 저장하고 관리하며, 웹사이트의 클라이언트 측(client-side)에서 모든 것이 매끄럽게 작동할 수 있게 해줍니다. 프레임워크(framework)프레임워크는 프로그래밍의 뼈대가 준비되어 있고, 내가 작성할 공간들만 비워져 있는 것이다. 프레임워크를 활용하면, 정해진 곳들에 코드를 채워넣음으로써 보다 쉽게 프로그램을 완성할 수 있습니다.프레임워크는 조금 더 큰 틀 ex) 카페를 열고 싶은..

티스토리를 하고 나서 설명을 하려니깐 헷갈리고 모호하게 알고 있는 용어를 정리할 필요성을 느꼈다. 앞으로 알아가는 용어들이 있다면 수정할 생각이다!! 태그 step1  로 묶어서 표현하는 명령어를 말한다. 기본 형식이다. 시맨틱요소 웹페이지 전체 또는 일정 영역을, 의미적으로 구획,분할할 때, 사용되는 요소들을 말한다. 예)header, nav, main, section, article, aside, footer  css.box01{ width:fit-content; border:50px solid yellow;}javascriptconst superman = { name:'david', age:33} 선택자.box01속성(attribute)width, border,name,age값(..

이 화면에서 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. 를 붙여 사용..