나의 개발일지

🔥 React 숙련주차 팀프로젝트 과제 🔥 로그인, 회원 가입 Authentication 에서 제공하는 api를 이용하여 아래 회원 가입, 로그인을 구현해보기 아이디(이메일), 패스워드 소셜 로그인 (구글, 깃헙) CRUD Firestore 에서 제공하는 api를 이용하여 CRUD 데이터베이스 핸들링 구현 CUD(등록, 수정, 삭제)가 일어날 때 마다 R(조회)해서 자연스럽게 화면 변경 마이 페이지 내 게시물 보기 Authentication 에서 제공하는 uid 를 이용해서 내 게시물들이 모일 수 있게 해보기 프로필 수정 기능 Storage 에서 제공하는 api를 이용하여 이미지 업로드와 다운로드 url 을 받아서 이미지 핸들링 배포하기 Vercel 이라는 호스팅플랫폼을 이용해 배..

✔️ 문제 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. ✔️ 제한사항 n은 10,000,000,000이하인 자연수입니다. ✔️ 입출력 예 n return 12345 [5,4,3,2,1] 💡나의 풀이 fufunction solution(n) { const str = n.toString(); const newArr = str.split("").reverse().map(Number); return newArr; } 💡 문제 풀기에 실패했던 이유 : map(Number) --> 문자열로 바꾼 값을 다시 숫자로 바꿔주지 않았다 💡 새로 알게된 메서드 : reverse() 배열을 거꾸로 뒤집어 준다! 하지만 원본 배열이..

Redux가 필요한 이유 useState의 불편함 - 반드시 부모-자식 관계가 형성돼있어야 한다 - 조부모에서 손자 컴포넌트로 보낼 시 반드시 부모 컴포넌트를 거쳐야 한다 - 자식--> 부모로 보낼 수 없다 하지만 redux를 쓰게 된다면 중앙 state 관리소에서 생성된 Global state에서 불러와서 사용할 수 있다! 어느 특정 컴포넌트에 종속되어 있지 않다 유지보수성이 좋아진다. 리덕스 패키지 설치 git bash에 yarn add redux react-redux 입력 후 설치 --> package.json 에서 확인 --> 폴더 생성 counter.js // 초기 상태값(state) // const [number, setNumber] = useState(0) const initialState ..

🔥 React 숙련주차 개인과제 🔥 ✔️ 구현해야 할 기능 · 팬레터 CRUD 구현 (작성, 조회, 수정, 삭제) · 아티스트별 게시물 조회 기능 구현 (Home - Read) · 원하는 아티스트에게 팬레터 등록 구현 (Home - Create) · 팬레터 상세 화면 구현 (Detail - Read) · 상세화면에서 팬레터 내용 수정 구현 (Detail - Update) · 상세화면에서 팬레터 삭제 구현 (Detail - Delete) ✔️ 과제는 Props Drilling → Context API → Redux 순으로 각각 별도의 브랜치를 만들어 제출해야 한다. 💡Hint (과제 진행 순서) (1) 프로젝트 셋업 (2) “props-drilling” 브랜치 생성 및 이동 (3) Router 셋업 4) ..

JSON은 자바스크립트 강의 들을 때도 봤었고 특히 과제할 때 썼던 기억이 있어서 나름 들을만 했다 그리고 이제서야 뭔가 완벽하게 이해된 것 같아서 해소가 되었다 까먹지 않기 위해 바로바로 TIL 작성하기 JSON 이란 자비스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식을 말한다 다양한 형태의 구조를 가질 수 있다 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 포함한다 하지만 객체는 아니다! 객체 구조를 가진 것일 뿐 JSON에서는 ( " " )만 허용된다 ( ' ' --> X ) JSON -> 문자열 형태 -> 서버-클라이언트 간 데이터 전송 시 사용한다 JSON은 본래의 모습으로는 전송이 되지 않는다 파싱(parsing) 과정이 필수 1. JS 객체를 JSON..

//스크롤 만들기 //document 한 단계 위에 있는 window window.addEventListener("scroll", function () { // 현재 위치 확인 scrollY if (scrollY >= 100) { document.querySelector(".up-button").style.display = "block"; // console.log("현재위치", scrollY); } else { document.querySelector(".up-button").style.display = "none"; } }); document.querySelector(".up-button").addEventListener("click", function () { window.scrollTo({ top..

