미고렝 코딩

<img
src={require(경로).default}
/>

require()함수 호출 후 .default 속성으로 불러 와야 이미지가 불러와진다.

구글링해서 검색해보면 사람들은 .default를 추가 안했던데 어떻게 한건진 모르겠다... 

처음에는 별 생각없이 뭐 하나 만들어나 보자 하는 생각으로 채팅 웹 어플을 만들었다. 적당한 난이도의 적당한 사이즈의 프로젝트여서 무리없이 진행이 되긴 했지만 조금 아쉬움이 남았다. 일단 백엔드쪽을 나와 다른한분 두명이서 하기로 했는데 그분이 데이터베이스 배우는 수업때 1주일간 사정이 생겨서 수업을 못들으셔서 백엔드는 거의 나혼자 한거같다. 그래서 구현을 끝내고 프론트쪽을 도와줄 계획이였으나 나도 시간이 걸리고 기능은 동작은 하지만 잔 버그가 많은 프로젝트가 만들어졌다. 잔 버그를 완벽히 고치지 못한게 아쉬웠고 다음엔 좀 더 독특한 사이트를 만들어 보고 싶다.

git bash를 사용하면 된다.

.ps git bash에서 paste기능은 키보드 insert키를 누르면 된다.

let str = "안녕하세요 <br> 반갑습니다"

return (<div dangerouslySetInnerHTML={{ __html: str }}></div>)

리액트에서 지원하는 dangerouslySetInnerHTML props를 사용하되, {__html: 문자열} 이라는 객체 형태로 넣어 주면 된다.

App.js:

import './App.css'
import React from 'react';
const username = "annonymous"

class Twittler extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            tweets: []
        }
        this.handleButtonClick = this.handleButtonClick.bind(this)
    }
    handleButtonClick(){
        let tweetArr = this.state.tweets.slice()
        tweetArr.push({username: username, text: document.getElementById("textBox").value, time: new Date().toLocaleTimeString()})
        this.setState({tweets: tweetArr})
    }
    render(){        
        return (
            <header className="App-header">
				<div className="textBox-Button">
                    <textarea id="textBox"></textarea>
					<NewTweetForm handleButtonClick = {this.handleButtonClick} />
				</div>
                <div id = "tweets">
                    <Tweets arr = {this.state.tweets}/>
                </div>
                <div>this is app2</div>
			</header>            
        )
    }
}

function NewTweetForm({handleButtonClick}){
    let handleClick = ()=>{
        handleButtonClick()
    }
    return <button id= "postButton" onClick= {handleClick.bind(this)} >Post</button>
}
function makeArr(arr){
    return arr.map((el,idx)=>{
        return <li key = {idx.toString()}>
            <div>{el.username}</div>
            <div>{el.text}</div>
            <div>{el.time}</div>
            <hr/>
        </li>
    })
}

function Tweets ({arr}){   
    return (
        <ul id = "ul">{                
            makeArr(arr)
        }</ul>
    )
}


function App(){
    return (
		<div className="App">
			<Twittler />
		</div>
	);
}
export default App

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js:

import './App.css';
import ReactDOM from 'react-dom';
let tweet = <div>{Tweet({ writer: '이호준' })}</div>;
let tweet2 = (
	<div>
		{(function () {
			return '리액트';
		})()}
	</div>
);
let nowLearning = false;

let tweet3 = (
	<Tweet writer="김코딩">
		{(function () {
			if (nowLearning) {
				return '리액트';
			} else {
				return '배틀그라운드';
			}
		})() + '는 늘 짜릿하네요'}
	</Tweet>
);
function Tweet4(){
	let langs = ["javascript", 'HTML', 'Python']
	// eslint-disable-next-line
	return (
		<div>
			{langs.map(it=><div>{it}</div>)}
		</div>
	)
}
function Tweet({ writer, children }) {
	return (
		<div>
			{writer}
			{children}
		</div>
	);
}
function clock() {
	ReactDOM.render(
		<div>{new Date().toLocaleTimeString()}</div>,
		document.getElementById('clock'),
	);
}
setInterval(clock, 1000);
function App() {
	return (
		<div className="App">
			<header className="App-header" id="App-header">
				<h1>Hello World!</h1>
				<h2>Start editing to see some magic happen!</h2>
				{tweet}
				{tweet2}
				{tweet3}
				<Tweet4 />
				<div id="clock">{new Date().toLocaleTimeString()}</div>
			</header>
		</div>
	);
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

컴퓨터 프로그래밍에서 SOLID란 로버트 마틴이 2000년대 초반에 명명한 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 마이클 페더스가 두문자어 기억술로 소개한 것이다. 프로그래머가 시간이 지나도 유지보수와 확장이 쉬운 시스템을 만드록자 할 때 이 원칙들을 함께 적용 할 수 있다. SOLID원칙들은 소프트웨어 작업에서 프로그래머가 소스코드가 읽기 쉽고 확장하기 쉽게 될 때까지 소프트웨어 소스코드를 리팩터링하여 코드냄새를 제거하기 위해 적용할 수 있는 지침이다. 이 원칙들은 애자일 소프트웨어 개발과 적응적 소프트웨어 개발의 전반적 전략의 일부다. 

두문자약어개념SOLID

var, let, const의 차이점

1. var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.

2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.

3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.

4. var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.

5. var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).

함수레벨 스코프란?

// var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다.
// 이건 var가 hoisting이 되었기 때문이다.
for(var j=0; j<10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10


// 아래의 경우에는 에러가 발생한다.
function counter () {
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined