BELOWZERO

엘리님이 추천하는 10 extensions 정리 Material Theme: change the theme color Material Icon Theme: 아이콘이 좀 더 생동감 있게 표현됨. Prettier- Code formatter -> setting창에 prettier quote검색했을 때 똑같이 안 떠서 설정하는 것까진 못함. Bracket Pair Colorizer - 가독성 Indent Rainbow - 가독성 Auto Rename Tag - html을 편집 시 태그명을 바꿀 때 유용 CSS Peek - html에서 CSS를 빨리 찾을 수 있도록 도와줌 ctrl을 누른 상태로 해당 인자를 클릭하면 css파일로 넘어가는 것을 볼 수 있음. HTML CSS Support - html에서 css자..

오늘은 이제 막 공부하기 시작한 React 개념 중 component에 대해 정리해보려 한다. 웹을 만들 때 기존 방식에서는 html문서에 모든 element구조를 정의했다면 React에서는 element들을 재사용이 가능하도록 비슷한 쓰임을 하는 것끼리 묶어 하나의 component로 만든다는 것이 특징이다. ✅ 폴더구조 우선 react-app으로 react project를 만들었고 필요 없는 파일들은 모두 삭제하고 사용될 애들만 남겨두었다. component로 사용되는 애들 확장자는 js보다는 x를 붙여 jsx로 많이 사용하는 것 같다. 따라서 나도 app.js파일 이름을 app.jsx로 바꿔주었다. ❓ 역할 index.js파일을 보면 다음과 같이 적혀 있는데 얘는 index.html파일안에 명시되어..

오늘은 input태그와 button태그를 이용해서 input태그 안에 적힌 텍스트를 화면에 출력해보고 이를 다시 form태그를 이용하여 구현해보려 한다. html, css, js소스는 아래와 같다. 💻 소스 button exam /* CSS */ input { padding: 10px; } button { border: none; outline: none; border-radius: 3px; padding: 10px 15px; color: white; background-color: black; cursor: pointer; } // JavaScript const input = document.querySelector('input'); const btn = document.querySelector('bu..

여태까지 github을 이용할 때는 github페이지에서 repository를 만들고 내 터미널에 clone해서 사용해왔다. 이번에 react공부를 할 때도 github에 올리고 싶어서 평소와 같이 repository를 만들어 clone해 온 후 그 안에 yarn명령어로 react app을 생성했다. 하지만 먼저 생성한 repository도 깃 관리 대상이고 이 안에 있는 react app도 깃 관리 대상이 되어서 구조가 이상해짐을 발견했다. 이후 이를 해결하고자 구글링을 해서 해결을 했고 이 방법을 까먹지 않도록 기록해보려고 한다. yarn create react-app 앱이름 명령어를 입력하여 react app을 만들어준다. yarn말고 npm이나 다른 패키지 매니저를 이용해도 된다. cd 디렉토리이..

오늘은 내가 최근에 개발한 소스를 리팩토링 했다. class를 이용해서 기능 단위로 나누고 import로 다른 파일 안에 있는 class를 사용했고 이것을 정리해보려고 한다. 1. 클래스 작성 방법 JS에서 클래스 작성하는 방법은 java와 매우 유사했다. class 키워드를 적고 클래스 이름을 적으면 된다. JS에서도 java와 마찬가지로 class이름은 대문자로 짓는 것이 규칙인 듯 했다. 간단하게 덧셈과 뺄셈의 기능이 있는 수학 클래스 하나를 만들어 메인 js파일로 불러오는 것을 작성해보면 아래와 같이 작성할 수 있다. 여기서 변수와 함수는 class내부에 작성하는 순간 변수는 let, const 키워드를 붙이면 안 되고 함수는 function키워드를 붙일 수 없다는 것이 특징이다. // math...

