전체 글 527

옥소폴리틱스 인턴 프로젝트 1주차 회고 - 1

우연히 옥소폴리틱스에서 주관하는 국가사업인 TIPS의 인턴 포로젝트에 참여할 기회를 얻을 수 있었다. 나를 포함한 팀원 3명과 협업을 하는 코드스테이츠에서 진행한 final project와 비슷한 프로젝트였다. 주제에 대해서 의견을 나누어보고 사용할 스택과 코드 컨벤션에 대한 이야기를 주고 받았다. 1주차에 나왔던 의견들을 나열 해보면 테오구(필자) 젠더 갈등 10대들이 의논을 할 수 있는 커뮤니티를 만들어보는 것이 어떨까 2022년 트렌드에 대한 토론: 2022년의 트렌드 키워드를 골라 그 주제에 대한 토론 팀원1 역대 대통령 박물관 팀원2 각 정치인들의 대표적인 또는 현재 진행 중인 안건(사례 등등)들 정리해주는 페이지 추가하여 그 대표 안건의 지지하는지에 대한 답하는 페이지 옥소폴리틱스 측 피드백 ..

옥소폴리틱스 2022.10.12

싱글톤 패턴

싱글톤 패턴의 사용하는 이유 Singleton 패턴은 단일 책임 원칙 을 위반하여 두 가지 문제를 동시에 해결합니다 . 가장 먼저 떠올릴 수 있는 이점은 아무래도 메모리 측면일 것이다. 최초 한번의 new 연산자를 통해서 고정된 메모리 영역을 사용하기 때문에 추후 해당 객체에 접근할 때 메모리 낭비를 방지할 수 있다. 뿐만 아니라 이미 생성된 인스턴스를 활용하니 속도 측면에서도 이점이 있다고 볼 수 있다. 또다른 이점은 다른 클래스 간에 데이터 공유가 쉽다는 것이다. 싱글톤 인스턴스가 전역으로 사용되는 인스턴스이기 때문에 다른 클래스의 인스턴스들이 접근하여 사용할 수 있다. 하지만 여러 클래스의 인스턴스에서 싱글톤 인스턴스의 데이터에 동시에 접근하게 되면 동시성 문제가 발생할 수 있으니 이점을 유의해서 ..

편리한 cli 만들기

필자는 프로젝트를 할때마다 파일을 하나만들고 그 안에 스토리북과 tsx파일을 한곳에 모아서 작성하는 경향이 있다. 즉 -----.stories.tsx | |--.tsx import React from 'react' const Test = () => { return ( Test ) } export default Test import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import Test from './Test'; export default { title: 'Components/Test', component: Test, } as ComponentMeta; export const CardDa..

cli 2022.10.09

프로젝트 씹고 뜯고 즐기기 클라이언트 2 next js를 사용하는 이유

이 프로젝트에서 next js를 사용한 이유를 설명하고자 한다. 그 이유를 알기 위해선 react와 next의 구조적인 차이점과 렌더링하는 방식을 살펴보아야합니다. React React는 CSR(Client Side Rendering) 방식으로 렌더링하는 SPA(Single Page Application)입니다. 즉 하나의 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식입니다. react의 장점 페이지 이동시 깜박임을 주지 않는 장점이 있습니다. - 페이지를 이동하더라도 결과적으로는 하나의 html에서 이동하는 것이기 때문에 새로운 페이지를 요청하지 않기 때문입니다. react의 단점 같은 서비스..

프로젝트 씹고 뜯고 즐기기 백엔드 1 nest js를 사용한 이유

