개발공부 임고미

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

뒤로가기 제어하기 방법 1. window.onpopstate = function(event) { // "event" object seems to contain value only when the back button is clicked // and if the pop state event fires due to clicks on a button // or a link it comes up as "undefined" if(event){ // Code to handle back button or prevent from navigation } else{ // Continue user action through link or button } } 방법 2. 페이지 리로드하지 않고 url만 변경하기 history...

벨로퍼트선생님의 강의를 듣다가 책에는 더욱 다양한 예제가 있다는 말을듣고 책을 구매하여 공부하기로 결정하였다. 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화면에서 무엇인가 부르거나 데이터를 조회하고 싶을때 페이지 전체를 새로고침하고 싶지 ..

나는 작업을 하기 직전 reset을 먼저 사용해주는데, css와 달리 less 에서는 잘 적용이 되지 않았다. 해결방법을 찾아야겠다. 1. 우리는 보통 다운받아 사용하기에 다운받을 폴더를 생성한다. src/assets 안에 폴더 만들어주기 2. font-face 설정 @font-face { font-family: 'HELVETICA LT 25 ULTRA LIGHT'; font-style: normal; font-weight: 300; src: url('../fonts/HELVETICA-LT-25-ULTRA-LIGHT.ttf') format('truetype'); } 디자이너에게 truetype밖에 전달받지못해 저렇게 작성해 놓았지만 다른 format도 설정해 주는게 좋다. font-family : 자유롭..

개념 데이터를 다룰 때 사용되는 개념이다. 비교 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..