[Retro] New Beginning 2021: ํ‡ด์‚ฌ

May 02, 2021

๋‚˜๋Š” ์ด์ œ 3๋…„์ฐจ๊ฐ€ ๋„˜๋Š” ์›น ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฒˆ ๋‹ฌ์— ํ‡ด์‚ฌ๋ฅผ ํ•œ๋‹ค. ์ด์ง์ด ์•„๋‹ˆ๊ณ  ํ‡ด์‚ฌ์ด๋‹ค. ์ด์งํ•  ์ง์žฅ์„ ๊ตฌํ•˜๊ณ  ํ‡ด์‚ฌ๋ฅผ ํ•˜๊ณ  ์‹ถ์€ ๋งˆ์Œ์œผ๋กœ ๋ช‡ ๋‹ฌ๊ฐ„ ์ด์ง ์ค€๋น„๋ฅผ ํ–ˆ์ง€๋งŒ, ๋‚˜์˜ ๋‡Œ๋Š” ์ด๋ฏธ ๋ฐฉํ–ฅ์„ ์ •ํ•œ ๊ฒƒ ๋งˆ๋ƒฅ ์„œ๋น„์Šค ๊ฐœ๋ฐœ ๊ด€๋ จ ์ง์ข…์—๋Š” ์˜โ€ฆ

[p5js] Studying Shader with Creative Coding (2)

December 19, 2020

Shader Study with P5 Javascript Library (2): Important Shader Concepts Colors and Position Colors RGB values range: 0 ~ 1 For example, Blueโ€ฆ

[p5js] Studying Shader with Creative Coding (1)

December 18, 2020

Shader Study with ITPers Shader x P5 JS (1) Why Start Studying Shader? I've been wanting to study shader since I saw a computer science couโ€ฆ

[React] CSS Styled Components: fixing first-child last-child problem

December 13, 2020

Problem When your last-child, first-child css condition doesn't work, we need to check html tags inside React code! For example, my originaโ€ฆ

[Review] 3 Months of Translating Storybook OpenSource

November 29, 2020

Few weeks ago, I finally finished my first-ever translation contribution on Storybook community (which is run by chromatic). From August 20โ€ฆ

[Review] 2020 ๊ธ€๋˜ 5๊ธฐ ๋‹ค์ง๊ธ€

November 15, 2020

๊ธ€๋˜ 4๊ธฐ์— ์ด์–ด 5๊ธฐ๋ฅผ ์‹ ์ฒญํ–ˆ๋‹ค. 4๊ธฐ๊ฐ€ ๋๋‚˜๊ณ  ๋‚˜์„œ๋Š” ์ด ์›น์‚ฌ์ดํŠธ๋ฅผ ์ „๋ฉด์ ์œผ๋กœ ๊ฐœํŽธํ•˜๊ณ  ์žฌ์ •๋น„ํ–ˆ๋‹ค. ์ด์ œ ๋‹ค์‹œ ์ปจํ…์ธ  ์ƒ์‚ฐ์„ ์œ„ํ•œ ์—๋„ˆ์ง€๋ฅผ ์–ป๊ธฐ ์œ„ํ•ด 5๊ธฐ๋„ ์‹ ์ฒญํ–ˆ๋‹ค. ๊ธ€๋˜๋Š” '๊ธ€์“ฐ๋Š” ๋˜๋ผ์ด'๋ผ๋Š” ๋ชจ์ž„์ด๊ณ , ํ˜„์žฌ๋Š” ๊ฐœ๋ฐœ์ž๋“ค ์œ„์ฃผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋‹คโ€ฆ

[Review] ๊ธ€๋˜ ๋ฐ ์ƒ๋ฐ˜๊ธฐ ํšŒ๊ณ 

August 16, 2020

