나의 개발일지

자바스크립트가 끝나고 오늘 첫 리액트 수업이었다! CRA를 통해 기초 파일들이 자동으로 세팅되는 게 너무 신기해서 저절로 박수가 나왔다. 튜터님도 첫 세팅을 축하한다고 말씀하셨다ㅋㅋㅋ 우선 오늘 TIL의 내용은 리액트를 다루면서 주의해야 할 점들과 개념들 위주로 작성할 예정이다 1. React에서 자주 사용되는 ES6 필수 문법 (1)Object 선언, 단축 속성, 객체 복사 - 가장 중요한 것은 object는 key-value pair !!! // 객체 선언 방법 const person = { name: "희원", age: 26, MBTI: "isfj", // dosomething: () => {} // 함수도 value값이 될 수 있다 }; // 생략해서 표현하는 방법 const name = "희원"..

개인과제는 물론 팀과제 때에도 fetch라는 함수를 그냥 썼지, 분석하고 공부하고 쓴 것이 아니라서 오늘 전반적인 내용을 이해하고 과제에는 쓰지 않았던 await을 공부하며 TIL을 작성할 계획이다. 우선 비동기 처리라는 의미를 알아보자 비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 만약 무수히 많은 데이터를 요청했을 때, 그 서버에서 언제 응답을 줄지도 모르는데 마냥 기다리기만 한다면 실행하고 기다리고, 실행하고 기다리는 것이 반복되고 이것은 시간이 오래 걸릴 수 밖에 없는 비효율적인 구조가 된다. 그래서 비동기 처리가 필요하다! 자바스크립트에서 fetch는 리소스를 비동기 요청을 할 수 있다. 주로 API를 호출하고..

집중이 되지 않는 날엔 일기쓰기! 무기력하면 회피하는 나.. 고쳐야 하는데 잘 고쳐지지 않는다 ㅋㅋㅋ 배도 아프고 집중도 되지 않으니까 일단 공부 중단하고 책을 읽어봐야겠다 너무나도 유명한 '모순' !! 사놓고 아껴두느라 못 읽었었다 나 따라서 산 친구가 먼저 읽었는데 재밌다고 해서 기대 중 ㅎㅎ 내일은 팀과제 마지막 날이다 다 같이 힘을 합쳐 마지막까지 잘 마무리 했으면 좋겠다 그리고 이제 다음 주부터 리액트 수업 들어가는데 얼마나 어려울까?ㅎㅎ 벌써부터 기대된다 그렇지만 심적으로 도움을 주는 친구들과 친절하신 튜터님들이 계시니까 무너질 수 없다아~ 파이팅하자!! 우리 아픈 블랙이 얼른 수술해서 건강하게 살았으면 좋겠다 눈물이 앞을 가리니까 이제 그만 쓰고 책 읽으러 가야지

map() 함수 배열을 순회하면 지정된 콜백 함수를 적용하여 각 요소를 변환하고, 그 변환된 값을 모아서 새로운 배열로 반환하는 역할을 수행한다. // 각 숫자를 2배로 만들어 새로운 배열 생성 const numbers = [1, 2, 3, 4, 5]; const doubleNumbers = numbers.map(function (num) { return num * 2; }); console.log(doubleNumbers); // 각 숫자의 제곱 값을 가지는 새로운 배열 생성 const numbers1 = [1, 2, 3, 4, 5]; const squaredNumbers = numbers1.map(function (number) { return number * number; }); console.lo..

