Computer Science (127) 썸네일형 리스트형 [css] & + & 알아보기 const NewsItemBlock = styled.div` & + & { margin-top : 3rem; } `; & 은 부모 태그를 가리킵니다. 저 상황에서는 div 를 가리킵니다. {urlToImage && ( )} {title} {description} & + & 하면 &의 부모의 &의 바로옆 & 를 가르킵니다. 첫번째 포스트에서 아래포스트를 가리키고 두번째 포스트에서는 세번째 포스트를 가리키고 세번째 포스트에서는 네번째 포스트를 가리킵니다. 그리고 margin-top: 3rem; 을 주면 맨위랑 맨밑에는 적용안되고 사이간격만 조정할수 있습니다. [css] flex 공부 사이트 flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 좋습니다. [react] 이미지 흐릿하게 나오는 경우 흐릿 제가 업로드한 로고는 뭔가 흐릿합니다. 사이즈도 큼지막한데 사이즈를 줄이면 흐릿해지네요 원인은 백터파일이 아니여서 저렇게 나오는 것이였습니다. 알고는 있었지만 저화질을 늘렸을때만 흐릿해 지는 줄 알고있었습니다. png는 고화질을 css로 사이즈 줄여사용할때도 흐릿해 집니다. 결론은 svg 파일을 사용하면 제대로 나옵니다. [react] 이미지 태그 잘못된 방식 function App() { return ( [react] 라우터 설치 및 적용 설치 yarn add react-router-dom 적용 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; // 여기추가 import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( // 여기추가 , document.getElementById('root') ); reportWebVitals(); BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTM.. [react] 프로젝트 생성 후 내가 하는 것들 순서 yarn create react-app 이름 깃연동 src/components 만들어둠 src/pages만들어둠 src/resources만들어둠 Prettier-Code formatter 설정하기 (링크) 테스트 컴포넌트 만드록 yarn start 돌려보기 이후는 그냥 구현하면서 찾아보면서 코드 짜면서 배우면 됨. 라우터 설정 (링크) yarn add axios [react] JSX 문법 메모 JSX 일단기본적으로 리액트컴포넌트에서 JSX 문법을 리턴합니다. // error function App() { const name = undefined return name } // ok function App() { const name = undefined; return {name || "react"}; } 조건문 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할수 없습니다. -> 삼항 연산자 사용해야합니다. import React from "react"; function App() { const name = "리액트"; return ( {name === "리액트" ? ( 리액트 입니다! ) : ( 리액트가 아닙니다 )} ); } export default App; 이렇게 하면 됩니다. 리액트가.. [react] 개념설명 리액트 데이터가 변경되면 뷰도 변경을 해줘야합니다. 예를들어 js 변수 age = 20 이면 , HTML에도 나이: 19 19를 20으로 변경을 해줘야했습니다. 페북개발팀에서는 데이터를 HTML에 데이터를 포함하기로 합니다. 그러면 age가 20이 되면 , HTML에도 나이: { age } 따로 변경할 필요가 없어집니다. 리액트개발팀은 데이터가 변할때 마다 전체 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용하려 했지만, DOM 전체를 리렌더링하는것이 너무 느렸습니다.🤨 (만약 input값에 hello 를 입력한다면 h, e, l, l, o 총 5번 이나 전체 DOM이 리렌더링 되기때문) 하지만 리액트는 virtualDOM 을 사용해서 전체 DOM이 5번이나 리렌더링 되지 않고 필요한 부분만 .. 이전 1 ··· 11 12 13 14 15 16 다음
