ALL

[JS]2021-1107 localStorage - If 문으로 정보 저장 여부 확인

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. if 문으로 localStorage 정보 저장 여부 확인하기 브라우저에 정보 저장 여부로 표시되는 화면의 내용이 달라지게끔 만들고자 한다. 로그인 정보가 있다면, 로그인 화면 없이 바로 인삿말이 뜨도록, if 문을 활용해 만들 수 있다. const savedUsername = localStorage.getItem(USERNAME_KEY); //로컬 스토리지에 담긴 username을 변수로 선언한다. if(savedUsername === null) { //만약 로컬 스토리지에 담긴 username이 null값, 즉 없다면 loginForm.classList.remove(HIDDEN_CLASSNAME); //form의 hidden상..

[JS]2021-1107 localStorage - CSS,HTML 조작

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. JavaScript로 CSS 조작하기 - classList 활용 Log in 사용자가 이름을 입력하고 버튼을 클릭해 submit을 하는 동시에, 로그인 폼이 사라지고 인사말이 뜨도록 해야 한다. form과 h1 모두 hidden이라는 클래스를 주고, 아래와 같이 css를 작성해 주었다. .hidden { display: none; } classList를 사용해 html의 class를 추가, 삭제, 변경할 수 있다. 반복해서 사용되는 string의 경우, 철자 오류 방지를 위해 변수로 선언해주는 것이 바람직하다. const HIDDEN_CLASSNAME ="hidden"; function onLoginSubmit(event) { ..

[JS]2021-1107 localStorage로 사용자 정보 저장

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. localStorage 브라우저 상에 데이터를 저장할 수 있는 웹 스토리지 api로, key와 이에 대응하는 value를 가진다. localStorage는 key에 대응하는 value값 찾기 혹은 삭제하기 등 여러 method가 있는데, 예를 들어 localStorage.getItem("key"); 이런 식으로 사용하면, "key"라는 key값에 대응하는 value를 return 해주며, key와 value는 항상 string이다. 만약 해당하는 데이터가 없다면 null 값을 반환받는다. 참고로 Web Storage에는 localStorage와 sessionStorage 두 가지가 있다. localStorage는 웹페이지의 세션..

[JS]2021-1104 form태그, event.preventDefault()

nomadcoders VanilaJS #4.1~2. form 태그를 쓰는 이유 html태그로, 사용자로 부터 정보를 받아올 수 있는 다양한 기능을 제공한다. 로그인, 회원가입 등 사용자가 입력한 정보를 서버로 전달할 필요가 있을 때 사용! (로그인 기능 만들 때 왜 div 안에 넣지 말고 form에 input을 써야하는지 잘 몰랐었는데, 오늘 알게됨.) Log in 위와 같이 input 태그를 통해 간단한 유효성 검사를 할 수 있다. input 태그를 사용하지 않고, 이를 자바스크립트로 작성하면 아래와 같다. function onLoginSubmit() { const username = loginInput.value; if (username === "") { alert("Please write your ..

[TIL]2021-1019 (TUE)

오늘 한 일 자바스크립트 강의 수강 (https://friedegg556.tistory.com/24) JS에서 기본 함수를 호출하는 방법, 인자를 전달하는 방법 복습 return 개념에 대해서 공부 - 왜 쓰는지 몰랐는데 오늘 내용으로 확실히 알게됨 if 조건문 복습, 연산자의 활용 방법 항해 99 설명회에 참석했다. vs code 컬러 커스터마이징... https://glitchbone.github.io/vscode-base16-term/#/atelier-forest-light Base16 Terminal Colors for Visual Studio Code glitchbone.github.io 내일 할 일 정보처리기사 공부 ~ UI 스토리보드 자바스크립트 강의 ~ #3.5 수강 토이프로젝트 아이디어 ..

[JS]2021-1016 (노마드코더 VanilaJS #2.9~2.16)

[Object, Function 복습] const calculator = { add: function (a,b) { console.log(a+b); }, minus: function(a,b) { console.log(a-b); }, divide: function(a,b) { console.log(a/b); }, powerOf: function(a,b) { console.log(a**b); } } calculator.add(10,5); calculator.minus(10,5); calculator.divide(10,5); calculator.powerOf(10,5); [Return] return을 사용하는 이유 : 함수의 결과 값을 반환시켜 활용도를 높일 수 있다. const calculator = { a..

[TIL]2021-1018 (MON)

오늘 한 일 정보처리기사 공부 ~ 분석 모델 확인 2021-1016 ~ 18 공부내용 블로그 정리 티스토리 블로그 글 작성 양식 정리 목표 재설정 + 계획수립 w. Timestripe 내일 할 일 정보처리기사 공부 ~ UI 설계 자바스크립트 강의 ~ #2.16 수강 학습 내용 블로그 정리 오늘의 느낀점 시간관리 및 체력관리의 중요성을 뼈저리게 느끼고 있다. 가장 효율적인 학습과 성장을 위해 기존 목표를 재설정하고 그에 맞게 계획을 수립하기로 했다. Timestripe 이라는 생산성 툴을 알게 되었다. 일, 주, 월, 년, 인생 단위로 계획을 살펴볼 수 있음. 공부를 위한 공부X , 무언가를 만들어 봐야겠다.

[정처기]2021-1018 (분석 모델 확인)

2021 수제비 정보처리기사 필기 도서를 읽고 정리한 내용 입니다. 정보처리기사 1과목. 소프트웨어 설계 Chapter 01. 요구사항 확인 [3]. 분석 모델 확인 (1) 모델링 기법 1. 모델링 개념 : 실세계 물리현상을 특정한 목적에 대응, 이용이 쉬운 형식으로 표현하는 기법 2. 역할 소프트웨어 요구사항 분석의 핵심 모델 > 문제 상황에 대한 이해증진, 해결책 설명 개념모델 > 문제 도메인 Entity들과 관계/종속성 반영 Entity : 실체, 객체/ 데이터의 집합/ 저장, 관리대상 데이터/ 저장되기 위한 어떤 것(Thing) 3. 절차 : 요구사항 분석 > 개념 모델링 > 논리 모델링 > 물리 모델링 개념 모델링 : 업무 중심 포괄적 모델링 > 추상화/ 주제영역 ~ 핵심데이터간 관계정의 논리 ..

[JS]2021-1016 (노마드코더 VanilaJS #2.0~2.8)

[Data Type] 숫자 - interger (정수), flat 문자 - string Boolean : true(on) & false(off) (ex 로그인 여부, 비디오재생 여부, 로딩 여부 등..) null : nothing != flase (아무것도 없다는 것을 확실히 하기 위해 사용) undifined : 메모리 할당 O but 정의되지 않음 [Varialbes] 변수 : 값을 저장하거나 유지하는 역할 const : constant 상수. 변하지 않는 값. 업데이트/변경 x let : 업데이트 가능 기본적으로 const를 사용, 필요시 let을 사용 JS 변수명 관례 Camel Case [Array] 배열 : 데이터의 정리, 데이터로 이루어진 리스트 데이터에 접근 데이터의 추가 [대괄호] [Ob..

[정처기]2021-1016 (UML,애자일)

정보처리기사 1과목. 소프트웨어 설계 Chapter 01. 요구사항 확인 [2]. 요구사항 확인 4. UML 상세 1) 클래스 다이어그램 개념 : 클래스의 속성 및 연산과 클래스간의 정적(시간에 따라 변하지 않는) 관계 표현 클래스 : 객체를 정의하는 틀 또는 설계도/ 객체 상태 - field & 객체 행동 - method 참조 : https://gmlwjd9405.github.io/2018/07/04/class-diagram.html [UML] 클래스 다이어그램 작성법 - Heee's Development Blog Step by step goes a long way. gmlwjd9405.github.io 2) 유스케이스 다이어그램 - 동적 개념 : 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소..