전체 글 (25) 썸네일형 리스트형 [디자인패턴] MVC패턴, React에서 적용해보기 오늘은 디자인패던이라 하면 가장 먼저 떠오르는 패턴 중 하나인 MVC패턴을 알아보려고 합니다. MVC패턴? MVC패턴은 관심사에 따라 계층을 분리하는것을 지향하는 것을 목적으로 둔 패턴입니다. 이는 애플리케이션의 확장과 테스트, 유지에 필요한 노력과 시간을 줄여줍니다. MVC패턴의 흐름을 그림과 함께 간단하게 설명하면, 사용자가 Controller 통해 Model을 변화시키면 View를 업데이트 합니다. 그렇다면 Model, View, Controller는 어떤 역할을 하는지 알아보겠습니다. 모델(Model) 모델은 애플리케이션의 데이터와 비즈니스 로직을 담당합니다. 데이터의 상태와 해당 데이터를 조작하는 메소드 또는 함수를 포함하고 주로 DB에서 가져온 정보를 가공하거나 애플리케이션 내부에서 상태를 유.. [THREE] three.js의 camera와 contols 알아보기! camera 아래의 사진처럼 camera는 scene에 담긴 3d 공간을 비추어 랜더러에게 넘겨주는 역할을 합니다. 카메라는 시야각(fov), 시작(near) / 끝(far) 지점 등을 조절할 수 있습니다. camera 기본개념 fov (field of view) 시야각 이라고 합니다. 시야각이 커질 수록 카메라가 담는 화면의 영역이 넓어집니다. Three.js에서 다루는 각도들과는 다르게 radian이 아닌 일반적인 각도를 씁니다. aspect fixel ratio → 화면의 가로세로 비율 near / far 카메라의 시야의 가장 먼 곳(far)과 가장 가까운 곳(near)을 뜻합니다. far는 near보다 항상 커야합니다. camera의 종류 카메라의 종류에는 perspective, orthograp.. [THREE] three.js의 renderer와 scene알아보기! 요즘은 업무상 three.js를 공부하고 있습니다. 이전에도 사용했던 기술이지만 기초부터 천천히 다져보기 위해 다시 공부하고 있는데요! 블로그에 내용을 공유해보고자 합니다! Three.js의 기본구조 아래의 사진과 같이 가장 큰 바탕이자 뷰포트와 같은 역할을 하는 renderer, 가장 큰 node이자 모든 요소들이 실질적으로 보여지는 scene, 그러한 요소들은 바라보는 즉 우리가 보는 눈의 역할을 해주는 camera로 볼 수 있습니다. renderer three.js의 핵심 객체로 camera, scene등을 객체로 넘겨 받아 표현합니다. 기본적으로 WebGL을 사용하며, renderer가 canvas에 대한 이미지를 생성 할 때, GPU가속 이미지 처리와 효과를 허용합니다. // 랜더러 생성 - 매.. [Next] Next13에서 appRouter와 Colocation 도입해보기! 프로젝트를 진행하면서 기존에 작업중이었던 Next12 기반의 앱을 13버전으로 마이그레이션 하는 일이 있었는데요! 기존의 폴더 구조와 많이 달라진 탓에 기존 디자인 패턴을 걷어내고 새로운 구조를 도입하는 것을 고려하다보니 Co-Location 이라는 개념이 들어오게 되었어요! 오늘은 이 부분을 공유해볼까 합니다. App directory? Nextjs 13버전에서 제시한 새로운 구조인 appRouter을 사용하기 위한 directory이며, docs에 따르면 next.js의 라우팅 및 레이아웃 경험을 개선하고 디렉토리 도입과 함께 React의 미래에 맞추어 조정하는 과정에서의 app레이아웃 후속조치라고 합니다. app 디렉토리는 아래와 같은 지원을 포함하게 됩니다 레이아웃 : 상태를 유지하고 비용이 많이.. [DEV] 데이터 직렬화, 역직렬화 언젠가 데이터 직렬화가 뭔지 알고 있냐는 질문을 받았던 일이 있었는데 그때 대답을 하지 못했던 기억이 나서 이번엔 이 부분을 이야기 해보려고 합니다! 데이터 직렬화(Serialization)와 역직렬화(Deserialization)의 의미 위키 백과에 따르면 직렬화는 객체를 저장 가능한 상태(예를 들어 디스크에 파일 형태 등) 혹은 전송 가능한 상태(네트워크 상의 데이터 스트림 형태)로 변환하는 것을 뜻한다 라고 합니다! 쉽게 말해서 직렬화는 객체를 저장, 전송 할 수 있는 특정한 포맷으로 상태를 바꾸는 과정이라고 볼수 있습니다. 그렇다면 역직렬화는 반대의 개념을 가지고 특정 포맷의 데이터를 객체화 하는것을 말할수 있겠습니다. JavaScript JSON Front-End에서 가장 많이 다루는 자바스크립.. [DEV] 암호화 - 단방향 그리고 양방향 블로그를 운영하면서 가장 조회수가 높은 글이 하나 있는데... React 환경에서 sha256 해시 생성에 대한 내용을 적은 아티클 입니다. 그래서 좀더 알아보고자 하는 생각으로 암호화에 대해 알아보려고 합니다! 암호화? 암호화는 특정 키(key)를 이용해 해독이 불가능한 상태로 변환하는 것을 뜻합니다. 방식에 따라 양방향, 단방향 암호화로 분류가 가능한데 이는 복호화 여부에 따라 나눌수 있습니다. 단방향 암호화 단방향 암호화는 입력된 데이터를 암호화 하여 출력값을 만들지만 해당 데이터를 원래의 값으로 복호화가 불가능한 방식입니다. 예를 들자면 제 블로그 아티클에도 올렸던 sha-256해시를 예시로 볼 수 있는데요 sha-256은 어떠한 데이터든 256비트로 길이의 해시값을 생성하는데 이는 역으로 복호화.. [DEV] 라이브러리와 프레임워크의 차이점 개발을 하다보면 라이브러리, 프레임워크라는 말을 되게 많이 듣기도 하고 또 쓰기도 하는데 정확히 알고 쓰면 좋을것같아서 블로그에 올리기로 했습니다! 라이브러리 라이브러리는 개발자가 개발하는 어플리케이션에서 사용할 수 있는 도구들의 모음이라고 생각하면 좋습니다. 라이브러리는 애플리케이션의 다른 부분과 결합되어 작동하며, 개발자는 라이브러리 사용에 있어 자유로운 선택을 할 수 있으며 개발자는 이것들을 특정 개발 프로세스에 적용해서 쓸수도 있습니다. 대표적인 라이브러리 : React, redux, recoil, Three.js, jQuery 프레임워크 프레임워크는 애플리케이션의 설계도를 제공하는 프로그램의 골격입니다. 프레임워크는 애플리케이션의 기본 바탕을 제공해 주고, 개발자들에게 어느 부분을 수정해서 사용.. [TypeScript] 타입스크립트의 기본 타입 정리 저는 지금 타입스크립트를 기본으로 한 환경에서 개발을 하고있습니다. 하지만 타입스크립트를 쓰면서 아무 생각없이 그냥 쓰던 타입들이 있어서 알아보던 중 기본 타입이 굉장히 많다는걸 알게되어 블로그에 정리 해보려고 합니다. 타입스크립트의 기본 타입 Boolean Boolean 타입은 true 또는 false 값을 가지는 논리 타입입니다. let isDone: boolean = false; Number Number 타입은 부동소수점 숫자를 나타냅니다. 타입스크립트는 10진수와 16진수 리터럴 외에도, ECMAScript 2015에서 도입된 2진수 및 8진수 리터럴을 지원합니다. let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b.. 이전 1 2 3 4 다음