์ฒ˜์Œ ํ•ด๋ณด๋Š” ๊ธ€๋˜ - ๊ธ€์“ฐ๋Š” ๋˜๋ผ์ด 4๊ธฐ ๋ชจ์ž„ ์„ฑ์œค๋‹˜์„ ๋ชจ๋‘์—ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์šฐ์—ฐํžˆ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ์˜จ๋ผ์ธ์œผ๋กœ ๊ธ€๋˜ ๋ชจ์ž„ ํ•˜์‹œ๋Š” ๊ฒƒ์„ ์ข…์ข… ๋ณด๋‹ค๊ฐ€ ์ฐธ์—ฌํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด๋ฏธ ๋ธŒ๋Ÿฐ์น˜์— ๊ธ€์„ ์“ฐ๊ณ , ์›Œ๋“œํ”„๋ ˆ์Šค ์‚ฌ์ดํŠธ๋„ ์žˆ์—ˆ๋˜ ์ƒํ™ฉ์ด์—ˆ๊ธฐ์—, ์ˆ˜์›”ํ•˜๊ฒŒ ๊ธ€์“ฐ๊ธฐ ํ™œโ€ฆ

[Review] ๊ธ€๋˜ ๋ฐ ์ƒ๋ฐ˜๊ธฐ ํšŒ๊ณ 

August 16, 2020

์ฒ˜์Œ ํ•ด๋ณด๋Š” ๊ธ€๋˜ - ๊ธ€์“ฐ๋Š” ๋˜๋ผ์ด 4๊ธฐ ๋ชจ์ž„ ์„ฑ์œค๋‹˜์„ ๋ชจ๋‘์—ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์šฐ์—ฐํžˆ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ , ์˜จ๋ผ์ธ์œผ๋กœ ๊ธ€๋˜ ๋ชจ์ž„ ํ•˜์‹œ๋Š” ๊ฒƒ์„ ์ข…์ข… ๋ณด๋‹ค๊ฐ€ ์ฐธ์—ฌํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ด๋ฏธ ๋ธŒ๋Ÿฐ์น˜์— ๊ธ€์„ ์“ฐ๊ณ , ์›Œ๋“œํ”„๋ ˆ์Šค ์‚ฌ์ดํŠธ๋„ ์žˆ์—ˆ๋˜ ์ƒํ™ฉ์ด์—ˆ๊ธฐ์—, ์ˆ˜์›”ํ•˜๊ฒŒ ๊ธ€์“ฐ๊ธฐ ํ™œโ€ฆ

[Review] 2020 ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์•„ํŠธxํ…Œํฌ ์ „์‹œ ํ›„๊ธฐ(2)

July 18, 2020

์„ค๋ช…๊ณผ ์—ฌ๋ฐฑ ์‚ฌ์ด ์ด๋ฒˆ ์ „์‹œ๋ฅผ ์ œ์™ธํ•˜๊ณ  ์—ฌํƒœ๊นŒ์ง€ 3๋ฒˆ ์ •๋„์˜ ์ „์‹œ ๋ฐ ์‡ผ์ผ€์ด์Šค๋ฅผ ํ–ˆ์—ˆ๋‹ค. ๊ทธ ๋•Œ๋งˆ๋‹ค ๋‚˜๋Š” ๊ด€๊ฐ๋“ค์—๊ฒŒ ๋‚ด ์ž‘์—…์„ ์—ด์‹ฌํžˆ ์„ค๋ช…ํ–ˆ๋‹ค. ์ด ์„ผ์„œ์™€ ๊ธฐ๊ณ„๋“ค์„ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•ด์•ผ ํ•˜๋Š”์ง€ - ํ…Œํฌ๋‹ˆ์ปฌํ•œ ๋””๋ ‰์…˜๋ถ€ํ„ฐ ์ด ์•ˆ์— ๋‹ด๊ธด ์˜๋ฏธ, ๋‚ด๊ฐ€ ์˜๋„ํ•œ ๋ฐ”โ€ฆ

[Review] 2020 ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์•„ํŠธ๋žฉ ์ „์‹œ ํ›„๊ธฐ(1)

July 14, 2020

