React 코드로 보는 S.O.L.I.D 객체 지향 설계의 5가지 원칙

개발을 하다보면 한번 쯤은 SOLID 원칙을 한번 씩 들어보았을 거라고 생각합니다. 프로그래머가 시간이 지나도 유지 보수와 확장이 쉬운 시스템을 만들고자 할 때 이 원칙들을 적용할 수 있는데 오늘은 직접 예제코드를 통해 SOLID 객체 지향 설계가 정확히 무엇인지 알아보는 시간을 가져보려고 합니다. 😀 SOLID 원칙 - Single Responsibility Principle : 단일 책임 원칙 한 클래스는 하나의 책임만 가져야 한다. - Open Closed Principle : 개방 폐쇄 원칙 소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다 - Listov Substitution Principle : 리스코프 치환 원칙 프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 ..

→2024.02.19

TIL

SSR 과 CSR 눈으로 비교해 보기

🔥 프로젝트 중...next.js로 간단한 프로젝트를 하고 있는 와중 중대한(?) 결정에 놓였다.최근 게시물을 보여주는 페이지를 SSR로 할 것인가 CSR로 할 것인가였다. ⭐️ SSR (Server Side Rendering)next.js를 사용한다면 무조건 알아야 하는 내용. SSR이다.영어 그대로 server 진영에서 렌더링을 진행한다는 것이다.클라이언트가 페이지에 들어왔을 때 서버는 즉시 렌더링 가능한 html 파일을 만들어 클라이언트에게 전달한다. 전달된 html은 클라이언트에서 즉시 렌더링 된다. 그 다음 클라이언트에서 js를 다운 받는다. 다운 받는 중 사용자는 컨텐츠를 볼 수는 있지만 조작할 수는 없다. js까지 성공적으로 실행되면 조작이 가능해진다.코드 예시import { Render..

→2023.12.20

TIL

22/08/24 [모각코] 11일차

오늘은 grid 를 써봤습니다 css 중 제가 자주 쓰는 flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 레이아웃 시스템입니다. 그래서 grid는 flex보다 복잡한 구현이 가능합니다. .container { display: grid; } grid-template-rows - 행에서의 배치 grid-template-colunms - 열에서의 배치 예를 들면 grid-template-columns: 100px 100px 200px; 이면 열이 100px , 100px, 200px 로 만들겠다는 것이고 grid-template-rows: 1fr 1fr 1fr 이면 행이 1:1:1 비율을 차지한다는 것입니다.

→2022.08.26

TIL

22/08/20 [모각코] 10일차

네캔만원 일단 배포 완료

→2022.08.21

TIL

22/08/13 [모각코] 8일차

useEffect를 통해 비동기함수를 다룰수 있다. const result = filteredCollected(); console.log(result); const getBeerList = async (e) => { console.log("GetBeerList Called"); const request_data = { beerTypeList: result }; // type of -> Object let response = await axios({ method: "post", url: "/api/filter", headers: { "Content-Type": "application/json" }, data: JSON.stringify(request_data), }); console.log("respons..

→2022.08.15

TIL

22/08/10 [모각코] 7일차

useEffect 와 props 뿌시기 useEffect()에서 console.log()를 믿지말자 데이터는 setBeerData()로 잘 변경되었는대 단지 console.log에만 안보일 뿐 즉, 바로 props로 넘기면 잘 된다. // Search.jsx const Search = (props) => { const [beerData, setBeerData] = useState([]); let navigate = useNavigate(); useEffect (() => { const getBeerList = async () => { console.log('Search.jsx'); let response = await axios.get('/api/search'); console.log('response...

→2022.08.11