강의 총 정리

HTML

• Node Server에 켜놓고 보여드리겠습니다.

<input type=hidden>

CSS

• flex와 grid, 인터렉티브 웹

• canvas 해보시길

JS

SASS

• node sass와 ruby sass

Bootstrap / Tailwind

jQuery

Node

• 노드는 서버가 아니라 JavaScript 런타임(실행 환경)입니다.

• npm은 사람들이 공유해놓은 모듈들을 공유받을 수 있는 공간이에요.

React

1. 중괄호

const name = "라이켓";
const age = 10;
const title = <h1>{name}의 나이는 {age}에요!</h1>

// {age + age}
// {'hello world'}
// {name}
// {myFunction()}
// {hello?'one':'two'}

2. Component

• 재사용 하기 위한 Code 조각

// 인자값을 꼭 props로 받을 필요 없고 다른 변수로 받아도 기능상에 문제가 발생하지는 않습니다.
// <Test>hello world</Test> 이와 같은 text는 props에 childeren으로 넘어옵니다. console.log로 한 번 찍어보세요.
// 전개해서 받을 수도 있었죠? function Card({사진, 제목, 내용, 가격}){} 이런식으로요.
function Card(사진, 제목, 내용, 가격) {
	return (
		<>
			<img src={사진}/>
      <h3>{제목}</h3>
      <p>{내용}</p>
      <p>{가격}</p>
		</>
	)
}

// <이렇게 재사용함>
Card('신발사진URL1', '나이키신발', '좋아요', '1000');
Card('신발사진URL2', '아디다스신발', '좋아요', '2000');
Card('신발사진URL3', '반스신발', '좋아요', '3000');

// <위처럼 사용해도 재사용성이 높은데 태그처럼 사용 가능!>
<Card 사진="신발사진URL1" 제목="나이키신발" 내용="좋아요" 가격="1000">
<Card 사진="신발사진URL2" 제목="아디다스신발" 내용="좋아요" 가격="2000">
<Card 사진="신발사진URL3" 제목="반스신발" 내용="좋아요" 가격="3000">

3. Bootstrap처럼 사용할 수 있는 React Component 모음 Ant!

Rate - Ant Design

Rate component.

https://ant.design/components/rate/

4. 리스트

<ul>
	{listItem.map((신발) => <Card img={신발.url} key={신발.itemCountValue}>)}
</ul>

5. 주의!

• class로 쓰면 그대로 되긴 하지만 className

• onclick은 onClick(카멜케이스! 여기서 주의해야 할 점은 js에서는 onclick 안에 js 코드가 그대로 들어갈 수 있었지만 react에서는 onClick 안에 {myFunction}로 넘기셔야 합니다.
• onchange → onChange
• onsubmit → onSubmit

• 이벤트 헨들러(콜백함수) 이름은 handleBuyClick 이런 식으로 작성하는 것이 관례

function handleBuyClick(e){}
...
<button onClick={handleBuyClick}>구매하기</button>

• style같은 경우 중괄호 2개(javascript안에 object로 전달) 사용

<img src="hojun.jpg" style={{width:"100px", border:"solid 1px black"}}>

• 상태값을 변경시키고 싶을 때에는 useState

const [like, setLike] = useState(0);
const [like, setLike] = useState(()=>{}); // 안에 콜백 넣는 것도 가능하고 콜백을 넣으면 like의 값이 변경된 직후 실행됩니다.

• useEffect

// 업데이트 될 때마다
React.useEffect(()=>{
	console.log('헬로');
})

// 맨 처음에만
React.useEffect(()=>{
	console.log('헬로');
}, [])

// 변수들 상태변화 감시
React.useEffect(()=>{
	console.log('헬로');
}, [변수1, 변수2...])

6. 배포

1. 수동 업로드
1. 아래 코드를 package.json에 추가합니다.

{
	"homepage":"여러분url",
	...
}

2. npm run build하면 build 폴더로 resource 파일들이 올라옵니다.
3. build 안에 있는 파일을 그대로 github pages에 업로드 하시면 됩니다.

2. 자동업로드
1. npm run build하면 build 폴더로 resource 파일들이 올라옵니다.
2. npm install gh-pages 한 다음에 아래 코드를 package.json에 추가하고

{
	"homepage":"여러분url",
	...
	"scripts" : {
	...
	"deploy" : "gh-pages -d build"
	}
}

3. npm run deploy - add
4. pages에서 gh-pages 선택해주면 됩니다.

코드리뷰

JS

1. fetch등의 방법으로 통신을 하는 경우 예외처리(try/catch)를 반드시 해주세요. 또 예상되는 예외로 인한 에러가 의심되는 경우도 마찬가지입니다!

2. 함수별 기능분리 명확

3. 파일 분기, 폴더 분기(폴더명도, 파일명도 하나의 주석이라고 생각해주세요.)

4. 함수명만 보고 함수의 기능을 바로 알기 힘듭니다. '기능'에 초점을 맞춘 작명에 좀 더 고민이 필요해보이네요.

5. if문 분기를 여러개 하지않고 || 연산을 통하여 사용한것은 좋으나 오브젝트나 배열을 활용하여(Array.includes()등 ) 가독성

6. 조건문 분기 처리도 배열이나 스위치등을 사용해서 처리할 수 있을지 고민이 필요해보입니다.

if(true){}
if(true){}
if(true){}

if(true){}
else if(true){}
else if(true){}

7. 다른 분들도 잘 알아 볼 수 있도록 주석에 좀 더 명확한 설명

8. '코드 == 주석'이 되도록 보다 명료한 작명을 통해 코드를 작성(명시적으로 주석을 달아서 어떤기능인지 적어야한다면 함수명으로 풀어주세요.)

9. 함수를 사용할 때 사용하는 매개변수에 기본값을 할당하면 예외처리에 도움이 될것 같습니다.

function multiply(a=1, b=1) {
    return a * b;
}

10. 이벤트 리스너에서 사용하지 않는 event 객체는 굳이 넣지 않으셔도 될것 같습니다.

CSS와 모듈

• 모듈화해서 별도의 html 파일을 만들어 붙여넣는 방식도 많은 사람이 협업할 때에는 유리합니다.(규모있는 프로젝트에서는 이렇게 가이드를 만들어 작업합니다.)

• 레티나 대응

• SASS를 사용하신다면 SASS에 모듈 사용하세요.

• 반응형 신경써주세요.

• 스프라이트 기법을 고려해주세요.

이력서

마무리 멘트

• 스터디는 25분이 신청하셨던데 25분으로 가겠습니다. 인원이 많아서 오픈카톡방으로 하나 만들게요. 이번주에 단체 문자 보내드리도록 하겠습니다.

• 이 수업에서 빛이 나야 하는 것은 강사가 아니라 수강생입니다.

• 잘되셨다면 그것은 강사 때문이 아니라 여러분의 노력 덕분입니다.

• 이제 다시 야생의 세계로 돌아가게 됩니다. 정신 바짝 차리시고, 흔들리지 마시고, 좋아하는 것을 적당히 절제하면서도 싫어하는 것도 필요하다면 하실 수 있는 분들이 되셨으면 합니다.

• 무료 강의 많이 하니 또 공지드리겠습니다.

• 저희 2기를 위해 무료 영상을 좀 더 찍고 있습니다. 2기에는 Node 대신 Firebase를 할 것 같아요. 영상 마무리되면 올려드리도록 하겠습니다.

• 회사에 들어가서도 성장을 멈추지 마세요. 전술적 변화를 3년마다 가져가시면 좋습니다.