# Presenter

20개의 포스트
post-thumbnail

미사일마켓 :: 폴더 구조 선정

기존의 개인 포트폴리오를 리팩토링하려고 했으나 전체적인 UI도 변경하기위해 새로 만들기로 하였다. 중고 마켓과 자유게시판이 함께 있는 중고 마켓 커뮤니티를 만드려고 한다. 자유게시판 관련 파일은 container/presentational 패턴을 사용하고, 중고 마켓 관련 파일은 Hooks 패턴을 사용하여 만들 예정이다. 위의 이미지와 같은 container / presentational 패턴의 방식은 소스코드(기능)과 JSX(UI)로 나누는 방법이다. 가독성이 좋아지면서 오류 발견시 수정이 필요할 때 보다 쉽게 해결할 수 있어 유지, 보수 측면에서 유리하다. 특이사항으로는 파일이 나누어져있어 부모 컴포넌트에 자식 컴포넌트를 import 해줘야하며, 내부의 데이터는 props를 통해 변수나 함수를 전달

2023년 5월 1일
·
0개의 댓글
·
post-thumbnail

Container, Presenter / props

1. Container / Presenter Container와 Presenter 패턴은 하나의 컴포넌트를 유지보수 하기 쉽고 간편하게 하기 위한 분리한 폴더 패턴이다. 이미지 출처: 코드캠프 > Container: 컴포넌트의 Javascript 부분을 분리한 폴더 Presenter: 컴포넌트의 UI 부분을 분리한 폴더 > _각각 분류된 파일들이지만 자식이 될 컴포넌트를 export를 하여 내보내면 부모가 될 컴포넌트에서 import로 파일을 불러오면서 파

2023년 1월 23일
·
0개의 댓글
·
post-thumbnail

폴더구조: container/presentational 패턴

