목록Face the fear, build the future/Revision Sector (30)
Silver Library (Archived)
디자인 패턴이란(Design pattern)? 독학으로 배운이던, 전공자던, 개발자 모두라면 분명 한번은 '자신이 이전에 완성해 둔 코드' 를 참고해서 지금 진행중인 새 프로젝트에 '전에 구현한 그 기능' 을 전개하고 싶어한 적이 있을겁니다. 하지만 그렇게 하자하니 뭔가 아니어서, 결국 구글링 하면서 더 나은 예시를 찾아보며 이리저리 진행하게 됩니다. 아쉽게도 저 또한 후자였던 관계로, 디자인 패턴이라는 걸 알았을 때는 '이렇게 해서 진행을 하는 구나' 하고 알아가는 수준이었습니다. 그렇다면 이거, 어떻게 쓰는 걸까요? 적용 법. (작성중) 장점. 의도, 동기, 구조, 코드 예시. 디자인 패턴은 소프트웨어 디자인의 일반적인 문제들에 대해 시도되고 검증된 해결책들을 모은 것입니다. 이러한 문제들을 다루지 ..
일단 createContext 에 대한 용도적 정의를 먼저 내릴 필요가 있습니다. createContext context object 를 생성하기 위해 쓰이는 react hook api. useContext function component 에서 context object 를 불러오기 위해 쓰이는 react hook api. 그리고 이들을 사용 할 때, Provider component 가 사용되는데, 주로 영향을 끼치게 할 대상을 wrapping 을 함으로써 하위 child component 측에 context object 를 전달 하는 용도로 쓸 수 있다는 점. 예시. import React from 'react' import { createContext } from 'react' // context..
Next.js 를 사용하기 시작한 가장 큰 이유는 다음과 같았습니다. 1. Server Side Rendering (SSR) 이 가능한 점. 2. react-router-dom 을 대체해 볼 수 있는 유사점. 이번에는 사용중 기억나던 것들을 위주로 하나씩 기록해보고자 합니다. react-router-dom 에는 Link 가 있습니다. App.js 쪽에서, 아니면 Router.js 라고 하나 파일을 만들어 둔 후에 보통 각 연결 대상 페이지 마다 표기하죠. Next.js 로는 이렇게 가능합니다. 거의 똑같지만, 차이점이 있다면 import 의 source 가 next 라는 점. import React from 'react' import Link from 'next/link' class MyApp exten..
Side project title. Anime Biased Exhibition Room Description. 본 사이드 작업물은 react.js 로 카트 기능을 구현하기 위해 필요한 기능을 구현 해 보는 것에 목적을 두고 진행하였습니다. 컨셉은 '분기별 추천작'을 앱 관리자가 선별 하여 나열 해 둔 것을, 방문자가 마음에 드는 아이템을 몇 개 북마크 하도록 버튼을 클릭 해서 Bookmark 메뉴란에 저장되게 합니다. 이러한 기능을 구현하고자 react cart 를 구성하는 것을 목적으로 구글링 하며 조사 하던 중, useContext, createContext 를 접목하였습니다. 이는 props 의 보일러플레이트 같은 형태의 코드 구성을 피하고, 파일별로 접근이 용이할 필요 및 높은 직관성 및, 코드 ..