호박너구리 블로그

이전 글에서, 설치된 NextJS 프로젝트에 Typescript를 추가했었습니다. 그리고 이번에는 본격적으로 React 컴포넌트를 추가하여 페이지와 내부 컴포넌트를 만들어서 index 홈페이지를 구성하려고 합니다. 1. 컴포넌트 디렉토리 생성 우선 컴포넌트 디렉토리 구조는 사람마다, 프로젝트마다, 회사마다 다릅니다. 어떤 곳은 atomic 디자인을 추구하며 디렉토리를 여러 단계로 구분하고, 어떤 곳은 components라는 한 폴더 안에 두기도 하죠. (컴포넌트 디렉토리 구조에 대해서는 나중에 구체적으로 다뤄볼게요!) 우선은 대부분의 프로젝트가 components라는 폴더를 갖고있으니 만들어보겠습니다. (선택) Container 디렉토리 생성 그리고 저는 page와 1:1 대응하는 컴포넌트를 contai..

개발 2021. 5. 8. 18:30

이전 글에서 NextJS 프로젝트를 생성하고 구조를 간단히 살펴보았습니다. 이번에는 생성한 NextJS에 typescript를 설치하려고 하는데요, 바로 패키지를 다운로드해도 되지만 NextJS 공식 문서에서는 조금 다른 방식을 소개합니다. 1. tsconfig.json 파일 생성 바로 프로젝트 루트에 tsconfig.json이라는 파일을 만드는 방법입니다. 명령어를 통해서 해도 되고, 직접 파일을 생성해도 됩니다. 명령어를 쓴다면 다음과 같겠죠 touch tsconfig.json NextJS는 자동적으로 디폴트 값으로 해당 파일을 설정해줍니다. 2. next 실행하기 그리고 next를 실행하면 되는데요, 명령어 npm run dev나 yarn dev로 실행하시면 됩니다. npm run dev 그럼 아마..

개발 2021. 5. 7. 18:30

보통 프론트엔드 프로젝트를 개발할 때에 모든 HTML태그에 대해 CSS 초기값을 설정하는 경우가 많습니다. 왜냐하면 디폴트 CSS가 희망하는 디자인과 다르거나, px, rem, em과 같은 단위를 잘 활용하기 위해서죠! 오늘은 유용한 CSS 초기값에 대해 다루어보겠습니다 0. 초기값 설정이 필요한 이유 아마 왜 초기값 설정이 필요한지 이해하지 못하셨을 수도 있습니다. 한 번 코드로 살펴볼게요 This is h1 This is h3 This is h5 This is p tag This is button This is a tag 그럼 다음과 같은 화면을 볼 수 있습니다. 우선 저는 패딩이나 마진을 주지 않았는데도 각 태그 간격이 주어져 있습니다. 그리고 태그별로 굵기나 크기도 정해져있죠. 버튼 역시 모양이 ..

개발 2021. 5. 7. 08:21

React는 Vue와 Angular와 많이 비교되지만, 그래도 프레임워크가 아닌 라이브러리입니다. 그러다보니 React만으로는 아쉬운 점이 많기도 하는데요, 그래서 적지 않은 분들이 프레임워크를 함께 사용합니다. React 프레임워크 중에서는 GatsbyJS와 NextJS가 가장 유명합니다. 저는 그 중에서 NextJS를 통해 프로젝트를 시작해보았습니다! (TODO: 두 개의 차이는 나중에 다른 글로 올려볼게요!) 1. NextJS 프로젝트 생성하기 우선 처음 프로젝트를 시작할 때에는 다음과 같은 명령어를 통해 시작하시면 됩니다. cpx create-next-app 실행하면 app 이름을 적으라고 나오고, 엔터를 치면 완료되었다고 터미널에 표시가 됩니다. 그러면 이제 프로젝트 설정은 끝이 납니다! 매우 ..

개발 2021. 5. 5. 15:24

