<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>Hi Coding !</title>
    <link>https://detergentyoon.tistory.com/</link>
    <description>개인 공부 기록</description>
    <language>ko</language>
    <pubDate>Sun, 5 Apr 2026 22:06:12 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>온화한사람</managingEditor>
    <image>
      <title>Hi Coding !</title>
      <url>https://tistory1.daumcdn.net/tistory/4700308/attach/b66a34bc20924a32bc50c59ee24d84cf</url>
      <link>https://detergentyoon.tistory.com</link>
    </image>
    <item>
      <title>[C] [포인터] 배열 원소 값 뒤집기</title>
      <link>https://detergentyoon.tistory.com/93</link>
      <description>&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;b&gt;1. 예제 내용&lt;/b&gt;&lt;/blockquote&gt;
&lt;pre id=&quot;code_1634399692137&quot; class=&quot;c++ arduino&quot; data-ke-language=&quot;c++&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;#define COUNT 10
double arr[COUNT] = { 1.2, 3.1, 4.3, 4.5, 6.7, 2.3, 8.7, 9.5, 2.3, 5.8 };&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; 실수형 배열에 대해서 원소들을 역순으로 초기화하는 reverse_array 함수 생성, 크기가 10인 double 배열을 reverse_array 함수에 적용하여 출력&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;b&gt;2. 출력 결과&lt;/b&gt;&lt;/blockquote&gt;
&lt;pre id=&quot;code_1634399868179&quot; class=&quot;c++ arduino&quot; data-ke-language=&quot;c++&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;Before : 1.2 3.1 4.3 4.5 6.7 2.3 8.7 9.5 2.3 5.8
After  : 5.8 2.3 9.5 8.7 2.3 6.7 4.5 4.3 3.1 1.2&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;b&gt;3. 정답 코드&lt;/b&gt;&lt;/blockquote&gt;
&lt;pre id=&quot;code_1634399024805&quot; class=&quot;c++ arduino&quot; data-ke-language=&quot;c++&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;#include &amp;lt;stdio.h&amp;gt;

#define COUNT 10

double reverse_array(double* arr)
{
	int l = 0; // 배열 왼쪽 첫 원소의 위치 저장
	int r = COUNT - 1; // 배열 오른쪽 첫 원소의 위치 저장
	double temp;

	// 바꾸는 횟수는 배열 항목 개수의 절반만큼만 필요
	for (int i = 0; i &amp;lt; COUNT / 2; i++)
	{
		// swap
		temp = arr[l];
		arr[l] = arr[r];
		arr[r] = temp;

		l++; // left index는 1씩 증가
		r--; // right index는 1씩 감소
	}
	return *arr;
}

int main()
{
	double arr[COUNT] = { 1.2, 3.1, 4.3, 4.5, 6.7, 2.3, 8.7, 9.5, 2.3, 5.8 };

	printf(&quot;배열: &quot;);
	for (int i = 0; i &amp;lt; COUNT; i++)
		printf(&quot;%.1lf &quot;, arr[i]);

	printf(&quot;\n역순: &quot;);
	reverse_array(arr); // 배열을 매개변수로 전달
	for (int i = 0; i &amp;lt; 10; i++)
		printf(&quot;%.1lf &quot;, arr[i]);

	return 0;
}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;i&gt;참고 자료 : Core C Programming (천정아 저)&lt;/i&gt;&lt;/p&gt;</description>
      <category>Language/C, C++</category>
      <category>C</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/93</guid>
      <comments>https://detergentyoon.tistory.com/93#entry93comment</comments>
      <pubDate>Sun, 17 Oct 2021 01:02:09 +0900</pubDate>
    </item>
    <item>
      <title>[C] rgb 값을 입력 받아 색상 코드 출력</title>
      <link>https://detergentyoon.tistory.com/92</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; 컴퓨터 시스템에서 색상을 표현하는 방법 중에 RGB 표기법은 red, green, blue에 8비트씩을 사용해서 색상을 표현하므로 24비트 트루컬러라고 한다. 컴퓨터 시스템에서는 32비트 데이터의 최하위 바이트부터 red, green, blue의 순서로 색상 정보를 저장하고 최상위 바이트는 사용하지 않고 0으로 채운다. 0~255사이의 값을 red, green, blue의 순서로 3개 입력받아서 RGB 색상을 만들어서 출력하는 프로그램을 작성하시오. RGB 색상을 출력할 때는 바이트 단위로 값을 알아보기 쉽도록 16진수로 출력한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; 조건 : red, green, blue 값을 입력받을 때 0~255 범위의 값을 입력받아야 한다. 만약 255보다 큰 값을 입력하면 오버플로우로 처리하게 구현하시오. 즉, 예를 들어 256이 입력되면 0을 입력한 것으로 처리해야 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1632709153131&quot; class=&quot;c++ arduino&quot; data-ke-language=&quot;c++&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;#include &amp;lt;stdio.h&amp;gt;

