기본 콘텐츠로 건너뛰기

9월, 2023의 게시물 표시

React, 상위 컴포넌트에서 하위 컴포넌트로 속성 전달하기

 start # 상위 컴포넌트 // 생략 // < ProductsName className ={ styles.submenu } /> // 생략 // # 하위 컴포넌트 // 생략 // interface ProductsNavProps { className ?: string ; } ProductsNav .defaultProps = { className: "" , }; function ProductsNav ( props : ProductsNavProps ) { const { className } = props ; return ( < ul className ={ className } > < li >제품</ li > </ ul > ); } // 생략 // end

Spring 파일 사용법

@Service public class FileService { @Autowired private ResourceLoader resourceLoader; private static final String PATH = "classpath:/static/files/catalogs/" ; public ResponseEntity<Resource> download ( HttpServletRequest request , String path , String filename ) { try { Resource resource = resourceLoader . getResource( PATH + path + "/" + filename); return ResponseEntity . ok() // .header(HttpHeaders.CONTENT_DISPOSITION, "attach; filename=\"" + filename + // "\"") .header( HttpHeaders . CONTENT_DISPOSITION , "inline; filename= \" " + filename + " \" " ) // .header(HttpHeaders.CONTENT_TYPE, // MediaType.APPLICATION_OCTET_STREAM.toString()) .header( HttpHeaders . CONTENT_TYPE , MediaType . APPLICATION_PDF . toSt

Github Pages 사용법

# gh-pages 설치 $ npm i -D gh-pagesad $ yarn add -D gh-pages 참고 사이트 :  https://www.jasonchoi.dev/posts/publish-nextjs-to-gh-pages end

Spring과 React 연동

  출처 :  https://velog.io/@sians0209/Spring-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81-%EC%97%B0%EA%B2%B0

NextJS 사용법

  # Node 설치 $ brew install node # Next App 설치 $ npm install -g create-next-app # my-app 만들기 $ npx create-next-app@latest my-app # my-app 실행 $ npm run dev # TailwindCSS 설치 $ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest $ npx tailwindcss init -p $ yarn add @heroicons/react end

Vim 사용법

  # 한줄 지우기 dd # 문자 대치 :1,10s/Hello/World!/g 1 ~ 10열의 문자중에 Hello라는 문자를 World!로 바꾼다.

포트 사용법

  # 포트 활성화 $ sudo ufw enable # 포트 비활성화 $ sudo ufw disable # 포트 활성 상태확인 $ sudo ufw status verbos # 포트 80번 허용 $ sudo ufw allow 80 # 포트 80번 거부 $ sudo ufw deny 80 # 모든 포트 확인 $ netstat -tnlp # 특정 포트 확인 $ netstat -nap | grep 포트번호 # 특정 포트 열기 $ sudo iptables -I INPUT 1 -p tcp --dport 80 -j ACCEPT # 특정 포트 닫기 $ sudo iptables -D INPUT -p tcp -m tcp --dport 80 -j ACCEPT

Homebrew 사용법

  # 리눅스에 설치 $  https://brew.sh/index_ko $ (echo; echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"') >> /home/ubuntu/.profile $ eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"

React 사용법

# typescript로 된 react app 만들기 $ npx create-react-app my-app --template typescript # typescript 용 react dom 설치 $ npm i --save react react-dom typescript # typescript node 설치 $ npm i --save-dev @types/react @types/react-dom @types/node # typescript tsconfig.json 설정 { "compilerOptions" : { "target" : "es6" , "lib" : [ "dom" , "dom.iterable" , "esnext" ], "baseUrl" : "./src" , "allowJs" : true , "skipLibCheck" : true , "esModuleInterop" : true , "allowSyntheticDefaultImports" : true , "strict" : true , "forceConsistentCasingInFileNames" : true , "noFallthroughCasesInSwitch" : true , "module" : "esnext" , "moduleResolution" : "node" , "resolveJsonModule" : true , "isolatedModules" : true , &q