์„ฑ์ˆ˜๋™์—์„œ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์•„ํŠธ๋žฉ ๊ทธ๋ฃน ์ „์‹œ๋ฅผ ์—ด์—ˆ๋‹ค. ์ž‘๋…„์— ์ด์–ด ๋‘๋ฒˆ์งธ ์ „์‹œ์˜€๋Š”๋ฐ ์—ฌ๋Ÿฌ๋ชจ๋กœ ๋Š๋‚€ ์ ์ด ๋งŽ์•„์„œ ๋ธ”๋กœ๊ทธ๋กœ ํ›„๊ธฐ๋ฅผ ๋‚จ๊ฒจ๋ณธ๋‹ค. ๋ฏธ๋””์–ด ์•„ํŠธ, ์•„ํŠธ์•คํ…Œํฌ๋†€๋กœ์ง€, ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ๋ฏธ๋””์–ด, ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์•„ํŠธ. ๋‹ค์–‘ํ•œ ๋ช…์นญ์œผ๋กœ ๋ถˆ๋ฆฌ๋Š” ๋ถ„์•ผ์ธ ๋งŒํผ ์ •ํ˜•ํ™”๋œ โ€ฆ

[React] React.useMemo ๊ฐ€๋ณ๊ฒŒ ์‚ดํŽด๋ณด๊ธฐ

July 05, 2020

React.useMemo ์ ์šฉ ๊ณ„๊ธฐ ํ•œ ํŽ˜์ด์ง€์—์„œ API ํ˜ธ์ถœ์„ 4-5๊ฐœ ์ •๋„ ํ•˜๋Š”๋ฐ, api ํ•œ ๊ฐœ์”ฉ fetch ๋  ๋•Œ๋งˆ๋‹ค ๋ชจ๋“  element ๊ฐ€ ๋‹ค์‹œ ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒƒ์„ ๋ง‰๊ธฐ ์œ„ํ•ด ํšจ์œจ์ ์ธ ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•ด์กŒ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ํ•ด๋‹น ํŽ˜์ด์ง€์— ์ƒˆ๋กœ์šดโ€ฆ

[Review] How to Make Best Out of Your Stress

June 07, 2020

5์›” ์ค‘์ˆœ์— ๊ธ€๋˜ 4๊ธฐ ํ”„๋ก ํŠธ ์ฒซ ๋ชจ์ž„์„ ๊ฐ€์กŒ๋‹ค. ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ ์ด์ง, ๋ฉด์ ‘, ํŠน์ดํ–ˆ๋˜ ์งˆ๋ฌธ๋“ค์„ ์„œ๋กœ ๋‚˜๋ˆด๋‹ค. ๊ทธ ์ค‘ ๊ธฐ์–ต์— ๋‚จ๋Š” ๊ฒŒ ์ธ์„ฑ ๋ฉด์ ‘์—์„œ ๋‚˜์˜จ '์ŠคํŠธ๋ ˆ์Šค ๊ด€๋ฆฌ๋ฅผ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€'๋ผ๋Š” ์งˆ๋ฌธ์ด์—ˆ๋‹ค. ์ŠคํŠธ๋ ˆ์Šค๋ผ๋Š” ๊ฒŒ ์—†์„ ์ˆ˜๊ฐ€ ์—†๋Š” ์„ธ์ƒ์ด๊ณ , ๊ทธโ€ฆ

[p5js] Leap Motion Getting Started

May 30, 2020

1. Set up ๋ธŒ๋ผ์šฐ์ € html ํŒŒ์ผ์— leap motion API & leapJS plugins ์ถ”๊ฐ€ํ•˜๊ธฐ LeapJS-plugins์œผ๋กœ LeapJS API ๋ฅผ ์ข€ ๋” ์†์‰ฝ๊ฒŒ ์ด์šฉ๊ฐ€๋Šฅํ•˜๋‹ค. LeapJS-plugins ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์˜ˆ์‹œ๋“ค์€ โ€ฆ

[Review] Dear Girls by Ali Wong

May 24, 2020

This book made me reminisce the days of my NYC life, including crazy, diverse, and funny people I met in the States. As I got used to Ameโ€ฆ

[p5js] Using LeapMotion for Creative Coding

May 24, 2020

Leap Motion x P5.JS API ํŒŒํ—ค์น˜๊ธฐ ์ „์‹œ์—์„œ ์•„๋‘์ด๋…ธ๋กœ ์ธํ„ฐ๋ ‰์…˜์„ ๊ตฌํ˜„ํ•˜๋ ค๋‹ค๊ฐ€ ์–ธํƒํŠธ ํ๋ฆ„์— ๋งž๊ฒŒ ๋ฆฝ๋ชจ์…˜์œผ๋กœ ๋Œ€์ฒดํ•˜๋ ค๊ณ  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ API ๋ฅผ ํ…Œ์ŠคํŒ…ํ•˜๊ณ  ์žˆ๋‹ค. Leap Motion ์ด๋ž€? Leap Motion์€ ์†๋ฐ”๋‹ฅ๋งŒํ•œ ์นด๋ฉ”๋ผ ์„ผโ€ฆ

