본문 바로가기

전체

 (38)
섹션 4. 블로그 리스트 23 블로그 리스트 데이터 받아오기 (useEffect) db에 있는 데이터를 받아와서 ListPage에 보여주는 것을 해보겠다 ! db랑 통신할 때 BlogForm.js를 보면 axios를 사용했었음 - 그 때는 post request를 사용했는데, 지금은 데이터를 가져오는 것이기 때문에 get request를 사용하겠다. 이제 받아온 data를 state 안에 넣어볼게요 state를 사용해야지 state가 변경되면서 화면이 re rendering 되고 화면에 뜨게 된다. import axios from 'axios'; import { useState } from 'react'; const ListPage = () => { const [posts, setPosts] = useState([]); cons..
섹션 3. React Router로 페이지 추가하기 15 React Router 설치 16 React Router - Switch & exact 17 NavBar 스타일 import { useState } from 'react'; import axios from 'axios'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; function App() { const [title, setTitle] = useState(''); const [body, setBody] = useState(''); const onSubmit = () => { axios.post('http://localhost:3001/posts', { title: title, body: body }..
섹션 2 10 Input State 바인딩 import { useState } from 'react'; function App() { const [title, setTitle] = useState(''); return ( Title { setTitle(e.target.value); //title에 넣어주게 됨 } } //input 안에 있는 값이 변경될 때마다 이 함수가 실행됨 /> Post ); } export default App; 11 Textarea State 바인딩 import { useState } from 'react'; function App() { const [title, setTitle] = useState(''); const [body, setBody] = useState(''); const ..
섹션 0, 섹션 1 섹션 0. 강좌 소개 및 개발 환경 세팅 ReactDOM: 리액트랑 브라우저의 DOM이랑 연결해주는 역할 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); DOM(Document Object Model)이란?! 웹 페이지에 대한 인터페이스. 즉 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스 섹션 1. 리액트 기초 03 컴포넌트 리액트에서 컴포넌트를 만드는 두가지 방법 1. 클래스를 이용 2. 함수를 이용 (React Hooks가 생기면서) -> App이라는 컴포넌트 만들기 function..
CSS-2 1. 사이즈 단위 px : 고정된 픽셀 값. vh/vw : 각각 vertical height, vertical width를 뜻한다. 이 단위들은 뷰포트(화면의 크기)의 높이와 너비에 비례하기 때문에 반응형에 유리하다. 1vh는 실제 높이값의 1/100이 된다. 그러면 100vh vs 100%? 100%는 부모태그의 100%를 사용! 100vh는 부모태그와는 상관없이 화면의 크기.. 2. margin vs padding 내용(content) -> 패딩(padding) -> 테두리 (border) padding은 뼈와 피부 사이의 지방, margin은 사람과 사람 사이의 간격 3. text-align: center, line-height: 40px;
CSS header+section.player+section.info+section.UpNext display 속성 1. inline 한줄에 다른 엘리먼트들과 같이 배치 2. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지 width, height, margin, padding 속성이 모두 반영됨 3. inline-block 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width, height, margin, padding 속성 지정이 가능 (inline-block 엘리먼트는 위와 같이 명시적으로 해당 엘리먼트의 스타일을 display: i..
HTML 2. HTML 기본 문법 HyperText Markup Language Hello World 안녕하세요! 요소(element) = 시작 태그 + content + 종료태그 빈 요소 : br, hr, img, input, link, meta -> content가 없으며 attribute만을 가질 수 있다. Attribute: 요소의 성질, 특징을 정의하는 명세 -> src, width, height Global Attribute: 모든 HTML 요소가 공통으로 사용할 수 있는 attribute : id, class, hidden, lang, style, tabindex, title 3. 시맨틱 요소와 검색 엔진 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할 시맨틱..
학습 방향 효율적인 프로그래밍 학습 방법 같은 것은 없다. 의식적인 연습을 꾸준히 반복하는 만큼 성장한다. 단순 반복 != 의식적인 연습 라이브 코딩 감상과 예제 단순 타이핑은 연습이 아니다. 현재 자신의 능력으로 쉽게 해결 가능한 것을 반복하는 것도 연습이 아니다. 자신의 능력을 살짝 넘어서는 도전을 지속적으로 시도하는 것이 연습이다. 쉬운 도전은 지루하고 무모한 도전은 불안감만 준다. 시행착오(삽질)은 "무엇을 알고 무엇을 모르는지"를 알게 하는 개발자의 벗이자 선생님이다. 무엇을 모르는지 알았다면 몰랐던 것을 알기 위해 "시도하고 실패하는 의식적인 연습을 반복"한다. 하지만 모르는 것이 너무 많다. 베이스가 되는 것부터 구체적인 목표를 수립하고 학습하고 작은 성취를 반복하자. 수박 겉핥기식 학습도 문제지만 본..

티스토리툴바