nest js를 사용한 이유 Express는 사용하기도 쉽고 성능도 뛰어나지만 아키텍처에 관한 정의나 기능을 제공해주고 있진 않습니다. Nest의 최대의 장점은 아키텍처를 통일하는데 쉽다는 것이라고 생각합니다. Nest의 구조를 보면 하나의 루트 모듈이 존재하고 이 루트 모듈(일반적으로 AppModule)은 다른 모듈들로 구성되도록 하는 것입니다. 이렇게 모듈로 쪼개는 이유는 앞서 설명한 여러 모듈에게 각기 맡은 바 책임을 나누고 응집도를 높이기 위함입니다. import { Module } from '@nestjs/common'; import { CatsController } from './cats.controller'; import { CatsService } from './cats.service'; ..

프로젝트 씹고 뜯고 즐기기 클라이언트 1

Storybook을 사용하는 이유 컴포넌트 단위의 개발이 가능하다는 점 컴포넌트에 어떤 프로퍼티들이 있는지, 어떤 프로퍼티에 어떤 값을 입력할 수 있는지, 어떤 값을 입력했을 때 어떻게 변하고 동작하는지를 온전히 소스만 보며 익히는 것은 쉬운 일이 아니다. 이때 storybook을 보게 되면 프로퍼티에 어떤 값이 들어갔는지 확인할 수 있다. 디자이와의 커뮤케이션의 도구로 매우 유용하다. 협업을 하다보면 보통 디자이너와 협업을 하게 되는데 정적인 디자인만 주고 동적인 움직임에 대한 지침을 주지 않을 때가 있다. 버튼을 클릭해서 띄우는 팝업이 있을 때 ‘이 팝업은 바깥 영역 클릭을 허용하는지/아닌지’ 나, 팝업을 닫을 때 ‘버튼으로 토글 해서 닫는 것인지/팝업 바깥 영역을 클릭해서 닫는 것인지’ 알기가 어렵..

블로그 제작 미니멈 후기

https://next-nest-blog-aiddlcpre-tmdqls2257.vercel.app/blogs https://next-nest-blog-aiddlcpre-tmdqls2257.vercel.app/blogs GETTING STARTED 처음뵙겠습니다. 처음뵙겠습니다. 저는 테오구 입니다. next-nest-blog-aiddlcpre-tmdqls2257.vercel.app 여차저차 하여 next와 nest를 이용한 블로그(?)제작의 미니멈이 되었다. 클라이언트: https://github.com/tmdqls2257/NextNestBlog-Client 백엔드: https://github.com/tmdqls2257/NextNestBlog-Server 블로그의 CRUD가 가능하게 제작하였으며 tag들..

lambda

- Serverless의 주축을 담당 - Events를 통하여 Lambda를 실행시킴 - NodeJS, Python, Java, GO등 다양한 언어 지원 - Lambda Function AWS Lambda (비용) - Lambda Function이 실행될때만 돈 지불 - 매달 1,000,000 함수 호출 시 무료 (그 후로는 유료) AWS Lambda (기타) - 최대 300초 런타임 시간 허용 - 512MB의 일시적인 디스크 공간 제공 - 최대 50MB Deployment Package 허용 S3와 lambda에 trigger를 연결해두면 S3에 어떤 object가 들어올 시 람다함수를 실행시켜줍니다. 만약 실시간으로 온도의 정보를 받아오고 일정 이상의 온도가 된다면 lambda 함수를 실행하여 메세..

AWS 2022.09.18

S3

S3( Simple Storage Service ) - 안전하고 가변적인 Object 저장공간을 제공 (ex: Google Cloud) - 편리한 UI 인터페이스를 통해 어디서나 쉽게 데이터를 저장하고 불러올 수 있습니다. - 파일 크기는 0KB부터 5TB까지 지원 - 저장공간 무제한 - Bucket이라는 이름을 사용함(디렉토리와 유사함) - Bucket은 보편적인 namespace를 사용함 S3 Object 구성 요소 - Key - Value - Version ID - Metadata - CORS S3 Data Consistency Model 1. Read after Write Consistency (PUT) S3 bucket에 파일을 올릴때 put을 사용합니다. 파일을 올릴시 우리는 바로 사용할 수 ..

AWS 2022.09.17