[Review] 2020 May, Mental Health Awareness Month

May 23, 2020

I don't remember when exactly, but it was probably after listening to Ariana Grande, Billie Eilish, and Maggie Rogers. In high school, I waโ€ฆ

[Review] Are you an OverAchiever?

May 17, 2020

I had a hard time patiently processing my thoughts and feelings for past two months. Many aspects of my life were being affected in not a gโ€ฆ

[p5js] Meditation & Lighting ์ „์‹œ ๊ตฌ์ƒ ์ผ์ง€(1)

May 10, 2020

6์›”์— ์žˆ์„ ์ „์‹œ๋ฅผ ์œ„ํ•ด์„œ ์ž‘์—…์„ ๊ตฌ์ƒํ•˜๊ณ  ์žˆ๋‹ค. ์ตœ๊ทผ์— ์ฝ”๋ผ๋ฆฌ๋ผ๋Š” ๋ช…์ƒ ์•ฑ์„ ๋‹ค์šด ๋ฐ›์•„์„œ 2์ฃผ๋™์•ˆ ์‚ฌ์šฉํ•ด๋ณด์•˜๋Š”๋ฐ, ์‹ฌ๋ฆฌ ์ƒ๋‹ด ์น˜๋ฃŒ๋ฒ•๊ณผ๋„ ์œ ์‚ฌํ•œ ๋ถ€๋ถ„๋“ค์ด ์žˆ์–ด์„œ ๊ทธ๋Ÿฐ์ง€ ์ŠคํŠธ๋ ˆ์Šค๋ฅผ ์™„ํ™”์‹œํ‚ค๋Š” ๋ฐ์— ํšจ๊ณผ์ ์ด์—ˆ๋‹ค. ๊ทธ ๊ฒฝํ—˜์„ ๋ฐ”ํƒ•์œผ๋กœ mental heaโ€ฆ

[p5js] Nature of Code - Vectors (feat. Coding Train)

April 25, 2020

1.1 Bouncing ball with no vectors ๋ฒกํ„ฐ ํด๋ž˜์Šค ์ด์šฉ ์—†์ด ์œ„์น˜, ์†๋ ฅ ์ด๋™ ๊ณ„์‚ฐ. physics variables location speed acceleration target location wind friction 1.โ€ฆ

[p5js] Creative Coding Inspired by Bauhaus, Whanki-Kim

April 15, 2020

์ž‘๋…„์ด ๋ฐ”์šฐํ•˜์šฐ์Šค 100์ฃผ๋…„์ด์—ˆ๋‹ค. ๋งˆ์นจ ๋…์ผ ์—ฌํ–‰์„ ๊ฐ”์–ด์„œ ๋ฐ”์šฐํ•˜์šฐ์Šค ๊ธฐ๋… ์ „์‹œ๋“ค์„ ๋„ˆ๋ฌด ์žฌ๋ฏธ์žˆ๊ฒŒ ๋ดค๋‹ค. (๋…์ผ์—์„œ ์šฐ์—ฐํžˆ ๋งˆ์ฃผ์น˜๊ธฐ๋„ ํ–ˆ๋˜) ์ธ์Šคํƒ€ ์นœ๊ตฌ์ธ ์ž‘๊ฐ€๋‹˜์ด ๋ฐ”์šฐํ•˜์šฐ์Šค ๊ด€๋ จ ํฌ์ŠคํŒ…์„ ํ•˜์…จ๊ธธ๋ž˜ ๊ฐ‘์ž๊ธฐ ์ƒ๊ฐ๋‚˜์„œ ํฌ๋ฆฌ์—์ดํ‹ฐ๋ธŒ ์ฝ”๋”ฉ ์ž‘์—…์„ ํ•ด๋ณด์•˜๋‹คโ€ฆ

