반응형 개발 지식 A+20 Nuxt.js 시작하기 React 기반의 소스코드를 Nuxt 프렘워크로 바꾸는 refactoring 작업을 시작하려한다. 그전에 Vue.js 기본적인 문법을 공부하고 왔다. - 포스팅 프로젝트 시작 프로젝트 초기화 공식문서 $ npm init nuxt-app 초기 설치 시 많은 선택사항이 있는데 그 중에 걸리는 몇가지를 적어보았다. UI framework : None Rendering mode : Single Page App 말고도 Universal (SSR / SSG) 방법이 있는데 우선 프로젝트 시작 $ npm run dev /* "scripts": { "dev": "nuxt", // 2021. 2. 21. Vue.js 시작하기 Nuxt.js 시작하려는데 React와 다르게 *.vue 파일에 HTML, CSS, JS 한꺼번에 정의하고 사소한 문법이 달라서 그 기반이 되는 Vue.js 부터 천천히 살펴보자 - 참고 문서 템플릿 구문 데이터 바인딩의 기본은 Mustache 구문 이다 : {{ JS 단일 표현식 }} 하지만 React JSX 와 달리 HTML 속성에서는 사용하지 못한다. 대신 v-bind 디렉티브를 이용하면 된다. 링크 // (x) 링크 // (o) 링크 // (o) 2.6.0+ 추가 // 혹은 겹따옴포 안에 홑따옴표로 정의 네이버 // (o) 또한 하위 컴포넌트props 전달시 falsy 한 boolean 값을 전달하면 해당 element에 포함되지 않는다. DOM selector const data = { mess.. 2021. 2. 20. Redux React를 공부하면서, 상태를 관리할 수 있는 기술은 상당히 매력적이었다. 하지만, 최상위에 state를 두었을 경우 매번 Prop drilling, Lifting state up 건너건너 state에 접근하기가 영 불편한게 아니었다. 그리하여, 상태를 한 곳에서 관리해주는 Redux 라이브러리를 함께 공부해보자. 생활코딩 영상 참고 ㄱㄱ 이번엔 왜 공식 문서 따라하기가 어렵지 - codesandbox 다시 gitit!! What is Redux? preidictable state container for JavaScript apps. React 와 같은 다른 view library에서도 사용 가능. Installation solo package // only Redux toolkit $npm inst.. 2021. 1. 26. Hooks 공식문서로 이해하기 지난 챕터에서 공식문서로 React Main Concepts 에 대해 알아보았다. 오늘은 functional Component에서 빼놓을 수 없는 Hooks 에 대해 알아보자. 공식 문서에 있는 예제를 직접 실습해보면서, 왜 Hooks가 도입되었고, Modern한 문법으로 불리는지 알아보도록 하자. Why React Hooks ? Problem of Classical React this binding for event handler Complex to understand + cDM, cDU, cWU reusing stateful logic problem of HOC, render props React Hooks "Hook" the logic, 필요한(stateful logic) 것만 Hook 해서 쓰자!.. 2021. 1. 26. this 키워드 이 문서는 MDN과 코드스테이츠 학습 자료를 토대로 정리하였습니다. this는 함수 실행 시 호출 방법에 의해 결정되는 객체이다. 즉, execution context에 따라 결정된다. 아래와 같이 크게 5가지의 경우로 나누고, strict mode 유무, 화살표 함수는 나중에 다루도록 하겠다. Execution Context Global 참조 Function 호출 Method 호출 new 키워드를 이용한 생성자 호출 .call 또는 .apply 호출 세부적으로 살펴보도록 하자. Execution Context this에 바인딩되는 객체 Method 부모 객체 (실행 시점에 온점 왼쪽에 있는 객체) obj = { var fn : function( ){ return this} } test1 = obj.fn.. 2021. 1. 26. how to show cookie headers at client 마지막에 솔루션 있음 stackoverflow.com/questions/52549079/does-axios-support-set-cookie-is-it-possible-to-authenticate-through-axios-http server 측에서는 app.use(cors({ //! client cookie 정보를 가져오기 위해서 origin, credentials 설정 필요 origin: "https://localhost:3000", // client domain 주소 credentials: true, // client 에서 fetch, axios API 사용시 header 설정 예정 methods: ['GET', 'POST', 'OPTION'], })); client 측에서는 const axios .. 2021. 1. 20. [반응형 웹] #1. 미디어 쿼리 포트폴리오를 만들기 전에, 모바일 레이아웃도 고려하는 반응형 웹을 공부해보려한다. MDN 공식문서와 더불어 참고자료를 정리해보았다. 뜬금없지만, VS CODE 에서 자동 html을 생성하는 방법이 (! 치고 tab키를 누르기) 라고 한다 .. 나 왜 이제 알았지.. 😂) 미디어 쿼리 특정 크기보다 작으면, 이 속성을 적용해! 아래 프로젝트는 Interactive Web Developer 김종민님의 유튜브 영상을 따라하여 진행한 사이드 프로젝트이다. 내가 프론트 개발 특히, Interactive Web 에 흥미를 갖게된 계기인데, 자세한 얘기는 나중에 다루기로 하고! 아래 그림에서처럼 오른쪽 모바일 버전에서는 크기가 능동적으로 줄어들지 않음을 확인할 수 있다. canvas { margin: auto; /*.. 2021. 1. 9. webpack 환경 설정 우선, webpack 을 공부하게 된 것은 Three.js 패키지를 사용하기 위함이었다. 하지만 React를 구동할 때도 사용되는 것을 알게되고 공부할 필요성을 느꼈다. 공식문서를 참고해서 정리하였다. Why webpack module? webpack 정적 모듈 번들러이다. JS 모듈을 컴파일할 때 사용됨. bundler 여러 파일을 브라우저에서 로딩하는 것은 네트워크 비용 측면에서 부담이 크다. 이에, 여러개의 assets (js, css, png, jpg) 를 웹브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 잇는 번들러 기술이 소개된다. 이제서야, 2가지가 이해되었다. React 개발 시 package.json "scripts" 에서 npm start 와 같은 키워드를 사용하지 않는지, "star.. 2021. 1. 9. React 공식문서 쉽게 공부하기 이제까지는 HTML + CSS + Vanilla (순수) JS 로 공부를 해왔다. 하지만, 최근 웹페이지는 유저와 많은 상호작용이 존재한다.즉 DOM 상태 관리가 필요하다. 이에, 편리한 (Fontend) JavaScript Library를 소개한다. 아래 목차는 공식 문서를 토대로 작성했다. 상세히 읽고 codesandbox에서 실습해보면서 재밌게 공부하였다. What is React 특징 & 장점 Component ( 하나의 의미를 가진 독립적인 단위 모듈 ) 개념에 집중한다. 어찌보면 Customizing HTML tag를 작성한다는 느낌이 든다. 직관적이고 재사용성이 높아진다. 유저와의 상호작용에 유리하다. state, props 변수를 통해 데이터를 관리한다. View Layer (of MVC .. 2021. 1. 2. 이전 1 2 3 다음 반응형
