minsu

오픈소스 디자인 시스템 함께 만들어 나갈 디자이너 분을 찾습니다!

<p>제로초님 코드 수정 했습니다</p>
<p>제가 Input Form 을 동적으로 만들어서 -> Input 2개를 만든 다음 입력하면 2개의 배열이 들어가야 하는 데</p>
<p>마지막으로 입력한 하나의 배열만 들어가게 됩니다.</p>
<p>왜 이러는 지 모르겠습니다.. ㅠㅠ</p>
<p><img src="https://cdn.inflearn.com/public/comments/d4329364-f126-410f-889c-8726d3d056f1/blob" alt="" /><img src="https://cdn.inflearn.com/public/comments/ca503ad7-7a0b-4bf5-ae8f-9cb1fbd78ef5/blob" alt="" /></p>
<div style="color: #f8f8f2; background-color: #282a36; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #ff79c6;">const</span> [<span style="color: #bd93f9;">integerIdList</span>, <span style="color: #50fa7b;">setIntegerIdList</span>] <span style="color: #ff79c6;">=</span> <span style="color: #50fa7b;">useState</span><<span style="color: #8be9fd; font-style: italic;">any</span>>(<span style="color: #e9f284;">""</span>);</div>
<div><span style="color: #ff79c6;">const</span> [<span style="color: #bd93f9;">integer</span>, <span style="color: #50fa7b;">setInteger</span>] <span style="color: #ff79c6;">=</span> <span style="color: #50fa7b;">useState</span><<span style="color: #8be9fd; font-style: italic;">any</span>>([]);</div>
<div>&nbsp;</div>
<div>
<div style="line-height: 18px;">
<div><span style="color: #ff79c6;">const</span> <span style="color: #50fa7b;">handleInputChange</span> <span style="color: #ff79c6;">=</span> (<span style="color: #ffb86c; font-style: italic;">index</span><span style="color: #ff79c6;">:</span> <span style="color: #8be9fd; font-style: italic;">number</span>, <span style="color: #ffb86c; font-style: italic;">event</span><span style="color: #ff79c6;">:</span> <span style="color: #8be9fd; font-style: italic;">any</span>) <span style="color: #ff79c6;">=></span> {</div>
<div><span style="color: #ff79c6;">if</span> (<span style="color: #ffb86c; font-style: italic;">event</span>.target.name <span style="color: #ff79c6;">===</span> <span style="color: #e9f284;">"</span><span style="color: #f1fa8c;">IntegerId</span><span style="color: #e9f284;">"</span>) {</div>
<div><span style="color: #6272a4;">// setIntegerIdList(event.target.value)</span></div>
<div><span style="color: #50fa7b;">setInteger</span>([<span style="color: #ff79c6;">...</span><span style="color: #bd93f9;">integerIdList</span>]);</div>
<div>}</div>
<div>};</div>
<br /><br />
<div><span style="color: #ff79c6;">const</span> <span style="color: #50fa7b;">onChangeInteger</span> <span style="color: #ff79c6;">=</span> (<span style="color: #ffb86c; font-style: italic;">event</span>) <span style="color: #ff79c6;">=></span> {</div>
<div><span style="color: #50fa7b;">setIntegerIdList</span>([<span style="color: #ffb86c; font-style: italic;">event</span>.target.value]);</div>
<div>};</div>
<div>&nbsp;</div>
<div>return (</div>
<div>&nbsp;</div>
<div>
<div style="line-height: 18px;">
<div><<span style="color: #ff79c6;">input</span></div>
<div><span style="color: #50fa7b; font-style: italic;">type</span><span style="color: #ff79c6;">=</span><span style="color: #e9f284;">"</span><span style="color: #f1fa8c;">text</span><span style="color: #e9f284;">"</span></div>
<div><span style="color: #50fa7b; font-style: italic;">onBlur</span><span style="color: #ff79c6;">=</span>{(<span style="color: #ffb86c; font-style: italic;">event</span>) <span style="color: #ff79c6;">=></span> <span style="color: #50fa7b;">handleInputChange</span>(<span style="color: #ffb86c; font-style: italic;">index</span>, <span style="color: #ffb86c; font-style: italic;">event</span>)}</div>
<div><span style="color: #50fa7b; font-style: italic;">name</span><span style="color: #ff79c6;">=</span><span style="color: #e9f284;">"</span><span style="color: #f1fa8c;">IntegerId</span><span style="color: #e9f284;">"</span></div>
<div><span style="color: #50fa7b; font-style: italic;">onChange</span><span style="color: #ff79c6;">=</span>{(<span style="color: #ffb86c; font-style: italic;">event</span>) <span style="color: #ff79c6;">=></span> <span style="color: #50fa7b;">onChangeInteger</span>(<span style="color: #ffb86c; font-style: italic;">event</span>)}</div>
<div>/></div>
</div>
</div>
<div>)</div>
</div>
</div>
</div>

입력한 target.value 값을 배열에 저장 할려고 합니다.

