안녕하세요:) 손누누입니다. 오늘은 반응형 웹 사이트를 만들기 위한 핵심적인 4가지 내용을 여러분과 나누어 보고자 합니다. 현 시대에 우리는 웹 사이트를 컴퓨터로도 접속하고, 노트북으로도 접속합니다. 또는 타블릿이나 모바일(휴대폰)으로도 접속하여 웹 사이트를 살펴볼 수 있습니다. 그만큼 기기에 종류가 다양해지고, 우리들의 눈에 보이는 화면에 크기도 다양해졌다는 것을 경험할 수 있습니다. 이에 따라 각 크기 화면에 구애받지 않고 사용자가 경험을 할 수 있는 웹사이트가 요구되었고 그에 반응형 웹사이트가 만들어지게 됩니다. 반응형 웹 사이트 제작 시 핵심적인 4가지 기술 이 있습니다. 첫번째는 % 단위를 쓰는 가변크기 적용입니다. 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도..
Typescript 코드를 Linting 할 때 선택할 수 있는 두 가지 도구가 있습니다. 바로 TSLint와 ESLint. TSLint는 TypeScript에만 사용할 수 있는 린터이며, ESLint는 JavaScript와 TypeScript를 모두 지원합니다. 마이크로 소프트 타입스크립트 팀에서는 TSLint가 프로젝트 성능에 영향을 미칠 수 있는 몇 가지 아키텍처적인 문제를 발견하여 ESLint 사용을 권고하고 있습니다. ESLint 설정하기 먼저, ESLint 설정에 필요한 패키지들을 설치하도록 하겠습니다. yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev * create-react-app을 사용하여 프..
Why So Serious? Just For Fun. No Fun No Gain 누누 컴퍼니 내부에서 네트워크가 아닌 다른 주제의 포스팅을 원하여 새로운 주제를 선정하는 중입니다. 아마 데이터 베이스나 크롤링에 관련된 주제로 정해질 것 같습니다. 네트워크에 대한 나머지 내용들은 제 블로그를 열게 되면 이어서 포스팅하거나 추후에 다시 포스팅하도록 하겠습니다. 이번 포스팅에서는 크롤링의 법적 문제에 대해 이야기해볼까 합니다. 4차 산업혁명 시대가 되면서 데이터의 가치는 더욱 높아졌습니다. 데이터를 이용하면 소비자의 행동을 분석하거나 시장 변동을 예측해내는 것도 가능하며 영상을 실시간으로 인식하여 사람을 구별하는 것도 가능합니다. 그 외에도 데이터를 이용한 사례들은 기술의 발전에 따라 무궁무진해지고 있습니다...
안녕하세요 :) 손누누입니다. 이번 글은 웹사이트와 모바일 앱 제작 기획에 대하여 전반적으로 이야기를 나누어 보고자 합니다. 웹사이트와 모바일 앱, IT 계열 쪽으로 취업을 하게 되면 부서가 크게 기획 / 디자인 / 개발로 나누어집니다. 웹사이트, 모바일 앱이 만들어지는 과정도 이와 크게 다를 게 없습니다. 진행되는 과정은 기획 / 디자인 / 개발 순으로 진행됩니다. 순차적으로 일이 진행되기 때문에 만들고자 하는 웹사이트나 모바일 앱에서 기획이 먼저 시작되고, 그 기획을 바탕으로 디자인과 개발이 진행됩니다. 실무를 나가게 되면 기획이 없는 직장을 마주할 수 있습니다. 이는 앞으로 만들고자 하는 웹사이트나 모바일 앱에 대한 방향성이 부재됨을 의미합니다. 방향성의 부재는 목적지를 잃고 이리저리 길을 돌아다녀..
UTC, 협정 세계시 - 1972년 1월 1일부터 시행된 국제 표준시입니다. - UTC는 그리니치 평균시(GMT)에 기반하므로 GMT로도 불리기도 하는데, UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용됩니다. ※ 기술적인 표기에서는 UTC가 사용됨 Unix Timestamp - Unix time 은 POSIX 시간이나 Epoch 시간이라고 부르기도 합니다. - 1970년 1월 1일 00:00:00 협정 세계시(UTC) 부터의 경과 시간을 초로 환산하여 정수로 나타냅니다. const date = new Date(); console.log(date.getTime()); // 10600604706391 GMT, 그리니치 표준시 - GMT(Greenwich Mean Tim..
Why So Serious? Just For Fun. No Fun No Gain. 저번 포스팅에서는 네트워크란 무엇이고, 네트워크 간의 통신을 하기 위해서 사용되는 패킷이라는 것을 알아보았습니다. 네트워크는 "여러 장비들이 연결되어 데이터도 통신하고, 웹도 보여줄 수 있고, 메일도 송수신할 수 있는 등 다양한 기능을 가지고 있는 것"이며 패킷은 "네트워크의 대역폭을 효율적으로 사용하기 위해 큰 데이터를 바로 송신하고 않고 작게 나누어 송신하게 되는데 이때 작게 나눈 조각"을 나타내는 말입니다. 자세한 설명은 하단의 포스팅에 적혀있습니다. [네트워크] 01. 네트워크와 패킷 Why So Serious? Just For Fun. No Fun No Gain. IT 업계에 종사한 지 얼마 되지 않았지만 네트워크..
Next.js 9.3 미만 버전에서 SSR(Server Side Rendering), SSG(Static Site Generation)를 적용하기 위해서는 getInitialProps 메소드가 활용되었습니다. getInitialProps를 통해 서버에서 미리 필요한 데이터들을 패칭 후 html 파일에 렌더링하고 클라이언트에 전송하여 SEO를 향상할 수 있었습니다. Next.js 9.3 이상 버전부터 SSR, SSG를 지원하기 위한 새로운 메소드가 등장하였습니다. getStaticProps, getServerSideProps 입니다. Next.js 공식 문서에도 getInitialProps 대신 getStaticProps와 getServerSideProps을 사용할 것을 권장하고 있습니다. 1. getSt..
Why So Serious? Just For Fun. No Fun No Gain. IT 업계에 종사한 지 얼마 되지 않았지만 네트워크라는 단어를 들으면 자연스레 LAN과 WAN 등의 단어가 떠오릅니다. 구글링을 해봐도 대부분 "컴퓨터 네트워크"에 대한 내용만 나오는 것을 보면 저만 겪는 현상은 아닌 듯합니다. 컴퓨터와 긴밀한 세상이기에 겪는 현상이지만 본래 네트워크란 단어는 컴퓨터 간의 연결만을 뜻하는 것은 아닙니다. 네트워크의 어원은 Net과 Work의 합성어로 그물을 짜는 행위를 가리키는 명사에서 임의의 연결망을 지칭하는 용어로 범위가 확장된 단어입니다. 그렇기 때문에 인적 네트워크, 물류 네트워크, 교통 네트워크 등 다양한 분야에서 네트워크라는 단어를 사용하고 있습니다. 앞으로 포스팅하게 될 내용은..
여러 명이 프로젝트를 관리하는데 사용되는 공통 그룹 계정을 Organization 이라고 한다. 팀 프로젝트를 진행할 때 카테고리/그룹화 하기 좋다. Organization 계정의 예시로 “perl” 이나 “rails” 같은 오픈소스 그룹이나 “google” 이나 "facebook" 같은 회사가 사용한다. 1) Organization 계정 생성하기 Organization 계정을 생성하는 것은 굉장히 쉽다. GitHub 페이지 오른쪽 상단 “+” 아이콘을 클릭하고 메뉴에서 “New organization” 을 선택하면 된다. Organization 생성 버튼 클릭시 Choos a plan 선택 페이지로 이동된다. 총 3개의 plan을 선택할 수 있으며 팀 상황에 맞는 plan을 선택한다. 2) Organi..