본문 바로가기

전체 글78

[정보처리기사] GoF디자인 패턴 (생성, 구조, 행위) 디자인 패턴이란, UX/UI에서 자주쓰는 해결방법으로 반복되는 디자인, 구현 방식 모음이다. 예를 들어 사이드바나 드롭다운 메뉴등은 여러 프로젝트에서 쓰이는데 이렇게 반복적으로 만들어야 하는 코드에 대한 방식 모음이라고 생각하면 쉽다. 이런 디자인패턴은 정보처리기사에서 크게 생성, 구조, 행위패턴으로 나뉜다. 1. 생성 패턴 - 객체를 어떻게 만들것인가. (추/빌/팩/프/싱)1. 추상 팩토리 (Abstract Factory) - 관련된 여러 객체군을 한 번에 일관되게 세트로 생성하는 인터페이스 제공 -> 구체적으로 어떻게 만들지는 정하지 않고(추상적으로), 공통된 인터페이스(틀)만 제공 2. 팩토리 메서드 (Factory Method) - 상위 클래스에서 인터페이스만 제공, 객체 생성 코드를 서.. 2025. 7. 24.
[솔로프로젝트] My small trip(4) - 리액트로 환율계산기 만들기 (환율 API) 해외 여행을 하다보면 매일 앱에서 확인했던 것은 그날의 환율과 날씨였다. 오늘은 여행 준비 혹은 여행중에 쓸 수 있는 환율 계산기를 만들어보기로 했다. 환율API 구글링을 통해 매일 새로운 정보로 업데이트 되는 환율 API를 받을 수 있었다. 아래의 주소에서 매일 달라지는 정보가 업데이트 되는 것을 확인 할 수 있다. 바꾸고싶은 나라의 화폐를 입력하면 해당하는 값을 받을 수 있다. 코인을 비롯한 여러가지 화폐들을 계산할 수 있는데, 아무래도 너무 옵션이 많으면 더 헷갈릴것 같아서 나는 사람들이 많이 쓸법한 화폐들을 남겨 놓고 나머지는 옵션에서 지워줬다. 환율 옵션 만들기 추려준 옵션들을 통해 유저들이 자신이 가진 화폐(from)에서 바꾸고 싶은 화폐(to)를 선택할 수 있는 옵션 창을 만들었다. 그리고 .. 2024. 1. 18.
[솔로프로젝트] My small trip(3) - Next.js의 렌더링(SSR, SSG, ISR) React는 기본적으로 CSR(client side rendering)기반으로 동작한다. 유저가 요청을 보내면 CSR방식은 일단 HTML과 Javascript파일을 받아와 렌더링 하는데, 이 후 필요한 파일들을 한번에 받아오기 때문에 이 후 요청을 비교적 빠르게 실행시켜줄 수 있다는 장점이 있다. 하지만 처음에 렌더링을 하는 시간이 오래 걸릴 수 있으므로, 유저가 요청을 보낸 후 렌더링이 완료 될 때까지 빈 화면을 보는 시간이 길어 질 수 있다. 이와 대비대는 개념은 SSR(server side rendering)방식인데, 서버에서 완성된 HTML을 보내주어 바로 렌더링 할 수 있도록 한다. 이 방식은 CSR에 비해 첫 화면 렌더링이 빠르나, 유저의 요청마다 서버에서 완성된 HTML을 보내주어야 하므로 .. 2024. 1. 4.
[솔로프로젝트] My small trip(2) - 라우팅과 환율 api 라우팅 라우팅이랑 간단히 말해 네트워크에서 경로를 설정하는 작업이다. 위 주소창을 보면 마지막에 #starred, #inbox로 끝나는 것을 볼수 있는데 이처럼 다른 경로를 설정해 유저에게 보여질 요소를 정하는 것을 라우팅이라고 생각하면 된다. 라우터는 이 작업을 위한 장치라고 생각하면 된다. React를 사용하여 프로젝트를 만들면 라우팅을 위해 react-router-dom을 설치하고 태그로 컴포넌트와 경로를 설정해주어야 한다. 리액트 버전에 따라 조금씩 차이가 있을수 있지만 이렇게 경로 설정하는게 리액트에서의 라우팅 작업이다. 위 코드에서 보면 path와 component를 이용해 경로와 해당 경로에서 보여질 컴포넌트를 설정해 준 것을 확인 할 수 있다. NEXT.JS에서의 라우팅 next.js를 이.. 2023. 12. 7.

티스토리툴바