TIL

오늘부터 일주일 동안 프로그래머스의 프론트엔드 채용 과제였던 '고양이 사진 검색 사이트' 해설 강의가 진행된다 이번 강의를 통해서 바닐라 자바스크립트만을 이용해서 새로운 기능을 구현해 과제의 요구사항을 충족시켜보면서 프론트엔드 개발 역량을 기를 수 있을 것이라 생각한다 과제 해설 강의를 들으며 중요한 내용, 에러 발생, 어려운 부분 등을 기록해두려고 한다 이번주도 화이팅! # 미션 1 # 반응형 웹 유저가 사용하는 디바이스의 가로 길이에 따라 검색 결과의 row 당 column 갯수 변경 992 px 이하 : 3개 768px 이하 : 2개 576px 이하 : 1개 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘리기 미디어 쿼리 사용 @media screen and (m..

프로그래머스 프론트엔드 데브코스 과정인 클라우딩 어플리케이션 엔지니어링 교육을 시작한지 한달이 되었다 OT에서 데브코스의 진행 방식에 대한 설명을 들은게 며칠 전 같은데 벌써 한달이 지났다니 시간이 참 빠르다 처음 한달동안은 HTML, CSS, Javascript 의 기본 문법과 실습이 진행되었다 알고 있던 내용을 복습하기도 하고, 잘 모르던 개념에 대해서 배우기도 하면서 기본 개념을 쌓을 수 있는 시간이었다 한달 간의 과정을 되돌아보면서 1차 회고를 적어보고자 한다 # 프로그래머스 데브코스 1차 회고 # 데브코스 시작 프로그래머스 스쿨 페이지에 들어가자마자 보이는 나의 프로필이다 코린이 탈출을 위해서 한 걸음씩 나아가는 중이다 앞으로 121 일 정도 남았다! 이 시간도 금방 가겠지? # 나름 열심히 한..

가계부 서비스의 기능을 추가로 구현하는 날이다 유저가 가계부 서비스를 이용하면서 자산을 입력하고 소비 내역을 등록하는 등의 필수 기능들을 구현하면서 가계부 서비스를 완성시켜보는 시간이다 강의 실습을 잘 따라하면서 열심히 해봐야지! # 가계부 서비스 기능 개발하기 # 작업 정리 # User Story 현재 자산이 입력되어있지 않은 경우, 자산을 입력할 수 있다 현재 자산이 입력되어 있는 경우, 자산을 새로 입력할 수 없다 현재 자산은 0원 이상 입력해야 한다 현재 자산을 입력해야 소비내역을 입력할 수 있다 # User Action # Load 최초 진입 1. 현재 자산 금액을 조회한다 : 로딩 -> 성공 / 실패 (성공 / 실패 모두 feedback을 주어야 한다) 2. 현재 자산의 존재 여부를 확인한다 ..

지난 시간에는 서비스의 요구사항을 분석하고 실습 환경을 세팅했다면 이번 시간부터 본격적으로 가계부 서비스를 구현한다 주요 기능을 구현하면서 프론트엔드 개발자로써 역량을 기를 수 있도록 열심히 강의를 따라가야겠다 # 가계부 구현하기 지금까지 배운 개념들을 활용해서 가계부 서비스에 적용해본다 복습하는 차원에서 배운 개념 중 가계부 서비스에 구현한 개념들을 다시 한번 정리해보도록 하겠다 # 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..