[IMAGE: https://cdn.steemitimages.com/DQmdike21TKCzSrqMqBi6ZNbZTRjUTstQ7Ek4WtYQF7rTKn/01.jpg]
[IMAGE: https://cdn.steemitimages.com/DQmQ92uA94beLUYEHkkKcdZhqF6xbfRWmKmcAdJ18Vu5Uic/02.jpg]
[IMAGE: https://cdn.steemitimages.com/DQmWAp9vdtKKX6fXdzPfnt1ZP9qBkueFnaFE7RVTq4uJRA1/03.jpg]
[IMAGE: https://cdn.steemitimages.com/DQmXJva5CmKHHmkUyjPRjb3CTRwzqb9zkTq7FhUso4HnXKh/04.jpg]
[IMAGE: https://cdn.steemitimages.com/DQmZj9yik2oUNg6qHTcLMaqXhodLN6JksVRTMPeJkk9oUsC/05.jpg]
[IMAGE: https://cdn.steemitimages.com/DQmUMZrN1mJxQYiXMkdMwATAJomM8vHmAyz9XqwZacABgKf/06.jpg]

첫번째. React를 DOM보다 먼저 불러오기

[IMAGE: https://cdn.steemitimages.com/DQmQ8U1SpXxWtmokpKBsUsrbN536pgLzfeMUgGzowMufwXM/screen%2051.jpg]
잔뜩 쳤는데 흰 화면만 뱉는 코드펜. 에러 메시지도 안 뜹니다.
교재랑 같은 내용을 입력해도 될 때 있고, 안 될 때 있어서 공부가 복불복인가 싶었는데...
이것저것 누르다 디버깅 모드를 켜게 됩니다.

[IMAGE: https://cdn.steemitimages.com/DQmTXZigvXdn36NLBiuqtwptts1yJ6QRcWgyLESjhootdNL/screen%2052.jpg]
(Change View에서 Debug Mode 클릭)

[IMAGE: https://cdn.steemitimages.com/DQmVfb75wHKUeqiQMbLixZfszjsL9X71Twg8w2R7wmbecvj/%E1%84%85%E1%85%B5%E1%84%8B%E1%85%A2%E1%86%A8%E1%84%90%E1%85%B3_re.jpg]
~~(뭐가 문젠지 다 나온다. 진작 켜볼걸...)~~

[IMAGE: https://cdn.steemitimages.com/DQmRf77smPiskU3zyraowuHWrmwr6M7gRPJVgSZ1JuKLXpP/%E1%84%85%E1%85%B5%E1%84%8B%E1%85%A2%E1%86%A8%E1%84%90%E1%85%B32_re.jpg]
리액트 사용을 위해 External Script를 등록할 때, react-dom이 react보다 먼저 선언되어 생긴 문제였습니다.
여러분은 저처럼 고민하지 마시고, 꼭 react를 먼저 추가하세요.
(+ 교훈. 디버깅 모드를 애용합시다.)

두번째. 코드펜 에디터 설정 변경하기

코드펜, 자동 완성 없이 치다가 아, 이래서 인생은 실전이구나를 깨달았습니다.
'그래, 이런게 공부지!' 라며 결의를 다져보는데...

> 프로필 클릭 > Settings 아이콘 클릭

[IMAGE: https://cdn.steemitimages.com/DQmU4tD8RN6x6Hqrbz2n5CEg2XdfAoECJ4Me3cKqRHcjzZf/screen%2032.jpg]
에디터 설정에 auto-generator가 있네요(???)
덤으로 Preprocessor에 babel도 켜줍니다.
[IMAGE: https://cdn.steemitimages.com/DQmPodDAHrRTTYbjMRTU1SAxmpMFcaVyc6htKHi6WCpUPmX/zzal.jpeg]
~~(결의는 우주 너머로)~~

마지막. 템플릿 만들기

[IMAGE: https://cdn.steemitimages.com/DQmRctysu4wvpKAnjv3giPJsPiSgfZ1coR9jKCyDdR2iVZK/screen%2055.jpg]
리액트 쓰기전에 매번 똑같은 설정 해주려니 귀찮죠?

[IMAGE: https://cdn.steemitimages.com/DQmPziea6v9LUGWUrfuUn76N5SoNeFF6hBSfvBrt4b6wyKL/screen-54.jpg]
반복되는 내용 템플릿으로 저장하면, 새로운 펜 만들 때 그걸 불러올 수 있습니다.

[IMAGE: https://cdn.steemitimages.com/DQmXNxapWRBrTToukUrg52vcrVqpusHfmbVpfpRF5HHzVQz/screen%2053.jpg]
템플릿이 필요하신 분은 아래 pen을 fork해서 사용하세요 🤗

See the Pen React Starter using Styled-components by kwon (@kwonkwon) on CodePen.