본문 바로가기

개발공부34

React : 리액트 사진추가하는 방법 (사진경로설정) CRA 프로젝트에서 이미지를 사용한다면 이미지가 퍼블릭 폴더에 있는지 src폴더에 있는지 또는 jsx파일에서 사용하는지 css를 사용하는지에 따라 경로 설정하는 방법이 달라진다. public > images > img.file src > img > img.file ✅ 어느 폴더에서 관리하는데 좋을까? 1) public - webpack에 의해 관리되지 않는다. (minify 되지 않고, content hash가 포함되지 않는다 대신 원본이 bulid폴더에 복사된다.) - public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용해야 한다. - 경로가 잘못되었거나 파일이 없는 경우 컴파일 단계에서 에러가 발생하지 않고 404 에러가 발생한다. - CRA문서에 다음과 같은 경우에만 public.. 2022. 8. 15.
React : 리액트 초기셋팅방법 (리액트 설치방법/실행방법) CRA 설치 - 리액트 프로젝트를 시작하기 위해서는 CRA를 설치해주어야한다. // npx create-react-app 프로젝트명 npx create-react-app cloneInsta // 디렉토리 진입 cd cloneInsta // 로컬 서버 띄우기 npm run start npm run start 를 입력하면 http://localhost:3000 으로 접속이 가능하다. 🆘 만약 Yes/No 입력창이 나타나면 기존에 실행되고 있는 서버가 있는지 확인 해야한다. 위에 처럼 접속이 됬다면 리액트 프로젝트를 시작할수있다 폴더및 파일 구성 1) node.modules - CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더 2) package.json - CRA 기본 패키지 외 추가로 설치된 라이브.. 2022. 8. 15.
API : API의 정의 및 인터페이스(interface)정의 API 란? API (Application Programming Interface)의 사전적 정의는 "응용 프로그램에서 사용할 수 있도록, 운영 체제 혹은 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스"를 만한다. 여기서 응용 프로그램(Application)이란 운영체제(MacOS, Linux, Window 등)에서 실행되는 모든 소프트웨어를 말한다. - 크롬(Chrome) 브라우저, Slack, KakaoTalk, 메모장, Keynotem Excel 등이 있다. Interface 란? 인터페이스란 서로 다른 두 개의 물체가 상호 간에 정보나 신호를 주고받기 위해서 필요한 접점이나 경계면을 말한다. 즉, 상호 간에 소통을 위해 만들어진 접점이다. - 클라이언트 애플리케이션 ➡️ 사용자.. 2022. 8. 8.
WEB : 인터넷(Internet)의 정의 및 웹(Web) 정의 Internet의 정의 ➡️ 인터넷(Internet) 이란 여러 통신망을 하나로 연결한다는 Inter + Network을 의미한다. ➡️ 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망이다. 초기 인터넷의 근간 : ARPAnet의 탄생 ➡️ 냉전시대, 핵무기에도 견고한 네트워크의 중요성 ➡️ 분배 네트워크, 패킷 스위칭, 라우팅 개념의 탄생 ➡️ 1983년 1월 1일, 현재와 같은 TCP/IP 패킷 송출 방법으로 전환 WEB 이란? 최초의 웹사이트 월드 와이드 웹(World Wide Web) 은 인터넷 네트워크에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 의미 ➡️ 세계의 여러 대학과 연구기관에서 상호간의 신속한 정보 교환과 문서 .. 2022. 8. 8.
JavaScript : for-Each문 정리 ✅ forEach() 배열을 순회하면서 인자로 전달한 함수를 호출하는 반복문이다. 배열 뿐만 아니라 Set이나 Map에서도 사용이 가능하다. 1. forEach() syntax 문법은 아래와 같고 함수로 value, index, array를 전달할 수 있다. arr.forEach(callback(value, index, array)),thisArg callback : 각 요소에 대해 실행할 함수(다음 세가지 매개변수를 받는다) value : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : forEach()를 호출한 배열 thisArg : callback을 실행할 때 this로 사용할 값 2. forEach()로 배열 순회 - 1 forEach로 배열을 순회하면서 모든 요소를 출력.. 2022. 8. 7.
JavaScript : 배열 메서드 정리 (Array method) ✅ push, pop, shift, unshift 배열을 수정하고 시작 부분이나 끝부분에 요소를 추가/삭제할 수 있는 메서드이다. 메서드 설명 push 배열의 맨 뒤에 요소를 추가한다. ex) const arr = [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.push(6,7) console.log(arr); // [ 1, 2, 3, 4, 5, 6, 7 ] pop 배열의 맨 뒤에 요소를 하나 제거한다. ex) const arr = [1, 2, 3, 4, 5] console.log(arr); // [1, 2, 3, 4, 5] arr.pop() *()안은 비워두면 된다. console.log(arr); // [ 1, 2, 3, 4 ] unshift 배열.. 2022. 7. 31.
JavaScript : 객체 메서드 정리(Object method) ✅ Object.keys() 객체가 가지고있는 키(Key)를 모아서 배열로 리턴한다. const member = { name:'chul', age:19, number:24, school:'Sunhwa HighSchool' } const memberObj= Object.Keys(member); console.log(memberObj); // [ 'name', 'age', 'number', 'school' ] ✅ Object.values() 객체가 가지고있는 값(Value)들을 모아서 배열로 리턴한다 const member = { name:'chul', age:19, number:24, school:'Sunhwa HighSchool' } const memberObj= Object.values(member);.. 2022. 7. 31.
DOM : 부모, 형제, 자식 노드 접근하기 ✅ 오늘 내가 배운것 querySelectorAll getElementsTagName NodeList를 가져온다 정보를 가져온후 새로운태그가 추가되면 실시간 반영이 안된다. (한번 저장된 값을 계속 사용한다) ** 자식노드를 가져올때는 실시간 반영이 가능하다** HTMLCollection을 가져온다 정보를 가져온후 새로운태그가 추가되면 실시간으로 반영된다. (실시간으로 정보를 반영한다) ✅ NodeList 란? 모든 노드를 반환한다 (줄바꿈, 띄어쓰기, 주석, 요소 등..) ✅ HTMLCollection 란? HTML태그로만 작성된 요소만 반환한다 (div, p, span 등..) ✅ 부모노드 parentNode - 부모노드에 모든노드를 반환한다. (NodeList) parentElement - 부모노드.. 2022. 7. 30.
DOM : Node에 접근하는 방법 (id, class, tag 접근 및 style 제어) ✅ 오늘 배운것 * [] 대괄호 안에 있는것은 수정이 가능한 부분입니다. 사용할땐 대괄호만 제거해주시면 됩니다. 1. document.[documentElement] * HTML에 접근하는 방법이다. document.body document.head 2. const [Variable] = document.getElementsTagName(['div']) * 태그에 접근할수 있는 변수를 만든다. * 태그는 for of문 으로 순회할 수 있다. const divBox = document.getElementsByTagName('div') for(div of divBox){ div.style.borderbox = '1px, solid, #000' } 3. const [Variable] = document.get.. 2022. 7. 30.
JavaScript : 함수(Function) 호이스팅(Hoisting)이란? ✅ 함수 호이스팅 호이스팅이란? var선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 함수 선언문에는 3가지 가 있는데 이 3가지는 함수 정의 방식은 동작 방식에 약간 차이가 있다. 1. 함수선언문 을 사용했을때 let Number = add(5); // 함수 선언문 function add(num) { return num + num } console.log(Number);// 10 위 코드는 함수 선언문으로 함수가 정의되기 이전에 함수 호출이 가능하다. 함수 선언문 경우 함수 선언의 위치와는 상관없이 코드 내 어느 곳에소든지 호출이 가능한데 이것을 함수 호이스팅(Function Hoisting)이라 한다. 자바스크립트 ES6의 let, .. 2022. 7. 20.
Javascript : 함수(function)란?, 함수선언문종류 ✅ 함수(function)란? 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다. 함수는 이름과 매개변수를 갖고 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다. 함수는 여러번 호출이 가능하고 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적이다. 함수의 일반적 기능은 어떤 작업을 수행하는 문(statement)들의 집합을 정의하여 코드의 재사용에 목적이있다. 이러한 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다. 자바스크립트의 함수는 객체(일급 객체)이다. 다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 것이다. ✅ 함수 정의 1.. 2022. 7. 20.
JavaScript : 자바스크립트 객체(Object) 정리 ✅ 객체란? 자바스크립트의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티 값으로 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. ✅ 프로퍼티(Property)란? 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 즉, 프로퍼티 키는 프로퍼티를 식벽하기 위한 식별자다. Property Key : 빈 문자열을 포함한 모든 문자열 또는 Symbol 값 Property Value : 모든 값 { Key : Value }; ✅ 프로퍼티 키.. 2022. 7. 20.