hkgb0009

<div style="background-color: #1e1e1e; line-height: 19px;">
<div><span style="background-color: #ecf0f1; color: #ffffff;"><strong><span style="color: #808080; font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre; background-color: #ecf0f1;">Register.vue 스크립트 내용</span></span></strong></span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #808080;"></span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">ref</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">"vue"</span>;</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">auth</span>,&nbsp;<span style="color: #9cdcfe;">USER_COLLECTION</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">"../firebase"</span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #c586c0;">import</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">useRouter</span>&nbsp;}&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">"vue-router"</span></div>
<br />
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #c586c0;">export</span>&nbsp;<span style="color: #c586c0;">default</span>&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;<span style="color: #dcdcaa;">setup</span>()&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">email</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">ref</span>(<span style="color: #ce9178;">""</span>);</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">username</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">ref</span>(<span style="color: #ce9178;">""</span>);</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">password</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">ref</span>(<span style="color: #ce9178;">""</span>);</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">loading</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">ref</span>(<span style="color: #569cd6;">false</span>);</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">router</span>&nbsp;=&nbsp;<span style="color: #dcdcaa;">useRouter</span>();</div>
<br />
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">onRegiser</span>&nbsp;=&nbsp;<span style="color: #569cd6;">async</span>&nbsp;()&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">loading</span>.<span style="color: #9cdcfe;">value</span>&nbsp;=&nbsp;<span style="color: #569cd6;">true</span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;{&nbsp;<span style="color: #4fc1ff;">user</span>&nbsp;}&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">auth</span>.<span style="color: #dcdcaa;">createUserWithEmailAndPassword</span>(<span style="color: #9cdcfe;">email</span>.<span style="color: #9cdcfe;">value</span>,&nbsp;<span style="color: #9cdcfe;">password</span>.<span style="color: #9cdcfe;">value</span>)</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">doc</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">USER_COLLECTION</span>.<span style="color: #dcdcaa;">doc</span>(<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">uid</span>)</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">doc</span>.<span style="color: #dcdcaa;">set</span>({</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">uid:</span>&nbsp;<span style="color: #9cdcfe;">user</span>.<span style="color: #9cdcfe;">uid</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">email:</span>&nbsp;<span style="color: #9cdcfe;">email</span>.<span style="color: #9cdcfe;">value</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">profile_image_url:</span>&nbsp;<span style="color: #ce9178;">'/profile.jpeg'</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">num_tweets:</span>&nbsp;<span style="color: #b5cea8;">0</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">followers:</span>&nbsp;[],</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">followings:</span>&nbsp;[],</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">created_at:</span>&nbsp;<span style="color: #4ec9b0;">Date</span>.<span style="color: #dcdcaa;">now</span>()</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">alert</span>(<span style="color: #ce9178;">"회원가입&nbsp;성공"</span>)</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">router</span>.<span style="color: #dcdcaa;">push</span>(<span style="color: #ce9178;">'/login'</span>)</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">catch</span>(<span style="color: #9cdcfe;">e</span>)&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;console.log("create&nbsp;user&nbsp;with&nbsp;email&nbsp;and&nbsp;password&nbsp;&nbsp;&nbsp;error:",e)</span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">alert</span>(<span style="color: #9cdcfe;">e</span>.<span style="color: #9cdcfe;">message</span>)</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">finally</span>&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">loading</span>.<span style="color: #9cdcfe;">value</span>&nbsp;=&nbsp;<span style="color: #569cd6;">false</span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<br />
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">username</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">email</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">password</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">onRegiser</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">loading</span>,</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;&nbsp;&nbsp;};</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">&nbsp;&nbsp;},</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">};</div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><span style="color: #808080;"></span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"><strong style="color: #ffffff; font-family: 'Spoqa Han Sans'; font-size: medium; white-space: normal;"><span style="color: #808080; font-family: Consolas, Courier New, monospace;"><span style="font-size: 14px; white-space: pre; background-color: #ecf0f1;">firebase/ index.js 스크립트 내용</span></span></strong><span style="color: #808080;"></span></div>
<div style="color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;">
<div style="line-height: 19px;">
<div><span style="color: #c586c0;">import</span>&nbsp;<span style="color: #9cdcfe;">firebase</span>&nbsp;<span style="color: #c586c0;">from</span>&nbsp;<span style="color: #ce9178;">'firebase'</span></div>
<br />
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">firebaseConfig</span>&nbsp;=&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">apiKey</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"AIzaSyA8429twvLbAUdo2v2c09mplxb5RmdoRp0"</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">authDomain</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"twitter-clone-inflearn-dfe0e.firebaseapp.com"</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">projectId</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"twitter-clone-inflearn-dfe0e"</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">storageBucket</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"twitter-clone-inflearn-dfe0e.appspot.com"</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">messagingSenderId</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"194204341657"</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">appId</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"1:194204341657:web:30c2f77d320f3f78b16f08"</span></div>
<div>&nbsp;&nbsp;};</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #4ec9b0;">firebase</span>.<span style="color: #dcdcaa;">initializeApp</span>(<span style="color: #4fc1ff;">firebaseConfig</span>)</div>
<br />
<div>&nbsp;&nbsp;<span style="color: #c586c0;">export</span>&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">auth</span>&nbsp;=&nbsp;<span style="color: #4ec9b0;">firebase</span>.<span style="color: #dcdcaa;">auth</span>()</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">export</span>&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">db</span>&nbsp;=&nbsp;<span style="color: #4ec9b0;">firebase</span>.<span style="color: #dcdcaa;">firestore</span>()</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">export</span>&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">storage</span>&nbsp;=&nbsp;<span style="color: #4ec9b0;">firebase</span>.<span style="color: #dcdcaa;">storage</span>()</div>
<div>&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">export</span>&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">USER_COLLECTION</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">db</span>.<span style="color: #dcdcaa;">collection</span>(<span style="color: #ce9178;">"users"</span>)</div>
</div>
</div>
<span style="color: #808080; font-family: Consolas, 'Courier New', monospace; font-size: 14px; white-space: pre;"></span></div>

hkgb0009

Posts