목록프론트엔드 (6)

몸과 마음이 건전한 SW 개발자

Next.js 시작하기 [Next.js, TypeScript]

next.js를 설치하고 실행할 수 있다.  create next.jsnpm run dev 1. CREATE NEXT.JS next.js를 설치하는 방법은 간단하다.vscode에서 통합 터널을 연다음 아래와 같이 선택하면 된다.npx create-next-app@latest --ts next-sampleESLint는 코드의 품질을 위해서 선택했다.Tailwind CSS는 전에 사용해본 결과 css 적용하는데 편리함을 많이 느꼈기 때문에 적용했다.src를 main directory로 설정해놓으면 import해서 컴포넌트를 불러오는데 편하다.기왕 하는김에 추천하는 ROUTER도 추가했다.마지막으로 절대경로 설정을 @파일명으로 할지인데 여태 사용하지 않아도 코드짜는데 어려움이 없었고 오히려 절대경로로 설정하면..
프론트엔드 2024. 5. 5. 21:08
Vue 시작하기 [Vue, TypeScript]

Vue를 설치하고 실행할 수 있다. 기타 환경 설정 Vue 설치 Vue 실행 1. 기타 환경 설정 Vue 공식 홈페이지에 따르면 현재 최신 버전의 Vue를 사용하려면 node v18.3 이상이어야 한다. node 설정은 아래 링크에 있다. 공식 홈페이지 또한 밑에 있다. https://ko.vuejs.org/guide/quick-start.html Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org https://sound-programming.tistory.com/186 리액트 타입스크립트 시작하기 [React, TypeScript, NVM, Prettier] node.js 설치 nvm 설치 nvm 간단 ..
프론트엔드 2024. 4. 14. 00:56
리액트 네이티브 타입스크립트 시작하기 [React-Native, TypeScript]

리액트 네이티브 타입스크립트로 앱을 만들 수 있다. 리액트 네이티브에서도 prettier를 사용할 수 있다. npx create-expo-app --template Node.js, Prettier 설치 및 파일 만들기 tsconfig.json package.json 1. NPX CREATE-EXPO-APP --TEMPLATE https://reactnative.dev/docs/typescript Using TypeScript · React Native TypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by defa..
프론트엔드 2024. 4. 13. 01:38
Display flex, Justify Content [React, TypeScript, CSS]

display: flex를 사용해서 도형을 가로로 정렬할 수 있다. justify-content를 사용해서 도형을 정렬할 수 있다. display: flex justify-content 반응형 기타 코드 1. Display: Flex 파란색 테두리의 초록색 큰 직사각형은 display: flex가 적용되지 않았다. 따라서 도형은 세로로 정렬된다. 하지만 display: flex를 적용하면 첫째 줄의 작은 상자들 처럼 가로로 정렬된다. 2. Justify-Content justify-content: center를 적용하면 가운데 justify-content: flex-end를 적용하면 오른쪽으로 정렬한다. (그냥 end와 right도 비슷한 기능을 하는 것 같다.) 위의 사진을 참..
프론트엔드 2024. 4. 11. 20:42
React-Router-Dom 사용하기 [React, TypeScript, React-Router-Dom]

리액트를 실행하고 react-router-dom을 사용할 수 있다. react-router-dom의 outlet 기능을 사용할 수 있다. outlet 기능을 사용하면 부드러운 화면 전환이 가능하다. 리액트 타입스크립트 실행 reat-router-dom 설정 outlet 설정 NavLink를 통한 화면 전환 기타 코드 1. 리액트 타입스크립트 실행 https://sound-programming.tistory.com/186 리액트 타입스크립트 시작하기 [React, TypeScript, NVM, Prettier] node.js 설치 nvm 설치 nvm 간단 사용법 create-react-app baseUrl prettier 1. Node.js 설치 https://node..
프론트엔드 2024. 4. 10. 19:43
리액트 타입스크립트 시작하기 [React, TypeScript, NVM, Prettier]

node.js 설치 nvm 설치 nvm 간단 사용법 create-react-app baseUrl prettier 1. Node.js 설치 https://nodejs.org/en Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 여기 들어가서 설치하면 된다. LTS를 설치하는 것이 좋다. LTS란? 장기적으로 지원하는 버전이다. 즉 Long Term Support의 줄임말로 일반적인 버전보다 오랜 기간 지원하도록 특별하게 만들어진 소프트웨어의 버전을 뜻한다. 2. NVM 설치 node를 설치했는데 node의 버전을 바꾸고 싶을 때 ..
프론트엔드 2024. 4. 9. 01:41
이전 Prev 1 Next 다음