int main()
{
	unsigned char r, g, b; // 각각 8 bit
	unsigned int rgb_color; // 32 bit

	printf(&quot;red : &quot;);
	scanf_s(&quot;%d&quot;, &amp;amp;r);

	printf(&quot;green : &quot;);
	scanf_s(&quot;%d&quot;, &amp;amp;g);

	printf(&quot;blue : &quot;);
	scanf_s(&quot;%d&quot;, &amp;amp;b);

	rgb_color = r | g &amp;lt;&amp;lt; 8 | b &amp;lt;&amp;lt; 16;

	printf(&quot;%06X&quot;, rgb_color);

	return 0;
}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; unsigned char형의 범위는 0~255로, 문제에서 제시된 &lt;b&gt;256 이상의 값을 입력했을 때 오버플로우 시켜 0으로 처리&lt;/b&gt;하는 조건에 부합하기 위해 이 데이터형을 사용합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; 입력받은 r, g, b 값을 |(or) 비트 논리 연산자와 비트 시프트 연산을 통해 결과값&lt;b&gt;`rgb_color`&lt;/b&gt;에 대입합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; %06X 값으로 출력하여 16진수로 6자리를 맞춰 출력하고, 값이 0이어도 0을 출력합니다. 예를 들어 red, green, blue가 255, 0, 0 인 경우 0000FF로 출력합니다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;blockquote data-ke-style=&quot;style2&quot;&gt;&lt;b&gt;이 코드의 문제점?&lt;/b&gt;&lt;/blockquote&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-origin-width=&quot;1267&quot; data-origin-height=&quot;49&quot; data-filename=&quot;1.PNG&quot; data-ke-mobilestyle=&quot;widthOrigin&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/owqjw/btrfZpq3cMg/ikQUbDhzeWGSIFwcjdlB31/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/owqjw/btrfZpq3cMg/ikQUbDhzeWGSIFwcjdlB31/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/owqjw/btrfZpq3cMg/ikQUbDhzeWGSIFwcjdlB31/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fowqjw%2FbtrfZpq3cMg%2FikQUbDhzeWGSIFwcjdlB31%2Fimg.png&quot; data-origin-width=&quot;1267&quot; data-origin-height=&quot;49&quot; data-filename=&quot;1.PNG&quot; data-ke-mobilestyle=&quot;widthOrigin&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; C6328 에러를 야기합니다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&lt;i&gt;문제 출처 - Core C Programming(천정아 저)&lt;/i&gt;&lt;/p&gt;</description>
      <category>Language/C, C++</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/92</guid>
      <comments>https://detergentyoon.tistory.com/92#entry92comment</comments>
      <pubDate>Mon, 27 Sep 2021 11:30:25 +0900</pubDate>
    </item>
    <item>
      <title>[Python] WinError 5 권한 오류로 인한 설치 액세스 거부</title>
      <link>https://detergentyoon.tistory.com/91</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;Python에서 Package를 설치하다 권한 오류로 인해 터미널에 아래와 같은 문구가 뜨며 설치가 안될 때가 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #000000;&quot;&gt;ERROR: Could not install packages due to an EnvironmentError: [WinError 5] 액세스가 거부되었습니다&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-origin-width=&quot;980&quot; data-origin-height=&quot;851&quot; data-filename=&quot;cmd.png&quot; width=&quot;580&quot; height=&quot;504&quot; data-ke-mobilestyle=&quot;widthOrigin&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/RDYDN/btrfuKBlVbR/IKNLJtNVDFQTY8CQRcdKXK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/RDYDN/btrfuKBlVbR/IKNLJtNVDFQTY8CQRcdKXK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/RDYDN/btrfuKBlVbR/IKNLJtNVDFQTY8CQRcdKXK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FRDYDN%2FbtrfuKBlVbR%2FIKNLJtNVDFQTY8CQRcdKXK%2Fimg.png&quot; data-origin-width=&quot;980&quot; data-origin-height=&quot;851&quot; data-filename=&quot;cmd.png&quot; width=&quot;580&quot; height=&quot;504&quot; data-ke-mobilestyle=&quot;widthOrigin&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;이런 경우 cmd 를 관리자 권한으로 실행시킨 후 패키지 설치 절차를 진행하시면 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1632012293815&quot; class=&quot;python&quot; data-ke-language=&quot;python&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;pip install 패키지명&lt;/code&gt;&lt;/pre&gt;</description>
      <category>Language/Python</category>
      <category>oserror</category>
      <category>pip</category>
      <category>Python</category>
      <category>pythonpackage</category>
      <category>WinError5</category>
      <category>파이썬</category>
      <category>파이썬패키지</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/91</guid>
      <comments>https://detergentyoon.tistory.com/91#entry91comment</comments>
      <pubDate>Sun, 19 Sep 2021 09:47:19 +0900</pubDate>
    </item>
    <item>
      <title>[Python]  turtle 그래픽 창을 재시작하는 방법</title>
      <link>https://detergentyoon.tistory.com/90</link>
      <description>&lt;blockquote data-ke-style=&quot;style3&quot;&gt;how to reset the turtle graphics window&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.mainloop()`&lt;/b&gt; 일명 &lt;b&gt;`turtle.Screen().mainloop()`&lt;/b&gt;(또는 &lt;b&gt;`turtle.Screen().exitonclick()`&lt;/b&gt;, 등) 가 없으면 프로그램이 종료되어 모든 것이 닫히기 때문에 창이 닫힙니다. 이것은 스크립트가 Python IDLE -n 내에서 실행되지 않는 한 turtle 그래픽 프로그램의 마지막 명령문이어야 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.done()`&lt;/b&gt; (창을 닫거나 재설정하지 않습니다.) 동의어 &lt;b&gt;`turtle.mainloop()`&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;nbsp;`turtle.clear()`&lt;/b&gt; 이 turtle이 그렸던 모든 것을 삭제합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.reset()`&lt;/b&gt; 이 turtle의 상태(예: 방향, 위치 등)를 수행한&lt;b&gt; `turtle.clear()`&lt;/b&gt; 다음 재설정 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.clearscreen()`&lt;/b&gt;&amp;nbsp;일명&amp;nbsp;&lt;b&gt;`turtle.Screen().clear()`&lt;/b&gt; 는 모든 도면 및 그것의 모든 것을 원래 상태로 창을 다시 설정합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.resetscreen()`&lt;/b&gt; 는 화면의 모든 turtle을 초기 상태로 &lt;b&gt;`turtle.Screen().reset()`&lt;/b&gt; 재설정 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.bye()`&lt;/b&gt; 일명&amp;nbsp;&lt;b&gt;`turtle.Screen().bye()`&lt;/b&gt; 는 turtle 그래픽 창을 닫습니다. 이것이 호출된 후 turtle 그래픽 명령을 사용할 방법이 없습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;`turtle.exitonclick()`&lt;/b&gt; 일명&amp;nbsp;&lt;b&gt;`turtle.Screen().exitonclick()`&lt;/b&gt; 을 수행하기 위해 화면 클릭 이벤트를 바인딩(결합)한 후&amp;nbsp;&lt;b&gt;`turtle.Screen().bye()`&lt;/b&gt; 호출 &lt;b&gt;`turtle.Screen().mainloop()`&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;turtle 프로그램에서 새로운 핸드를 시작하기 위한 목적으로, &lt;b&gt;`turtle.reset()`&lt;/b&gt; 하거나 &lt;b&gt;`turtle.resetscreen()`&lt;/b&gt; 을 수행하는 것이 최선의 방법일 것입니다.&lt;/p&gt;</description>
      <category>Language/Python</category>
      <category>Python</category>
      <category>turtle</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/90</guid>
      <comments>https://detergentyoon.tistory.com/90#entry90comment</comments>
      <pubDate>Wed, 8 Sep 2021 21:21:41 +0900</pubDate>
    </item>
    <item>
      <title>[CSS] 구글 폰트(Google fonts) 적용 방법</title>
      <link>https://detergentyoon.tistory.com/89</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;nbsp;1. 사이트 들어가기 (&lt;a href=&quot;https://fonts.google.com/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://fonts.google.com/&lt;/a&gt;)&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-origin-width=&quot;1893&quot; data-origin-height=&quot;865&quot; width=&quot;795&quot; height=&quot;363&quot; data-ke-mobilestyle=&quot;widthOrigin&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cWVFUy/btrbCtyAkNg/pPIi2FjF9AByJQOFdhojQ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cWVFUy/btrbCtyAkNg/pPIi2FjF9AByJQOFdhojQ1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cWVFUy/btrbCtyAkNg/pPIi2FjF9AByJQOFdhojQ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcWVFUy%2FbtrbCtyAkNg%2FpPIi2FjF9AByJQOFdhojQ1%2Fimg.png&quot; data-origin-width=&quot;1893&quot; data-origin-height=&quot;865&quot; width=&quot;795&quot; height=&quot;363&quot; data-ke-mobilestyle=&quot;widthOrigin&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;2. 원하는 폰트 선택하기&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;저는 ubuntu 폰트를 가져다 사용하기로 했습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-origin-width=&quot;1893&quot; data-origin-height=&quot;861&quot; data-filename=&quot;googlefont2.png&quot; width=&quot;799&quot; height=&quot;363&quot; data-ke-mobilestyle=&quot;widthOrigin&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/By5zD/btrbvwPOPSV/uW1NFoskBl9TyLeQUMRdB1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/By5zD/btrbvwPOPSV/uW1NFoskBl9TyLeQUMRdB1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/By5zD/btrbvwPOPSV/uW1NFoskBl9TyLeQUMRdB1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBy5zD%2FbtrbvwPOPSV%2FuW1NFoskBl9TyLeQUMRdB1%2Fimg.png&quot; data-origin-width=&quot;1893&quot; data-origin-height=&quot;861&quot; data-filename=&quot;googlefont2.png&quot; width=&quot;799&quot; height=&quot;363&quot; data-ke-mobilestyle=&quot;widthOrigin&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;3. 사용할 폰트 스타일 추가하기&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;b&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;+ Select this style&lt;/span&gt;&lt;/b&gt; 을 클릭하여 사용할 스타일을 선택 &amp;middot; 추가할 수 있습니다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;저는 Unbuntu 폰트의 300, 400, 500, 700 스타일을 사용하기로 했습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;이후 상단의&amp;nbsp;&lt;span style=&quot;color: #f89009;&quot;&gt;&lt;b&gt;Selected family &lt;/b&gt;&lt;/span&gt;박스를 클릭하여 추가한 폰트 스타일들을 확인할 수 있습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-origin-width=&quot;1144&quot; data-origin-height=&quot;648&quot; data-filename=&quot;blob&quot; width=&quot;702&quot; height=&quot;495&quot; data-ke-mobilestyle=&quot;widthOrigin&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/tRHu7/btrbJIutpCP/M1I0WVa47K6jvTYAYQbqUk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/tRHu7/btrbJIutpCP/M1I0WVa47K6jvTYAYQbqUk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/tRHu7/btrbJIutpCP/M1I0WVa47K6jvTYAYQbqUk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtRHu7%2FbtrbJIutpCP%2FM1I0WVa47K6jvTYAYQbqUk%2Fimg.png&quot; data-origin-width=&quot;1144&quot; data-origin-height=&quot;648&quot; data-filename=&quot;blob&quot; width=&quot;702&quot; height=&quot;495&quot; data-ke-mobilestyle=&quot;widthOrigin&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;4. CSS에서 폰트 불러오기&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;선택한 폰트 스타일을 불러오는 방법은 HTML에서 받느냐 혹은 CSS에서 받느냐로 나뉘는데,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;필자는 CSS에서 받아오는 방식이 더 직관적이기 때문에 @import 방식을 선호합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-origin-width=&quot;357&quot; data-origin-height=&quot;310&quot; data-ke-mobilestyle=&quot;widthOrigin&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b4HO8i/btrbIHo3fcx/Mqffe02pKMKsmXs7FcxCL0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b4HO8i/btrbIHo3fcx/Mqffe02pKMKsmXs7FcxCL0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b4HO8i/btrbIHo3fcx/Mqffe02pKMKsmXs7FcxCL0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb4HO8i%2FbtrbIHo3fcx%2FMqffe02pKMKsmXs7FcxCL0%2Fimg.png&quot; data-origin-width=&quot;357&quot; data-origin-height=&quot;310&quot; data-ke-mobilestyle=&quot;widthOrigin&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;위의 그림처럼 Selected family 박스 하단에서 주소를 제시해주는데요. 굵은 글씨체로 나타나 있는 문장을 보면 제가 추가한 Ubuntu 폰트의 300, 400, 500, 700 스타일이 참조되어 있는 것을 확인할 수 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1628577208272&quot; class=&quot;css&quot; data-ke-language=&quot;css&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&amp;amp;display=swap');

