Done today
- 어제공부 복습과 velog정리
- classList.add / remove / contains / toggle
- 바닐라자바스크립트 모멘텀 만들기
- step 1. clock
- step 2. getting and saving user name
- velog 기록 방향 고민과 TIL 쓰는 방법 탐구
New learning
1. 사소하지만 루틴화 하면 좋은 기본 습관
1-1. html / CSS / Javascript 항상 분리해서 코딩하기
( In-line 코딩은 최대한 쓰지 않는 것으로.)
- Javascript는 로직에 대한 부분을 넣을때만 사용
- 각각의 로직을 개별 js파일로 만들면 코드의 가독성이 높아짐
- CSS는 디자인 적용하는 용도로만 사용
- html은 웹페이지 기본 요소들 넣을때만 사용
1-2. 전체 함수를 모두 포함하는 기본 함수 선언, 사용으로 시작하기.
function init(){
// 이후 로직을 위해 추가하는 함수들 넣기
}
init()1-3. html에서 태그에 클래스나 아이디값을 추가할 때 js용을 따로 선언하기
(구분해서 사용하면 나중에 코드나 로직이 복잡해질 때 도움된다.)
<form class="js-form form">
<!--두개의 클래스 생성. form은 css를 위한 클래스-->
<input type="text" placeholder="What is your name?">
</form>
<h4 class="js-greetings greetings"></h4>
<!--두개의 클래스 생성. greetings는 css를 위한 클래스-->2. 시간 설정하기
function getTime() {
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();브라우저에 시간값을 띄워주는 객체 new Date ( )
참고링크: PoiemaWeb
3. 브라우저에 username 저장하기 : localStorage.setItem / getItem
자바스크립트의 정보들을 브라우저에 저장하는 방법으로, 저장된 데이터는 리로딩을 해도 정보를 그대로 기억하고 있다.
-
데이터 추가
localStorage.setItem('userName', 'Teo'); -
아이템 읽기
localStorage.getItem('userName')
웹사이트에 유저네임을 입력하는 창을 생성하고, 값이 입력되면 이 창을 제거 후 유저네임을 화면에 띄우는 로직을 구현할 수 있다.
그리고 리로딩했을때 유저네임이 계속 기억되도록 만드는 것을 이 로컬스토리지를 이용해서 한다.
function loadName() {
const currentUser = localStorage.getItem(USER_LS);
if (currentUser === null) {
// There is no one.
askForName();
} else {
// There she is.
paintGreeting(currentUser);
}
}localStorage의 현재유저이름을 USER_LS라는 변수에 입력.
현재 유저이름이 빈값이면 이름을 물어보는 폼을 삽입한다.
그렇지않고 유저네임이 있으면 현재유저이름을 띄운다.
function askForName() {
form.classList.add(SHOWING_CN);
addEventListener("submit", handleSubmit);
}이름 물어보는 함수는 css에 form의 디스플레이가 보이게 지정(block)한 클래스값을 지정해놓고 클래스를 삽입한다.
그리고 form에 전송이라는 이벤트를 실행하는 이벤트함수를 더해준다.
function handleSubmit(event) {
event.preventDefault();
const currentValue = input.value;
paintGreeting(currentValue);
saveName(currentValue);
}이벤트함수에 input에 대한 입력값 변수를 선언하고
이 값으로 유저이름을 저장, 환영문구를 띄우는 함수를 더한다.
function paintGreeting(text) {
greeting.classList.add(SHOWING_CN);
form.classList.remove(SHOWING_CN);
greeting.innerText = `Hello ${text}`;
}
function saveName(text) {
localStorage.setItem(USER_LS, text);
}Feelings & Thoughts
TIL 시작
프로그래밍 공부에 있어서 루틴처럼 만들어야 하는 것 중에 하나로 손꼽히는 기술블로그 관리. 기록이야 언제든 내가 투자한 시간과 노력을 증명할 수 있으니 도움이 되는 건 분명하겠지만 괜히 블로그 포스팅 한다고 시간만 너무 잡아먹을까봐 엄두가 나지 않아서 하지 않았다. (이런거 시작하면 처음에만 엄청 잘하려고 하다가 결국 지속 못함..😂 )
그러다 결국 개발 공부 시작한지 한 달만에 그 필요성이 느껴지기 시작해서 잘 만드려고 애쓰지말고 그냥 기록하는데에 의의를 두기로 결심했다. 요 근래 며칠동안 여러 플랫폼도 알아보고 다른 사람들 블로그도 많이 구경해보다가 이 velog에 정착하게 되었다. 일단 무료고, 다른 디자인적인 면에 신경쓸 일 없이 군더더기 없이 깔끔한 게 맘에 들었다.
다른 플랫폼에 비해 좀 쉽게 쓸 수 있어서 블로그 소기의 목표인 기록 그 자체에 비중을 둘 수 있는 것도 좋은 것 같고.
디자인이 예뻐서 마크다운 몇가지로 슥슥 쓰면 개똥같은 내용도 엄청 있어보인다는 장점이 꿀이다. 😇
근데 역시 우려했던 것이 현실로.
강의 하나 듣고 내용 정리 하는데만 두시간이 걸리는거 보고 이렇게 하는게 맞나 싶은 고민이 들기 시작했다. 물론 이제 시작했으니까 기록의 요령도 없고 남들이 봤을때도 이해할 수 있게 적겠다고 생각하니까 오히려 비효율의 끝판왕이 되어버렸다.
그래서 공부한 내용을 그대로 책처럼 옮겨적기보다는 해당 강의를 공부하고 배운 내용을 요점정리하듯이 적는 게 나에게 좀 더 효율적일 것 같다. 기록보다 중요한 건 결국 어쨌든 개발 자체에 집중하는것임을 잊지말쟈.
To-do tomorrow
- 복습 (내용 정리 읽고 상기 / 안보고 한줄 한줄 혼자 코딩 )
- 바닐라자바스크립트 모멘텀
- step 3. Todo list 만들기
- step 4. Image background
- step 5. Weather
- 컴퓨터 사이언스 책 알아보기
