전체 글

HTML 기본 정리

HTML은 웹 사이트를 만드는데 사용되는 언어이다. 웹 사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용한다. 그럼 이 웹사이트를 구성하는 가장 기본적인 요소는 무엇일까? 그 구성 요소들과 간단한 설명을 하자면 다음과 같다. HTML : 정보 또는 설계도 / 건물 설계도 CSS : 디자인 또는 스타일링 / 인테리어 디자인 JavaScript : 기능과 효과 웹 사이트 제작 시 고려 사항 웹 표준 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격을 의미한다. 반드시 따라야한다는 강제성을 띄지는 않지만 표준 규격을 맞췄을 경우 google과 같은 검색엔진에서 제작된 사이트가 노출될 가능성이 높아진다. 다음과 같은 표준 권고가 있다. 디자인은 CSS 파일로 제작한다. 절댓값보다는 상대값을 ..

자료구조와 알고리즘?

빅오(Big O)? 어떤 문제에 대한 해결 방법은 당연 하나만 존재하지 않을 것이다. 적게는 2개에서 많게는 수십가지 그 이상이 될 수도 있다. 근데 그중에 어떤 해결 방법이 최고인지 어떻게 알 수 있을까? 먼저 간단하게 작은 문제로 생각해보자 - 하나의 문제가 있고 두개의 해결 방법이 있다. - 하나는 루프(loop)를 사용하고, 하나는 리스트와 같은 것을 이용해서 똑같은 것을 해결한다고 생각하자 - 자, 어떤 것이 더 좋은 해결 방법일까? => 이것이 바로 빅오(Big O)의 핵심이다. 빅오는 하나의 시스템이자 여러가지 코드를 일반적으로 서로 비교하고 성능을 평가하는 방법이다. 코드 분류/비교 시스템 우리가 사용하는 많은 코드 중 코드를 분류하거나 비교 할 수있는 시스템이 있으면 얼마나 좋을까? 빅오..

React 프로젝트 초기 설정

CRA(Creact-React-App)을 통해 편한게 리액트 환경의 프로젝트를 만들 수 있다. 그리고 덕분에 필요없는 코드와 파일도 함께 생성되는데, 이런 불필요한 파일들을 정리해주자 ** 공통 : 주석은 당연히 모두 지워도 된다. 1. public / - public 폴더 내에 존재하는 파일들을 가르킨다. 1-1. robots.txt -> 삭제 -> 웹 크롤러가 쓴다고 하는데, 프론트 개발할 때 크게 필요한 경우는 없을 것 같다. 1-2. logo192, logo512.png -> 삭제 1-3. manifest.json -> 삭제 1-4. index.html -> 코드 수정 -> 위 두줄의 코드를 삭제한다. -> apple-touch-icon 의 경우 PWA로 제작할 때 필요하다, 혹시 PWA 제작을 ..

React firebase setup

자기 소개를 위한 웹 페이지를 만들기 위해 리액트로 프로젝트를 생성하려던 중 firebase를 이용해 db와 배포까지 해볼 생각이다. 1. 리액트 설치 create-react-app 설치 npx create-react-app . yarn create react-app . + 설치 후 필요없는 파일or 코드 삭제 2. firebase 앱 프로젝트 생성 - 구글에 firebase console 입력 - firebase에 로그인(듣기론 구글이 firebase를 인수했다고 한다, 본인은 별의미 없지만 구글로 로그인했다) - 로그인 후 메인화면에 프로젝트 추가 버튼을 클릭 후 프로젝트 이름, 지역 설정 후 프로젝트 만들기 버튼을 클릭한다. 3. react 프로젝트 폴더에 firebase 설치 node.js 기반의..

Landing page

Landing page 만들기 먼저 Landing page란 검색 엔진, 광고 등을 경유하여 접속하는 이용자가 최초로 보게 되는 웹페이지 라고 한다. 오늘은 어떤걸 해볼까 하고 둘러보다가 가장 기본이되는 페이지이기도 하고 순수 CSS로 만든 웹페이지인데 보기 좋은 효과가 많아 보여서 제작해보기로 했다. 이번에도 저번 Dashboard 때와 마찬가지로 유튜버의 영상을 보면서 제작했다. html과 css로만 구성되어 있고 아주 적은 분량의 Javascript 코드가 들어가 있는데, 이는 반응형 웹디자인을 위해 상단 네비게이션바(헤더-리스트)를 Toggle하는데 쓰이기 때문에 분량이 매우 적고 간단하다. html과 css만 사용하고 엄청 복잡하거나 어려운 내용 없이 간단하게 구성되어있기 때문에 간단하게 혹은 ..

Dashboard 제작

Dashboard 반응형 Dashboard를 제작해보았다. 유튜브 영상을 보며 제작했는데 다양한 css 사용법을 알게된 것 같았다. 지금은 유튜브 영상 제작자의 방식을 그대로 따라한 것이기 때문에 형태가 똑같은데, 이를 바탕으로 좀 더 다른 부분을 추가하거나 바꿔보는 작업을 하면서 더 공부하면 재밌을 것 같다. 제작하면서 느낀 점 전반적인 html, css, js 작성 방식이 어렵다거나 처음보는 내용을 크게 없었다, 그런데 내가 평소 잘 쓰지 않았던 css 문법을 영상 제작자는 자유자재로 쓰는 모습을 보고 확실히 아직 내 실력과 알고 있는 지식이 많이 부족하다는 것을 깨닫게 했다, 나는 css에서 " nth-child " 를 잘 사용하지 않았는데, 이번 dashboard를 만들어 보면서 느낀 점은 "nt..