[p5js] Make Logos with Creative Coding | ์ฝ”๋”ฉ์œผ๋กœ ๋กœ๊ณ  ๋งŒ๋“ค๊ธฐ

April 05, 2020

๋ ˆ์Šคํ† ๋ž‘ ๋ฆฌ๋ทฐ ์ฒญ๋‹ด๋™ ๊ณจ๋ชฉ๊ธธ์— ์กฐ์šฉํžˆ ์œ„์น˜ํ•œ ๋ ˆ์Šคํ† ๋ž‘ ์˜จ์„ ์ฐพ์•„๊ฐ”๋‹ค. ์ดˆ๋“ฑํ•™๊ต ์‹œ์ ˆ ์นœ๊ตฌ์˜ ์—ฐ๋ง ์ƒ์ผ์„ ๋’ค๋Šฆ๊ฒŒ ๊ธฐ๋…ํ•˜๊ธฐ ์œ„ํ•ด ํŠน๋ณ„ํžˆ ์›ํ…Œ์ด๋ธ” ํŒŒ์ธ๋‹ค์ด๋‹ ์‹๋‹น์„ ์˜ˆ์•ฝํ–ˆ๋‹ค. 2020๋…„์—๋„ ๋‹น๋‹นํ•˜๊ฒŒ ๋ฏธ์Š๋žญ ๊ฐ€์ด๋“œ์— ์„ ์ •๋œ ๋ ˆ์Šคํ† ๋ž‘ ์˜จ์€ '๋”ฐ๋œปํ•  ๆธฉ' โ€ฆ

[p5js] SketchRNN with Javascript (feat. ml5js)

March 31, 2020

0. template ์ฝ”๋“œ p5 ์˜จ๋ผ์ธ ์—๋””ํ„ฐ ์™„์„ฑ ์ฝ”๋“œ 1. index.html ์— src ์ถ”๊ฐ€ํ•˜๊ธฐ Your index.html 2. QuickStart ๋ชจ๋ธ์„ preloadํ•˜๊ธฐ ๋•Œ๋ฌธ์— callback ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” ํ•„์š” ์—†๋‹ค. models ๋ณ€์ˆ˜ ๋Œ€์‹ โ€ฆ

[CSS] Studying CSS Flex with flexbox froggy | CSS ํ”Œ๋ ‰์Šค

March 11, 2020

Flexbox Froggy Game ์œผ๋กœ ๊ณต๋ถ€ํ•˜๋Š” flexbox ๊ทธ๋ƒฅ ๋ฉ‹๋ชจ๋ฅด๊ณ  ์“ฐ๋˜ flex ๋ฅผ ์‹ค์ œ๋กœ ์•ฑ layout์— ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ๊ณต๋ถ€ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์„ ์ž„์ด ์ถ”์ฒœํ•œ ๊ฒŒ์ž„ ๋ฐฉ์‹์˜ ํŠœํ† ๋ฆฌ์–ผ ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด์„œ ์—ฐ์Šตํ•ด๋ณด์•˜๋‹ค. ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜๋ฉด, ๋งค์šฐ ์žฌโ€ฆ

[Review] 2020 ๊ธ€๋˜๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ธ”๋กœ๊ทธ

February 29, 2020

2020๋…„์ด ๋ฒŒ์จ 2๋‹ฌ์ด๋‚˜ ์ง€๋‚ฌ๋‚˜ ํ•˜๋Š” ํ•œ์ˆจ๋ณด๋‹ค๋Š” ๋‚˜๋ฆ„ 60์ผ์„ ์ •์‹ ์—†์ด ๋ฐ”์˜๊ฒŒ ๋ณด๋ƒˆ๋‹ค๊ณ  ํ† ๋‹ฅ์—ฌ๋ณธ๋‹ค. ๋‚˜์—๊ฒŒ ๋งž๋Š” ๋ธ”๋กœ๊ทธ ์ฐพ๊ธฐ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ธ”๋กœ๊ทธ ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•ด ๋ณด์•˜๋‹ค. ์›Œ๋“œํ”„๋ ˆ์Šค ๋ธ”๋กœ๊ทธ๋ฅผ ์ฒ˜์Œ ์‹œ์ž‘ํ•œ 2015๋…„๋ถ€ํ„ฐ sosunnyproject.worโ€ฆ