synonym search
1.0.0
의미있는 동의어 사전
유의어 사전을 사용할 때 찾은 모든 단어를 기억하십시오.
SynonymSearch는 모든 검색어 목록을 검색 시 공유 정의별로 정렬하여 방금 배운 내용(또는 잊어버릴 수 있는 내용)을 검토하는 데 도움이 됩니다.
SynonymSearch를 사용하면 공유하는 정의에 따라 의미가 달라지는 문장에 동의어를 삽입하여 동의어의 유사성을 테스트할 수 있습니다. 이 앱은 정의를 적극적으로 이해한 다음 동의어 저장소와 비교하여 검토하는 데 도움이 됩니다.
이 프로젝트는 Code Institute의 MS2 Interactive Front End 모듈의 일부로 개발되었습니다. Merriam-Webster의 Collegiate® Thesaurus의 JSON 응답 형식과 함께 작동하도록 작성되었으며 Next.js를 통해 React로 개발되고 create-next-app 으로 부트스트랩되고 Vercel로 배포됩니다.
여기에서 프로젝트를 방문하세요: 동의어.vercel.app
참고 사항: 이전 구성표는 'synonym-chaser'로 명명되었습니다.
서로 다른 구성 요소 간의 관계를 설정하고 적절한 책임을 할당하기 위해 2021년 1월 초에 회로도 모형이 시작되었습니다.
이 접근 방식은 프로젝트 범위를 세분화하는 데 도움이 되었으며, 가장 중요하게는 개발 및 문제 해결을 위한 참조를 위한 벤치마크를 제공했습니다.
React에서 생각하기(문서)를 참조하세요.
{Results} => {Root} => {Sense} => {Option} 으로 분류됩니다(결과 디렉터리 참조).
{Saves} => {Selection} 으로 분류됩니다(저장 디렉터리 참조).
{ReplaceSubStringNode} 를 통해 {Results} =>{Root} => {Sense} 에서 전달된 조작된 문자열을 나타냅니다(string.helper.js 참조). 이제 {Saves} => {Selection} 으로 분류됩니다(표시 참조). 
{Sense} => {Option} 사이에서 완전히 처리되므로 디스플레이는 이제 더미 구성 요소입니다(결과 디렉터리 참조). 동적 콘텐츠가 포함된 모든 노드에는 일관된 위쪽 및 아래쪽 테두리가 적용됩니다. 이러한 개별 테두리는 노트 패드의 재료 규모를 사용자에게 친숙한 터치포인트로 전달하도록 설계되었습니다. 이러한 wordBoxes 간격만 다르며 목록 목록의 계층 구조를 시각적으로 전달하는 역할을 합니다.
ThemeProvider 스타일을 구성 요소 트리 아래로 전달하기 위해 앱을 래핑합니다. Material-UI 테마를 참조하세요. 장치/플랫폼/사용자 구성에 적응하고 명시적인 서체에 의존하지 않도록 글꼴 계열은 시스템 글꼴 배열로 설정됩니다. theme.context.js 의 commonSettings 객체에는 Material-UI의 테마 제공자와 병합된 이러한 재정의 목록이 포함되어 있습니다. Material-UI Global-css를 참조하세요.
export const commonSettings = {
typography : {
fontFamily : [
'-apple-system' ,
'BlinkMacSystemFont' ,
'"Segoe UI"' ,
'Roboto' ,
'"Helvetica Neue"' ,
'Arial' ,
'sans-serif' ,
'"Apple Color Emoji"' ,
'"Segoe UI Emoji"' ,
'"Segoe UI Symbol"' ,
] . join ( ',' ) ,
} ,
} 이 앱에는 Material UI의 팔레트 구성을 통해 구성된 밝은 테마와 어두운 테마에 대한 두 가지 기본 색상과 보조 색상 세트가 있습니다. 색상의 동작과 상태는 Material-UI의 기본 테마 객체에 정의된 속성에 따라 달라집니다. 보조 색상은 중간색으로 설정되고 원색은 단일 "특징 색상"으로 렌더링됩니다. 색상 세트에 대한 최소한의 접근 방식은 메모장을 향상시키는 것입니다.
const lightTheme = createMuiTheme ( {
palette : {
type : 'light' ,
primary : {
main : '#ff3200' ,
} ,
secondary : {
main : grey [ 900 ] ,
} ,
} ,
... commonSettings ,
} ) ; const darkTheme = createMuiTheme ( {
palette : {
type : 'dark' ,
primary : {
main : lightblue [ 500 ] ,
} ,
secondary : {
main : '#fafafa' ,
} ,
background : {
default : '#151515' ,
} ,
} ,
... commonSettings ,
} ) ; 웹사이트는 전체 페이지를 다시 로드하지 않고도 단일 페이지 앱의 기능을 렌더링하고 기본 앱처럼 작동하도록 최적화된 프로그레시브 웹 애플리케이션으로 모델링되었습니다. 해당 프레임워크는 브라우저 전반에 걸쳐 유연성을 보장합니다.
이 웹사이트는 대형 부동 작업 버튼(FAB)을 활용하여 "검색", "정보" 및 "저장"이라는 세 가지 원격 보기 사이를 빠르게 탐색합니다. 이러한 뷰 모드를 개별적이고 효율적으로 표현하기 위해 시각적 은유가 활용됩니다.
플로팅 "단축 다이얼" 버튼은 뷰 전반에 걸쳐 유지되어 앱의 핵심 작업(용어 쿼리, 저장된 기록 지우기, 밝은 모드 또는 어두운 모드 전환)에 빠르게 액세스할 수 있습니다.
이 앱은 초기 페이지 로드 시 "대화형 동의어 사전 앱"이라는 목적을 간결하게 설명하는 사용자 정의 시작 화면을 제공합니다.
jsx , jss js 사이를 보장하기 위해 구문을 변환하는 툴체인 컴파일러입니다. (Nestjs로 부트스트랩됨)next 개발, next build 는 생산 준비, next start .commit 하고 GitHub에 push 데 활용됩니다.push 시 프로젝트의 코드와 디렉터리를 저장하는 데 사용됩니다. 스타일은 jss 구문으로 작성되며 Material-UI 사양에 따라 Nextjs 서버 측 렌더링과 잘 작동합니다. 여기에는 서버 측 렌더링된 스타일을 사용하기 직전에 마크업에 삽입하기 위해 pages/_document 사용자 정의하는 논리가 포함되어 있습니다. 이는 비공식 권장사항이며 MUI/Gatsby용 플러그인과 유사한 Nextjs용 공식 플러그인을 MUI가 출시하는 경우 리팩토링되어야 합니다.
모든 스타일 개체는 MUI의 makeStyles 후크를 사용하여 생성되며 테마 지정에 대한 MUI 스타일 문서의 지침을 따릅니다. 여기에는 CSS 재정의 및 미디어 쿼리가 포함됩니다. 주요 구성 요소의 스타일 개체는 스타일 디렉터리의 범위에 따라 구분되며 필요에 따라 모듈로 가져옵니다. 그러나 일부 구성 요소, 즉 Launcher 에는 구성 요소 파일 자체에 선언된 모든 스타일 소품이 있습니다. 일관성을 위해 결국 모든 스타일을 하나의 디렉터리에서 내보내야 합니다.
results 트리는 상수를 초기화하지 않고 모든 API 호출에서 jsx 구성 요소를 렌더링합니다. 소품과 조건식은 MW-Thesaurus API의 응답 스키마 반복을 제어합니다. 값과 Prop-Type 확인은 이 스키마에서 올바른 데이터를 얻기 위해 특별히 작성되었습니다.
저장된 각 단어 인스턴스는 단어의 특정 정의, 레이블, 루트 단어와 같은 "가져온" 결과 계열의 속성을 유지하여 중복 값을 증가시키고 의미 정의에 따라 단어를 그룹화하는 동시에 동일하더라도 각 인스턴스를 보장합니다. 이름 값에서 정의와 의미가 다른 경우 구별됩니다.
React 후크 useReducer , useContext , createContext 는 context/words.context (HistoryProvider 참조)에서 함께 조립되어 동일한 데이터를 공유하고 소비하는 구성 요소에 대한 컨텍스트 래퍼를 제공합니다. 이 로직은 next.js/examples/with-context-api에 설정된 예제에서 직접 모델링되었습니다.
HistoryProvider 의 내보낸 컨텍스트 래퍼 후크 useHistory 및 useDispatchHstory 에 의해 달성된 결과에 따라 DOM을 근본적으로 조작하기 위해 helpers/* 의 고차 구성 요소, 공유 구성 요소 및 도우미 함수 전반에 걸쳐 활용됩니다. 동일한 논리가 여러 용도로 다시 사용됩니다. MUI의 ThemeProvider를 사용하여 사용자 정의 래퍼를 따라 연결합니다(ThemeProvider 참조). 이 경우 보기 값을 설정하면 모든 구성 요소가 어디에서나 페이지를 변경할 수 있습니다. 이 컨텍스트 레이아웃 공급자의 포괄적인 특성에 유의하세요.
export const ThemeContextProvider = ( { children } ) => {
// Sets the theme for MUI ThemeProvider to use
const [ darkMode , setDarkMode ] = useState ( false ) ;
// Sets the current view
const [ value , setValue ] = useState ( 'launch' ) ;
// Hooks to set warning colors for searchText input
const [ meta , setMeta ] = useState ( true ) ;
const [ root , setRoot ] = useState ( '' ) ;
// Rides an MUI hook to set a memoized theme
const prefersDarkMode = useMediaQuery ( '(prefers-color-scheme: dark)' ) ;
useMemo (
( ) => ( prefersDarkMode
? setDarkMode ( true )
: setDarkMode ( false ) ) ,
[ prefersDarkMode ] ,
) ;
// Provides all values and the hooks that control them
return (
< ThemeDispatchContext . Provider
value = { {
darkMode ,
setDarkMode ,
value ,
setValue ,
meta ,
setMeta ,
root ,
setRoot ,
} }
>
< ThemeProvider
theme = {
darkMode
? darkTheme
: lightTheme
}
>
{ children }
< / ThemeProvider >
< / ThemeDispatchContext . Provider >
) ;
} ;
// All state/hooks are accessible by importing
// a catch-all export below
// Example:
// // anyFile.js
// import { useDispatchTheme } from './../theme.context'
//
// const dispatch = useDispatchTheme()
//
// Change any/all states from any component
// dispatch.setDarkMode(false)
// dispatch.setValue('search')
//
export const useDispatchTheme = ( ) => useContext ( ThemeDispatchContext ) ;
MW-Thesaurus는 비상업적 및/또는 교육 목적으로 무료로 사용할 수 있습니다. 정보 탭의 주요 브랜드 로고는 Merriam-Webster 개발 센터에서 요청한 브랜드 지침을 따르지만 이에 국한되지는 않습니다.
이 프로젝트에 연결된 등록된 Thesaurus API 키는 현재 공개되어 있습니다. 이 논의에 따르면 클라이언트 측에서 API 호출을 보호하려는 노력은 개인 키가 항상 노출되므로 목적이 없습니다. Nextjs API 경로에 따라 /pages/api 에 내부 엔드포인트를 갖도록 추가 구성을 고려해야 합니다. 위의 이유와 프로젝트의 교육 목적으로 키가 .env.local 에서 노출되었습니다.
const axiosConfig = { baseURL : 'https://dictionaryapi.com/api/v3/references/' , } ;
function searchThesaurus ( searchText , selection ) {
const query = selection || searchText ;
// Key is processed from ignored env.local
// use this method if API endpoint is set up in /pages/api/*
const key = process . env . MW_THESAURUS_KEY ;
// @note Key is explicitly declared otherwise
// for Production/submission
return axiosGetCancellable (
`/thesaurus/json/ ${ query } ?key= ${ key } ` ,
axiosConfig ,
) ;
}참고: 비정형 메소드에 대한 모든 설명은 jsDoc 표준을 따르는 주석 블록 내에서 찾을 수 있습니다.
사용자는 사이트에 도착한 후 몇 초 내에 설명을 보기를 기대합니다.
Launcher 설명:useEffect 사용하면 Launcher 초기 페이지 로드 시 한 번 실행될 수 있습니다.useContext 사용하면 Launcher 시간 초과 후 현재 페이지 보기 value ' search '로 설정할 수 있습니다.Synonym Search An Interactive Thesaurus App "이라는 제목을 봅니다. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Launcher = ( ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ open , setOpen ] = useState ( true ) ;
const [ showOpen , setShowOpen ] = useState ( true ) ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
setShowOpen ( false ) ;
setTimeout ( ( ) => {
setOpen ( false ) ;
viewDispatch . setValue ( 'search' ) ;
} , 350 ) ;
} , 2500 ) ;
} , [ ] ) ;
return (
< >
< Backdrop
className = { classes . backdrop }
open = { open }
/ >
< Grow
in = { showOpen }
unmountOnExit
>
< Box className = { classes . launch } >
{ ... excerpt . . . }
Synonym
/Search
An Interactive Thesaurus App
{ ... excerpt . . . }
< / Box >
< / Grow >
< / >
) ;
} ;
사용자가 보기 간을 신속하게 탐색하기를 원합니다.
Speed (Dial) :onClick 엽니다.FixedBottom (FixedBottom에서 분기됨)을 사용하면 스크롤할 때 하단 Speed Dial 모바일의 하단 막대 위로 반응적으로 이동할 수 있습니다.useScrollTrigger 사용하면 Speed Dial 클릭 시 id="back-to-top" 인 앵커를 통해 창을 페이지 상단으로 다시 스크롤하는 플로팅 작업 버튼인 ScrollTop 으로 표시 여부를 바꿀 수 있습니다.Search 용 Prop은 Speed Dial 로 전달되어 Thesaurus API에 쿼리를 보내는 기능인 onSearchTextChange 활성화합니다.useState 사용하면 Search active 된 경우를 제외하고 useDispatch 통해 페이지 value 변경될 때마다 useEffect 항상 SpeedDial 닫을 수 있습니다.ToggleTheme , Search , ClearSaves 보기에 있습니다.SpeedDial 클릭합니다.SpeedDial 열려 있습니다ToggleTheme 작업을 클릭합니다.<mode> not 것으로 변경됩니다.SpeedDial 이 닫혔습니다.Saves 보기에 있습니다.SpeedDial 클릭합니다.SpeedDial 열려 있습니다Search 작업을 클릭합니다.SpeedDial 아직 열려 있습니다.Search 보기에 있습니다.SpeedDial 사라집니다ScrollTop 버튼이 나타납니다ScrollTop 클릭합니다.SpeedDial 나타납니다SpeedDial 다이얼 작업을 클릭하여 x 및 y 차원(보기 의 위/아래, 보기 사이의 왼쪽/오른쪽)에서 빠르게 탐색할 수 있습니다. 또한 페이지 헤더에서 보기별 버튼 탐색에 액세스할 수 있습니다. 다른 두 개의 보기는 Saves 및 Info 이며 SpeedDial 내의 작업과 동일한 부동 작업 버튼 계열에 속합니다. 테마, 색상, UI의 일관성과 특이성은 전달되는 지속적인 터치포인트에 대한 사용자의 충동과 친숙함에 영향을 미칩니다. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Speed = ( {
children ,
value ,
index ,
searchText ,
loading ,
onSearchTextChange ,
... other
} ) => {
const trigger = useScrollTrigger ( ) ;
const classes = useStyles ( ) ;
const [ open , setOpen ] = useState ( false ) ;
const [ direction , setDirection ] = useState ( 'up' ) ;
const matches = useMediaQuery ( '(min-width:600px)' ) ;
const viewDispatch = useDispatchTheme ( ) ;
const view = viewDispatch . value ? viewDispatch . value : null ;
const handleClick = ( event ) => setOpen ( ! open ) ;
open && trigger ? setOpen ( false ) : null ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
if ( viewDispatch . value !== 'search' ) {
setOpen ( false ) ;
}
} , 10 ) ;
} , [ view ] ) ;
return (
< Slide appear direction = "up" in = { ! trigger } >
< FixedBottom offset = { matches ? 16 : 48 } >
< SpeedDial
ariaLabel = "actions"
className = { classes . speedDialGroup }
FabProps = { {
className : clsx ( classes . speedDial , classes . bottom ) ,
size : matches ? 'medium' : 'small' ,
style : { padding : matches ? '12px' : '8px' } ,
} }
onClick = { handleClick }
open = { open }
direction = { direction }
>
{ ... Search action }
{ ... Toggle theme action }
{ ... Clear cache action }
/ >
< / SpeedDial >
< / FixedBottom >
< / Slide >
) ;
} ;
export default Speed ;
사용자가 신뢰할 수 있는 소스를 보고 싶어합니다.
Brands 설명(Material-UI AvatarGroup ):useEffect 하면 페이지 값이 현재 view => Info 로 설정될 때 useState 여백을 뒤집을 수 있습니다. 이는 마치 정보 데스크에 사용자를 환영하는 것처럼 아바타가 확장되도록 애니메이션을 적용하는 반면 짧은 단락은 뒤에 있는 " SynonymStory "를 설명하는 기능을 제공합니다. " SynonymSearch "Logo 인스턴스(각각 하나씩): React , NextJS , MaterialUI , CodeInstitute 및 Merriam-Webster .Search 보기에 있습니다.Info 클릭합니다.Info 보기에 있습니다.Brands 의 아바타가 등장합니다Merriam-Webster 클릭합니다.Merriam-Webster Developer Center website 의 새 탭이 열립니다.Info 를 유지합니다. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Brands = ( { children } ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ active , setActive ] = useState ( false ) ;
const { value } = viewDispatch ;
useEffect ( ( ) => {
if ( value === 'info' ) {
setTimeout ( ( ) => {
setActive ( true ) ;
} , 750 ) ;
}
} , [ ] ) ;
return (
< AvatarGroup
className = {
clsx (
classes . avatarGroup , active
? classes . active
: classes . inactive ,
)
}
>
< Logo
name = "React"
url = "https://react.org/"
path = "/images/reactLogo.png"
/ >
< Logo
name = "Next JS"
url = "https://nextjs.org/"
path = "/images/nextJSLogo.svg"
/ >
< Logo
name = "Material UI"
url = "https://material-ui.com/"
path = "/images/materialUILogoLight.png"
darkImage = "/images/materialUILogoDark.png"
/ >
< Logo
name = "Code Institute"
url = "https://codeinstitute.net/"
path = "/images/codeInstituteLogo.png"
/ >
< Logo
name = "Merriam-Webster"
url = "https://dictionaryapi.com/"
path = "/images/merriamWebsterLogoLight.png"
/ >
< / AvatarGroup >
) ;
} ;
사용자가 동의어를 검색하려고 합니다.
Search 설명:loading : 결과가 로드되는지 여부,meta : 사용자의 입력이 유효한 결과를 생성하는지 여부,root : 결과 배열의 첫 번째 항목이 사용자가 입력한 항목과 일치하는지 여부입니다.useState 사용하면 이러한 조건을 동적으로 변경할 수 있습니다.useRef 입력 구성 요소에 연결되어 있으며 키 및 마우스 이벤트가 위 조건에 따라 입력 프롬프트에 조건부로 focus 도록 허용합니다.Field , Input .Search 보기에 있습니다.Search 작업을 클릭합니다.immediately successful word 입력>을 입력합니다.immediately successful word 의 동의어로 업데이트됩니다.Search 작업을 클릭합니다.incomplete word 입력하세요>real word 입력>real word 의 동의어로 결과 업데이트Search 작업을 클릭합니다.a word with no matches 입력하세요>good word 입력하세요>new word 의 동의어로 결과 업데이트 const Field = ( {
label ,
onChange ,
placeHolder ,
helperText ,
loading ,
} ) => {
const theme = useTheme ( ) ;
const trigger = useScrollTrigger ( ) ;
const [ active , setActive ] = useState ( false ) ;
const textInput = useRef ( null ) ;
const metaDispatch = useDispatchTheme ( ) ;
const { meta , root } = metaDispatch ;
const handleSearchButton = ( ) => {
setActive ( true ) ;
setTimeout ( ( ) => {
textInput . current && textInput . current . focus ( ) ;
} , 100 ) ;
} ;
const handleClickAway = ( ) => setActive ( false ) ;
const handleBackDrop = ( ) => setActive ( false ) ;
const onKeyPress = ( ) => setActive ( false ) ;
const match
= textInput . current
? textInput . current . value === root
: false ;
active && trigger ? setActive ( false ) : null ;
useEffect ( ( ) => {
if ( active && match ) {
setTimeout ( ( ) => {
setActive ( false ) ;
} , 2000 ) ;
}
} , [ ] ) ;
return (
< ClickAwayListener
onClickAway = { handleClickAway }
>
< >
< Backdrop
open = { active }
onClick = { handleBackDrop }
/ >
< Fab
size = "small"
color = "primary"
aria-label = "search"
onClick = { handleSearchButton }
variant = { active ? 'extended' : 'round' }
style = { active ? {
backgroundColor :
loading
? theme . palette . warning . main
: ! meta
? theme . palette . error . main
: meta && match
? theme . palette . success . main
: theme . palette . primary . main ,
} : null }
>
< Input
label = { label }
placeHolder = { placeHolder }
helperText = { helperText }
active = { active }
match = { match }
meta = { meta }
loading = { loading }
textInput = { textInput }
onKeyPress = { onKeyPress }
onChange = { onChange }
/ >
< / Fab >
< / >
< / ClickAwayListener >
) ;
} ;
사용자가 검색 기록을 보고 싶어 합니다.
useHistory 는 HistoryProvider 에 저장된 값에 액세스하기 위한 컨텍스트 후크입니다.useReducer 사용하면 HistoryProver 쿼리된 단어를 공유하는 정의에 따라 그룹화할 수 있습니다.Selection사용자가 문장에 사용된 단어를 보고 싶어합니다.
Display 설명:Sense 가 sampleString 및 optionWord 소품을 전달하는 데 사용하는 무상태 구성 요소입니다. 이는 Intersection Observer 및 마우스 이벤트를 활성화하여 optionWord 소품을 동적으로 변경합니다.{it} {/it} 및 {lquo} {rquo} 노드에 래핑된 깨끗한 문자열을 반환합니다. 열기 및 닫기 태그이므로 정규식 대체 기능은 정의에 해당 문자열이 있을 때 예제 문자열을 일관되게 정리하는 데 있어 신뢰성이 입증되었습니다. (Theaurus API의 응답 예시 참조)사용자가 반복 결과(이미 저장된 단어라고도 함) 옆에 태그를 보고 싶어 합니다.
HistoryProvider 의 useReducer 설명합니다.HistoryProvider 에 저장된 Word 개체는 이러한 속성을 새 단어와 비교하여 확인할 수 있는 속성과 함께 저장됩니다.Counters 의 단어 유형 검사 설명:History 에 저장된 단어를 줄이고, 정렬하고, 그룹화하는 도우미 기능으로 정의를 입력하세요.Saves 보기에서 동일한 기능이 사용되므로 사용자는 공유하는 속성 정의에 따라 사용자가 저장한 단어인 '반복'을 볼 수 있습니다. const [ savedWords , dispatch ] = useReducer ( ( state , action ) => {
switch ( action . type ) {
case 'add' :
const wordIndex = state . findIndex ( ( word ) => word . uuid === action . uuid
|| word . name === action . name
&& word . sense === action . sense ) ;
if ( wordIndex !== - 1 ) {
return state . map ( ( word , i ) => ( {
... word ,
value : word . value + ( wordIndex === i ? 1 : 0 ) ,
} ) ) ;
}
return [
... state ,
{
id : state . length ,
name : action . name ,
value : 1 ,
root : action . root ,
label : action . label ,
uuid : action . uuid ,
sense : action . sense ,
} ,
] ;
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;
case 'clear' :
return [ ] ;
default :
return state ;
}
} , [ ] ) ;
사용자가 저장된 검색 기록을 삭제하려고 합니다.
Clear :HistoryProvider 의 useReducer dispatch 함수인 DeleteForever 아이콘이 있는 버튼입니다.Chip 구성 요소로 표시되는 Delete 아이콘을 통해 개별 단어를 삭제할 수 있습니다. // clear.button.js
// excerpt
const wordsDispatch = useDispatchHistory ( ) ;
const handleClick = ( event ) => {
wordsDispatch ( {
type : 'clear' ,
} ) ;
} ;
// words.context.js
// excerpt from reducer
// the above handler calls case 'remove'
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;최신 결과 보기
Vercel을 통한 Lighthouse는 성능을 테스트하는 데 사용되며, 이는 모든 git push 에서 고유한 결과를 생성합니다. lighthouse-badges는 npm i -g lighthouse-badges 설치하고 새 해시된 URL을 URL 배열에 푸시하여 모든 배포에 대해 새 배지를 생성하는 데 사용됩니다.
lighthouse-badges
-o docs/badges -r
-u https://synonyms.vercel.app/ [... all other urls]
# Output to docs/badges
# Badges will contain the respective
average score(s) of all the urls
supplied, combined
Lighthouse의 지표, 즉 접근성 및 성능은 각 감사에서 특정 플래그를 생성합니다. 푸시할 때마다 문제를 구체적으로 해결하는 조정이 이루어집니다.
role 명확성을 위한 HTML5 의미 요소의 개선이 변경되었습니다. 맨 위로 돌아가기
create-next-app 으로 부트스트랩되고 Vercel로 배포되었으며, 이는 다음 단계를 통해 달성되었습니다.commit 하고 push .select 입력을 통해 "Git 저장소 가져오기"에 액세스합니다."귀하의 프로젝트가 성공적으로 배포되었습니다."
맨 위로 돌아가기
git clone https://github.com/israelias/synonym-chasercd . cd synonym-chasernpm install npm run dev
# or
yarn dev 브라우저를 localhost:3000으로 엽니다.
info 의 간단한 설명을 제외한 모든 콘텐츠는 Merriam-Webster의 Collegiate Thesaurus를 통해 제공됩니다.맨 위로 돌아가기