폴더구조의 체계화에 대해 알아보자. 크게 3가지의 구조가 있는데 **container/presentational 패턴, Hooks 패턴, 아토믹 패턴**이 있다. 요즘에는 최신 방식인 훅스패턴을 가장 많이 사용하지만 고전 방식이어도 유명한 container / presentational 패턴에 대해 먼저 알아보자! container / presentational 패턴이란. 소스코드를 JS(기능)와 JSX(UI)로 나누는 방법이다. > 이렇게 container와 presenter로 나누어주면 길었던 코드들이 나눠져 가독성이 좋아질 뿐만아니라 특정 부분에 오류가 있거나 수정이 필요할 때 보다 쉽게 해결할 수 있어 나누기 전보다 유지, 보수 측면에서 훨~씬 유리하다. ![](https://ve

2023년 1월 16일
·
0개의 댓글
·
post-thumbnail

[React] 실무용 폴더구조 container / presenter

폴더 구조 Container / Presenter 패턴은 React의 가장 기본적인 디자인 패턴이다. 서비스의 규모가 커질 경우 기능이 많아지기 때문에 폴더가 굉장히 많아지게 된다. 따라서 큰 그룹으로 묶어주면 관련 기능이 모두 해당 폴더 안에 들어있기 때문에 유지보수시 굉장히 유리해진다. 또한 주소 또한 가독성이 좋아진다!! 큰 그룹으로 묶어주었기 때문에 해당 주소의 내용은 모두 큰 그룹에 관련된 페이지임을 바로 알아차릴 수 있기 때문이다. 큰 그룹으로 묶어주는 예시로는 오늘 우리가 리뷰한 boards 같은것이 있다. 위와 같이 boads의 대분류에 들어간 폴더들은 모두 게시글과 관련있는 페이지,기능들이다. 따라서 **게시글 관련 유지 보수가 필요하다 하면 해당 폴

2022년 11월 13일
·
0개의 댓글
·
post-thumbnail

TIL[6일차].폴더구조 패턴, Typescript, 규칙과 협업

이번주는 이렇게 파일을 구조적으로 분리하고 데이터를 주고받으며, 규칙을 정해 협업하는 방법을 알아봅니다. 어제 밤을 세니 아침부터 잠이 쏟아지지만 카페인의 힘을 빌려봅니다... 화이팅!! 우선 포트폴리오 리뷰부터~ boards 목록보기 boards/:id boards/new boards/:id/edit restful한 폴더 구조 방식 규칙을 가지고 효율적이다 하는 것들은 다 유지보수를 더 좋게 할 것인가가 가장 초점입니다. 그렇게 해야 빨리빨리 고칠수 있고, 휴가를 가더라도 다른사람이 고져줄 수도 있겠죠. 앞으로 폴더는 이렇게 `res

2022년 11월 7일
·
0개의 댓글
·

javascript design pattern

올해 연말 쯤 런칭을 목표로하고 있는 프로젝트를 시작하기전, 회사프로젝트에서 사용할 디자인패턴에 대한 정립을 하기 위해 공부를 해보았다 목차 Singleton pattern Factory pattern Container/Presentational Pattern Proxy pattern ✏️Singleton Pattern 사용될 앱 전체에서 단일 글로벌 인스턴스를 공유 하는 것이다 > 인스턴스가 필요할 때, 똑같은 인스턴스를 만들지 않고 기존의 인스턴스를 활용하는 것! 생성자가 여러번 호출되도, 실제로 생성되는 객체는 하나이며 최초로 생성된 이후에 호출된 생성자는 이미 생성한 객체를 반환시키도록 만드는 것이다 싱글톤은 한 번 인스턴스화할 수 있고 전역적으로 액세스할 수

2022년 8월 31일
·
0개의 댓글
·
post-thumbnail

2022.07.11_2주차_day01

2주차 커리큘럼 실무적인 폴더구조 (Container/Presenter) 컴포넌트분리 및 데이터 전달 (Props) 목록 형태의 데이터를 보여주자 (Map/Filter) 안전한 코드를 작성하자 (Typescript) 규칙을 정해서 협업하자 (Eslint/Prettier/Husky) 폴더구조를 어떻게 만들것인가! 단순히 유지보수를 위해서, 한 파일에 코드가 70줄이 넘지 않도록 짧게 유지하기 위해서 폴더를 쪼개서 관리한다. 복습) [] 폴더는 동적 라우팅 /boards >> 게시글 목록 /boards/new >>게시글 등록 : 신규등록 /boards/[boardId] >>게시글 상세 /boards/[boardId]/edit >>게시글 수정 : 기존에 있는걸 수정 ⠀⠀⠀⠀⠀ ➡️ 라우터 쿼리 보드 key와 value의 이름이 같으면 value의 기입을 쓰지 않아도 작동한다. : shorthand property ![](ht

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

실무용 폴더구조 (패턴), 파일관리

프로젝트를 만들때 폴더 구조는 굉장히 중요합니다. 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부릅니다. 리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있습니다. 1. container / presentational 패턴 container / presentational 패턴이란, 소스코드를 자바스크립트(기능)와 JSX (UI)로 나누는 방법을 의미합니다. 여기서 container는 자바스크립트(기능) 부분을 의미하고, presentational은 JSX(UI) 부분을 의미합니다. 위 파일을 2개의 파일로 나누는 방법은 아래와 같습니다.

2022년 7월 5일
·
0개의 댓글
·

Container, Presenter

COntainer Presenter 패턴은 쉽게말해서 구조와 기능을 다른 컴포넌트로 분리해서 작성하는 구조이다. 컨테이너에서는 기능, 즉 API요청, Error, state 등의 기능과 관련된 것들이 소스로 들어가고 이것들을 props로 Presenter로 넘겨줘서 presenter 에서 똑같은 변수를 똑같은 기능으로 사용하게 만드는 것이다. 예시이다. Presenter는 Container의 함수를 props로 받아서 동일한 기능을 사용하게 하는 것이다. 이 방식의 장점은 데이터 처리의 과정과 눈으로볼수있는 UI 부부분을 분리해서 볼 수 있다는 것이다. 데이터처리의 과정에서 문제가 생기면 Container를 유지보수 하면되고, UI쪽에 문제가 생긴다면 Presenter 쪽으로가서 문제를 해결하면 된다는 것이다.

2022년 6월 11일
·
0개의 댓글
·
post-thumbnail

FE.07 Day.06

2주차.. 주말에 생활패턴에 적응하느라 힘들었던 몸을 그나마 좀 쉴.... 수 있(지 않았다)는 시간을 가지고 2주차가 시작됬다. 삼항연산자 저번주에 잠시 배운 ..또는 짚고 넘어간 삼항연산자.. 솔직히 썩 익숙하지는 않은 기호이다..여전히 익숙하지 않은 것 같다. 알고리즘 문제를 풀면서 몇번 본 기억이 있는 정도인지라..일단 다시 짚고 넘어갔다. > //부모 컴포넌트 _ container 부분 > > return( > // 자식 컴포넌트 _ presenter 컴포넌트 > // 본격적으로 props를 내려주는 부분입니다. > > ) > } >const BoardWriteUI = (props)=>{ > > type = "text" > // 본격적으로 props를 내려받는 부분입> onChange = {props.pro

2022년 5월 17일
·
0개의 댓글
·
post-thumbnail

Day-6 폴더구조체계화(Container, Presenter), props

_평소에 코드를 작성하면서 한페이지에 너무 길게 작성이 되서 찾아보기 힘들고 올라갔다 내려갔다 불편함을 느꼈는데 불편함을 싫어하는 개발자들은 역시나 폴더를 나눠 코드길이를 줄여서 사용하고 있었다. 폴더를 나눠도 서로 연결이 되어있어야 하는데 어떻게 하면 좋을지 알아보자!_ 코드를 한 페이지에 작성할 때 1000줄, 10000줄 길어진다면 어떡할까❓ 위에서 어떤 코드를 작성한 줄도 모르게 되고 이름과 관련 함수들을 찾으려면 한참 걸리게 되는 것이 현실이다. 이러한 불편함을 방지하기 위해 폴더구조체계화를 해준다면 더 빠르고 간결하게 코드를 찾고 연관성을 찾을 수 있게 된다. 따라서 실무에서도 보통 코드가 70줄 정도가 최적이며 100줄 이상은 넘어가지 않도록 사용하고 있다. 폴더구조체계화에는 Container와 Presenter 패턴으로 나눌 수 있다. Container&Presenter > Container는 javascript(기능) 영역을 담당하고 부모컴포넌

2022년 5월 16일
·
0개의 댓글
·
post-thumbnail

코드캠프 FE 6일차 - TIL(Container,Presenter,Props)

6일차 > 📔 학습목표 실무적인 폴더구조     >>    container / Presenter 컴포넌트 분리 및 데이터 전달    >>    props > 지난 시간 수업 코드리뷰 freeboard_frontend 의 게시물을 등록하면, 내가 등록한 게시물의 보드 페이지로 이동하는 게 과제. (동적라우팅 & 조건부렌더링 or 옵셔널체이닝) -> 결과물 폴더 구조 대괄호로 묶여있는 boardId 가 동적라우팅으로 연결된 게시글 상세페이지이다. new에서 게시글을 등록하면 [boardId] 페이지로 이동!

2022년 5월 16일
·
0개의 댓글
·
post-thumbnail

Storybook이 뭔가요? 리덕스는 또 뭐죠?

스토리북 (Storybook) 스토리북은 리액트 UI 컴포넌트를 개발할 때 쓰이는 라이브러리다 전체 모양을 세우는 프레임워크와는 다르게 라이브러리는 필요한 부분만 쏙쏙 골라 쓸 수 있어서 편리하다 스토리북은 맨 처음 React만 지원했지만, 현재는 Vue도 지원한다. 추후 Angular도 지원예정 리액트 컴포넌트 트리 (React Componet Tree) 우리가 컴포넌트 베이스를 제작한다고 가정을 했을 때, ![](https://velog.velcdn.com/cloudflare/genius_jihyepark/6921521d-2e3f-4e4a-b4a2-4cb6ea31b16d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E

2022년 4월 14일
·
1개의 댓글
·
post-thumbnail

9)Javascript..죽어라 하는데,,, typescript..너가 왜 나와? 타입 왜 귀찮게 알려줘야하는데?(Code-Camp FE 6기)

오늘의 요약 _**오늘은 수정하기 화면에서 기본값 나오게 만들기, 타입스크립트 크게 2가지 주제에 대해서 알아봤습니다. 수정하기부분에선 데이터를 조회하고, 조회한 데이터를 defaultValue로 바인딩 시켜줘야 한다는 것 이었습니다! 하지만, 여기까지만 하게 되면, 눈앞에 보이는 defaultValue는 값이 있는데, 실제 저장된 state는 안에 비어었습니다! 따라서, 수정하기 버튼을 누르게되면 비어있는 state의 값이 전송되므로 빈 값으로 수정이 되어버렸는데, 이를 막기 위해서 2가지 방법이 있었죠! 1 - 각각의 state에도 기본값을 모두 채워준다. 2 - 입력을 해서 변경된 state만 따로 모아서 Backend로 보낸다. 여기서 더 나은 방법은 2번 이었습니다! 이유는, 글자가 1000~1500자인 contents가 있을때, 변경도 안했는데 기본값으로 state에 저장되어, Backend에 수정요청이 되면 비효율적이기에 우리는 2번을 사용했습니다! 또한 타입스크립트

2022년 3월 24일
·
0개의 댓글
·

container / presenter

폴더구조 체계화 수정 보수에 용이하고, 협업에도 적합하다. container / presenter 패턴 JSX부분(HTML 부분 - presenter)과 state등의 로직(자바스크립트 부분 - container)을 나누어 각각의 파일에 담음 파일이름.container.js 파일이름.presenter.js 확장자는 js dot대신 카멜케이스나 - 쓰기도 함. 바꿔도 상관 없음. container 부모 컨포넌트 - 불러옴 import return에 불려온 함수 적어줌(JSX부분) presenter 자식 컴포넌트 - 불려감 import emotion(emotion 기준으로는 부모컨포넌트-상대적임) 내부 변수와 함수는?? props로! props : 부모가 자식에게 물려주는 변수나 함수 (자식이 부모에게 줄수는 없음 - 데이터의 흐름 단방향) container presenter aaa, bbb라는 객체가

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

6) 폴더 구조가 왜 중요한데 ? props는 뭐야 ?한 파일에 200줄 만들어놨더니 container,presenter에 왜 쪼개는건데 !!! (Code Camp FE 6기)

오늘의 요약 _**오늘은 실무에서 사용되는 폴더 구조를 한 번 적용해 봤습니다 자바스크립트 부분과 HTML 부분, 쿼리 부분, 스타일 부분을 모두 잘게 쪼갰었죠?! 여기서 자바스크립트 부분을 담고 있는 컴포넌트를 container component 라고 불렀고, HTML 부분을 담고 있는 컴포넌트를 presentational component, 줄여서 presenter 라고 부른다 했습니다. 이러한 방식을 줄여서 container/presenter 패턴이라고 부릅니다. 파일을 잘게 쪼개다보니, 연결하는 방법은 어렵지 않았죠? export와 import를 사용하여 연결해 주었습니다! 하지만, import를 한다고 내부에 있는 데이터까지 연결 되는 것은 아니였죠?, 두 컴포넌트간 데이터를 연결하려면, props를 사용해야 했습니다. 우리는 props를 사용함으로써 부모컴포넌트의 변수 또는 함수를 자식컴포넌트로 전달해 줄 수 있었습니다! 여기서 중요한 점은, 리액트의 데이터 흐름은 단

2022년 3월 20일
·
0개의 댓글
·

Day 06.

[ 폴더구조 체계화 ] container / presenter > container /presentational 패턴 소스코드를 js(기능)와 html(정확히는 jsx로, ui)로 나누는 방법을 의미한다 ❗️ 내용만 똑! 떼오면 내부 함수, 변수들이 연결이 되어있지 않아 오류발생 props > container가 2개의 컴포넌트로 분리되었는데, 부모 컴포넌트에서 자식컴포넌트로 변수/함수를 전달해준다 쉽게 생각해서 container -> (props) -> presenter ✏️ 단방향 구조 리액트는 부모

2022년 1월 17일
·
0개의 댓글
·
post-thumbnail

TIL - Layout, Global Styles

> 모든 코드에 의미를 담겠습니다. 오늘은 내가 이해한 바의 LayoutOut, Global Styles에 대해서 이야기 해보겠다. 물론 피드백은 환영.. 제발요.. . 지금까지 내가 개인 실습 프로젝트를 자유게시판을 만들면서 Layout을 사용하지 않았다. Presenter/Container 폼으로 컴포넌트들을 잘게 쪼개어서 재사용성 및 state에서 렌더링이 여러번 되는것에 대해서 고민을 많이 하였지만, HTML, CSS 파일하나를 제대로 만들어놓고 범용적으로 사용해야겠다는 생각을 하지 못했다. 그런 범용성을

2021년 5월 30일
·
0개의 댓글
·
post-thumbnail

[13일차] 주말 복습/ 실무형 폴더구조 container와 presenter/ props

react에서 컴포넌트를 정리하기 위한 폴더 구조 구성 방법이 대표적으로 두가지가 있다고 한다. container / presenter 패턴 Atomic 패턴 아직 Atomic 패턴은 사용해 본 적이 없다. container / presenter 는 과제하면서 계속 사용하고 있어 간단하게 정리해본다. *중간에 카피나 ori같은건 연습용 파일이니 무시하자 컴포넌츠 폴더 안의 각 폴더의 이름이 해당 페이지의 역할이다. boardlist는 게시판목록, 커멘츠는 댓글, detail은 상세 페이지 등. 파일명을 보면 .container/ .presenter/.queries/.styles이 있다. 내가 아직 안써본 부분도 많겠지만 현재까지는 이렇게 사용

2021년 5월 26일
·
0개의 댓글
·

[TIL]

Container Presenter Pattern 기본적으로 React 프로젝트를 진행하면서, 폴더 구조를 Container Component / Presenter Component로 나눠서 작업을 진행했다. 이렇게 나눠서 작업을 한 이유는 React의 장점인 재사용성을 높이고, 유지보수를 잘 하기 위해서이다. > #### Container Component 어떻게 동작해야 할지를 책임진다. 내부에 Presentational Component와 Container Component 모두를 가질 수 있고, 대게 DOM마크업과 자체 스타일을 가지지 않는다. 데이터 및 데이터와 관련된 동작을 다른 Presentational Component와 Container Component에게 제공한다. Flux 의 Action 을 호출하는 작업을 Container Component에서 작성하며, 이 Callback들은 다른 Presentational Componen

2020년 5월 22일
·
0개의 댓글
·