개발 일기

import React from 'react'; import axios from 'axios'; function PortInfo({link, image, title, category}){ return( {title} {category} ) } class Portfolio extends React.Component{ state = { isLoading : true, ports : []//포트폴리오 내용을 저장할 곳 } getPorts = async() =>{ const { data : { data:{ports}, } } = await axios.get("https://webstoryboy.github.io/dothome1/portfolio.json"); // this.setState({isLoading :..

1 axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 http 비동기 통신 라이브러리. 2 axios 특징 - 운영 환경에 따라 브라우저 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용. - Promise(ES6) API 사용 - 요청과 응답 데이터의 변형 - HTTP 요청 취소 및 요청과 응답을 json 형태로 자동 변경

import React from 'react'; import Header from '../layout/Header'; import Layout from '../layout/Layout'; import Title from '../basics/Title'; import FooterInfo from '../basics/FooterInfo'; function Port({link, image, title, category}){ return( {title} {category} ) } const portfolioInfo = [ { id: "1", link: "https://webstoryboy.github.io/portfolio/port2/", image: "../img/port01.jpg", title: "PORT..

html 꿈을 설계하고 디자인 하다. 나는 공간을 만드는 것을 좋아한다. 어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다. 열심히 할수록 기회는 따른다. 운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해..

1. 클래스형 컴포넌트 react 컴포넌트 선언하는 두가지 방식 중 하나. 현재 자주 사용하지 않지만, 사용하는 기업들이 있으므로 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. componentDidMount() 마운트된 직후, 즉 트리에 삽입된 직후 호출된다. import React from 'react'; import Header from '../layout/Header'; import Footer from '../layout/Footer'; class Main extends React.Component{ state = {}; componentDidMount(){ } render(){ return( We Provide visual coding solutions f..

1 map 배열 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때 사용하는 내장 함수 import React from 'react'; import Header from '../layout/Header'; import Footer from '../layout/Footer'; function Info({text}){ return( {text} ) } const textInfo = [ {text : "WE PROVIDE"}, {text : "VISUAL CODING"}, {text : "SOLUTIONS"}, {text : "FOR YOU WEBS"} ] function Main(){ return( {textInfo.map((el) => ( ))} ); } export default Main;

객체 생성 const textInfo = "Hello" const textInfo = { text1 = "WE PROVIDE", text2 = "VISUAL CODING", text3 = "SOLUTIONS", text4 = "FOR YOU WEBS" } 객체 호출 function Main(){ return( ) }

1 props 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것. props 사용방법 1. 변수명을 넣고 싶을때는 중괄호를, 일반 텍스트를 전송할 때는 따옴표. 2. 자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들어준다. import React from 'react'; import Header from '../layout/Header'; import Footer from '../layout/Footer'; function Info(props){ return( {props.text1} {props.text2} {props.text3} {props.text4} ) } function Main(){ return( ) } export default Main; props 생략 impor..

1 component 만들기 복잡한 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있다. Component 방법 - function을 이용해서 함수를 하나 만든다. - 그 함수 안 return()을 적고 원하는 HTML을 담는다. - 원하는 곳에 라고 사용하면 함수에 축약한 HTML이 등장한다. 이렇게 축약한 html 덩어리를 component라고 한다. import React from 'react'; import Header from '../layout/Header'; import Layout from '../layout/Layout'; import Title from '../basics/Title'; function About(){ return ( 꿈을 설계하고 디자인 하다. 나는 공간을 만드는 것..

제목을 누를 때 각각 다른 모달창이 뜨도록 하기. 1 몇번째 제목을 눌렀는지 상태정보를 state에 저장하고 2 state가 0일 때는 0번째 제목을 출력, state가 1일 때는 1번째 제목이 나오도록 출력해야 한다. UI 만드는 법 1 UI와 관련된 중요 정보들을 state로 저장해놓고 2 state에 따라서 UI가 수정되게 만든다. ※ state는 UI의 현재상태를 보관하는 저장소역할을 하는구나라고 생각하면 된다. 1 모달 컴포넌트에서 제목을 눌렀을 때 누른 제목의 숫자가 나오게 한다. function Modal(props){ return( {props.글제목[누른제목번호]} 날짜 상세내용 ) } 2 변수 지정 중요한 정보는 일반 변수가 아니라 state로 만든다. let [누른제목, 누른제목변경]..