It's going to be one day 🍀

안녕하세요! 매일 매일 공부하려고 노력하는 백엔드 개발자 지망생의 공부 흔적입니다.

분류 전체보기 134

[FE] 개인 프로젝트 2일차

오늘은 개인 프로젝트 2일차 되는 날이다. 오늘은 하루종일 프로젝트를 진행했다. 나머지 html, css, 글씨체 설정까지 다 하고 카카오 API로 지도 넣고 modal 창이랑 modal js 구현까지 완성했다! 오늘 엄청 크게 깨우친 점이 있다. 바로 내가 내 노트북 화면에 억지로 맞춰서 하고 있었다는 것.. 그래서 피그마보다 내 요소들이 더 간격이 좁고 이상했던 것이다.. 크롬으로 하다가 엣지로 켜봤는데 브라우저마다 요소의 배치가 너무 달라지길래 이렇게 제출하면 안될 것 같은데? 하고 이리저리 봤더니 중앙 정렬도 안하고 margin으로만 무식하게 밀어넣고 있었다...... 대체 왜 그랬을까? 내가 보는 화면만 맞으면 된다고 생각한 이상하고 무식한 방법이었다.. 이걸 이제서야 깨닫다니.. 당장 중앙정렬..

[FE] 개인 프로젝트 1일차

오늘부터 개인 프로젝트 기간이다! 오전엔 프로젝트 기능 구현에 필요한 무한 스크롤 기능 수업 듣고 못 끝냈던 과제를 강의와 함께 다시 풀어보면서 완성시켰다! 사실 js로 기능 구현이 잘 안되서 (엄청 간단한 문제같은데 몇시간 내내 이유를 모르겠다..) html css만 완성된 상태이다. https://github.com/drinkgalaxy/html-css GitHub - drinkgalaxy/html-css Contribute to drinkgalaxy/html-css development by creating an account on GitHub. github.com -> 이번 과제는 1만 시간의 법칙 클론코딩 (final_task 이름으로 올려뒀다.) 오늘부터 공식적으로 프로젝트 진행해야해서 과제는..

[JS] DOM

[공부 내용 정리] DOM (Document Object Model) - 브라우저에서 제공하는 API - API : Application Programming Interface. 한마디로 '설명서' DOM API란? - HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 함. - 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node) 라고 함. - 결국 DOM은 수많은 노드들의 집합임. DOM 트리에 접근 - document 객체를 통해 HTML 문서에 접근함. - document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할. // 해당하는 Id를 가진 요소에 접근하기 document.getElementById(); // 해당하..

Front-End/JS 2024.01.15

[JS] 객체지향 프로그래밍

[공부 내용 정리] 객체지향 프로그래밍이란? 프로그램을 작성할 때 객체들을 만들어 서로 소통하도록 하는 방법. 객체 지향의 객체 : 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것. 추상화란? : 필요한 최소한의 정보로 대상을 표현하는 것을 의미함. 만약 나를 추상적인 객체로 표현한다면? const me = { name : '이현진', address : '제주도 제주귤 돌하르방로', phoneNum : '010-0000-0000', canWalk : function(){ console.log('현진이가 걷는다.'); } } 또한 객체는 행동과 상태를 가짐. 행동 : 메소드, 상태 : 프로퍼티 ex1) (me)객체에 새로운 능력(teaching)을 부여함. const me = { name : ..

Front-End/JS 2024.01.15

[JS] This

[공부 내용 정리] this는 객체를 가리키는 참조 변수임. this는 호출되는 위치에 따라 다른 값을 출력함! 어떤 객체의 메소드가 아닌 단독 호출되는 함수의 this는 전역공간을 참조함. window 객체 : 브라우저 환경의 전역공간. Node.js 환경에서의 전역공간은 global이라는 이름을 가짐. ex) 아래 예제에서 this는 위의 경우에는 window, 아래의 경우에는 myObjd function a(){ console.log(this) } a(); // 함수가 전역공간. 즉 윈도우 공간에 있기 때문에 window라고 출력 let myObj = { val1: 100, func1: function () { console.log(this); } } myObj.func1(); // 함수가 myOb..

Front-End/JS 2024.01.12

[JS] Type(배열, 객체)

* 프로퍼티란? : 키-값 쌍 * method란? : 객체의 프로퍼티에 함수가 할당될 때 그 함수를 method라고 함. [공부 내용 정리] Type JS의 타입은 한국말로 자료형으로 해석되기도 함. 변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해서 사용함. 원시타입 : 단순한 데이터를 저장. 참조타입 : 객체로서 저장. 원시타입(Primitive Types) 값이 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 함. → 이런 원시타입 값을 변수에 저장할 때는 값이 복사되어 저장된다. → 원본 데이터를 넣는게 아니고 복제품을 집어넣는 것임. let str1 = 'hello'; let str2 = str1; console.log(str2); // 'hello' str1 = 'wor..

Front-End/JS 2024.01.12

[JS] for문/while문

❗기억할 내용❗ JavaScript에선 (Python에서의 f문자열을) ‘${i}’ 이렇게 사용함! 기억해두기 JavaScript에선 ==(동등 연산자. 자료형이 다를 경우 자동으로 형 변환 후 비교) ===(일치 연산자 또는 엄격한 동등 연산자. 값과 자료형이 모두 동일한지 비교) [공부 내용 정리] 반복문 text = text + cars[0]; // 아래는 축약식! 잘 알아두기 test += cars[0]; 반복문을 사용하면 단순한 작업을 여러번 반복해야 할때 사용함. for(초기화식; 조건식; 증감식) { 실행문; } 초기화식 : 변수를 선언함. 조건식 : 결과(true or false)에 따라 실행문의 실행 여부를 판단함. 증감식 : 실행문 이후 변수의 증감을 나타냄. const cars2 = ..

Front-End/JS 2024.01.11

[JS] 변수/함수/조건문

[공부 내용 정리] JavaScript란? 동적인 웹을 만들기 위한 언어 HTML, CSS를 프로그래밍적으로 제어할 수 있음. 웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍 언어. (였지만 몇 년 전 웹어셈블리가 새롭게 등장) 요즘은 브라우저가 아닌 환경에서도 자바스크립트를 실행 할 수 있게 되면서 게임프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰여지고 있음. 동적인 웹을 위해 자바스크립트가 하는 것 데이터를 저장하다 저장 공간 : var , let , const 저장할 값의 형태 : 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체 코드의 뭉치 : 함수 값을 계산하다 사칙연산 논리연산 조건문 반복문 자료형의 내장함수 결과를 반영하다 ..

Front-End/JS 2024.01.10