[이 글은 IT산업과 경영 뉴스레터, 위클리 호박너구리에 먼저 작성한 글입니다. 매주 수요일마다 재미있고 유익한 정보를 받아보고 싶다면 구독을 신청해 주세요.] 많은 분들에게 페이스북은 익숙한 서비스이자 기업일 것입니다. 제 주변만 해도 대부분의 친구들이 페이스북이나 인스타그램을 사용하거나, 지금은 사용하지 않아도 이용한 경험이 있죠. 우리에게 이미 익숙한 기업이라 분석할 만한 새로운 내용이 없을 것 같다는 생각을 하실 수도 있는데요, 그러나 사실 페이스북은 우리가 아는 것보다 더 많은 서비스를 운영하고 있고, 더 큰 미래를 그리고 있습니다. 한 번 간단히 살펴볼게요! #페이스북의 시작과 성장: 교내 커뮤니티에서 글로벌 플랫폼으로 페이스북은 2004년에 하버드 대학교 재학생이던 마크 주커버그(Mark Z..

기업 분석 2021. 4. 30. 18:30

[이 글은 IT산업과 경영 뉴스레터, 위클리 호박너구리에 먼저 작성한 글입니다. 매주 수요일마다 재미있고 유익한 정보를 받아보고 싶다면 구독을 신청해 주세요.] 코로나 바이러스는 많은 사람들의 삶을 바꾸었고, 여러 산업들이 크고 작은 변화를 겪었습니다. 그중에서 특히 주류산업은 가장 큰 변화를 겪은 분야 중 하나라고 생각이 됩니다. 재택근무와 저녁 9, 10시 이후 식당 취식 금지, 5인 이상 집합금지 등의 지침으로 인해 회식이 줄어들고, 술집에서 술을 먹던 문화가 점차 홈술로 변화하고 있기 때문입니다. 실제 한국농수산식품유통공사의 '주류 시장 트렌드 보고서'에 따르면 코로나19 이후 술을 마시는 '장소'와 '사람', 그리고 '상황'에 변화가 있다는 응답이 각각 65.7%, 61.7%, 그리고 73%에 ..

산업 분석 2021. 4. 23. 18:30

[이 글은 IT산업과 경영 뉴스레터, 위클리 호박너구리에 먼저 작성한 글입니다. 매주 수요일마다 재미있고 유익한 정보를 받아보고 싶다면 구독을 신청해 주세요.] 최근에 메타버스라는 단어가 자주 언급되고 있습니다. 그러면서 소개되는 기업들이 가상 아바타를 제작하는 '제페토'나 게임 회사인 '로블럭스' 등인데요, 그렇다면 메타버스 산업이라는 것은 단순히 게임/콘텐츠 회사의 다른 명칭일 뿐인걸까요? 과연 메타버스는 정확히 어떤 산업이고, 현재 어느 정도 상용화된 것일까요? 오늘은 메타버스의 생태계와 전망에 대해서 한 번 살펴보겠습니다! #메타버스의 현재: 마케팅 용어가 만든 거품 vs 미래시대의 시작 우선 사전적으로 메타버스는 (가상, 초월을 뜻하는) meta와 (세계, 우주를 뜻하는) universe의 합성..

산업 분석 2021. 4. 9. 18:30

[이 글은 IT산업과 경영 뉴스레터, 위클리 호박너구리에 먼저 작성한 글입니다. 매주 수요일마다 재미있고 유익한 정보를 받아보고 싶다면 구독을 신청해 주세요.] 쿠팡의 상장을 필두로 국내 이커머스 시장은 더욱 주목을 받고 있습니다. 얼마 전에는 G마켓과 옥션을 운영하는 이베이코리아가 매물로 나와서 어떤 기업이 인수할지 이목을 집중시키고 있죠. 그래서 오늘은 치열한 경쟁 속에서 과연 누가 한국의 아마존이 될 수 있을지, 전자상거래 시장의 대표적인 플레이어들을 중심으로 국내 이커머스 산업에 대해 살펴보겠습니다! (이커머스 산업에 관심이 많으신 분이라면, '오프라인 커머스에서 현재 이커머스 산업으로 이어지는 이커머스의 흐름'에 대한 지난 글도 도움이 되실거에요!) #국내 이커머스 산업: 큰 규모와 많은 경쟁 ..

산업 분석 2021. 4. 2. 18:00