setTimeout으로 광고창 닫기 setTimeout은 일정 시간이 지난 후 함수를 실행 시킨다 광고창이다! 5초 후에 닫힙니다 const adBox = document.querySelector(".ad-box"); // 광고창이 n초 후에 사라지게 하기! setTimeout(() => { adBox.style.display = "none"; }, 5000); display="none"을 사용하여 사라지게 만든다! setInterval로 타이머 만들기 setInterval은 일정 시간 간격을 두고 함수를 실행시킨다 광고창이다! 3초 후에 닫힙니다 // 설정한 n초에서 점점 숫자가 줄어들다 0이 되면 광고창이 사라진다! const adbox = document.querySelector(".ad-box")..

useState  리액트 훅에는 여러가지 종류가 있는데우선 공부할 것은 이젠 나름 익숙한 useState 이다! useState의 기본 형태는const [state, setState] = useState(initialState);  ❗ ⭐ useState에서 짚고 넘어가야 할 포인트 1️⃣state는 변수, setState를 이용해 state의 값을 수정한다!그리고 state가 만약 원시데이터가 아닌 객체 데이터 타입인 경우그토록 강조하는 불변성을 유지해야 한다!  // 가장 기본적인 Hook// 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함// 카운터 , TodoList// const[state, setState] = useState(초기값);// 함수형 업데이트란?import "./App.css";..

본격적인 React 수업이 시작되었다 이건 커리큘럼은 정말 실무적인 내용이 담겨 있다고 해서 얼마나 어려울까 하는 긴장감을 가지고 시작했다 우린 자바스크립트 내에 있는 className 태그를 사용해서 css를 꾸며주었다. (혹은 인라인을 이용해서!) 하지만 이 방식은 많은 컴포넌트를 생성해야 한다는 점에서 불편함을 느껴 CSS-in-Js라는 방식을 만들었다고 한다. 💡 CSS-in-Js 방식이란? 단어 그대로 js 코드로 CSS코드를 작성하여 컴포넌트를 꾸는 방식이다 우선 styled-components 설치하고 터미널에서 yarn add styled-components 의 명령을 입력해서 패키지를 설치한다! ❗styled-components : CSS-in-Js 방식으로 컴포넌트를 꾸밀 수 있게 도와..

Module not found: Error: You attempted to import ../App.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 개인 과제 마무리 단계 중에 이런 위 문구의 오류가 자꾸 떴다. 검색해보니 CRA(create-react-app) 에서 컴파일은 src 내부에서만 일어나는데 src 폴더 안에 app.css 파일이 들어가 있지 않아서 발생했던 것이었다 하지만...! 난 src 폴..

불변성을 지키는 것이 중요하다! 불변성은 메모리의 있는 값을 변경할 수 없는 것을 말한다 자바스크립트의 원시 데이터는 문자열, 숫자, 불리언 타입 등이 있는데 우선 결론적으로 말하자면 원시데이터는 불변성이 있다 반대로 원시데이터가 아닌 배열, 객체, 함수는 불변성이 없다! ▶ 불변성이 있다! let num = 1; 메모리에는 1이 라는 값이 저장되고 , num이라는 변수는 메모리에 있는 1을 참조! 그리고 재선언 let num2 = 1; num === num2 의 결과값은 true이다! 즉, num의 메모리 주소에 이미 1이라는 값이 할당이 되었고 같은 값으로 재선언을 해도 메모리 주소가 변하지 않고 이미 생성되어 있는 1이라는 값을 참조한다! --> 같은 메모리 값을 바라보고 있는 것이다 즉, 기존 메..

오류 발생 및 문제 해결 / 주의할 점 1. 컴포넌트를 만들었는데 랜더링이 되지 않고 오류만 떴다 오류를 보니 리액트 컴포넌트 이름의 시작은 대문자로 해야 한다고 한다 오류를 고치고 나니 그제서야 강의해주신 것이 떠올랐다,,!! 잘 기억해두자 2. 절대경로와 상대경로 Child.js 파일을 만들고 import를 했는데 오류가 났다 튜터님께 도움을 요청하니 절대경로 파일을 만들지 않았고 Child 파일의 경로 표기가 잘못되었다고 하셨다 같은 디렉토리에 위치해있으니 내가 수정해야 하는 것은 "Child" 에서 "./Child" 로 수정 이건 기본 중에 기본인데 이제서야 생각나서 조금 민망했다^^ ./ : 현재 디렉토리 위치 ../ : (상대경로) 상위 위치 (한 단계 뒤로 가기) 그리고 절대경로 파일을 만드..

자바스크립트가 끝나고 오늘 첫 리액트 수업이었다! 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..

// 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. 곱하기 연산자(*)..

변수의 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..