36 |47 | 48 | 문제를 해결하는 과정에서, 혹은 주위 환경을 통해 직간접적으로 접하게 되는 상황들에서 특정 지식이 필요하다면 그때 배워도 늦지 않다. 무엇이 필요할지 모르니 모든 것을 창고에 넣어 두는 지식보다는 내가 맞닥뜨린 상황을 해결하면서 얻게 되는 지식이 강렬하게 바로 '내 것'이 될 것이다. 49 | 50 | 가령, 성능 개선을 하기 위해 Waterfall차트를 살펴보고 Response Header를 살펴보면서 만날 수 있는 단어들에 대해 이해하고 싶어 네트워크 지식을 찾아볼 때 배우는 것도 늦지 않으며, 그 순간에 배우는 지식이 온전히 내 것이 될 확률이 높다고 생각한다. 51 | 52 | ### 필요한 지식은 분야마다 다르다 53 | 54 | 개발에는 '개발'이라는 한 단어로 묶기에는 많은 분야가 있다. 55 | 56 | 알고리즘을 예로 들자면, 내가 목표하는 분야나 서비스가 알고리즘을 바로 활용하는 분야라면 이 지식은 바로 내 것이 되어야 하지만, 그렇지 않다면 다른 지식을 먼저 공부해도 괜찮다고 생각한다. 분야마다 **시작할 때 알고리즘 지식 필요 여부** 는 다를 수 있다는 뜻이다. 57 | 58 | 취업을 목표로 할 때에는 조금 다른 이야기가 되겠지만(회사마다 알고리즘 테스트를 보는 경우도 있으니) 개발 공부를 시작할 때 반드시 알고리즘을 알아야만 시작할 수 있다고 생각하지 않는다. 59 | 60 | > 물론 알고리즘을 풀다 보면 '코드 작성'과는 조금 친숙해질 수도 있겠다. 하지만 알고리즘 문제보다는 다양한 사이드 프로젝트를 해보면서 얻을 수 있는 '친숙함'이 더 크다고 생각한다. 61 | 62 | 알고리즘을 예시로 들었지만, 모든 지식을 공부한 다음 분야를 정하는 것이 아니라 내가 목표하는 방향에서 필요한 로드맵을 스스로 설계하는 과정이 필요하다고 생각한다. 63 | 64 | ## 오해 2. 전공자와 비전공자는 이해 속도에 차이가 있을 것이다 65 | 66 | 여러 기술 강의에서 "비전공자를 대상으로"하는 이유에 이런 생각이 있지 않을까 싶다. 아무래도 비전공자가 접하기 어려운 용어인 `변수`나 `함수`의 개념에 대해 이해하기 어려워할 것이며, 모든 흐름을 '천천히' 설명해주어야 한다고 생각하는 것 같다. 67 | 68 | 결론적으로 위 말은 틀린 말도, 맞는 말도 아니다. 무엇을 이해하는 속도는 사람마다 다르다. 전공자나 비전공자 모두 개발에서 필요한 개념을 처음 접하게 되는 순간이 있고, 이를 이해하는 속도는 **사람마다 다르다.** 69 | 70 | 전공자라고 해서 누구나 특정 용에 대해 어려운 용어를 사용하며 설명하는 것을 바로 이해하는 것은 아니며, 비전공자라고 해서 한없이 풀어서 설명해야만 이해할 수 있는것이 아니다. 개개인이 가지고 있는 **경험이나 성향에 따라 다를 수 있는 부분이 전공/비전공 프레임으로 나뉘는 것이 많이 아쉽다.** 71 | 72 | ## 오해 3. 비전공자 출신 개발자는 대단하다(?) 73 | 74 | 유투브나 블로그 등에서 "비전공자 **출신**이 어떻게 개발자가 되었는지"에 관해 설명하는 컨텐츠를 많이 찾아볼 수 있다. 75 | 76 |  77 | 78 | 아무렇지 않게 사용하는 '출신'이라는 단어의 원래 뜻은 다소 폭력적이다. '비전공자'가 '신분'이 될 수 있을까? 개발과 아무 관련 없는 분야에서 경험을 쌓다가 개발자 커리어를 시작하는 단계에서의 막막함이나 경험을 담는 것이 목적일 수 있지만, 아무렇지 않게 사용하는 이 단어가 차별 프레임에 일조하고 있는 것은 아닌지 돌아볼 필요가 있다. 79 | 80 | 비전공에서 개발자가 된 분들의 노력을 비하하거나 대단하지 않다는 것이 아니다. 그 노력들은 매우 대단하고 가치있는 일들이지만 새롭게 개발자를 시작하는 분들이 이 단어로 막연한 두려움을 가질 필요는 없다는 뜻이다. 81 | 82 | **비전공자이기 때문에 못 하는 일과 전공자이기 때문에 처음부터 잘하는 일은 없다.** 83 | 84 | ## 마무리 85 | 86 | 이 글은 모든사람의 상황을 대변하지 못하며, 그저 주변에서 볼 수 있었던 몇 가지 상황에 관한 짧은 단상이고 **두려움** 에 대한 토막글이다. 시작할 때 가질 수 있는 막연한 두려움이 무력감이 된다면 발목에 모래주머니를 차고 시작하는 것과 다르지 않을 것이다. 87 | 88 | 다시 한번 이 글의 인트로를 첨부하며 글을 마친다. 89 | 90 | 이 글은 개발을 시작할 때 '비전공자여서' 가질 수 있을 막연한 두려움이나 오해에 관한 개인적 생각을 적은 글이다. 본문에서 언급하게 될 'CS지식'은 모든 개발자 커리어에서 가져가야 할 부분이다. 이 글에서 다루고자 하는 부분은 CS 지식이 중요하지 않다는 것이 아니라, 이 지식을 배우는 시점과 접근 방법에 대한 부분이다. 91 | -------------------------------------------------------------------------------- /content/blog/essay/retro2020.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploy 2020 3 | date: 2020-12-30 17:12:76 4 | category: essay 5 | thumbnail: './images/2020_retro/thumbnail.png' 6 | --- 7 | 8 |  9 | 10 | 어김없이 회고 시즌이 돌아왔다. 작년에도 '시간이 참 빠르게 지나갔구나'라고 생각한 것 같은데, 올해가 더 그런 것 같다. 11 | 12 | 되돌아보고, 기록하고, 언젠가 이맘때의 나를 다시 보기 위해 회고 글을 작성한다. 13 | 14 | 나의 2020년은 어땠을까? 15 | 16 | - 아는 것보다 모르는 것이 많아졌다. 17 | - [Banksalad Product Language](https://blog.banksalad.com/tech/banksalad-product-language-ios/)(이하 BPL, 설명: Banksalad에서 사용하는 Design System)을 운영하며 많은 경험을 했고, 고민도 생겼다. 18 | - 개발자로서 내 역할에 대한 고민이 많았다. 19 | - FEConf 운영진으로 컨퍼런스를 개최했다. 20 | 21 | 2018년 12월, 처음 커리어를 시작해 이제 3년 차 개발자다. 어떤 사람의 경험을 나타내는 데에 있어 '연차'라는 지표는 극히 일부분만을 표현할 수 있지만, 그럼에도 매년 쌓여 가는 연차가 두렵다. 숫자는 눈에 보이지만 성장 속도는 눈에 보이지 않으니 내가 '3년 차 개발자'에 맞는 실력을 갖추고 있는지에 대한 두려움이 생기는 것 같다. 22 | 23 | 학생 때를 되돌아보면 3년차 개발자가 되었을 시점에는 막연하게 '무엇이든 빠르게 만들 수 있는 슈퍼 개발자'가 될 것 같다고 생각한 것 같다. 이제는 이런 추상적인 목표 말고, 매년 어떤 개발자가 되고 싶은지 다시 생각 해보려 한다. 24 | 25 | ## 모르는 것이 많아졌다. 26 | 27 | 작년 이맘때를 생각해보면, 이제 막 개발자로 시작해서 다양한 경험을 하며 경험이 늘어난다는 것에 뿌듯했던 것 같다. 내 앞의 모르는 것들을 배워 나가고 있었지만, 그때는 당장 마주해야 하는 문제들 위주로 격파해나가고 있었기 때문에 '내가 모르는 것'이 무엇인지 잘 몰랐다. 28 | 29 | 과거에 '이 정도면 괜찮지' 했던 것들이 다르게 보이기 시작했고, 과거에 생각했던 기준들은 많은 무지에서 세워졌음을 깨달았다. 30 | 31 | '그 기준'을 세울 때보다 많은 것들을 공부했고 경험했으니 어찌 보면 당연한 일이다. 다만, 그때는 기준이 바뀔 수 있다는 것을 경험해본 적이 없어서 내 의견에 너무 자신만만했던 것 같아 조금 부끄럽다. 32 | 33 | 내년에는 이런 키워드들에 대해 더 공부해보고 싶다. 34 | 35 | - 좋은 컴포넌트와 설계 36 | - Form Control 37 | - 접근성 38 | - Animation 39 | - Infra Structure 40 | - GraphQL(w. Relay) 41 | 42 | ## BPL 43 | 44 | Banksalad Product Language(이하 BPL)을 운영하고 있다. 올 해 진행했던 프로젝트 중 가장 많이 배웠고, 가장 많이 후회하며 가장 사랑하는 프로젝트이다. 45 | 46 | 가장 많이 후회한다고 적은 이유는, 좀 더 잘하고 싶어서다. 팀원들과 여러 좌충우돌을 겪으며 디자인 시스템을 만들어나가고 있는데, 처음에 했던 아쉬운 결정으로 아직도 예전 규칙에 대한 마이그레이션을 진행 중이다. 처음부터 잘하는 것은 힘들었겠지만, 돌이켜 생각해보면 많은 아쉬움이 남는다. 47 | 48 | **'좋지 않은 결정보다 나쁜 것은 느린 결정이고 느린 결정보다 나쁜 것은 번복되는 결정이다'** 49 | 50 | 세 가지 결정을 모두 내렸다. 구체적인 내용은 기회가 된다면 별도의 글에서 다룰 예정이라 간단하게만 말하자면, '규모가 커질 때 중요하게 여겨질 것들'에 대해 간과하고 있었던 기간이 길었다. 51 | 52 | 매 순간 좋은 결정을 내리기는 어렵겠지만, 어떤 결정을 내릴 때는 '모두가 사용하는 패키지의 중요성'과 '장기적인 모습'을 생각하며 밀도 높은 고민을 하려고 한다. 이런 고민을 함께해줄 동료들이 있어 다행이고, 감사하다. 53 | 54 | 기술적인 결정들 외에도, 라이브러리 운영에서 세심하게 신경 써야 하는 부분들의 중요성에 대해 몸소 느낄 수 있었다. 내 옆자리 동료, 우리 팀이 이 도구로 행복할까를 고민하는 일은 평소 하던 개발과 다른 차원의 시야를 요구했다. Breaking Release, 하위 호환성, Contributor에게 친절한 환경, DX(Developer Experience, 개발자 경험) 등의 키워드에 대해 처음 고민해 봤다. 55 | 56 | 기술적으로는 패키지 레벨의 컴포넌트가 지켜야 하는 규칙, 전역 컴포넌트 설계, 인터랙션 등을 경험 해보면서 프론트엔드 개발자로서 폭을 약간 넓힐 수 있었던 것 같다. 57 | 58 | ## 내 역할에 대한 고민 59 | 60 | 작년에는 어떻게 하면 내가 더 잘할 수 있을까에 대해 주로 고민했었다. 올해는 많은 시간 내가 무엇을 해야 할까 고민했다. 단순히 task가 아니라, 현재 있는 팀에서 필요한 일이나 역할 중 내가 잘 할 수 있는 부분이 무엇일까에 가깝다. 새로운 일과 더불어 내가 했던 일에 대해서도 다시 생각해보는 시간을 가졌었다. 61 | 62 | **"좋은 것(Good)은 지속하고, 나쁜 것(Bad) 것은 주저 없이 멈추는 것을 제안하는 역할"을 하고** 싶다. 여기서 적은 좋은 것은 지속하고 나쁜 것을 멈추는 것을 나 뿐만 아니라 팀원들과도 공유하고 싶다. 내년에는 팀원들과 티타임이나 상호 피드백을 주고받는 시간을 많이 가져 보고 싶다. 63 | 64 | 올해의 Good, Bad는 코드 리뷰를 예로 들 수 있겠다. 나는 코드 리뷰 과정에서 다른 관점으로 이리저리 생각하느라 리뷰 핑퐁이 늦어지거나 다소 철학적인 리뷰도 했었던 것 같다. 내 나름 리뷰에 많은 공을 들이다 보니 '일정 상 어렵다'라는 얘기가 서운했던 적도 있었고 그 순간들이 모여 부담이 됐다. 65 | 66 | 지금 생각해보니 '부담'은 불필요하게 스스로 만든 괴물이었고, '많은 리뷰'는 성장이었다. 코드리뷰에서 Good과 Bad를 뽑아보자면 이렇게 정리할 수 있을 것 같다. 67 | 68 | - Good: 다른 관점에서의 의견을 말하는 것에 주저하지 않기. 그 의견이 나의 무지 때문이었다면 배울 수 있는 기회가 될 것이고 아니라면 우리 모두에게 한번 더 고민하는 시간이 될것이다. 문제를 다른 시각으로 바라봤을 때 얻을 수 있는 것들이 있다고 생각한다. 69 | - Bad: '내가 공들였기 때문에' 속상해하기. [상자 밖에 있는 사람](http://www.yes24.com/Product/Goods/11520753)의 문장을 빌리자면, 나는 상자 안에 있었던 것 같다. 같은 행동을 하더라도, 상자 안에서('나'를 중심으로 생각하는 것) 하는 것을 멈추려 한다. 70 | 71 | ## FEConf2020 at Home 72 | 73 | 개발 커뮤니티가 실천하는 공유로 많은 지식과 도움을 받았기 때문에 어떤 형태로든 커뮤니티의 발전과 운영에 도움이 되고 싶어 2018년부터 FEConf에 참여하고 있다. 처음엔 자원 봉사자로, 그 다음은 발표자료, 올 해는 운영진으로 참여했다. 74 | 75 | [FEConf2020](https://2020.feconf.kr/)을 준비하면서, 긍정적인 에너지를 가진 분들과 함께 해서 즐거웠고 커뮤니티 운영의 고충도 느끼면서 많은 사람이 개발 생태계를 위해 내가 생각한 것보다 더 많이 노력하고 있다는 생각에 감사한 마음도 들었다. 함께 해주신 운영진분들과 좋은 발표를 준비해주신 연사자분들, 그리고 행사에 관심가져 주신 모든 참가자분들께 진심으로 감사드린다. 76 | 77 | 내년에는 꼭 코로나 종식으로 오프라인 행사가 가능해졌으면 좋겠다. 78 | 79 | ## 2021년의 나는 어떤 사람이 되고 싶은가? 80 | 81 | 옆자리 좋은 동료가 되고 싶다. 내가 지향하는 '좋은 동료'의 모습에는 서비스를 만들어가는 사람으로서 신뢰받으며 더 나은 서비스에 기여하고, 많은 기술적인 지식과 경험으로 동료들의 문제를 직접 해결해 줄 수 있는 모습, 그리고 서로의 고민을 나눌 수 있는 모습들이 포함된다. 82 | 83 | 여러 가지 목표가 있지만, 그중에서 적고 싶은 것은 Infra에 관한 공부이다. 내가 만든 웹 서비스가 배포되어 유저에게 전달되기 까지 필요한 요소들을 이해하고 직접 들여다볼 수 있는 개발자가 되고 싶다. 작년에도 비슷한 다짐을 한 것 같은데, 아직은 대략적인 흐름을 조금 이해했다 정도인 것 같다. 84 | 85 | > 회고 글에 짧게나마 '이해했다'라고 적기까지 [@JungWinter](https://github.com/JungWinter) 님께 많은 도움을 받았습니다. 감사합니다. 86 | 87 | 2021년의 회고를 쓸 때 담길 이야기가 궁금하다. 그 이야기를 만들어 가는 것은 나 자신이니 후회 없는 이야기를 쓰고 싶다. 88 | -------------------------------------------------------------------------------- /content/blog/essay/simple-software.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '[서평] 심플 소프트웨어' 3 | date: 2019-11-19 20:11:22 4 | category: essay 5 | thumbnail: './images/simple_software.jpg' 6 | --- 7 | 8 |  9 | 10 | 길벗 리뷰어로 선정되어 심플 소프트웨어 책을 받아보았다. 책 소개대로, 코드는 단 한줄도 등장하지 않는다. 저자의 경험에서 나오는 많은 생각들과 경험이 녹아있는 책이다. 나의 과거와 현재, 그리고 나의 미래를 상상하며 노트북 없이 밑줄을 그어가며 읽은 책이다. 11 | 좋았던 부분이 너무 많아 어떻게 서평을 써내려갈지 정말 많이 고민했다. 결국 각 Part별로 좋았던 부분을 적고 내 감상평을 추가하기로 했다. 12 | 13 | ## Chapter 2 올바른 자세 14 | '올바른 방법'은 보통 '발생할 수 있는 모든 상황에 대응하는 방법'을 의미한다. 15 | **올바른 방법을 모른다** 16 | 조금 더 공부하면 해결할 수 있을지도 모른다, 하지만 한계를 단정짓고 적당히 '이정도면 괜찮지'의 기준으로 코드를 작성해선 안된다. 나의 타협은 동료에게는 이해할 수 없는 context이고 이는 협업을 타협하는 방향이다. 17 | 18 | **너무 힘들다** 19 | 그럴 수도 있다. 나도 실제로 그런 마음이 들때도 있었다. 하지만 중요한 점은, 그래서 타협해도 되는 코드를 남겨도 된다는 것이 아니라, 일정이 부족하면 확보해야하며 올바르게 진행해야 한다. 나는 슈퍼개발자가 아니므로 올바른 방향에 힘이 드는것은 당연하다. 그래도 타협은 안된다. 20 | 21 | ## Chapter 4. 두 문장으로 요약한 소프트웨어 설계 22 | * 구현에 드는 수고보다 유지보수에 드는 수고를 줄이는 게 중요하다. 23 | * 유지보수에 드는 수고는 시스템의 복잡성에 비례한다. 24 | 25 | ## Chapter 8. 복잡성은 감옥이다. 26 | 실제로 그렇다. 나는 1인개발자가 아니기때문에 당연히 휴가에서는 자유롭고 싶다. 내 옆에 나와 함께하는 팀원이 있고 나도 다른 사람에게는 팀원이다. 내 코드는 내 소유가 아니다. 그러므로 누구든 쉽게 파악하고 수정할 수 있도록 작성되어야 한다. 이 단순한 원칙을 종종 잊는다. 27 | 28 | ## Chapter 12. 둘은 너무 많다 29 | 설계 작업을 진행할 때 따르는 규칙이 있는데, 이를 `둘은 너무 많다.` 라고 부른다. 30 | ``` 31 | 어느 수준까지 포괄해야하는지 부터 알아야 한다. 32 | 특정 목적에 부합하는 포괄적 솔루션을 설계한다. 33 | ``` 34 | 여러종류 포맷을 커버하기 위해 비슷한 로직을 처리해야하는 경우, **그 즉시 아무것도 복사하지 않고** 상위 클래스나 유틸리티 라이브러리를 만들어야 한다는 것이다. 35 | 36 | 이 규칙이 매우 와닿았는데, 결국 웹프론트에서 일어나는 일련의 작업들은 데이터를 view에 맞게 가공해서 보여주는 작업이 많기 때문에 조금씩 겹치는 로직들이 많기 때문이다. 37 | 이럴 경우 공통적으로 처리할 수 있는 util함수를 만드는데에 있어, **이 함수는 어디서든, 범용적으로 설계될 수 있도록** 가능한 많이 생각해야 한다고 생각한다. 38 | 39 | ### 리팩토링 40 | ``` 41 | 하나로 통합해야 하는 구현체가 많을 때는 한번에 통합하는 구현체를 두개로 제한하는 것부터 시작한다. 42 | ``` 43 | 리팩토링의 시작은 거창하지 않아야 한다는데에 동의한다. 리팩토링을 할때, ‘어디서부터 해야하는지, 현상파악 후 고치는데’까지 너무 막막했던 경험이 있다. 작은 단위의 함수부터 ‘작더라도 주기적’으로 진행해보자라는 마음을 갖는것이 **지속가능한 리팩토링**이라는 관점에 매우 동의한다. 44 | 45 | ## Chapter 15. 버그의 원인 46 | ``` 47 | 무슨 용도인지 적혀있지 않은 버튼이 수백만 개 붙어있는 상자는 바르게 사용할 방법이 없다. 48 | ``` 49 | 버그의 원인이 ‘복잡성’에서 온다고 말하고 있다. 사실 이 맥락에는 어느정도 동의하는 부분인데(버그에는 단순 휴먼에러부터, 예측할 수 없는 다른원인까지.. 원인은 많다고 생각한다.) 최소한 복잡성이 낮을수록 디버깅이 쉬울것은 자명하다고 생각한다. 50 | 51 | 나에게 단순한 것은 어쩌면 `내가 짜서`일 가능성도 높고, 동료가 읽는 상황을 염두해둬야 좋은 코드가 된다고 생각한다. 52 | > 개인적인 경험으로는 최근 ‘깔끔해보이는 코드 vs 읽기 쉽지만 조금 중복이 있는코드’에서 고민한적이 있는데, 물론 우선은 내가 코딩실력이 부족해서이겠지만.. 의식적으로 ‘읽기쉽지만 조금 중복이 있는 코드’를 선택해야한다고 생각했다. 53 | > 나는 생각보다 ‘깔끔해보이는 코드’에 잘 매료된다. 54 | 55 | 이 Chapter의 마지막은 쉬워보이지만 잘 간과하는 두 문장이었다. 56 | 1. 코드가 단순할수록 버그가 줄어들 것이다. 57 | 2. 프로그램의 모든 것이 **단순해지도록** 늘 노력하라. 58 | 59 | ## Chapter 18~19. 생산성 60 | 생산성에 관한 이야기였다. 사실, ‘개발자의 생산성 측정’은 누구나 궁금해할법한 화제라고 생각해서 더 눈길이 갔다. 61 | 62 | 책을 읽으면서 팀내에 새로운 기술이나 구조를 도입하는 과정이 그려졌는데, 팀원들을 설득해나가는 과정이 사실적이면서 구체적이어서 좋았다. 63 | ``` 64 | 나의 편이 되어줄 아군 팀원을 모아야 하고, 65 | 그 기반에는 신뢰가 있어야 하며 변화에 '완벽'을 기하지 말것. 66 | ``` 67 | 모두 좋은 동료만 있는 조직일지라도, 계속 흘러가는 조직에서 변화는 점진적이어야 받아들이는데 지치지 않으며 그 방향이 지속가능하다고 생각한다. 68 | > ‘아군’ 이라는 어감이 다소 세게보일 수 있지만, 내 뜻에 동의하는 동료와 의견을 공고히 해나가는 과정이라고 받아들여졌다. 69 | 70 | 그리고, 또 이 Chapter에서 흥미로웠던 문장은 **리팩토링 작업을 통해 개발자 생산성이 어떻게 개선되었는지 보여주는 그래프를 만들겠다고 함부로 약속하지말라.** 였다. 71 | 어려운 부분에 대한 ‘공표’보다는 ‘지속적 제안’으로 팀 문화가 리팩토링에 젖어들도록 해야한다. 72 | > 책에서는 ‘이 기능을 좀더 쉽게 작성하려면 리팩토링을 해야해요.’ 라는 제안ㅇ르 시작으로 가능할때마다 리팩토링을 제안하는것을 권고하고 있다. 73 | 74 | 이후 ‘생산성을 어떻게 측정할까?’대목은 사실 와닿지 않았다. 조직에 대한 개선이나 방향은 좋았지만 생산성 측정의 HowTo를 얻을 수는 없었다. 어려운 분야이기도 하고, 조직마다, 그리고 각 조직의 서비스마다 다를테니 이는 어쩔 수 없는 부분인것 같기도 하다. 75 | 76 | ## Chapter 20. 소프트웨어 회사에서 코드 복잡성을 다루는 방법 77 | 코드에서 감정적으로(이 대목을 많이 강조했다.) 짜증나거나 두려운 부분을 찾고, 그 문제들을 나열한 다음 우선순위에 맞게 헤쳐나가는 것을 말하고 있다. 78 | 79 | 얼마 전 구조변경에 대한 [발표](https://speakerdeck.com/soyoung210/heonjibjulge-saejibdao-riaegteu-peurojegteu-gujojojeong)를 한적이 있어, 더욱 재밌었던것 같다. 80 | 81 | ## Chapter 35. ‘아니요’의 힘 82 | 협업에서 가장 중요한 점은 협업이라고 생각했고, 그 관점에서 ‘soft하게 말하기’에 정말 많은 노력을 기울였던 적이 있다. 지금 생각해보면 과한 수사어구는 맥락을 흐리게 되고, 상대방이 생각했을 때의 ‘애매한 부정’은 가치판단에 어려움을 줄 수 있다. 83 | ‘협업’이 중요하기 때문에, 나는 부정적 의견일지라도 확실하게 전달할 필요가 있다는데에 매우 공감한다. 84 | 85 | 하지만, 이 책에도 나오듯 위의 말이 곧 ‘무례하세요’라는 말은 절대 아니다. 86 | 당연히 나의 동료들은 틀린제안만 하지 않으며 거절해야하는 제안일지라도 좋은부분과 그렇지 않은 부분을 구별해서 피드백을 주어야 한다. 설령 전부 나쁠지라도, 그 문제에 대해 고민을 했을 동료의 시간을 생각하며 그에 대한 감사를 표하는것은 협업에서 당연히 지켜야 할 예의이다. 87 | 88 | ## Chapter 36. 프로그래머가 개떡 같은 이유 89 | 꽤 자극적인 제목이지만 ‘공부를 꾸준히 합시다’에 관한 글이라고 보면 될것 같다. 그 세부적인 내용은 아직 내가 느끼지 못한 다소 교과서적인 이야기처럼 들렸으나, 여기서 기억해두고 싶은 부분은 이 대목이다. 90 | ``` 91 | 누구나에게 항상 더 배울게 있다는 생각, 92 | 지식과 실습이 기술을 익히는 열쇠라는 생각, 93 | 무언가 모른다는걸 알고 그것을 익히기 위해 지식과 실습을 기울여야 한다는 생각 94 | ``` 95 | 96 | ## 총평 97 | 곰곰히 생각해보며 가볍게 읽기 좋은 책이다. 다만 모든 근본적인 것에 관한 책이 그렇듯, 의식적인 학습이 필요하다. 98 | 그냥 지나치기에는 아쉬운 내용들(생산성, 복잡성, ‘아니요’의 힘 등..)이 많다. 99 | 전반적으로 좋은 내용이었지만, 중간에 등장했던 보안 등의 이야기는 ‘왜 여기에 나왔지..’ 100 | 싶은 부분이었다. 101 | -------------------------------------------------------------------------------- /content/blog/etc/images/googling/00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/00.jpg -------------------------------------------------------------------------------- /content/blog/etc/images/googling/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/01.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/02.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/03.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/04.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/05.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/06.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/07.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/08.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/09.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/10.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/11.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/12.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/13.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/14.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/15.png -------------------------------------------------------------------------------- /content/blog/etc/images/googling/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/googling/16.png -------------------------------------------------------------------------------- /content/blog/etc/images/image-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/image-0.png -------------------------------------------------------------------------------- /content/blog/etc/images/image-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/image-1.png -------------------------------------------------------------------------------- /content/blog/etc/images/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/image-2.png -------------------------------------------------------------------------------- /content/blog/etc/images/image-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/image-3.png -------------------------------------------------------------------------------- /content/blog/etc/images/image-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/etc/images/image-4.png -------------------------------------------------------------------------------- /content/blog/etc/official-docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 공식문서에서 시작하기 3 | date: 2019-03-04 00:07:08 4 | category: etc 5 | thumbnail: './images/image-0.png' 6 | --- 7 | 8 |  9 | 10 | **주의 : 공식문서를 읽지 않았다는 Blame 취지가 아닌, 생각보다 공식문서에 많은것이 담겨있다 라는 취지의 글입니다. (이소영이 생각하는 공식문서에 대해 이야기합니다.)** 11 | 12 | ## Why ? 13 | 14 | `공식문서` 를 잘 읽어보자 라는 말은 어쩌면 교과서 적이라고 할 수도 있다. 15 | 16 | > 적당히 구글링하면 stackoverflow가 친절한 해결책을 알려주는데..! 17 | > 하지만, 우선 잘 정리된 공식문서던 아니던, 공통적으로 **어떤 기능을 제공하는지 가장 빠르게 파악** 할 수 있다. 18 | 19 | - 나에게 필요한 기능 파악 20 | - 이 기능을 실제 코드로 어떻게 구현하는가에 대한 학습 21 | 22 | ## Let’s Read! 23 | 24 | 지금까지 사용했던 라이브러리 중 공식문서 덕을 본 것도 있고, 썩 도움을 받지 못했던 것도 있다. 25 | 26 | ### React 27 | 28 |  29 | 30 | [React – A JavaScript library for building user interfaces](https://reactjs.org/) 31 | 우선, React 의 공식문서는 정말 읽기 편하다. 32 | 기본적인 개념에 대해서 소개하고, 초보자를 위한 튜토리얼부터 Advanced 사용성까지 고려하여 문서에 담아냈다. 33 | 34 |  35 | 36 | [State and Lifecycle – React](https://reactjs.org/docs/state-and-lifecycle.html) 37 | 처음 React를 배울 때 LifeCycle과 state, props에 대해 정말 많이 헷갈렸는데, 결국 이해된다고 생각하기 시작한 시점은 공식문서를 읽고난 다음부터가 아니었나 라는 생각이 든다. 🤔 38 | 39 | 사실, `리액트` 라는 키워드로 검색했을 때도 잘 번역된 한글문서가 많지만, 결국 저자에 의해 재해석되어 편집된 글이다. 40 | 리액트를 만든 사람이 어떤 것을 강조하고 싶었고, 사용자를 고려했을 때 어떤 오류가 있을 것 같다고 생각했는지 결국 직접 들어보고 싶지 않은가? 41 | **그렇다면 공식문서다.** 42 | 43 | 제작자 입장에서는 여러가지가 고려되어 있다. 44 | 45 | - component LifeCycle 과 State를 어떻게 묶어서 설명하면 좋을지. 46 | - 왜 state를 mutable하게 수정하는 것을 하면 안되는지 47 | - **제작자가 제안하는** 방법은 무엇인지 48 | - 기초를 익히기 위해서는 어떤 튜토리얼을 제공해야 하는지 49 | 50 | 등이 모두 고려된 문서가 reactjs.org 의 문서이다. 51 | 52 | > 결론 : React 공식문서는 잘 정리된 공식문서라고 생각합니다. 53 | 54 | ### Ant Design 55 | 56 |  57 | 58 | https://ant.design/ 59 | 앤트 디자인의 문서는 **정말 친절하다.** 60 | 61 | > 사실, 구글링해서 나오는 Example이 공식문서에 있는 case를 따라가지 못한다. 62 | > 비교할 수 없는 양과 퀄리티. 🤔 63 | 64 | 예를 들어, `Table` 이라는 컴포넌트(앤트디자인에서 제공하는 Table View) 를 사용한다고 했을 때, 생각할 수 있는 여러가지 디자인에 대해서 무려 예제코드!! 를 제공한다. 65 | 66 | 구현하고자 하는 기능에 대해서 비슷한 디자인 example을 찾은 후 약간의 custom만 하면 되는 형태이다. 67 | 이런 점이 무려 공식문서만 보면 해결된다. 68 | 69 | ### nodegit 70 | 71 |  72 | 73 | [API Docs](https://www.nodegit.org/api/) 74 | 앞선 두 가지 케이스는 정말 잘 정돈된 문서이고, 내 입장에서 좀 불친절했던 docs는 `nodegit` 이었다. 75 | 76 | > 결국 이렇게 저렇게 해결할수 없는 문제가 있어, 해당 레포에 issue rasing 하고 다른 라이브러리를 택했다. 77 | 78 | #### 좋았던 점 79 | 80 | 모든 공식문서가 그렇겠지만, 결국 공식문서를 본다 라는 것은 어떤 기능을 제공하는지 파악하기 위함이다. 81 | API Docs를 처음 보았을 때, 이 api가 `async` 인지 `sync` 인지까지 명시한 이 문서는 어떤 면에서는 꽤 친절하다고도 할 수 있겠다. 82 | 83 | #### 아쉬웠던 점. 84 | 85 | usage에 대한 언급이 없다. 86 | 87 | 가령, [CloneOptions](https://www.nodegit.org/api/clone_options/#checkoutBranch) 에서 checkout-branch API 를 살펴본다고 했을 때, 실질적인 사용코드를 제공하지 않아서 추상적으로 느껴졌다. 88 | 들어가는 Parameters 만 보고 해당 사용을 유추해야 하고, 이 과정에서 잘못사용하면 버그가 발생할 확률이 높다. 89 | 90 | 그리고, 버그가 발생했을 때 해결하는 과정 또한 오래걸린다. 91 | 92 | ## 🚕 정리 93 | 94 | 작성하다보니 약간 `어떤 공식문서가 좋아요` 의 뉘앙스가 된것을 지울수는 없지만, 95 | 말하고자 했던 핵심은 **내가 쓰는 라이브러리에 대한 기본적 파악을 공식문서에서 부터 출발** 해야 한다는 것이었다. 96 | 97 | 다른 방법으로 문제를 해결하게 되더라도, 공식문서에서 제공하는 기본적인 내용을 숙지한 상태에서 리서치가 이루어져야 한다. 98 | 99 | > 기본적이 정보로 해결할 수 없었던 부분에 대해 질문한다면, 질문하는 횟수나 시간이 현저하게 줄어들 것 같다고 생각한다. 100 | -------------------------------------------------------------------------------- /content/blog/k8s/images/image_0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_0.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_1.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_10.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_11.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_12.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_13.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_14.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_15.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_2.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_3.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_4.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_5.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_6.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_7.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_8.png -------------------------------------------------------------------------------- /content/blog/k8s/images/image_9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/image_9.png -------------------------------------------------------------------------------- /content/blog/k8s/images/thumbnail.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/k8s/images/thumbnail.jpeg -------------------------------------------------------------------------------- /content/blog/pattern/images/monorepo/babel-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/monorepo/babel-example.png -------------------------------------------------------------------------------- /content/blog/pattern/images/monorepo/github-secret.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/monorepo/github-secret.png -------------------------------------------------------------------------------- /content/blog/pattern/images/monorepo/import-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/monorepo/import-error.png -------------------------------------------------------------------------------- /content/blog/pattern/images/monorepo/lerna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/monorepo/lerna.png -------------------------------------------------------------------------------- /content/blog/pattern/images/monorepo/package-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/monorepo/package-name.png -------------------------------------------------------------------------------- /content/blog/pattern/images/monorepo/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/monorepo/thumbnail.png -------------------------------------------------------------------------------- /content/blog/pattern/images/redux_saga_flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/redux_saga_flow.png -------------------------------------------------------------------------------- /content/blog/pattern/images/saga_event.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/saga_event.png -------------------------------------------------------------------------------- /content/blog/pattern/images/saga_event_rollback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/saga_event_rollback.png -------------------------------------------------------------------------------- /content/blog/pattern/images/saga_orchestration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/saga_orchestration.png -------------------------------------------------------------------------------- /content/blog/pattern/images/saga_orchestration_rollback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/saga_orchestration_rollback.png -------------------------------------------------------------------------------- /content/blog/pattern/images/sample_service.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/sample_service.png -------------------------------------------------------------------------------- /content/blog/pattern/images/sample_service_sequence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/sample_service_sequence.png -------------------------------------------------------------------------------- /content/blog/pattern/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/pattern/images/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/analyze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/analyze.png -------------------------------------------------------------------------------- /content/blog/react/images/bundle-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/bundle-result.png -------------------------------------------------------------------------------- /content/blog/react/images/client-bundle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/client-bundle.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-beyond-code/modal_popover_guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-beyond-code/modal_popover_guide.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-beyond-code/orbit_model_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-beyond-code/orbit_model_color.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-beyond-code/rogers-diffusion-of-innovation-curve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-beyond-code/rogers-diffusion-of-innovation-curve.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-beyond-code/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-beyond-code/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/leftSlot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/leftSlot.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/mulit_select_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/mulit_select_search.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/notion_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/notion_page.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/notion_page_not_use.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/notion_page_not_use.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/portalContainer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/portalContainer.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/references.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/references.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/select_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/select_example.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/select_trigger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/select_trigger.jpg -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/select_trigger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/select_trigger.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/state.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/timepicker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/timepicker.png -------------------------------------------------------------------------------- /content/blog/react/images/design-system-decision-record/timepicker_new_option.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/design-system-decision-record/timepicker_new_option.png -------------------------------------------------------------------------------- /content/blog/react/images/form-handling/complex-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/form-handling/complex-form.png -------------------------------------------------------------------------------- /content/blog/react/images/form-handling/controlled_uncontrolled_rerender.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/form-handling/controlled_uncontrolled_rerender.gif -------------------------------------------------------------------------------- /content/blog/react/images/form-handling/input-state-update.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/form-handling/input-state-update.png -------------------------------------------------------------------------------- /content/blog/react/images/form-handling/simple-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/form-handling/simple-login.png -------------------------------------------------------------------------------- /content/blog/react/images/form-handling/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/form-handling/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/jsx-new-transform/react-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/jsx-new-transform/react-17.png -------------------------------------------------------------------------------- /content/blog/react/images/jsx-new-transform/react-reference-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/jsx-new-transform/react-reference-error.png -------------------------------------------------------------------------------- /content/blog/react/images/jsx-new-transform/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/jsx-new-transform/thumbnail.jpg -------------------------------------------------------------------------------- /content/blog/react/images/jsx-new-transform/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/jsx-new-transform/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/1pw_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/1pw_info.png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/headlessui.dev_react_combobox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/headlessui.dev_react_combobox.png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/headlessui.dev_react_listbox (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/headlessui.dev_react_listbox (1).png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/headlessui.dev_react_listbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/headlessui.dev_react_listbox.png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/hmm.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/hmm.gif -------------------------------------------------------------------------------- /content/blog/react/images/make-select/multi_select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/multi_select.png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/select_autofill.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/select_autofill.gif -------------------------------------------------------------------------------- /content/blog/react/images/make-select/select_autofill.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/select_autofill.mp4 -------------------------------------------------------------------------------- /content/blog/react/images/make-select/select_autofill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/select_autofill.png -------------------------------------------------------------------------------- /content/blog/react/images/make-select/select_keyboard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/select_keyboard.gif -------------------------------------------------------------------------------- /content/blog/react/images/make-select/select_keyboard.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/select_keyboard.mp4 -------------------------------------------------------------------------------- /content/blog/react/images/make-select/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/make-select/thumbnail.jpg -------------------------------------------------------------------------------- /content/blog/react/images/node-modules-splitting/after_bundle_output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/node-modules-splitting/after_bundle_output.png -------------------------------------------------------------------------------- /content/blog/react/images/node-modules-splitting/before_bundle_output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/node-modules-splitting/before_bundle_output.png -------------------------------------------------------------------------------- /content/blog/react/images/node-modules-splitting/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/node-modules-splitting/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/org-network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/org-network.png -------------------------------------------------------------------------------- /content/blog/react/images/org_to_user_no_split.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/org_to_user_no_split.gif -------------------------------------------------------------------------------- /content/blog/react/images/org_to_user_split.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/org_to_user_split.gif -------------------------------------------------------------------------------- /content/blog/react/images/react-lazy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/react-lazy.png -------------------------------------------------------------------------------- /content/blog/react/images/react-loadable-issue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/react-loadable-issue.png -------------------------------------------------------------------------------- /content/blog/react/images/scoped-context/dialog-alertdialog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/scoped-context/dialog-alertdialog.jpg -------------------------------------------------------------------------------- /content/blog/react/images/scoped-context/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/scoped-context/thumbnail.jpg -------------------------------------------------------------------------------- /content/blog/react/images/ssr-area.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/ssr-area.png -------------------------------------------------------------------------------- /content/blog/react/images/ssr-first.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/ssr-first.png -------------------------------------------------------------------------------- /content/blog/react/images/ssr-full-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/ssr-full-content.png -------------------------------------------------------------------------------- /content/blog/react/images/test1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/test1.gif -------------------------------------------------------------------------------- /content/blog/react/images/test2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/test2.gif -------------------------------------------------------------------------------- /content/blog/react/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/thumbnail.png -------------------------------------------------------------------------------- /content/blog/react/images/user--cache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/user--cache.png -------------------------------------------------------------------------------- /content/blog/react/images/user-ssr-data-fetch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/user-ssr-data-fetch.png -------------------------------------------------------------------------------- /content/blog/react/images/user-ssr-no-cache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/user-ssr-no-cache.png -------------------------------------------------------------------------------- /content/blog/react/images/user-ssr-no-data-fetch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/react/images/user-ssr-no-data-fetch.png -------------------------------------------------------------------------------- /content/blog/react/ssr-0-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '[SSR] 0. 들어가면서' 3 | date: 2019-11-17 16:00:09 4 | category: react 5 | thumbnail: './images/thumbnail.png' 6 | --- 7 | 8 |  9 | 10 | 이 튜토리얼은 React에 ServerSideRendering, 그리고 Code Splitting을 적용하는 과정을 소개합니다. 11 | 12 | > 모든 코드는 [GitHub](https://github.com/soYoung210/react-ssr-code-splitting) 에 있으니 **각 단계별 branch에서 코드를 살펴보세요!** 13 | 14 | React에 SSR을 도입한다면, [Next.js](https://nextjs.org/)도 좋은 선택일 수 있습니다. 하지만, 이 글은 프레임워크가 아닌 순수하게 React에 CodeSplitting과 SSR을 얹어가는 과정을 다룹니다. 15 | 16 | 이 시리즈는 다음 버전을 기반으로 작성되었습니다. 17 | 18 | ```json 19 | { 20 | "typescript": "3.6.2", 21 | "@loadable/component": "5.10.3", 22 | "@loadable/server": "5.10.3", 23 | "react": "16.8.6", 24 | "react-router-config": "5.1.1", 25 | "react-router-dom": "5.0.1", 26 | "redux": "4.0.4", 27 | "redux-observable": "1.1.0" 28 | } 29 | ``` 30 | 31 | ## Table of Contents 32 | 33 | ### [1. Code Splitting](https://so-so.dev/react/ssr-1-codesplitting/) 34 | 35 | - 라이브러리 선택 36 | - Template HTML설정 37 | - Config설정 38 | - View코드 작성 39 | - 몇 가지 생각 40 | 41 | ### [2. SSR - Basic](https://so-so.dev/react/ssr-2-ssr---basic/) 42 | 43 | - 구조 정리 44 | - server에서 Rendering 45 | - 확인 46 | 47 | ### [3. SSR - Data Fetch](https://so-so.dev/react/ssr-3-ssr-data-fetch/) 48 | 49 | - react-router-config로의 변경 50 | - server/app.tsx 수정 51 | - Client에 초기 store값 전달 52 | - Server에서 받아온 데이터를 이용해서 Store초기화 하기 53 | 54 | ### [4. UX관점에서의 SSR](https://so-so.dev/react/ssr-4-ux-ssr/) 55 | 56 | - 사용자 관점 57 | - 단점만 있는 것은 아니다. 58 | - 이 튜토리얼을 끝마치며 59 | -------------------------------------------------------------------------------- /content/blog/react/ssr-4-ux-ssr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: '[SSR] 4. UX관점에서의 SSR' 3 | date: 2019-12-13 22:12:74 4 | category: react 5 | thumbnail: './images/thumbnail.png' 6 | --- 7 | 8 |  9 | 10 | SSR을 이용해서 두 가지 상황을 구현해보았습니다. 두 번째 글이 첫 번째보다 조금 어려웠다고 생각되는데요, 과연 어려운만큼 좋은 UX를 구현한것일까요? 11 | 12 | 제 대답은 `그렇지 않다.` 입니다. 13 | 14 | ## 사용자 관점 15 | 16 | ### Server에서 Data Fetch 17 | 18 | [3. SSR - Data Fetch](https://so-so.dev/react/ssr-3-ssr-data-fetch/)의 방법으로 요청했을 때 어떤 일이 벌어지는지 그림으로 살펴봅시다. 19 | 20 |  21 | 사용자의 요청이 express에게 전달되고, api fetch후 contents를 그린 html을 Client에게 내려주기 전까지 **사용자는 흰 화면만 보게 됩니다.** 22 | 23 | api call이 오래 걸릴 경우 사용자가 흰 화면을 보는 시간은 그만큼 길어지게 됩니다. 이는 좋은 UX라고 보기 어렵습니다. 24 | 25 | > 컨텐츠가 담겨진 html자체를 캐싱처리 할 경우 이 속도가 빨라져 실제로 UX에 긍정적인 영향을 끼칠 가능성이 높습니다. 26 | > 하지만, 이번 튜토리얼에서는 관련 내용에 대해서는 다루지 않습니다. 27 | 28 | ### Server에서 빠르게 전달 29 | 30 | [2. SSR - Basic](https://so-so.dev/react/ssr-2-ssr---basic/)의 방법으로 변경해봅니다. 31 | server에서는 api호출을 수행하지 않고 client의 `Loader` 혹은 `header`영역만 그려서 빠르게 전달해줍니다. 이후 로직 처리는 client에 위임합니다. 32 | 33 |  34 | 35 | 사용자는 빠르게 contents를 볼 수 있게 되었습니다. 그림에는 큰 글씨의 `Loading`으로 표현했지만, 스켈레톤 UI등을 활용하면 조금 더 나은 UX로 나아갈 수 있습니다. 36 | 37 | ### Server에서 Data Fetch - WebView 38 | 39 | 그리고, 웹뷰 상황에서 더 장점을 가집니다. 40 | 41 |  42 | 43 | server에서 api요청을 처리하는 방법으로 구현할 시에는, Client에서 받는 것은 완성된 html이므로 캐싱이 적용되지 않습니다. 44 | 45 | ### Server에서 빠르게 전달 - WebView 46 | 47 |  48 | 49 | 두 번째 방식으로 진행 시 client rendering에 필요한 일부 bundle을 받아오는 작업이 캐싱될 수 있습니다. 당연히, express에서 bundle을 받는것보다 빠르게 진행될 수 있습니다. 50 | 51 | ## 단점만 있는 것은 아니다 52 | 53 | 하지만, 마냥 단점만 있는것은 아닙니다. 위 상항을 다르게 이야기 해보면, Client에서는 **늘 express의 상황에만 의존하게 된다는 것입니다.** 한번, `Low tier 디바이스`의 상황을 가정해봅시다. 54 | 55 | **_Full Contents를 내려받는 방식_** 56 | 57 | 모든 요청과 api call이 express에서 이루어지므로, 유저가 컨텐츠를 받는 속도에서 변수는 오직 `네트워크 환경`과 express의 스펙입니다.(서버의 CPU등) 58 | express의 CPU보다 좋지 않은 CPU를 가진 디바이스에서는 기존의 방식보다 빠르게 컨텐츠가 로드 될 수 있습니다. 59 | 60 | **_SSR + CSR_** 61 | 62 | 컨텐츠를 내려 받는 속도에서 중요한 요소는 유저가 연결된 네트워크 환경과 디바이스 스펙입니다. 63 | 저사양의 디바이스에서는 두 가지 요소 모두 좋지 않으니 컨텐츠 로딩 속도가 매우 느립니다. 이 경우 express에서 모든 컨텐츠를 내려받는것이 좋습니다. 64 | 65 | ## 이 튜토리얼을 끝마치며 66 | 67 | SSR 튜토리얼이 끝났습니다. 68 | 프레임워크 없이 SSR을 적용하는 과정에서 많은 버그와 어려운 점을 만났는데, 같은 어려움을 겪고 계실 분들께 도움이 되었으면 좋겠습니다. 69 | 70 | 본 튜토리얼에 사용된 코드는 [여기](https://github.com/SoYoung210/react-ssr-code-splitting)에서 보실 수 있습니다. 71 | 피드백은 댓글이나 깃헙 이슈로 남겨주시면 감사하겠습니다.🙂 72 | -------------------------------------------------------------------------------- /content/blog/tool/rollup/images/rollupjs-config/cjs-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/rollup/images/rollupjs-config/cjs-error.png -------------------------------------------------------------------------------- /content/blog/tool/rollup/images/rollupjs-config/include_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/rollup/images/rollupjs-config/include_card.png -------------------------------------------------------------------------------- /content/blog/tool/rollup/images/rollupjs-config/no_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/rollup/images/rollupjs-config/no_card.png -------------------------------------------------------------------------------- /content/blog/tool/rollup/images/rollupjs-config/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/rollup/images/rollupjs-config/thumbnail.png -------------------------------------------------------------------------------- /content/blog/tool/webpack/images/node-modules-splitting/after_bundle_output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/webpack/images/node-modules-splitting/after_bundle_output.png -------------------------------------------------------------------------------- /content/blog/tool/webpack/images/node-modules-splitting/before_bundle_output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/webpack/images/node-modules-splitting/before_bundle_output.png -------------------------------------------------------------------------------- /content/blog/tool/webpack/images/node-modules-splitting/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/webpack/images/node-modules-splitting/thumbnail.png -------------------------------------------------------------------------------- /content/blog/tool/webpack/images/whats-diff-in-webpack5/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/tool/webpack/images/whats-diff-in-webpack5/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/apple_touch_tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/apple_touch_tag.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/activate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/activate.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/commit.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/composite_after_flow.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/composite_after_flow.jpeg -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/composite_after_paint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/composite_after_paint.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/composite_layer_timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/composite_layer_timeline.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/composite_only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/composite_only.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/composition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/composition.gif -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/composition_forest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/composition_forest.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/css_to_style_sheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/css_to_style_sheet.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/display.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/draw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/draw.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/enhance_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/enhance_result.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/implicit-compositing.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/implicit-compositing.gif -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/layer_memory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/layer_memory.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/layer_promotion_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/layer_promotion_result.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/layout.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/layout_cost.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/layout_cost.gif -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/non-fast-scroll-region-all.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/non-fast-scroll-region-all.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/non-fast-scroll-region.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/non-fast-scroll-region.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/non_composition_raster.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/non_composition_raster.gif -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/paint_invalidation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/paint_invalidation.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/parsing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/parsing.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/property_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/property_tree.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/raster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/raster.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/reflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/reflow.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/repaint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/repaint.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/repaint_layer_timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/repaint_layer_timeline.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/style.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/style_calc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/style_calc.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/thumbnail2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/thumbnail2.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/tilling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/tilling.png -------------------------------------------------------------------------------- /content/blog/web/images/browser-rendering-performance/메인플로우.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/browser-rendering-performance/메인플로우.png -------------------------------------------------------------------------------- /content/blog/web/images/charset-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/charset-1.png -------------------------------------------------------------------------------- /content/blog/web/images/charset-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/charset-2.png -------------------------------------------------------------------------------- /content/blog/web/images/cookie/first-vs-third.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/cookie/first-vs-third.png -------------------------------------------------------------------------------- /content/blog/web/images/cookie/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/cookie/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/cookie/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/cookie/twitter.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/cssom-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/cssom-result.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/emotion-benchmark-result-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/emotion-benchmark-result-1.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/emotion-benchmark-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/emotion-benchmark-result.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/emotion-to-cssvar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/emotion-to-cssvar.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/linaria-dynamic-style-poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/linaria-dynamic-style-poster.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/linaria-dynamic-style.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/linaria-dynamic-style.mp4 -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/linaria-sc-performance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/linaria-sc-performance.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/stitches-atomic-class.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/stitches-atomic-class.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/stitches-css-inject.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/stitches-css-inject.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/styled-components-critical-css-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/styled-components-critical-css-result.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/styled-components-dynamic-style-poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/styled-components-dynamic-style-poster.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/styled-components-dynamic-style.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/styled-components-dynamic-style.mp4 -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/thumbnail2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/thumbnail2.png -------------------------------------------------------------------------------- /content/blog/web/images/css-in-js/what-is-css-in-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/css-in-js/what-is-css-in-js.png -------------------------------------------------------------------------------- /content/blog/web/images/description_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/description_example.png -------------------------------------------------------------------------------- /content/blog/web/images/facebook-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/facebook-large.png -------------------------------------------------------------------------------- /content/blog/web/images/facebook-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/facebook-small.png -------------------------------------------------------------------------------- /content/blog/web/images/favicon_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/favicon_example.png -------------------------------------------------------------------------------- /content/blog/web/images/fifth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/fifth.png -------------------------------------------------------------------------------- /content/blog/web/images/first.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/first.png -------------------------------------------------------------------------------- /content/blog/web/images/fourth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/fourth.png -------------------------------------------------------------------------------- /content/blog/web/images/lang.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/lang.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator1.gif -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator2.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator3.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator4.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator5.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator6-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator6-1.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator6.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator7.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator8.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/navigator9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/navigator9.png -------------------------------------------------------------------------------- /content/blog/web/images/navigator/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/navigator/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/og-image.png -------------------------------------------------------------------------------- /content/blog/web/images/search_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/search_result.png -------------------------------------------------------------------------------- /content/blog/web/images/second.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/second.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/background-sync-example1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/background-sync-example1.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/background-sync-example2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/background-sync-example2.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/background-sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/background-sync.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/interaction-with-cache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/interaction-with-cache.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/precache-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/precache-build.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/precache-manifest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/precache-manifest.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/push-notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/push-notification.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/swUrl-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/swUrl-build.png -------------------------------------------------------------------------------- /content/blog/web/images/service-worker/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/service-worker/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/sixth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/sixth.png -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/bootstrap_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/bootstrap_example.png -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/card_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/card_example.png -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/responsive_tailwind.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/responsive_tailwind.gif -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/search_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/search_example.png -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/search_result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/search_result.png -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/tailwind/tw_macro_issue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tailwind/tw_macro_issue.png -------------------------------------------------------------------------------- /content/blog/web/images/third.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/third.png -------------------------------------------------------------------------------- /content/blog/web/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/thumbnail.png -------------------------------------------------------------------------------- /content/blog/web/images/thumbnail2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/thumbnail2.png -------------------------------------------------------------------------------- /content/blog/web/images/thumbnail_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/thumbnail_example.png -------------------------------------------------------------------------------- /content/blog/web/images/thumbnail_tag_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/thumbnail_tag_example.png -------------------------------------------------------------------------------- /content/blog/web/images/title_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/title_example.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/circular_reference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/circular_reference.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/cjs_binding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/cjs_binding.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/dead-code-elimination-vs-tree-shaking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/dead-code-elimination-vs-tree-shaking.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/esm_binding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/esm_binding.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/esm_binding_update.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/esm_binding_update.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/global_share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/global_share.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/module_record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/module_record.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/node_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/node_tree.png -------------------------------------------------------------------------------- /content/blog/web/images/tree-shaking-module-system/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/tree-shaking-module-system/thumbnail.jpg -------------------------------------------------------------------------------- /content/blog/web/images/twitter-empty-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/twitter-empty-card.png -------------------------------------------------------------------------------- /content/blog/web/images/twitter-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/twitter-large.png -------------------------------------------------------------------------------- /content/blog/web/images/twitter-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/twitter-small.png -------------------------------------------------------------------------------- /content/blog/web/images/with-async.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/with-async.png -------------------------------------------------------------------------------- /content/blog/web/images/with-defer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/with-defer.png -------------------------------------------------------------------------------- /content/blog/web/images/without-defer-async-body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/without-defer-async-body.png -------------------------------------------------------------------------------- /content/blog/web/images/without-defer-async-head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/without-defer-async-head.png -------------------------------------------------------------------------------- /content/blog/web/images/you-dont-know-polyfill/sokra_comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/you-dont-know-polyfill/sokra_comment.png -------------------------------------------------------------------------------- /content/blog/web/images/you-dont-know-polyfill/test-node-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/you-dont-know-polyfill/test-node-result.png -------------------------------------------------------------------------------- /content/blog/web/images/you-dont-know-polyfill/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SoYoung210/SOSO/d28df1e804bef6b8f8ff3e940e344a417f27641e/content/blog/web/images/you-dont-know-polyfill/thumbnail.png -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | // custom typefaces 2 | require('typeface-noto-sans-kr') 3 | require('typeface-catamaran') 4 | 5 | // polyfill 6 | require('intersection-observer') 7 | 8 | const metaConfig = require('./gatsby-meta-config') 9 | 10 | exports.onInitialClientRender = () => { 11 | if (metaConfig.share.facebookAppId) { 12 | window.fbAsyncInit = function() { 13 | FB.init({ 14 | appId: metaConfig.share.facebookAppId, 15 | xfbml: true, 16 | version: 'v3.2', 17 | }) 18 | FB.AppEvents.logPageView() 19 | } 20 | ;(function(d, s, id) { 21 | var js, 22 | fjs = d.getElementsByTagName(s)[0] 23 | if (d.getElementById(id)) { 24 | return 25 | } 26 | js = d.createElement(s) 27 | js.id = id 28 | js.src = 'https://connect.facebook.net/en_US/sdk.js' 29 | fjs.parentNode.insertBefore(js, fjs) 30 | })(document, 'script', 'facebook-jssdk') 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const metaConfig = require('./gatsby-meta-config') 2 | 3 | module.exports = { 4 | siteMetadata: metaConfig, 5 | plugins: [{ 6 | resolve: `gatsby-source-filesystem`, 7 | options: { 8 | path: `${__dirname}/content/blog`, 9 | name: `blog`, 10 | }, 11 | }, 12 | { 13 | resolve: `gatsby-source-filesystem`, 14 | options: { 15 | path: `${__dirname}/content/__about`, 16 | name: `about`, 17 | }, 18 | }, 19 | { 20 | resolve: `gatsby-source-filesystem`, 21 | options: { 22 | path: `${__dirname}/content/assets`, 23 | name: `assets`, 24 | }, 25 | }, 26 | { 27 | resolve: `gatsby-transformer-remark`, 28 | options: { 29 | plugins: [{ 30 | resolve: `gatsby-remark-images`, 31 | options: { 32 | maxWidth: 1200, 33 | linkImagesToOriginal: false, 34 | }, 35 | }, 36 | { 37 | resolve: `gatsby-remark-images-medium-zoom`, 38 | options: { 39 | margin: 36, 40 | scrollOffset: 0, 41 | }, 42 | }, 43 | { 44 | resolve: `gatsby-remark-responsive-iframe`, 45 | options: { 46 | wrapperStyle: `margin-bottom: 1.0725rem`, 47 | }, 48 | }, 49 | { 50 | resolve: `gatsby-remark-prismjs`, 51 | options: { 52 | inlineCodeMarker: '%', 53 | }, 54 | }, 55 | `gatsby-remark-copy-linked-files`, 56 | `gatsby-remark-smartypants`, 57 | `gatsby-remark-autolink-headers`, 58 | `gatsby-remark-emoji`, 59 | ], 60 | }, 61 | }, 62 | { 63 | resolve: `gatsby-plugin-gtag`, 64 | options: { 65 | trackingId: metaConfig.ga, 66 | // Puts tracking script in the head instead of the body 67 | head: false, 68 | // enable ip anonymization 69 | anonymize: true, 70 | }, 71 | }, 72 | { 73 | resolve: `gatsby-plugin-manifest`, 74 | options: { 75 | name: metaConfig.title, 76 | short_name: metaConfig.title, 77 | start_url: `/`, 78 | background_color: `#ffffff`, 79 | theme_color: `#663399`, 80 | display: `minimal-ui`, 81 | icon: metaConfig.icon, 82 | }, 83 | }, 84 | { 85 | resolve: `gatsby-plugin-typography`, 86 | options: { 87 | pathToConfigModule: `src/utils/typography`, 88 | }, 89 | }, 90 | `gatsby-transformer-sharp`, 91 | `gatsby-plugin-sharp`, 92 | `gatsby-plugin-feed`, 93 | `gatsby-plugin-offline`, 94 | `gatsby-plugin-react-helmet`, 95 | `gatsby-plugin-sass`, 96 | `gatsby-plugin-lodash`, 97 | `gatsby-plugin-sitemap`, 98 | ], 99 | } -------------------------------------------------------------------------------- /gatsby-meta-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: `SOSOLOG`, 3 | description: `Blog posted about ...`, 4 | author: `SO_YOUNG`, 5 | introduction: `📝 소소하게 끄적이는 개발로그`, 6 | siteUrl: `https://so-so.dev`, // Your blog site url 7 | social: { 8 | twitter: `soyoung__ee`, // Your Twitter account 9 | github: `SoYoung210`, // Your GitHub account 10 | medium: '', 11 | facebook: '', 12 | }, 13 | icon: `content/assets/favicon.png`, // Add your favicon 14 | resume: { 15 | title: 'About soso', 16 | description: 'docs: Update RESUME.md for introducing myself', 17 | thumbnail: 'https://so-so.dev/resume_thumbnail.jpg', 18 | }, 19 | keywords: [`blog`, `frontend`, `react`, `developer`], 20 | comment: { 21 | disqusShortName: '', // Your disqus-short-name. check disqus.com. 22 | utterances: 'SoYoung210/SOSO', // Your repository for archive comment 23 | }, 24 | configs: { 25 | countOfInitialPost: 10, // Config your initial count of post 26 | }, 27 | sponsor: { 28 | buyMeACoffeeId: 'soso', 29 | }, 30 | share: { 31 | facebookAppId: '', // Add facebookAppId for using facebook share feature v3.2 32 | }, 33 | ga: 'G-9XN9K5GTY1', // Add your google analytics tranking ID 34 | } 35 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require(`path`) 2 | const { 3 | createFilePath 4 | } = require(`gatsby-source-filesystem`) 5 | 6 | exports.createPages = ({ 7 | graphql, 8 | actions 9 | }) => { 10 | const { 11 | createPage 12 | } = actions 13 | 14 | const blogPostTemplate = path.resolve(`./src/templates/blog-post.js`) 15 | 16 | return graphql( 17 | ` 18 | { 19 | allMarkdownRemark( 20 | sort: { fields: [frontmatter___date], order: DESC } 21 | limit: 1000 22 | ) { 23 | edges { 24 | node { 25 | fields { 26 | slug 27 | } 28 | frontmatter { 29 | title 30 | category 31 | } 32 | } 33 | } 34 | } 35 | } 36 | ` 37 | ).then(result => { 38 | if (result.errors) { 39 | throw result.errors 40 | } 41 | 42 | // Create blog posts pages. 43 | const posts = result.data.allMarkdownRemark.edges.filter( 44 | ({ 45 | node 46 | }) => !!node.frontmatter.category 47 | ) 48 | 49 | posts.forEach((post, index) => { 50 | const previous = index === posts.length - 1 ? null : posts[index + 1].node 51 | const next = index === 0 ? null : posts[index - 1].node 52 | 53 | createPage({ 54 | path: post.node.fields.slug, 55 | component: blogPostTemplate, 56 | context: { 57 | slug: post.node.fields.slug, 58 | previous, 59 | next, 60 | }, 61 | }) 62 | }) 63 | }) 64 | } 65 | 66 | exports.onCreateNode = ({ 67 | node, 68 | actions, 69 | getNode 70 | }) => { 71 | const { 72 | createNodeField 73 | } = actions 74 | 75 | if (node.internal.type === `MarkdownRemark`) { 76 | const value = createFilePath({ 77 | node, 78 | getNode 79 | }) 80 | 81 | console.log(value) 82 | 83 | createNodeField({ 84 | name: `slug`, 85 | node, 86 | value, 87 | }) 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SOSOLOG", 3 | "private": true, 4 | "version": "0.1.0", 5 | "author": "ethdud1@gmail.com>", 6 | "bugs": { 7 | "url": "https://github.com/SoYoung210/SOSO.git/issues" 8 | }, 9 | "dependencies": { 10 | "gatsby": "^2.13.64", 11 | "gatsby-image": "^2.2.8", 12 | "gatsby-plugin-favicon": "^3.1.6", 13 | "gatsby-plugin-feed": "^2.3.26", 14 | "gatsby-plugin-google-analytics": "^2.0.17", 15 | "gatsby-plugin-gtag": "^1.0.13", 16 | "gatsby-plugin-lodash": "^3.0.5", 17 | "gatsby-plugin-manifest": "^2.2.5", 18 | "gatsby-plugin-offline": "^2.0.25", 19 | "gatsby-plugin-react-helmet": "^3.0.10", 20 | "gatsby-plugin-sass": "^2.1.8", 21 | "gatsby-plugin-sharp": "^2.2.11", 22 | "gatsby-plugin-sitemap": "^2.2.6", 23 | "gatsby-plugin-typography": "^2.3.2", 24 | "gatsby-remark-autolink-headers": "^2.0.16", 25 | "gatsby-remark-copy-linked-files": "^2.0.11", 26 | "gatsby-remark-emoji": "0.0.2", 27 | "gatsby-remark-images": "^3.0.10", 28 | "gatsby-remark-images-medium-zoom": "^1.2.1", 29 | "gatsby-remark-prismjs": "^3.3.30", 30 | "gatsby-remark-responsive-iframe": "^2.2.4", 31 | "gatsby-remark-smartypants": "^2.0.9", 32 | "gatsby-source-filesystem": "^2.1.9", 33 | "gatsby-transformer-remark": "^2.6.14", 34 | "gatsby-transformer-sharp": "^2.2.6", 35 | "intersection-observer": "^0.5.1", 36 | "lodash": "^4.17.15", 37 | "node-sass": "^4.12.0", 38 | "prismjs": "^1.17.1", 39 | "react": "^16.8.1", 40 | "react-disqus-comments": "^1.4.0", 41 | "react-dom": "^16.8.1", 42 | "react-helmet": "^5.2.0", 43 | "react-switch": "^5.0.0", 44 | "react-typography": "^0.16.19", 45 | "smooth-scroll": "^16.1.0", 46 | "typeface-catamaran": "0.0.54", 47 | "typeface-merriweather": "0.0.72", 48 | "typeface-montserrat": "0.0.54", 49 | "typeface-noto-sans-kr": "0.0.63", 50 | "typography": "^0.16.17", 51 | "typography-theme-github": "^0.16.18" 52 | }, 53 | "devDependencies": { 54 | "date-fns": "^1.30.1", 55 | "eslint": "^5.14.1", 56 | "eslint-plugin-react": "^7.11.1", 57 | "fs-extra": "^7.0.1", 58 | "gray-matter": "^4.0.2", 59 | "inquirer": "^6.2.2", 60 | "lighthousebot": "git+https://github.com/GoogleChromeLabs/lighthousebot.git", 61 | "prettier": "^1.14.2", 62 | "recursive-readdir": "^2.2.2", 63 | "signale": "^1.3.0" 64 | }, 65 | "keywords": [ 66 | "gatsby" 67 | ], 68 | "license": "MIT", 69 | "main": "n/a", 70 | "repository": { 71 | "type": "git", 72 | "url": "git+https://github.com/SoYoung210/SOSO.git" 73 | }, 74 | "scripts": { 75 | "post": "node ./cli/create-new-post.js", 76 | "dev": "gatsby develop", 77 | "lint": "eslint --ext .js,.jsx --ignore-pattern public .", 78 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'", 79 | "develop": "gatsby develop", 80 | "start": "npm run develop", 81 | "build": "gatsby build", 82 | "lh": "lighthousebot", 83 | "fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js" 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/components/bio/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StaticQuery, graphql, Link } from 'gatsby' 3 | import Image from 'gatsby-image' 4 | 5 | import './index.scss' 6 | 7 | export const Bio = () => ( 8 |37 | 지식이 왜, 언제, 어떻게 쓰이는지 아는 것이 중요하다고 생각한다. ‘필요할 것 같아서’가 아니라, 이 상황을 해결하는 데에 부족했던 지식을 채우기 위해 공부하는 것이 나에겐 공부 동기가 되었다. 38 |
39 |40 | 41 | 42 | https://so-so.dev/essay/no-silver-bullet/ 43 | 44 | 45 |46 |
32 | {social.github && ( 33 | GitHub 34 | )} 35 | {social.medium && ( 36 | Medium 37 | )} 38 | {social.twitter && ( 39 | 40 | X (Twitter) 41 | 42 | )} 43 | {social.facebook && ( 44 | 45 | Facebook 46 | 47 | )} 48 |
49 |{date}
7 | } 8 | -------------------------------------------------------------------------------- /src/components/post-date/index.scss: -------------------------------------------------------------------------------- 1 | .post-date { 2 | text-align: right; 3 | font-size: 12px; 4 | font-style: italic; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/post-navigator/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | import './index.scss' 5 | 6 | export const PostNavigator = ({ pageContext }) => { 7 | const { previous, next } = pageContext 8 | 9 | return ( 10 |You just hit a route that doesn't exist... the sadness.
17 | 18 | ) 19 | } 20 | } 21 | 22 | export default NotFoundPage 23 | 24 | export const pageQuery = graphql` 25 | query { 26 | site { 27 | siteMetadata { 28 | title 29 | } 30 | } 31 | } 32 | ` 33 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | 4 | import { Head } from '../components/head' 5 | import * as Lang from '../constants' 6 | import { rhythm } from '../utils/typography' 7 | 8 | import '../styles/resume.scss' 9 | 10 | export default ({ data }) => { 11 | const resumeData = data.site.siteMetadata.resume 12 | const resumes = data.allMarkdownRemark.edges 13 | const resume = resumes 14 | .filter(({ node }) => node.frontmatter.lang === Lang.KOREAN) 15 | .map(({ node }) => node)[0] 16 | 17 | return ( 18 | <> 19 |