전체 글

지난 시간에는 서비스의 요구사항을 분석하고 실습 환경을 세팅했다면 이번 시간부터 본격적으로 가계부 서비스를 구현한다 주요 기능을 구현하면서 프론트엔드 개발자로써 역량을 기를 수 있도록 열심히 강의를 따라가야겠다 # 가계부 구현하기 지금까지 배운 개념들을 활용해서 가계부 서비스에 적용해본다 복습하는 차원에서 배운 개념 중 가계부 서비스에 구현한 개념들을 다시 한번 정리해보도록 하겠다 # toLocaleString 숫자, 날짜 시간 등을 현재 사용자의 로컬에 맞게 형식화하는 데 사용 내장 객체인 Number, Date, Array 등에서 사용 toLocaleString 적용 전(Numbe 객체) $currentAssetValue.textContent = store.currentFunds ?? "-"; toL..

이번 강의부터는 실제로 서비스를 만들어본다! 유저와 서비스 간의 Interaction을 위해서 어떤 개념을 알아야 하며, 그 이외에도 서비스를 잘 관리하는 법을 배우게 된다 가계부 서비스를 구현하며 요구사항을 분석하고 User Flow도 정리해보며 지금까지 배운 개념을 실제로 적용해보고 총정리할 수 있는 시간이 될 것이다 단순히 이론을 아는 것에서 그치지 않고 실제 서비스를 만들어보면서 개발 역량을 기를 수 있도록 하겠다! 이번 강의는 서비스의 기본 요구사항 분석부터 프로젝트 세팅하는 방법을 다룬다 # 가계부 구현하기 실습 # 가계부 서비스 소개 소비 내역을 관리하여 나의 자산 현황을 파악하고 이전 기록을 확인하기 위한 서비스를 구현한다 # 서비스 요구사항 분석 # main 컨셉 현재 자산을 관리할 수 ..

# 객체 # 문자열 문자열 내에 이스케이프 문자 사용 가능 줄바꿈 문장 표현 가능 -> 이스케이프 문자(\n), 템플릿 리터럴(백틱 `) 데이터 보관시 문자열 형태로 저장 유용 -> 텍스트 형태, 객체 형태(JSON.stringify) # 문자열 조작 ▶문자열 요소 접근 charAt 유사 배열이라 배열처럼 접근 const aaa = "가나다라마바사"; console.log(aaa.charAt(3)); //라 console.log(aaa[3]) //라 ▶ 문자열 비교 알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단 //알파벳 순서로 크기 비교 const abc = "abc"; const def = "def"; console.log(abc < def); //true 변수 또는 객체의 속성이 문자열을 가지..

# 객체 # 객체란? 속성을 가진 독립적인 개체 -> 객체는 속성으로 구성된 집합이다 자바스크립트는 객체 기반의 프로그래밍 언어 -> 자바스크립트를 구성하는 대부분이 객체 const 객체명 = { "속성" : 값, "속성2" : 값 } # 객체의 속성 Property 속성은 키와 값 사이의 연결관계 -> key-value Javascript의 변수와 유사한데, 객체에 속해있다 ▶마침표 표기법 : objectName.propertyName ▶대괄호 표기법 : objectName["propertyName"] 속성에는 값 뿐만 아니라 함수도 할당 가능하다 method : 다른 함수와 동일하게 정의하지만 객체 속성에 할당되어있다 const 객체 = { //익명함수로 속성값을 정의한다 속성: function ()..

본격적으로 자바스크립트의 기본 문법 내용을 배우는 날이다 자바스크립트의 특징을 완벽하게 이해할 수 있도록 열심히 공부해야겠다 # 데이터와 형태 # 변수란? 데이터를 처리하는 과정에서 처리 흐름마다 값들을 기억해두어야 한다 컴퓨터는 데이터를 기억하기 위해 메모리를 활용한다 메모리 주소값을 대신할 식별자를 지정하고 식별자를 통해서 데이터를 접근하는데 식별자가 변수이다 변수란 데이터를 담아둔 메모리의 주소를 쉽게 식별하기 위해 붙인 이름 # 변수 생성 방법과 호이스팅 변수는 1. 선언 단계 : 변수를 변수 객체에 등록 2. 초기화 단계 : 변수를 메모리에 할당하고 undefined로 초기화 3. 할당 단계 : undefined로 초기화된 변수에 실제로 값을 할 를 거쳐 생성된다 변수 생성 3단계는 var, c..

# flow control 컴퓨터의 기본 동작을 생각해보자 사용자는 컴퓨터에게 명령하고, 컴퓨터는 이를 수행한다 => 개발자는 컴퓨터에게 무언가 명령하고, 컴퓨터는 이를 수행한다 => 특정 trigger로 시작되어 종료되기 까지의 흐름이 존재한다 => 컴퓨터는 이 흐름을 상황별로 제어해야 한다 # flow control 이란? 제어흐름, 흐름제어 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서 goto : 다른 구문에서 시작, 권장 X choice : If-else, switch loop : Collection loop, General loop continue : Loop continuation break : Loop early exit, 함수 실행 정지 # 표현식과 문의..

오늘은 자바스크립트의 데이터 처리에 대해서 배우는 날이다 기본 개념 및 flow control에 대한 내용이다 자바스크립트의 문법이 부족했던 만큼 더 열심히 듣고 공부해야겠다! # 연산자 연산자란? 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만드는 것 # 단항 연산자 하나의 피연산자만 사용하는 연산 - void : 표현식 평가 시 값 반환하지 않도록 지정 - typeof : 평가 전의 피연산자 타입을 나타내는 문자열을 반환 - delete : 객체의 속성 삭제 # 산술 연산자 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자값을 반환 - ++, --, +, - - 전위 증가감소 연산자 : 피연산자 앞에 위치, ++피연산자, --피연산자 - 후위 증가감소 연산자 : 피연산자 뒤에 위치..

HTML과 CSS 강의가 끝나고 Javascript 강의가 시작되는 날이다! 이번 강의를 통해 Javascript 역량을 확실하게 향상 시키는 것이 목표이다 JS 첫 강의이기 때문에 오늘은 왜 JS를 공부해야 하는지, 강의 목표는 무엇인지, 실습 환경 세팅 등과 같은 기본적인 내용으로 강의가 진행된다 # 강의 목표와 커리큘럼 왜 Javascript를 사용할까? 유저의 pain point 해결하기 위해 -> 서비스를 만든다 서비스를 만들기 위해 -> 웹 개발을 배운다 웹을 개발하기 위해 -> JS를 배운다 # 브라우저의 개발자 도구 Elements : 로드된 파일의 소스 확인 Console : JS 실행 Source : 현재 브라우저 로드 모든 소스 확인 Network : 네트워크 통신 발생 시 로그 확인..