html, css를 좀 더 연습하고 싶어서 사이트를 돌아다니면서 구현하고 싶은 것을 골랐다. tree구조로 동작할 수 있게 만드는 건데 이렇게 간단한 걸 구현하면서도 모르는 게 참 많았다. 1. 결과물 및 소스 열린 폴더 아이콘을 누르면 열린 폴더 아이콘은 닫힌 폴더 아이콘으로 변경되고 root노드의 자식들이 모두 닫히는 식으로 동작한다. html 소스 css 소스 2. 구현 과정에서 어려웠던 점 및 알게 된 것 [main idea] checkbox와 label의 동작 방식 input 태그의 type중에 checkbox와 label태그를 이용해서 해당 트리를 구현했다. checkbox의 id를 정해주고 label 태그의 for attribute에 check box의 id를 적어주면 서로 연결되어 chec..

JS도 빨리 적용시켜보고 싶어서 이번에는 js를 이용해서 동적으로 값을 받아와 화면에 표시하는 간단한 웹을 만들었다. 저작권 없는 아이콘에 색까지 내 마음대로 지정할 수 있는 곳을 마땅히 찾지 못해서 이미지는 ppt에서 제공하는 아이콘으로 만들었다. 먼저 정적 웹 페이지를 만든 후 동적으로 만들었다. 저번까지는 다 만들었을 때 github에 올리는 식으로 했는데 기능 단위로 구현할 때마다 commit하는 게 좋다고 해서 이번에는 그렇게 해보았다. 처음에는 기능을 구현하기 위한 소스를 참고하기 위해 구글링을 하려는데 뭐라고 검색을 해야 될지도 몰랐다. 그래서 일단 이것저것 js이벤트 관련된 문서를 읽다가 DOM에 대한 이해가 먼저라고 판단해서 DOM에 대한 이해부터 다시 했다. 이후 데이터를 받아와 화면에..

엘리님의 영상을 참고해서 간단한 반응형 헤더를 제작해보았다. 참고영상 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube 무언가를 만들어서 게시글로 작성해보는 것은 처음인데 앞으로 일관성 있게 작성하기 위해서 글 안에 담는 내용을 통일시킬 생각이다. 글 안에 들어가는 내용은 1. 무엇을 만들었는가, 2. 구현 과정 중 무엇이 어려웠고 어떻게 해결할 수 있었는가, 3. 느낀점 이 3가지가 될 것 같다. 글을 처음 작성하는 거라 앞으로 어떻게 작성할지 더 알아보고 생각 해봐야겠다. 1. 결과물 일단 이 반응형 헤더를 구현하기 전에 내가 알고 있는 지식이 터무니 없이 부족했다. 알고 있는 건 html,css에 대한 얕은 지식, html을 ..

유튜브의 영상이 재생되는 페이지의 UI를 만들어보았다. 엘리님 영상을 보기 전에 먼저 만들어 보고 이후 영상을 보고 구현하지 못했던 부분을 마저 구현했다. 참고 영상 클론코딩 유튜브 사이트 따라 만들기(HTML+CSS 연습편, 웹 포트폴리오) | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube 1. 결과물 2. 구현 과정에서 어려웠던 점 및 해결 1. ⭐텍스트 라인 제어 .item{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 라인 제한 */ overflow: hidden; } 2. 아이템 중앙에 배치하는 방법 .item{ margin: 0 auto; /* top, botto..

스프링 강의 내용 총 정리 📌 강의를 보면서 적는 게 아니라 머리속에 있는 걸로 적는 것이기 때문에 잘못된 내용이 있을 수 있음. - 웹 페이지를 만드는 방식에는 3가지 방법이 있다. - 정적, MVC, API - 정적 방식은 그저 client의 요청이 들어오면 해당 html파일을 그대로 돌려준다. - MVC방식은 Model, View, Controller가 서로 상호작용하여 클라이언트로부터 요청받은 작업을 Model로 만들어 Controller를 통해 수행하고 이를 View를 거쳐 다시 클라이언트에게 전달된다. - API 방식은 client로부터 요청이 들어오면 Model을 만들 필요도 없고 html문서를 만들 필요도 없다. 그저 @ResponseBody가 붙은 메소드를 실행하여 return되는 값을 ..