본문 바로가기

전체 글2572

React.js - 리액트 프로젝트 기본 폴더 구조 리액트 디렉터리 구조 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 create-react-app로 생성하여 프로젝트를 만들어보았습니다. 자동으로 파일들이 생성되고 실행에 필요한 모든 요소가 갖추어졌습니다. 오늘은 생성된 파일의 기본 구조를 알아보는 시간을 가져보겠습니다. ● 2. 저와 함께 실습했다면 아래 폴더에 파일들이 생성되어 있습니다. 구조는 생각보다. 간단합니다. C:\react\hello ● 3. "node_modules" 폴더 npm을 통해 설치된 패키지 매니저(Package manager)들이 모여 있는 디렉토리 입니다. C:\react\hello\node_modules ● 4. "public" 폴더는 html 파일들과 이미지 파일들이 모여 있는 걸 확인할 수 있습니다. 정적인 성격을 .. 2021. 1. 15.
React.js - 리액트의 기본 create-react-app 설치하고, 실행하기 리액트의 보일러플레이트 create-react-app 안녕하세요. 고코더 입니다. ● 1. 리액트를 사용하기 위해서는 코드를 실행하기 위한 환경을 설정해야 합니다. 보통 리액트를 연습하거나 사용할 때 크게 두 가지 방식을 사용합니다. 하나는 코드 펜을 이용하여 간단하게 실습하는 방식과 create-react-app를 사용하는 방식입니다. 오늘은 그중에서 로컬 컴퓨터에 환경을 만드는 create-react-app를 설치하는 방법을 알아보겠습니다. 리액트를 배우고 싶다면 연습할 수 있는 환경을 만들어 보는 게 가장 먼저입니다. create-react-app는 리액트 환경을 도와주는 보일러플레이트 ● 2. create-react-app는 리액트를 사용하기 편리하게 해주는 보일러 플레이트입니다. 오늘 설치할 리.. 2021. 1. 15.
보일러플레이트(Boilerplate code)란? - 개념, 사용하는 이유 보일러플레이트란? 안녕하세요. 고코더 입니다. https://gocoder.tistory.com/1110 코딩을 하다 보면 의미 없는 노동을 할 때가 있습니다. 대표적인 코드가 바로 자바에서 사용하는 getter, setter입니다. 이 캡슐화를 위한 필수적이지만 IDE를 통해 자동으로 생성합니다. 한 번도 직접 코드를 작성한 적이 없는 거 같습니다. 이러한 단순한 노동을 없애주는 것을 일컬어 우린 보일러 플레이트라고 말합니다. 실제로 이 단어의 뜻은 보일러에서 온 단어입니다. 보일러의 기초 골격은 통을 찍어내는 플레이트를 말합니다. 다시 말해서 보일러 통은 항상 필요하므로 이것은 항상 그대로 찍어내고 나머지 부분을 업그레이드하는 방식입니다. 그래서 불필요한 통 제작에 시간을 버리지 않을 수 있는 것입니.. 2021. 1. 14.
태어난 날짜로 빌보드 차트 1위 알아보기 - playback.fm 내가 태어난 날 빌보드 1위는? 안녕하세요. 고코더 입니다. ● 1. 빌보드 차트 1위라는 의미는 당시에 유행했던 음악을 알 수 있는 대표적인 방법입니다. 오늘 소개할 사이트의 콘셉트는 태어난 날의 어떤 곡이 빌보트 차트를 휩쓸었는지 알 수 있는 곳입니다. ● 2. 해당 사이트로 접속합니다. 한 음악 사이트가 만들어놓은 재밌는 기능이라고 생각하면 될 거 같습니다. 아래에 나오는 날짜에 자신의 생년월일을 집어넣습니다. https://playback.fm/birthday-song ● 3. 그럼 해당 기간에 빌보드 1위를 한 곡의 제목과 해당 유튜브 영상이 나타납니다. 그리고 연도가 표시된 버튼을ㅎ 누르면 ● 4. 해당 연도에 유행했던 음악들을 추가적으로 알아볼 수 있습니다. 마무리 음악을 즐기는 다양한 방식.. 2021. 1. 14.
반디앤루니스 - 전국 매장의 영업시간 및 위치, 매장 안내도 보기 bandinlunis 매장 리스트 안녕하세요. 고코더 입니다. ● 1. 반디앤루니스는 3대 대형서점에 속합니다. 현재 남아있는 지점은 많이 없지만 그래도 전국에 곳곳에 숨겨져 있습니다. 이 전국 매장에 대한 정보를 한번 알아보겠습니다. ● 2. 해당 사이트에 접속하면 전국 매장들이 있습니다. 현재는 6개 정도뿐이 되지 않네요. 해당 지점을 클릭하면 http://www.bandinlunis.com/front/aboutBandi/aboutBandiMain.do?key=50&map=150 ● 3. 해당 서점의 전화번호, 주소, 영업시간, 주소 등이 표시됩니다. ● 4. 그리고 아래로 스크롤을 해보면 매장 안내도까지 친절하게 나타나 있습니다. 마무리 서점이 많아지면 좋겠습니다. 2021. 1. 14.
영풍문고 - 전국 매장의 영업시간 및 위치, 매장 안내도 보기 영풍문고 매장 정보 안녕하세요. 고코더 입니다. ● 1. 영풍문고는 두 번째로 큰 오프라인 서점입니다. 약 40여 개가 전국에 위치해 있습니다. 그런데 영업점마다. 영업시간도 다르고 정확한 주소를 알아야 할 때가 있습니다. 그럴 땐 아래에 URL을 통해서 확인이 가능합니다. ● 2. 해당 주소는 영풍문고가 제공하는 전국 매장 리스트입니다. 방문하고 싶은 매장을 클릭을 합니다. https://www.ypbooks.co.kr/m_store.yp ● 3. 그럼 해당 매장에 대한 영업시간, 매장 주소가 나타납니다. 여기서 매장 안내도 버튼을 누르게 되면 ● 4. 해당 매장의 안내 지도가 잘 나타납니다. 마무리 서점은 어디든 좋습니다. 2021. 1. 14.
일본 미세먼지 알림 사이트 - tenki.jp/lite/pm25 일본에서 제공하는 미세먼지 예보 사이트 안녕하세요. 고코더 입니다. ● 1. 미세먼지가 사회적 문제입니다. 그런데 국내에서 제공하는 정보만으로는 과연 정확할지 의심이 가는 경우가 있습니다. 이웃나라 일본에서도 당연히 미세먼지를 예보하는 사이트가 있습니다. 혹시나 예보는 좋은데 공기가 나쁜 날 한번 참고하는 것도 좋을 거 같습니다. ● 2. 해당 사이트에 접속합니다. jp라는 도메인은 일본 최상위 국가 도메인입니다. https://tenki.jp/lite/pm25/ ● 3. 아랫부분에 플레이 버튼을 누르면 48시간 동안 미세먼지가 흘러갈 흐름이 보입니다. 한국도 지도상에 표시됩니다. 마무리 일본 여행을 준비하시거나, 새로운 미세먼지 정보가 필요하다면 방문해보세요. 2021. 1. 14.
반응속도 체크 사이트 - humanbenchmark.com/tests/reactiontime 순발력을 체크해보자 안녕하세요. 고코더 입니다. ● 1. 재밌는 사이트를 하나 소개하려고 합니다. 다름 아닌 인간의 반응속도를 체크하는 페이지입니다. 회원가입도 필요 없이 클릭 한 번으로 가능합니다. 해당 사이트를 접속합니다. 그럼 아래처럼 번개 표시가 나타나는 창을 마우스 왼쪽 버튼으로 클릭합니다. https://humanbenchmark.com ● 2. 그럼 이렇게 빨간색 "Wait for green"이 나타나고 잠시 기다리면 ● 3. 이 표시가 나타날 때 클릭을 합니다. ● 4. 그럼 반응속도가 체크되어서 나타납니다. ● 5. 평균속도보다 조금 빠르게 저는 나타났네요. 마무리 더 빨라지고 싶다! 예측으로 하면 엄청 빠르네요 ㅎ 2021. 1. 14.
용량 단위 - KB, MB, GB, TB, PB, EB, ZB, YB / 킬로, 메가, 기가, 테라, 페타, 엑사, 제타, 요타 용량 단위 알아보기 안녕하세요. 고코더 입니다. ● 1. 오늘은 용량의 대해 간단하게 알아보려고 합니다. 가장 익숙한 단위는 메가부터 테라바이트까지 사용하고 있는데요. 사실은 그 숫자는 매우 작은 숫자입니다. 실생활에 사용하지는 않지만 훨씬 많은 용량을 지칭하는 단위들이 있습니다. 그 단위들을 알아보겠습니다. 기호 용어 용량 KB 킬로바이트 0.000001GB MB 메가바이트 0.001GB GB 기가바이트 1GB TB 테라바이트 1,000GB PB 페타바이트 1,000,000GB EB 엑사바이트 1,000,000,000GB ZB 제타바이트 1,000,000,000,000GB YB 요타바이트 1,000,000,000,000,000GB 마무리 일주일 동안 한국에서 스팀을 다운로드하는 용량이 12PB라고 합니.. 2021. 1. 14.

티스토리툴바