* {
  font-family: 'Ubuntu', sans-serif;
}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;이처럼 CSS 최상단에 @import url('~'); 을 복사 붙여넣기 한 뒤 (&lt;span style=&quot;color: #ef5369;&quot;&gt;&amp;lt;style&amp;gt; 태그 생략&lt;/span&gt;)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;폰트를 직접 다운로드 받지 않고도 @import 를 통해 웹에서 불러올 수 있습니다.&lt;/p&gt;</description>
      <category>Web/HTML * CSS</category>
      <category>css font</category>
      <category>Google font</category>
      <category>구글폰트</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/89</guid>
      <comments>https://detergentyoon.tistory.com/89#entry89comment</comments>
      <pubDate>Tue, 10 Aug 2021 15:37:30 +0900</pubDate>
    </item>
    <item>
      <title>헤르만 헤세, ≪수레바퀴 아래서≫ 서평</title>
      <link>https://detergentyoon.tistory.com/84</link>
      <description>&lt;blockquote data-ke-style=&quot;style1&quot;&gt;&lt;span style=&quot;font-family: 'Noto Serif KR';&quot;&gt;자전적 이야기 구성은 자기 치료의 수단&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&quot;헤세는 위기 극복 방식에 있어서 자신이 존경했던 괴테의 전통을 따르고 있다. 일찍이 괴테가 ≪젊은 베르테르의 슬픔≫을 쓰면서 자신의 우울증, 자살 소동에서 해방되었듯이, 헤세도 ≪수레바퀴 아래서≫를 쓰면서 마울브론 신학교에 입학했다 퇴학당하고, 그로 인해 우울증과 신경증 때문에 정신 치료를 받아야했고, 자살 기도도 여러 번 했던 그의 청소년기의 위기에 대한 기억으로부터 자신을 해방시킨다. 다시 말해서, 글쓰기란 작가 헤세에게는 자기 치료의 과정인 것이다.&quot;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;INFJ가 헤세의 작품을 사랑할 수 밖에 없는 가장 강력한 이유가 바로 이것이라고 느낀다. '자전적 이야기의 구성은 자기 치료의 수단'이라니, 와 어떻게 이런 해석을 할 수가 있을까?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;수레바퀴 아래서는 19세기 말의 독일 사회를 배경으로 쓰였지만, 과열된 입시 경쟁으로 인해 성적에 대한 압박감과 스트레스에 시달리고 있는 오늘날 우리나라 청소년의 삶과 현실을 비추어 볼 수 있는 책이기도 하다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;대한민국 어딘가에 존재하는 한스 기벤라트들에게 심심한 위로를 보낸다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;인생은 고통의 연속이지만 문학의 힘으로 치유하여 나의 마음이 오래토록 연명할 수 있길 바란다.&lt;/p&gt;</description>
      <category>etc/book review</category>
      <category>서평</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/84</guid>
      <comments>https://detergentyoon.tistory.com/84#entry84comment</comments>
      <pubDate>Wed, 28 Jul 2021 00:46:19 +0900</pubDate>
    </item>
    <item>
      <title>[JS] 콜백 Callback</title>
      <link>https://detergentyoon.tistory.com/81</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;콜백(Callback) 은 함수의 인수로 사용되는 함수를 뜻합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1626852290808&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;function timeout(cb) {
  setTimeout(() =&amp;gt; {
    console.log('HEROPY!')
    cb() // callback 함수
  }, 1000)
}