<p>제로초님 안녕하세요.</p>
<p>제가 한 가지 더 여쭤 보고 싶은 것이 있습니다.</p>
<p>&nbsp;</p>
<p>이게 처음에는 brandtext.length 20개 중 5개씩 데이터를 출력하고&nbsp;</p>
<p>더보기 handleClick 할 떄 마다 5개씩 보이도록 만들었습니다.</p>
<p>&nbsp;</p>
<p>제가 여기서 이제 더보기 버튼을 다 클릭해서 20개가 5*4 번 클릭 해 펼쳐지면</p>
<p>접기 함수를 만들어서 더보기 버튼이 사라지고 접기를 누르면 다시 5개만 있도록 하고 싶습니다.</p>
<p>어떻게 해야 할 지 감이 안잡히네요&nbsp;</p>
<p>&nbsp;</p>
<div style="color: #f8f8f2; background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>&nbsp;</div>
<div>&nbsp; &nbsp; <span style="color: #ff79c6;">const</span> [<span style="color: #bd93f9;">visibleBlogs</span>, <span style="color: #50fa7b;">setVisibleBlogs</span>] <span style="color: #ff79c6;">=</span> <span style="color: #50fa7b;">useState</span>(<span style="color: #bd93f9;">5</span>)</div>
<br />
<div>&nbsp; &nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp; &nbsp; <span style="color: #ff79c6;">const</span> <span style="color: #50fa7b;">handleClick</span> <span style="color: #ff79c6;">=</span> () <span style="color: #ff79c6;">=></span> {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #50fa7b;">setVisibleBlogs</span>(<span style="color: #ffb86c; font-style: italic;">visibleBlogs</span> <span style="color: #ff79c6;">=></span> <span style="color: #ffb86c; font-style: italic;">visibleBlogs</span> <span style="color: #ff79c6;">+</span> <span style="color: #bd93f9;">5</span>)</div>
<div>&nbsp; }</div>
<div>
<div style="line-height: 19px;">
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {<span style="color: #ffb86c; font-style: italic;">ProductDetail</span>.brandtext?.length <span style="color: #ff79c6;">>=</span> <span style="color: #bd93f9;">visibleBlogs</span> <span style="color: #ff79c6;">&&</span> &nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <<span style="color: #ff79c6;">button</span> <span style="color: #50fa7b; font-style: italic;">type</span><span style="color: #ff79c6;">=</span><span style="color: #e9f284;">"</span><span style="color: #f1fa8c;">button</span><span style="color: #e9f284;">"</span> <span style="color: #50fa7b; font-style: italic;">onClick</span><span style="color: #ff79c6;">=</span>{<span style="color: #50fa7b;">handleClick</span>}>더보기</<span style="color: #ff79c6;">button</span>></div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</div>
</div>
</div>
</div>

제로초님 각 id 값 마다 특정 이미지 넣기

<p>제로초님 배포 준비를 할려고 하는데&nbsp; front 서버 ec2 -> 우분투에서 build 를 끝마치고 start 하고 싶습니다.</p>
<p>하지만 제가 webpack 을 이제 클론코딩 하면서 사용 해 봐서.</p>
<p>dev 말고 start 할 떄는 어떻게 해야 할까요...</p>
<p>아니면 build 안 dist, index.html 를 aws 정적 웹 페이지에서 만들어 줘야 할 지</p>
<pre class="language-json" style="box-sizing: inherit; font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px; margin-top: 1.5em; margin-bottom: 1.5em; padding: 1.2em; line-height: 1.6; color: #e0e0e0; background: #212121; word-break: normal; overflow-wrap: normal; tab-size: 2; hyphens: none; overflow: auto; border-radius: 0.6em;"><code>NODE_ENV=production webpack-dev-server --progress
 dev-server 설정 후 start 부분에 이런식으로 넣어주면 될까요?</code></pre>
<div style="color: #f8f8f2; background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #f1fa8c;">development 에 </span><span style="color: #f1fa8c;">production을 붙여 주면 될까요?</span></div>
<div style="background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;"><span style="color: #f1fa8c;">다른 분들 보면 dist, index.html 부분들을 도메인에 넣어주는 거 같던데 잘 모르겠네요 ㅠㅠ</span></div>
<div style="background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">&nbsp;</div>
<div style="background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">&nbsp;</div>
<div style="background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div style="color: #f8f8f2; line-height: 19px;"><span style="color: #f1fa8c;">start: cross-env TS_NODE_PROJECT=</span><span style="color: #ff79c6;">\"</span><span style="color: #f1fa8c;">tsconfig-for-webpack-config.json</span><span style="color: #ff79c6;">\"</span><span style="color: #f1fa8c;"> webpack-dev-server&nbsp;--env&nbsp;production</span></div>
<div style="color: #f8f8f2; line-height: 19px;">이런식으로 start 실행하면 윈도우에서는 정상 작동하는데 우분투에서는 안되네요.,.</div>
</div>
<div style="background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">&nbsp;</div>
<div style="background-color: #282a36; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">&nbsp;</div>

배포 npm run start

<p>제로초님 nodebird 에 있는 aws 연결 하는 방법 따라하면서 배포 할려고 하는데.</p>
<p>aws 인스턴스 HTTP 80port -> 우분투 환경 .env 파일에 PORT 을 80으로 바꿔준 뒤&nbsp;</p>
<p>back nest.js 부분에서 npm run start 을 하면&nbsp;</p>
<p>&nbsp;</p>
<p>[Nest] 23055&nbsp; - 09/26/2021, 8:33:16 AM&nbsp; &nbsp;ERROR [NestApplication] Error: listen EACCES: permission denied 0.0.0.0:80 +5ms</p>
<p>(node:23055) UnhandledPromiseRejectionWarning: Error: listen EACCES: permission denied 0.0.0.0:80</p>
<p>&nbsp;</p>
<p>80번 port 은 사용 할 수 없다고 나옵니다.</p>
<p>&nbsp;</p>
<p>어떻게 해결해야 할까요...&nbsp;</p>
<p>아니면 인스턴스를 새로 만들어서 HTTP port을 3000 으로 다시 만드는 게 좋을까요?&nbsp;</p>
<p>구글에서 여러 해결방법 찾아서 해봤는데 도저히 안되네요 ㅠㅠ</p>
<p>&nbsp;</p>
<p>우분투 환경 말고 윈도우 터미널에서 npm run start 하면 정상적으로 잘 작동하는데,&nbsp;</p>
<p>우분투 환경에서만 그러네요&nbsp;</p>

minsu

投稿