전체보기
-
Recoil / [2] Atoms - 전역 상태 관리의 시작DEV/Recoil 2022. 12. 6. 00:24
- 본 게시물은 리코일 공식문서와 learnrecoil.com 강의를 바탕으로 작성된 글입니다. - Recoil / [1] 시작, 설치 - 본 게시물은 리코일 공식문서와 learnrecoil.com 강의를 바탕으로 작성된 글입니다. - 프론트엔드 상태관리 3대장으로 보통 꼽는것이 redux, mobx, recoil이 있다. 여기서 나는 recoil밖에 써본 경험이 없 ccamanglab.tistory.com 이전 편에 이어서 계속 작성 오늘은 이전 게시글에 이어서 직접 전역 상태관리를 진행해볼테다 오늘 사용할 전체 코드 /src/components/examples/Atoms.tsx import {atom, useRecoilState, useRecoilValue} from 'recoil' const dar..
-
Recoil / [1] 시작, 설치DEV/Recoil 2022. 12. 5. 17:35
- 본 게시물은 리코일 공식문서와 learnrecoil.com 강의를 바탕으로 작성된 글입니다. - 프론트엔드 상태관리 3대장으로 보통 꼽는것이 redux, mobx, recoil이 있다. 여기서 나는 recoil밖에 써본 경험이 없는데, 지금 듣고 있는 강의에서 redux를 사용할것 같아 강의를 듣기 전 recoil에서 배웠던 내용을 정확히 정리하고, 이후 헷갈리지 않는 상태로 redux강의를 수강하고자 이렇게 글을 작성해본당. 리코일은, 수많이 렌더링 되는 다양한 컴포넌트 중에서 독립적으로 자주 업데이트되어야할 필요가 있어 생긴 툴이라고 한다. 리코일의 주요 특징은 크게 세가지가 있다. 1. 유연한 상태 공유 - 보일러 플레이트가 없다.(다른 프론트엔드 상태 관리 툴과의 큰 차이다) - 간단한 get..
-
Three.js / [2] 시작하기 - 장면 만들기, 큐브 만들기DEV/Three.js 2022. 12. 5. 13:54
- 본 게시글은 Three.js 홈페이지 및 Three.js and TypeScript 강의를 바탕으로 작성한 글입니다. - 일단 강의를 보면서 진행했긴 했는데, 강의는 버전도 다른것 같고 완전히 공식문서를 보고 만든것 같지 않아서 공부한 내용을 재구성해서 공식문서를 바탕으로 시작부터 작성해보려고 한다. 우선 ThreeJs가 무엇인고 하는 것부터 설명을 해봐야할것같다. Three.js 는 WebGL 을 사용하여 웹 브라우저 에서 애니메이션 3D 컴퓨터 그래픽 을 만들고 표시하는 데 사용되는 브라우저 간 JavaScript 라이브러리 및 API( 응용 프로그래밍 인터페이스 ) 입니다 (threeJs wiki - https://en.wikipedia.org/wiki/Three.js) 그러니까 WebGL 기반..
-
Three.js / [1] IntroDEV/Three.js 2022. 12. 4. 23:01
- 본 게시글은 Three.js 홈페이지 및 Three.js and TypeScript 강의를 바탕으로 작성한 글입니다. - 처음 Three.js 라는 단어를 본 것은 토스의 채용 사이트였다. 토스의 프론트엔드, 특히 UX의 채용를 보면 Three.js나 WebGL등 그래픽 개발에 대한 경험이 있는 사람을 선호하고 있다. WebGL은 스파로스 아카데미를 다녔을 당시, 특강에서 들어 본 적이 있는데, Three JS는 처음 들어본 녀석이다. 홈페이지 들어가자 마자 3시간 정도 흠뻑 취해버렸다. https://threejs.org/ 를 처음 들어가면 위와같은 화면이 나온다. 오른쪽에 보이는 각각의 카드들이, ThreeJs를 활용해서 만든 작품들이다. Three JS를 일반적인 홈페이지에 적용시킨 내용들도 많..
-
ReactNative / Style 1 - StyleDEV/REACTJS 2022. 12. 1. 23:04
Style · React Native With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rathe reactnative.dev - 위의 내용을 빌려옴 - react native의 스타일은 css in js 형식으로 사용한다. 대충 말하자면 react 파일에 js코드로 css를 때려 넣겠다는 말이다. 근데 웹과 C..
-
NextJS Error / Additional keys were returned from getServerSidePropsError! 2022. 10. 4. 01:46
제목과 같은 오류가 발생했음 내가 처음에 썻던 코드 export async function getServerSideProps() { //fetch data from an API return { meetups: DUMMY_MEETUPS, }; } 중요한게 보이지 않는다 해결한 코드 export async function getServerSideProps() { //fetch data from an API return { props: { meetups: DUMMY_MEETUPS }, }; } 받아오는 값은 항상 props안에 넣는다는것을 잊지말자
-
JavaScript / JavaScript Deep Dive 스터디 3주차DEV/JavaScript 2022. 8. 31. 00:26
DOM 1.DOM의 개념 DOM = Document Object Model HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조 2.DOM의 노드 대표적으로 네 가지 노드가 있음 문서노드 - 전체 document를 일컫음 요소노드 - html에서 태그들을 일컫음 어트리뷰트 노드 - html에서 속성들을 일컫음 텍스트 노드 - 태그사이의 내용에 해당 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작 3.DOM의 노드 접근 DOM의 노드들은..