timeout(() =&amp;gt; {
  console.log('Done!')
})&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;위 코드의 cb() 처럼 특정한 실행위치를 보장해주는 방법으로 활용합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;&lt;i&gt;참고문헌 &lt;/i&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Callback_function&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://developer.mozilla.org/en-US/docs/Glossary/Callback_function&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1626852438043&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN&quot; data-og-description=&quot;A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.&quot; data-og-host=&quot;developer.mozilla.org&quot; data-og-source-url=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Callback_function&quot; data-og-url=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Callback_function&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/fykSb/hyKXQw3XFY/yRmRyA7nku5mVORk6LmCgk/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080&quot;&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Callback_function&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Callback_function&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/fykSb/hyKXQw3XFY/yRmRyA7nku5mVORk6LmCgk/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;developer.mozilla.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web/JS</category>
      <category>javascript기초</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/81</guid>
      <comments>https://detergentyoon.tistory.com/81#entry81comment</comments>
      <pubDate>Wed, 21 Jul 2021 16:27:37 +0900</pubDate>
    </item>
    <item>
      <title>[JS] 호이스팅 Hoisting</title>
      <link>https://detergentyoon.tistory.com/80</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;JavaScript 는 특이하게도 호이스팅(Hoisting) 이라는 기능이 탑재되어 있는데, 이는 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 일컫는 말입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1626794678577&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;const a = 3

