하나씩 배워나가는 개발일지

이번 과제로는 JS를 이용한 사진 관리 웹사이트를 만들어보았다. 먼저 기본 화면을 봐보도록 하자. 로그인 화면 관리 시스템 화면 학생 정보 등록 화면 정보 입력 화면 정보 등록 완료 시 화면 학생 프로필 및 수정 화면 학생 정보 수정 화면 수정된 학생 정보 화면 선택 박스 체크 화면 선택한 객체 삭제 화면 학생 정보 부분 리스트(스크롤) 페이지 CSS를 이용한 애니매이션 화면 반응형 화면 [흐름] 다음과 같이 구성했다. 과제 기간은 약 10일로 지난 과제 기간보다 길었지만 생각없이 신청한 공모전, 교내 경진대회 등으로 시간을 다 날려먹어서 과제 할 시간이 약 4일정도밖에 없어서 요구한 필수 기능들만 구현을 했다. 파이어베이스의 파이어스토어 데이터베이스를 사용했고 웹페이지에서 등록하면 해당 객체 정보가 파..

지난 과제로 당근마켓 메인페이지를 만들어보았다. 멘토님께서 다음과 같이 리뷰를 해주셨는데, 내가 만든 웹사이트는 크게 어려운 기능이 없었어서, 코멘트가 따로 필요 없었던 것 같다. 그래서, 이번 리팩토링 시간에 지난 번에 구현하고 싶었는데 못했던 부분인 '반응형 웹사이트'를 만들어보고자 한다. 이게 당근마켓 메인페이지인데, 화면을 일정 크기 이상 줄이면 먼저 서치바가 없어지고 서치 아이콘이 생기고 거기서 더 크기가 줄어들면 리스트들이 없어지고 채팅하기 버튼이 없어지고 메뉴 아이콘이 생긴다. 먼저, 서치바 아이콘과 메뉴 아이콘을 일단 html 코드에 순서대로 넣어주고 화면이 클 때는 "display: 'none'" 으로 안보이게 속성값을 지정해주었다. 채팅하기 그리고 css에서 미디어 쿼리를 사용해 화면 ..

첫 번째 과제로 'HTML/CSS를 이용한 웹사이트 메인페이지 클론코딩'을 진행했다. JS 사용은 권장이었고 필수사항은 HTML과 CSS를 이용해서 메인페이지를 만드는 것이었다. 나는 당근마켓 웹사이트를 만들었고 그 과정에서 알게 된 사실과 어려웠던 점을 적어보려 한다. 내가 만든 웹사이트는 https://aquamarine-mousse-e4a8fd.netlify.app/ 이 주소에서 확인할 수 있다. 나는 수업에서 배운대로 우선 header, main, footer로 영역을 나눠서 개발을 진행했다. header 부분부터 살펴보자. 당근마켓 메인페이지의 헤더는 다음과 같이 구현되어있다. 왼쪽 섹션에는 로고가, 가운데 섹션에는 리스트들이, 오른쪽 섹션에는 서치바와 채팅버튼이 있다. 따라서 나는 header..

6장에서는 표준 내장 객체에 대해 배웠다. Ch06 표준 내장 객체 문자 - .includes() 대상 문자에 주어진 문자가 포함되어있는지 확인 소괄호 안에 콤마(,)로 구분해 뒤에 숫자를 넣어주면 해당하는 인덱스부터 검사 console.log(str.includes('Hello')) // true console.log(str.includes('hello')) // false - 대소문자 구별 // 0번째 지점부터 주어진 문자가 들어있는지 판단 console.log(str.includes('Hello', 0)) // true console.log(str.includes('Hello', 1)) // false(e부터 검사하므로) 문자 - .indexOf() 대상 문자에서 주어진 문자와 일치하는 첫 번째 인..

5장에서는 클래스 개념에 대해 배웠다. 정리를 시작해보자 Ch05 - 클래스 prototype 배열 리터럴: 기호를 통해 생성 const fruits = ["apple", "banana", "cherry"] 기호를 사용한 리터럴 방식: [](배열데이터), {}(객체데이터), ''(문자데이터) new 키워드로 실행하는 함수: 생성자 함수 - 인스턴스 length, includes - prototype 메소드(속성) const fruits = new Array("apple", "banana", "cherry") console.log(fruits) console.log(fruits.length) console.log(fruits.includes("banana")) // true console.log(fruit..

