개발공부 임고미

1. react에서는 undefined만 반환하여 렌더링하는 상황을 막아야 합니다. -> 해결 : undefined값을 만들어준다 //받아오는값 || undefined값 { name || '리액트' } 2. 스타일을 줄때, 공통스타일을 style-component를 사용할지, 객체로 만들어서 사용할지, less를 사용할지는 선택 ex 3. new 연산자와 생성자 함수 / 화살표함수 1) 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 "new" 연산자를 붙여 실행합니다. function BlackDog () { this.name = '흰둥쓰' retu..

리액트 라우터 세팅하기 react-router를 사용하면 싱글 페이지 애플리케이션과 같이 페이지 깜박임이 없으면서도 주소를 가질 수 있게 됩니다. 1. import import React from 'react'; import { Switch, Route, Redirect, BrowserRouter } from 'react-router-dom'; import 한 정보들은 다음과 같습니다. : HTML5 히스토리 API를 사용하여 주소를 관리하는 라우터(해쉬뱅 모드 사용 안함) : 요청 경로와 렌더링할 컴포넌트를 설정한다 : 하위에 라우터 중 하나를 선택한다 : 요청 경로를 다른 경로로 리다이렉션한다 2. load component //사용할 컴포넌트 로드해주기 import HomePage from 'pag..

export default와 export name의 비교 어떤 컴포넌트를 보면 export default를 사용하고 있고, 어떤 컴포넌트를 보면 default가 없는 export만을 사용하고 있었다. 나는 먼저 '저 둘의 차이는 무엇인가?'에대한 개념이 없었고, 어떻게 사용하는지에대해 감을 잡지 못하고 있었다. Q. 언제 export default를 사용하고 언제 export를 사용하는 걸까? 개념 export란 ? 간단하게 말해 '내보내기'를 의미한다. ( 반대로 import 는 '불러오기'를 의미한다. ) 1. pages에 component1.js, component2.js가 포함되어있고, index.js에서 한번에 묶어서 내보냄 →이렇게 관리하는 이유? 이렇게 관리하면 좀 더 깔끔하게 ..

벨로퍼트선생님의 강의를 듣다가 책에는 더욱 다양한 예제가 있다는 말을듣고 책을 구매하여 공부하기로 결정하였다. 1일차 공부중 낯선 개념들을 보게되었고 개념을 정리해보기로 하였다. P42, MVC, MVW MVW(Model+View+Whatever) 개념 기존의 Presentation Pattern들 중 MVx에 해당하는 패턴을 포함(e.g, MVC, MVP, MVVM, etc) 또는 Model과 View 그리고 ‘무엇이든지’ 올 수 있음을 의미하는 용어로 사용된다. MVW에 해당하는 MVC/MVP/MVVM 패턴에 대해 간단히 알아본다. MVC(Model + View + Controller) Model : 프로그램에서 사용되는 실제 데이터 및 데이터 조작 로직을 처리하는 부분 View : 사용자에게 제공되..

프레임워크/ 라이브러리 /플러그인 1. Framework(프레임워크) 프레임워크는 뼈대나 기반구조를 뜻하는데, Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공해주는 것입니다. 그러므로 그러한 뼈대 위에 프로그래머가 코드를 작성하여 Application을 완성시켜야 합니다. 어느정도 뼈대를 제공해 주기 때문에, 객체 지향 개발을 하면서 일관성 부족 등의 문제를 해결해 줍니다. 그래서 소프트웨어에서는 프레임워크를 아래와 같이 정의하곤 합니다. 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합 2. Library(라이브러리) Library는 특정 기능에 대한 도구 or 함수들을 모은 집합입니다. 즉..

- 기존 정보에 잘못된 부분들이 있어 전반적으로 내용을 수정했습니다. JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(Ajax, Axios, fetch)가 있습니다. 그 중 많이 사용되는 Ajax와 axios를 중점으로 알아봅시다! 개념 AJAX (Asynchronous Javascript And Xml) Ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이란 의미이다. 즉, 데이터를 이동하고 화면을 구성하는데 있어 화면 갱신 없이 필요한 데이터를 서버로 보내고 응답을 가져오는 방법입니다. 그렇다면 왜 사용하는걸까 ? - 단순하게 생각하면 WEB화면에서 무엇인가 부르거나 데이터를 조회하고 싶을때 페이지 전체를 새로고침하고 싶지 ..

개념 데이터를 다룰 때 사용되는 개념이다. 비교 props(속성) state(상태) 부모 컴포넌트가 자식 컴토넌트에게 주는 값 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, (자식 입장에서)읽기 전용이다. 자식 컴포넌트에서는 props를 받아오기만 하고 받아온 props를 직접 수정할 수는 없다. 동적인 데이터를 다룰 땐 state를 사용합니다. 자신이 들고 있는 값을 말한다. 읽기전용인 props와 비교하면 쓰기전용이라고 볼 수 있습니다. 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. 변해야하는 상태관리를 할 때 사용합니다! props 개념 부모 컴포넌트가 자식 컴토넌트에게 주는 값 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, (자식 입장에서)읽기 전용이다. 자식 컴포넌..

JSX 1. 개념 유래는 Java Script + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법입니다.(= JSX은 js입니다.) 두가지를 합쳐서 얻는 장점은?? 개발자가 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줍니다. 단순히 XML만 아니라 변수나 프로퍼티의 바인딩 기능도 제공합니다. 꼭 닫혀야 하는 태그 열었으면 닫아라 (→ Syntax error ) 두개 이상의 엘리먼트는 무조껀 하나의 엘리먼트로 감싸져 있어야 합니다 hello bye (x) 두 개 이상의 태그가 하나로 묶여있지 않은 상황이라, 문법적 에러 발생 console: Syntax error : Adjacent JSX elements must wrapped in an enclosing tag 해결 방법 : 1.'di..