팀프로젝트 진행 중, 메인페이지에서 상세페이지로 넘어갈 때 객체를 불러오는 것까지는 구현했다(물론 튜터님의 도움을 받아서 ^^) 하지만 화면에 정보가 뜨지 않고 콘솔창에 오류가 발생했다고 떠서 역시나 도움을 청했다 작성된 코드 ▼ const selectedMoive = results.filter((item) => { if (item.id == clickId) { return true; } else { return false; } console.log(item.id); }); console.log(selectedMoive); const card = document.createElement("div"); card.classList.add("movieBox"); card.innerHTML = ` ${title..

과제하느냐고 예제를 많이 풀지 못했다 그래서 그냥 오늘의 일기를 쓰는 중 팀 프로젝트 너무 어렵다 0.5인분이라도 해보고 싶은데 잘 되지 않는다ㅠㅠ 혼자할 수 있는 게 아무것도 없다^^ 오늘도 튜터님들과 에이스 팀원분의 도움을 받아버렸다~ 서치를 해도 응용할 수 없는 게 나의 한계다.... 즉, 베이직반 신청을 해야한다는 뜻^^ 베이직반 가즈아

// 1. 다음 배열에서 5보다 큰 숫자만 출력하세요. const arr = [1, 4, 2, 3, 10, 15, 0]; const result1 = arr.filter(function(val){ return val > 5; }) console.log(result1) // 2. 다음 배열의 모든 값을 출력하세요 const arr01 = [1, 2, 3, 4, 5]; for(let a = 0; a < arr.length; a++) { console.log(arr01[a]); } //foreach문을 쓴 버전!! const arr1 = [1, 2, 3, 4, 5]; arr1.forEach(function(val){ console.log(val); }) // 3-1. 값과 인덱스값 출력하기 const arr0..

// [요구사항] // 아래 함수 multiply는 두 인자를 받아 곱한 값을 반환합니다. 해당 함수를 완성하십시오. // [코드] function multiply(a, b) { return a * b; } console.log(multiply(2, 3)); // [테스트] // multiply(2, 3)은 6을 반환해야 합니다. // ----------------------------------------------------- // [요구사항] // 주어진 숫자 배열의 모든 요소를 더하는 함수 sumArray를 작성하세요. // [코드] const numbers = [1, 2, 3, 4, 5]; function sumArray(total, number) { return total + number; }..

입력 요소 값 읽기 , 처럼 사용자로부터 입력을 받는데 사용되는 요소들이 있는데 여기서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근한다. 차이점 * 요소의 텍스트에 접근하고 싶다면 --> textContent 또는 innerText * 사용자가 요소에 입력한 값에 접근하고 싶다면 --> value 입력 요소의 value에 접근하여 할 수 있는 것은 크게 두 가지이다 // 읽기 // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력 console.log(target.value) // 쓰기 // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸기 targer.value = "변경값" 클릭이벤트 발생 시 입력값 출력 const textInput = document.getElementById("..

addEventListener onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는것보다 현대적인 방법은 addEventListener 메소드를 이용하는 것!! 예시) //원래 사용하던 방식 Target.onclick = function() {} // addEventListener의 방식 Target.addEventListener('click', function(){}) 이벤트 객체 추가적인 기능과 정보의 제공을 위해 이벤트핸들러에 자동으로 전달된다. 이벤트핸들러 함수에매개변수를 추가하여이벤트 발생 시마다 전달받을 수 있도록 해야한다. //click 이벤트가 발생하면 함수를 호출 Target.addEventListener('click', function(){}) //cl..

appendChild DOM 내 개별요소('노드'라고도 함)에 자식 요소를 추가할 때 사용하는 메소드 요소 생성 document.createElement('p')

event : 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 웹에서 발생하는 이벤트 예 : 웹페이지 사용자가 버튼을 클릭했다 --> 클릭 이벤트 웹페이지 사용자가 키보드를 눌렀다 --> 키다운 이벤트 웹페이지 사용자가 입력 폼의 내용을 제출했다 --> 제출 이벤트 event handler 각각의 이벤트들은 이벤트 핸들러를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다 --> event handler register : 이벤트가 발생하면, 이 함수를 호출해라! 구문 기본 형태 이벤트가 발생할 수 있는 (혹은 발생할 예정안) 타켓을 선택하고 이벤트 핸..

특징 브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다. 즉, window.document는 현재 브라우저에 랜더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다 window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다 이를 이용하면 페이지의 정보를 얻고나 웹 요소를 생성 및 조작할 수 있다. window는 브라우저 탭에 존재하는 js 전역 최상위 객체! --> 어디서든 접근이 가능하다 window 객체 안에는 document 객체가 존재, document 에는 잠재적으로 보여질 수 있는 dom에 대한 정보가 저장돼있다. document 객체는 window.document 혹은 document로..

조건문 for : 구문 작성 시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문이다. for ( 초기식; 조건식; 반복식) { 조건이 true인 경우 반복 수행할 코드 } 초기식 : 반복 조건의 초기화 작업 반복식 : 반복이 끝날 때마다 실행될 작업 //for문 for(let i = 1; i

조건문 : 특정 조건을 만족하는 경우에만 코드 실행 1. if / else if / else / if 중첩문 // if문 let x = 10; if (x > 0) { console.log("x는 양수입니다.") } //----------------------------------------------- //if-else문 let a = 5; if (x > 0) { console.log("a는 양수입니다.") } else { console.log("a는 음수입니다.") } let number = 5; if (number == 3) { console.log("일치합니다.") } else { console.log("일치하지 않습니다.") } // 짝수인지 홀수인지 구분하여 메세지 출력 let num = 4; ..

1. 함수 정의하기 // 1-1. 함수 선언식 : 익명함수를 만들 수 없음. function add(x, y) { // add라는 함수 선언 return x + y; } console.log(add(2, 3)); // 5 function 함수명 ( ) {실행할 문장} function 함수명 (매개변수1, 매개변수2 ... ) {실행할 문장} // 1-2. 함수 표현식 : 익명함수를 어떤 변수에 할당하는 건 함수를 선언한다고 하지 않고, 함수를 표현한다고 한다. let add = function(x, y) { // add 라는 변수에 함수 할당, 익명 함수(이름이 없는) 생성 가능 return x + y; // 익명함수를 선언함과 동시에 add라는 변수에 할당 } console.log(add(2, 3));..

1. 산술연산자 // 1-1. 더하기 연산자 console.log(2 + 3); // 5 console.log("2" + "3"); // "23" console.log("2" + 3); // "23" console.log(2 + "3"); // "23" // --> 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환한다 // 1-2. 빼기 연산자 console.log(5 - 2); // 3 console.log("5" - "2"); // 3 console.log("5" - 2); // 3 console.log(5 - "2"); // 3 console.log("five" - 2); // NaN // --> 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다 // 1-3. 곱하기 연산자(*)..

데이터 타입 runtime : run 하는 time !! 코드를 작성할 때가 아니라, 실제 코드가 실행될 때 (터미널에서 코드가 실행될 때!) 그 때 데이터 타입이 결정된다 // 1. 숫자 // 1-1. 정수 let num1 = 10; console.log(num1); console.log(typeof num1); // 'typeof' 값의 타입을 알아볼 때 쓴다 PS C:\Users\gmldn\OneDrive\바탕 화면\WEEK_1> node 02.js 10 PS C:\Users\gmldn\OneDrive\바탕 화면\WEEK_1> node 02.js 10 number // 10은 숫자 let num1 = "10"; // ""안에는 문자로 인식 console.log(typeof num1); PS C:\U..

변수의 5가지 주요 개념 1. 변수 이름 : 저장된 값의 고유 이름 2. 변수 값 : 변수에 저장된 값 3. 변수 할당 : 변수에 값을 저장하는 행위 4. 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 5. 변수 참조 : 변수에 할당된 값을 읽어오는 것 var (변수명) = (값 할당); (let, const) 변수 : var, let 상수 : const var myVar = "Hello World"; console.log(myVar); //var myVar1; //myVar = 3; //위의 var 변수와 같은 식이다 let myLet = "Hello World1"; console.log(myLet); const myConst = "Hello World2"; console.log(myCons..

z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며 위치 지정 요소에 대해 적용할 수 있는 속성이다 동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 된다 z-index의 기본값은 auto! auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다 * 각 속성마다 상속이 되는 것과 상속이 되지 않는 것이 있다 상속이 되는 속성 : color, font-family, font-size, font-weight, text-align, cursor 등 상속이 되지 않는 속성 : background-color, background-image, background-repeat, border, display 등 * 공용키워드 모든 css 속성에 사용 가능한 키워드가 있다. 전역값이라 표현하기도 한다 키워드 의미 inherit 상위 요소로부터 해당 속성의 값을 받아 사용한다 initial (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다 unset 상속 속성에 대해서는 in..

의사클래스(가상클래스)는 선택자에 추가하는 키워드로 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다 선택자:의사클래스 { 속성명: 속성값; } 의사클래스 의미 hover 마우스 포인터가 요소에 올라가 있을 때 속성값이 변경된다 active 사용자가 요소를 활성화했다 (ex. 마우스 클릭) focus 요소가 포커스를 받고 있다 disabled 비활성 상태의 요소이다 nth-child() 형제 사이에서의 순서에 따라 요소를 선택한 hover / active focus / disabled disabled nth-child() 1번 2번 3번 4번 5번 만약 여기서 3번 박스의 색깔만 바꾸고 싶다면? () : 괄호 안에 숫자를 써서 바꿔준다 (n) : 양의 정수가 들어가서 모든 박스의 색깔이 ..

의사요소 : 의사요소(pseudo-elements)는 선택자에 추가하는 키워드 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다 선택자::의사요소 { 속성명: 속성값; } 의사요소 의미 after 요소의 앞에 의사 요소를 생성 및 추가 before 요소의 뒤에 의사 요소를 생성 및 추가 first-line 블록 레벨 요소의 첫 번째 선에 스타일을 적용 marker 목록 기호의 스타일을 적용 placeholder 입력 요소의 플레이스홀더(자리표시자)스타일을 적용 first-line / first-letter 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 marker 강아지 고양이 다람쥐 햄..

선택자의 종류 · 기본 선택자 · 그룹 선택자 · 특성 선택자 · 결합 선택자 · 의사 클래스 · 의사 요소 특성선택자 특성선택자(속성선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다 [class *="it"] {color: white;} → 클래스 값에 "it"이 포함되는 요소 선택하기 [class ^="it"] {color: white;} → 클래스 값에 "it"으로 시작하는 요소 선택하기 [class $="it"] {color: white;} → 클래스 값에 "it"으로 끝나는 요소 선택하기 코드 세팅 선택자 연습 태그 두번째 문단 세번째 문단 네번째 문단 다섯번째 문단 스판태그 class를 가지고 있는 태그, id를 가지고 있는 태그 속성 변경하기 선택자 연습 태그 두번째 문단 ..

float 요소의 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치된다 (문서의 흐름에선 제외, 필요한 만큼의 공간은 차지) 속성값 의미 none 기본값, 원래 상태 Left 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함 right 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 코드세팅 starbucks float: right; starbucks 일반적인 문서의 흐름이라면 핑크 - 아쿠아 - 스타벅스 이지만 float: right; 을 써서 일반적인 문서 흐름을 무시하고 아쿠아가 오른 쪽으로 이동되어졌다 float: left; starbucks float: left; 를 썼더니 스타벅스를 무시하고 왼쪽으로 이동되어졌다. 브라우저가 좁아져도 박스들은 왼쪽 오..

background 배경은 콘텐츠의 배경을 정의한다 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다 하위 속성 역할 background-color 배경 색을 정의한다 background-image 배경 이미지를 정의한다 background-position 배경 이미지의 초기 위치를 정의한다 background-size 배경 이미지의 크기를 정의한다 background-repeat 배경 이미지의 반복 방법을 정의한다 배경색 바꾸기 background-color happy 배경 이미지 바꾸기 및 사이즈 설정 background-image / background-size happy 배경이미지를 꽉 채우고 싶다면? background-size: cover; cover 속성은 이미지의..

Search Icons & Find the Perfect Design | Font Awesome Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 우선 나도 다른 사이트 참고하면서 쓴 거라 자세한 설명은 생략! 폰트 어썸에 로그인해서 아이콘 검색을 해보면 엄청 다양한 무료 아이콘이 많다 내가 필요했던 아이콘은 인스타그램과 티스로리를 나타낼 수 있는 'T' 아이콘! 안에다가 아래의 링크를 첨부해야 한다 (폰트어썸 6 버전임) class="fa-brands fa-..

display:flex 부모요소인 container를 flex container라고 부르고, 자식요소인 item을 flex item라고 부른다. 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것 display 속성의 flex를 지정하여 해당 컨테이너(display 속성에 flex가 지정된 태그)의 아이템(하위태그)들을 유연하게 정렬시킬 수 있음 Flex의 속성들은 1. 컨테이너에 적용하는 속성 2. 아이템에 적용하는 속성 으로 나뉜다 코드 세팅 1 2 3 4 5 6 7 8 9 10 는 block의 요소를 가지기 때문에 가로로 나란히 정렬되지 않고 줄바꿈이 되어 밑으로 아이템이 정렬된다 ★ % vs vh(vw) 차이 % : 부모의 크키가 기준이..

position 요소를 원하는 위치에 자유롭게 배치하고 싶을 때 사용 position을 사용할 때에는 1. 어떤 종류의 position을 사용할 것인지 2. 무엇을 기준으로 요소를 위치시킬 것인지 이 두 가지를 생각하고 사용해야 한다 i'm box position : static ; position의 기본값으로 좌표값의 영향을 받지 않는다 (웹페이지 상에서 꽉 차게 보임) 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 배치시키는 방식이다 그래서 container box의 left : 20px / top : 20px 을 넣어도 아무런 변화가 없다 position : relative; left : 20px / top : 20px을 적용하기 위해 필요하다 자기 자신이 원래 있던 위치를 기준으로 요소를 배치..

Semantic Tags(Markup) : 의미의, 의미가 있는 웹사이트의 구조 조금 더 의미있는 태그들을 사용하여 만들자! : 웹사이트의 브랜드를 나타내줄 수 있는 로고, 사용자들을 위한 중요한 메뉴 아이템 : 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 내비게이션 영역 : 하단에 위치, 해당 문서를 작성한 작성자 정보나, 저작권 등 부가적인 링크나 정보 : 중요한 컨텐츠 영 : 안에서도 페이지 컨텐츠와 직접적으로 상관없는 부가적인 부분 (광고, 페이지와 연결된 다른 링크) : 안에 있는 다른 내용들과 상관없이 독립적으로 고유적인 내용을 나타낼때 :또는 안에 연관된 내용을 묶어줄 때 vs 시각적으로만 이탤릭체 강조하는 이탤릭 vs 시작적으로만 볼드체 정말 중요할 때 강조하는 볼드 : Defini..