Hello World!!

학원 수업 Day17 Router 리액트로 만들어진 페이지는 하나의 페이지에 각각의 컴포넌트 조각을 상황에 맞게 끼워서 보여준다. 그러나 마치 서브 페이지가 있는 것처럼, 링크 태그의 동작을 위해, 링크를 타고 들어가면 해당 경로에 맞는 컴포넌트를 띄워주는 것을 라우터가 해준다. 리액트 라우터 돔 설치 npm install react-router-dom // 설치 npm uninstall router-react-dom // 삭제 버전 이슈 현재 22년 10월 기준 Router v6의 기능이 v5에 비해 상당히 많이 바뀌었는데, 현재는 v5 기준으로 학습하므로 v5로 재설치했다. v6이 나온... Read More

내가 쓰려고 남기는 방법 1. 작업물 업로드 신규 repository 생성 후, gitHub, sass 터미널 명령어 정리에 따라 작업물을 깃허브로 업로드 한다. 2. package.json 수정 2-1. 사이트 주소 추가 json파일을 열면 중괄호로 묶인 객체?가 하나 있는데 그 안쪽의 최하단에 아래 내용을 추가한다. "homepage": "https://사이트주소/레포이름/" 사이트 주소는 아이디.github.io 일 수도 있지만, 나의 경우 도메인을 연결 해 놓았으므로 https://leeyujoo.com/레포이름/ 이 된다. 레포지토리 이름 뒤에는 /가 꼭 붙어야 한다. ... Read More

인프런 - 모던 자바스크립트 딥다이브 스터디 보면서 몰랐던, 헷갈렸던, 확실하게는 알지 못했던 것만 정리해두기 10. 객체 리터럴 함수는 일급객체이다. 객체 리터럴은 객체를 생성하기 위한 표기법으로, 중괄호 내에 0개 이상의 프로퍼티를 정의한다. const a = { b: 'b', c: function() { console.log(`this is ${this.b}`); } } 여기서 a는 객체, b는 프로퍼티, c는 메서드이다. a.c() 호출 시 콘솔창에는 this is b 가 출력된다. 호출 시 a의 메서드로서 호출했기 때문이다. 이 때, 함수로 호출하고 싶다면 a.c... Read More

학원 수업 Day16 리액트 렌더링 SSR (Server Side Rendering) 브라우저가 서버에 각각의 html 파일을 요청해서 화면을 렌더링한다. – 초기 로딩 속도 빠르다. – 페이지 이동시 화면이 깜빡임, 변경될 필요 없는 공통영역까지 모조리 변경한다. CSR (Client Side Rendering) 모든 컴포넌트를 jsx 자바스크립트 파일 형태로 초기 로딩시 모두 불러와서 렌더링한다. – 메뉴 이동 시 부드럽게 실시간으로 서브 컨텐츠를 보여준다. (서버에 요청할 필요가 없음) – 변경될 부분만 실시간으로 바꿔준다. (이미 불러온 컴포넌트로 교체) – 초기 ... Read More

몰랐던, 헷갈렸던, 확실하게는 알지 못했던 것만 정리해두기 8. 제어문 블록문 0개 이상의 문을 중괄호로 묶은 것. { let a = 1; } 문의 끝에는 세미클론을 붙이는 것이 일반적이나, 블록문은 그 자체로 종결성을 가져서 쓰지 않는다. 조건문 폴스루 fall through switch문은 switch문이 끝날때까지 이후의 모든 case문과 default문을 실행한다. 다음으로 넘어가지 않으려면 case 내에 break를 사용해서 코드 블록에서 탈출해야 한다. 반복문 for (let i = 0; i < 2; 증감식) { i++; } for문 내 어딘가... Read More

학원 수업 Day15 오전 시간에는 카카오 맵 API 다루기, 오후 시간에는 드디어 리액트를 시작했다! 구조분해(비구조화) 할당 Destructuring assignment 배열을 분해해서 각각 값을 대입한 변수를 선언하는데, 한 줄 한 줄 지정하는 게 아니라 리터럴 모양으로 선언할 수 있다. 배열 const arr = ['red', 'green', 'blue']; const red = arr[0]; const green = arr[1]; const blue = arr[2]; // 이렇게 하나씩 선언하는 것이 아니라 아래 한 줄로 표현가능함. const [red, green, blu... Read More

학원 수업 Day14 자바스크립트 활용도가 점점 높아져서 좋다. 만드는 페이지가 기능적으로 업그레이드 되는 게 보여서 만족스럽다. 더 많이 배워서 많은 곳에서 활용할 수 있게 되면 좋겠다. 비밀번호 validation 입력 비밀번호 보여주기 토글 버튼을 만들어서 클릭시 input type변경해서 입력중인 비밀번호를 확인할 수 있게 한다. toggleBtn.addEventListener('click', ()=>{ if ($pwd.type === 'password') { pwd.type = 'text'; toggleBtn.classList.add('hide'); ... Read More

포트폴리오 제작하느라 살짝 소홀했던 문제풀기. 두 개 뽑아서 더하기 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] ... Read More

학원 수업 Day13 flickr 갤러리 적용 어제 한 flickr API를 기존에 만들었던 기업형 레이아웃에 적용했다. 새로운건 크게 없고 예외 처리에 대해 복습했다. 회원가입 validation 데이터 검증 요소 text 길이 email @ 포함 체크박스 선택 select 선택 비밀번호 길이, 특수문자, 숫자 포함 함수 별 조건 만족 여부에 따라 return true / return false 이후, 에러 값 true 있으면 e.preventDefault()로 페이지 이동 막음... Read More

인프런 강의 보면서 정리해두기. 해당 코드는 ES6 이전에 사용하던 방법으로, ES6에서는 class가 생겨서 직접 함수처리 하지 않아도 됨. class 공통적인 속성들을 모은 추상적인 개념. 정의하는 객체. superclass > subclass instance 공통의 속성을 지니는 구체적인 대상. 정의된 구체적인 데이터를 지닌 실체. 상위 클래스가 정의되어야 하위 클래스를 지정할 수 있고, 인스턴스 또한 만들 수 있다. static new 생성자 없이 함수(객체)로써 호출할 때에만 의미가 있다. 해당 클래스 소속의 인스턴스들의 개별적 동작이 아닌, 소속여부 등의 공동체... Read More