본문 바로가기
반응형

전체 글

Three.js와 첫 3D 객체 만들어보기 우연히 지인을 통해 Three.js 를 알게 되었다. Three.js 는 쉽게 말해 브라우저에 3D 객체를 쉽게 렌더링 되도록 도와주는 자바스크립트 라이브러리이다. WebGL은 3D 랜더링을 위한 일반 개발환경의 OpenGL의 ES 2.0을 바탕으로 웹에서 구동 할 수 있게 제공한 기술로서 Three.js는 WebGL 기술을 기반으로 보다 간편하게 3D프로그래밍을 할 수 있게 해주는 라이브러리라고 생각하면 되겠다. https://threejs.org/ 위 사이트에 올라가있는 예제들 혹은 사이트들을 보면 나처럼 흥미가 생길 수 밖에 없을 것이다. 이제 간단한 큐브 모양의 3D객체를 만들어 볼텐데 그러기 위해서는 Three.js를 CDN으로 부르거나 혹은 직접 공식홈페이지에서 다운로드 받아 프로젝트 폴더에 .. 더보기
Recoil 익숙해질 겸 예제 만들어보기 Recoil이 아직 물론 Redux 보다 아직 사용량도 적고 인식도 적겠지만 개인적으로 난 처음 접했을 때 너무 편했고 기존 리액트 훅과 비슷한 면도 있어서 아마 트렌드가 빠르게 바뀌는 프론엔드에서는 곧 Recoil이 Redux를 따라잡지 않을까 하는 생각도 해본다. 그런 의미에서 가볍게 예제를 한 번 더 만들어보자. Atom.js import {atom} from 'recoil'; export const usernameState = atom({ key:'username', default:'' }); export const arrayState = atom({ key:'samplearray', default: [ 1,2,3,4,5,6,7,8,9,10 ] }); Profile.js import React f.. 더보기
React Recoil 상태관리 (atom, selector, useRecoilValue(), useRecoilState()) 전에 내가 구독하고 있는 분의 블로거에서 Recoil 에 관한 내용을 본 적이 있다. 지금 우리 프로젝트에는 redux를 이용한 상태 관리 밖에 없었기에 나중에 기회가 되면 한번 써보고 싶었다. https://merrily-code.tistory.com/ 생각보다 빨리 Recoil을 이용한 상태관리를 알아둬야 할 일이 생겼기에 한번 간단한 계산기를 이용해 구현해보자. Recoil은 우선 Redux 보다 세팅이 훨씬 간편하다. 앞으로 나도 리액트를 이용해서 스크래치로 프로젝트 시작할 일이 있으면 Recoil을 한번 이용해볼 생각이다. npm install recoil 설치해준 뒤에 root 컴포넌트에서 RecoilRoot 로 감싸주기만 하면 된다. import React from 'react'; impor.. 더보기
TypeScript 2가지 방법으로 컴포넌트 정의하기 타입스크립트로 컴포넌트를 정의할 때 2가지 방법이 있다. 부모컴포넌트에서 자식컴포넌트로 props 정의하면서 2가지 정의방법에 대해 차이점도 알아보자. Child.tsx 코드를 보게 되면 props에서 color, onClick을 비구조화로 바로 뺴주면서 ChildProps 인터페이스 타입이라고 말해주고 있다. 쓰는 문법이 조금 달라졌다. 컨포넌트명에 React.FC 직접 작성해주고 있는데 기능적인 차이가 몇가지 있다. ** TypeScript 에게 이건 리액트 컴포넌트라고 알려줌으로서 컴포넌트의 기본 내장함수들을 쓸 수 있다. 이 차이를 보면 React.FC 로 정의한 컴포넌트에 한해서만 컴포넌트에서 자주 쓰이는 내장되어 있는 defaultProps를 쓸 수 있다. Child 컴포는 자동완성에도 뜨지 .. 더보기
유용한 npm 명령어 (search, info, list,uninstall ) 리액트를 개발하면서 혹은 노드로 서버를 개발하면서 우리가 쓰는 npm 명령어들은 어찌 보면 정해져있었다. (본인 기준....); 필요한 패키지가 있으면 npm install (--save)(-g) 패키지명 혹은 build 나 start 를 할 때 npm run build npm start 이번엔 다른 명령어들을 하나 하나 써보면서 용도를 알아 보겠다. npm search '특정단어' 특정단어가 패키지명에 포함되거나 설명, 만든 사람, 혹은 키워드등에 포함되어 있는 패키지들을 보여주는 명령어 npm info '패키지명' 해당 패키지에 대한 간단한 설명들을 나타내주는 명령어로 대략적으로 필요한 내용들은 단번에 알 수 있을것 같다. npm list 현재 자신의 패키지가 의존하고 있는 패키지는 어떤 것들이 있는.. 더보기
Node.js 비동기 프로그래밍과 이벤트 우선 동기적 프로그래밍과 비동기적 프로그래밍의 차이를 알아보자. 콘솔에 어떻게 출력되는지 보기 전에 본인이 예상한 출력 순서를 미리 예상해보고 밑에 사진을 보면 좋겠다. 순서대로 잘 나왔다. 그럼 이번엔 비동기적 프로그래밍을 한번 보겠다. 딱 봐도 파일을 읽는 함수명부터 달라지긴 했지만 예상하듯이 출력되는 결과의 순서를 한번 예상해보고 결과를 보면 요로케 출력되어 있는 것을 볼 수 있다. 여기서 '콜백' 이라는 개념이 나오게 되는데 쉽게 말해서 ~~가 끝나고 실행될 함수 라고 보면 되겠다. 첫번째 코드와 달리 두번째 코드에선 3번째 인자로 콜백함수를 넣을 수 있는데 프로세스를 한번 살펴 보면 우선 첫번째 코드 1.start 출력 2.fs.readFileSync 함수 실행(파일 읽기) 후 msg 상수에 저.. 더보기
Git merge 시 conflict(충돌) 발생 원인 및 해결 방법 브랜치를 나누어 작업 하다보면 merge 즉 합치는 과정에서 conflict 에러가 발생 할 수 가 있다. 해당 원인은 깃이 파일들을 관리하다가 a 브랜치의 내용과 b 브랜치의 내용이 겹치는 부분이 있어 선택 할 수 없을 때 에러메세지와 함께 로컬 리포지토리에도 구분지어서 파일을 알아볼 수 있게 나오는데 이런 식으로 나오게 된다. > 순으로 나와 있으며 겹치는 부분의 이름을 바꾸어 주거나 아예 구간을 지우고 새로 다시 써준 뒤에 git add . git commit 해주면 되겠다. 만약 conflict가 너무 많이 발생해서 다시 작업을 하려고 취소, 즉 conflict 발생하기 전으로 돌아가고 싶을 때는 git merge --absort 를 실행해주면 되겠다. 더보기
Swagger 란? 오늘은 가볍게 Swagger에 관해 경험삼아 정리해보려 한다. 먼저 Swagger 란 어떤 것인지 한 번 정의해보자. Swagger는 개발자가 REST API 서비스를 설계, 빌드, 문서화 할 수 있도록 하는 프로젝트이다. 즉, 쉽게 말하면 API가 담긴 문서를 만들어서 프론트 개발자에게 전달 혹은 따로 문서화 해 놓을수 있는 프로젝트이다. 지금까지 일을 하면서 백엔드에서 만들어서 제공해준 API 를 많이 사용했다. 하지만 그 전까지 일일이 수기 혹은 카톡등 으로 일일이 혹은 수정사항이 있을 때 마다 요청하거나 수정을 부탁하는 등 음 상당히 아날로그적으로 작업했었다. 보면 알다시피 그냥 편리함의 끝판왕이었다. 물론 정해진 속성명, 양식에 맞게 작성을 하는 백엔드에는 수고로움이 있겠지만 api문서를 받아서.. 더보기
반응형

티스토리툴바