1️⃣ 개발 지식 A+/FE13 react에서 애니메이션 구현 (w. framer motion) web에서 애니메이션을 구현하는 기본적인 방법은 css animation 이 있다. 하지만, 이를 js 에서 좀 더 로직컬하게 다루고 싶은 경우 "framer motion"을 추천한다. 다음은 css animation 을 framer-motion 으로 1:1 컨버팅이 가능함을 보여주는 예제이다. [베이스코드는 framer motion document 에서 가져왔다] framer-motion 으로 구현하기 코드 css animation 으로 구현하기 코드 .box-with-css { animation-name: bigger; animation-duration: 0.8s; animation-delay: 0.5s; animation-fill-mode: both; transition-timing-function.. 2023. 9. 28. Web 3D rendering 회사 신규 기획에서 gamification 도입이 확정되며, 웹 3D 렌더링 리서치를 담당하게 되었다. 이는 어떤 툴과 언어로 구현할지 의사결정을 위한 자료가 되겠다. 3D Object 와 인터랙션 구현은 어디서? (3D 모델링 프로그램 vs 자체 구현) Creating an Object with Three.js If you are comfortable with 3D modeling software, you can crreate your objects there and simply import them into your Thee.js project. This solution won't be converted in this tutorial but we will instead create our object.. 2023. 9. 28. 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. 이전 1 2 다음