Ch04에서는 JS 함수에 대해 배웠다. JS를 4년전에 잠깐 배우고 손을 놨어서 좀 꼼꼼히 공부하는 중인데 함수 파트도 열심히 복습할 예정이다. Ch04 - 함수 함수를 선언하는 방법 함수를 선언하는 방법으로는 함수 선언문과 함수 표현식이 있다. // 함수 선언문 function hello() { } // 함수 표현식 const hello = function () { } 함수 선언문의 경우 선언이 호출보다 아래 적혀있어도 에러 없이 잘 동작함 이를 '호이스팅'이라 함(함수 표현식에서는 불가능!) hello2() function hello2() { console.log("hi!") } 반환 및 종료 return 키워드는 데이터 반환 뿐 아니라 함수 동작 멈충 기능 제공(return 다음에 코드써도 동작 ..

2주차 온라인 강의에서는 JS 연산자와 구문, 함수, 표준 내장 객체에 대해 배웠다. Ch03 - 연산자와 구문 할당, 증감연산자 // 할당(Assignment) // const: 재할당 x, let: 재할당 o // const a4 = 3 // a4 = a + 2 let a4 = 3 a4 += 2 console.log(a4) // 증감연산자(Increment * Decrement) let a5 = 3 let a6 = 6 let a7 = 9 console.log(a5++) // 3 console.log(a5) // 4 console.log(++a6) // 7 console.log(a6) // 7 console.log(--a7) // 8 a7 -= 1 console.log(a7) // 7 비교 연산자 co..

JS 기초에 대해 배웠다. 헷갈리는 개념 위주로 정리를 하려한다. defer HTML의 바디 부분에 존재하는 태그를 자바스크립트를 통해 사용하려면 main.js가 html 구조를 다 해석한 뒤에 동작하도록 만들어야하는데 이때 사용하는 속성 String, Number const string1 = "Hello" const string2 = 'Hello' // 백틱(`): 보관용도(데이터 넣기)로 사용 // 템플릿 리터럴: 기호를 통해 데이터를 만드는 방식(백틱을 통해 문자데이터를 만드는 것) const string3 = `Hello ${string1} ?!` // 부동소수점 오류 const a = 0.1 const b = 0.2 console.log(a+b) // 0.300...4 // toFixed(a):..

마크다운(markdown) 사용법에 대해 배웠다. 제목(header) #, ##, ###, ####, #####, ######를 사용해서 나타낼 수 있고 # 개수가 많아질수록 글씨 크기가 작아진다. 줄바꿈(Line Breaks) 태그를 사용 강조(Emphasis) 기울이기: _글씨_ 두껍게: **글씨** 취소선: ~~글씨~~ 밑줄: 글씨 목록(List) 1. 순서가 필요한 목록1 1. 순서가 필요한 목록2 1. 순서가 필요한 목록3 1. 순서가 필요한 목록3-1 1.순서가 필요한 목록3-2 1. 순서가 필요한 목록4 이렇게 다 1로 작성해도, 1. 순서가 필요한 목록1 2. 순서가 필요한 목록2 3. 순서가 필요한 목록3 3-1. 순서가 필요한 목록3-1 3-2. 순서가 필요한 목록3-2 4. 순서가 필..

23/07/17 실시간 강의 오늘은 웹 기초(HTML, CSS, JS)에 대해 간단히 배웠다. 배운 내용을 까먹지않게 정리해보자. HTML이란? - 웹을 이루는 가장 기초적인 구성 요소 - 웹 페이지를 만들기 위해 필요한 표준 마크업 언어 HTML 구성요소 요소(Element): 내용 - 태그 웹 문서를 구성하는 명령어 꺽새 안에 들어있는 정보 정의 종료 태그가 없는 , 과 같은 태그도 존재 -요소 시작태그, 종료태그, 그 사이의 내용으로 구성 블록 요소: h1~h6, div, list, p...시맨틱 태그 다른 블록 요소 포함 가능 인라인 요소 포함 가능 블록 요소 이후 블록 요소 사용하면 아래줄에 나타남 margin, padding값 가질 수 있음 인라인 요소: a, span, strong... 블록..