// 함수 출력단
double()

// 함수 선언부
function double() {
  console.log(a * 2)
}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;이해하기 쉽게 설명하자면, 어떤 프로그램이던 코드를 위에서부터 아래로 읽어내려가지만 JavaScript 의 경우 호이스팅을 통해서 함수 출력을 선언보다 상단에 입력하더라도 문제없이 컴파일 되는 것입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;만약 코드를 해석함에 있어서 '왜 선언이 되지 않은 함수가 이곳에 출력되있지?' 라고 의문을 품을 필요 없이 '이 출력단 이후 어딘가에 함수를 선언해두었구나' 라고 생각하시면 되겠습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;i&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;참고문헌&lt;/span&gt;&lt;/i&gt; &lt;a href=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1626794419040&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;화살표 함수 - JavaScript | MDN&quot; data-og-description=&quot;화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 &amp;nbsp;자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 &amp;nbsp;함수 표현은 메&quot; data-og-host=&quot;developer.mozilla.org&quot; data-og-source-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; data-og-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/cOsyfl/hyKWThrLm5/xuKQgxFOqb8f6UEAv3tB2K/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080&quot;&gt;&lt;a href=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/cOsyfl/hyKWThrLm5/xuKQgxFOqb8f6UEAv3tB2K/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;화살표 함수 - JavaScript | MDN&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 &amp;nbsp;자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 &amp;nbsp;함수 표현은 메&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;developer.mozilla.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web/JS</category>
      <category>javascript기초</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/80</guid>
      <comments>https://detergentyoon.tistory.com/80#entry80comment</comments>
      <pubDate>Wed, 21 Jul 2021 00:27:04 +0900</pubDate>
    </item>
    <item>
      <title>[JS] 화살표 함수 Arrow function</title>
      <link>https://detergentyoon.tistory.com/79</link>
      <description>&lt;pre id=&quot;code_1626774412302&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;// 화살표 함수
// () =&amp;gt; {} vs function () {}

const double = function (x) {
  return x * 2
}

const doubleArrow = (x) =&amp;gt; {
  return x * 2
}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;double 과 doubleArrow 변수 둘 다 같은 결과를 도출하지만 &lt;span style=&quot;letter-spacing: 0px;&quot;&gt;화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고, 화살표 함수는 항상 익명이라는 점에 차이가 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;&amp;nbsp;이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1626793134098&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;const doubleArrow = x =&amp;gt; x * 2&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;&amp;nbsp;화살표 함수는 return을 지정해주지 않아도 실행문을 출력할 수 있으며, 매개변수가 하나밖에 없을 때는 위 코드처럼 () 도 생략이 가능합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1626793350603&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;const doubleArrow = x =&amp;gt; {x * 2}
// {} 로 감싸면 블럭으로 인식하기 때문에 반환되지 않음.

const doubleArrow = x =&amp;gt; {
  return x * 2
} // return 을 추가하여 반환 가능. 본래의 코드로 돌아온 것을 확인할 수 있음&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;만약 {}를 포함하는 경우에는 위 코드의 두번 째 변수 선언처럼 return 을 추가해주어야만 데이터 반환이 가능합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1626793520738&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;// 화살표 함수 내에서 객체 데이터를 반환할 때는 () 로 감싸주어야함  
const doubleArrow = x =&amp;gt; ({ name: 'mildMan' })&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;&amp;nbsp;하필이면 객체 데이터를 지정할 때 {} 를 사용하기 때문에 화살표 함수는 객체 데이터 반환이 불가능하다고 생각할 수도 있지만 {} 밖을 () 로 감싸주어 객체 데이터의 반환도 가능합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;&lt;i&gt;참고문헌&lt;/i&gt;&lt;/span&gt; &lt;a href=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1626793852649&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;화살표 함수 - JavaScript | MDN&quot; data-og-description=&quot;화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 &amp;nbsp;자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 &amp;nbsp;함수 표현은 메&quot; data-og-host=&quot;developer.mozilla.org&quot; data-og-source-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; data-og-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/cOsyfl/hyKWThrLm5/xuKQgxFOqb8f6UEAv3tB2K/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080&quot;&gt;&lt;a href=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/cOsyfl/hyKWThrLm5/xuKQgxFOqb8f6UEAv3tB2K/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;화살표 함수 - JavaScript | MDN&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 &amp;nbsp;자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 &amp;nbsp;함수 표현은 메&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;developer.mozilla.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web/JS</category>
      <category>javascript기초</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/79</guid>
      <comments>https://detergentyoon.tistory.com/79#entry79comment</comments>
      <pubDate>Wed, 21 Jul 2021 00:09:33 +0900</pubDate>
    </item>
    <item>
      <title>export 문으로 내보내기 / import 문으로 가져오기</title>
      <link>https://detergentyoon.tistory.com/78</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;다시말해 .js 파일을 만들어 &lt;b&gt;&lt;span style=&quot;color: #f3c000;&quot;&gt;&lt;u&gt;export&amp;nbsp;default&lt;/u&gt;&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;span style=&quot;color: #c678dd;&quot;&gt;function&lt;/span&gt;&lt;span style=&quot;color: #abb2bf;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #61afef;&quot;&gt;functionName&lt;/span&gt;&lt;span style=&quot;color: #abb2bf;&quot;&gt;() {}&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;선언하면 내보낸(export) 함수의 기능을 다른 .js 파일에서 &lt;u&gt;&lt;span style=&quot;color: #f3c000;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #f3c000;&quot;&gt;import&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/u&gt;&lt;span style=&quot;color: #e06c75;&quot;&gt;&amp;nbsp;funcionName&lt;/span&gt;&lt;span style=&quot;color: #abb2bf;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;color: #c678dd;&quot;&gt;from&lt;/span&gt;&lt;span style=&quot;color: #98c379;&quot;&gt;'./fileName'&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;를 통해 가져다 사용할 수 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;blockquote data-ke-style=&quot;style2&quot;&gt;&amp;nbsp;&lt;b&gt;&lt;span style=&quot;color: #f3c000;&quot;&gt;이 기능을 왜 사용하나요?&lt;/span&gt;&lt;/b&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;어떠한 함수를 여러 개의 .js 파일에서 사용해야 하는 경우, 일일이 함수 선언을 복사 붙여넣기 하는 것보다 더 효율적이기 때문입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;i&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;참고문헌&lt;/span&gt;&lt;/i&gt; &lt;a href=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1626758423965&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;export - JavaScript | MDN&quot; data-og-description=&quot;export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.&quot; data-og-host=&quot;developer.mozilla.org&quot; data-og-source-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export&quot; data-og-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/s84da/hyKWTVIoqC/vVlezbW4j4JPJKKtddO7ek/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080&quot;&gt;&lt;a href=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/s84da/hyKWTVIoqC/vVlezbW4j4JPJKKtddO7ek/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;export - JavaScript | MDN&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;developer.mozilla.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web/JS</category>
      <category>javascript</category>
      <author>온화한사람</author>
      <guid isPermaLink="true">https://detergentyoon.tistory.com/78</guid>
      <comments>https://detergentyoon.tistory.com/78#entry78comment</comments>
      <pubDate>Tue, 20 Jul 2021 14:31:23 +0900</pubDate>
    </item>
  </channel>
</rss>