본문 바로가기

전체 글117

[공식문서] Next.js 란 무엇인가? Next.js는 빠른 웹 애플리케이션을 생성하기 위한 구성 요소를 제공하는 유연한 React 프레임워크입니다. 하지만 정확히 무엇을 의미하는 걸까요? React와 Next.js가 무엇이며 어떻게 도움이 될 수 있는지에 대해 약간의 시간을 할애해 알아보겠습니다. 웹 애플리케이션의 구성 요소 현대적인 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있습니다. 다음과 같은 내용들이 있습니다. User Interface (사용자 인터페이스) : 사용자가 애플리케이션을 어떻게 소비하고 상호작용하는지. Routing (라우팅) : 사용자가 애플리케이션의 다른 부분 간에 어떻게 이동하는지. Data Fetching (데이터 가져오기) : 데이터가 어디에 있으며 어떻게 가져올지. Rendering (렌더링) : .. 2023. 8. 10.
스파르타 코딩클럽 앱개발 종합반 5주차 1. 취지 & 설명 : 첫 메인 화면에서 내가 원하는 콘텐츠를 웹진 형태로 노출하면서 간단한 이미지와 내용 일부를 보여줄 수 있도록 구성하였다. 카테고리 탭 메뉴를 배치하여 각 주제에 맞는 콘텐츠를 볼 수 있도록 필터 기능을 넣어서 검색의 편의성도 추가하였다. 현재는 강의 과정에서 등록한 팁 데이터로 구성되어 있는데 콘텐츠 내용은 추후 업데이트 할 예정이다. 2. 기술 설명 : 리액트 네이티브를 기반으로 앱을 개발하였고, 데이터는 firebase를 활용하여 가볍게 활용할 수 있도록 개발하였다. 화면 구성에는 네비게이션 영역과 콘텐츠 영역을 구분하였고, 반복적으로 사용 가능한 페이지 내 구성요소들은 컴포넌트로 분리하여 재사용 할 수 있도록 제작했다. 데이터를 가져오는 부분은 리액트의 state를 활용해서 .. 2023. 4. 3.
스파르타 코딩클럽 앱개발 종합반 4주차 1. 앱과 서버 앱에 모든 데이터를 넣을 수 없다 앱 용량이 커질 수 있고, 데이터가 업데이트 되면 다시 배포를 해야 한다. 데이터가 담긴 서버를 배우고, 서버에서 데이터를 가져오고 변경하는 방법을 배운다. 2. 서버리스 : 데이터 생성, 조회, 삭제/수정 등을 제공해 주는 서비스 3. 파이어베이스 사용 4. 날씨 서버 외부 API 앱과 서버의 동작 방식 : 서버가 정한 규칙에 따라 대화 요청(Request)을 해야 한다. 서버에서 정한 규칙을 보통 API(Application Programming Interface)라고 부른다. 서버가 제공하는 도메인일수도 있고 서버가 만들어놓은 함수를 그냥 이용해서 사용하는 규칙일 수도 있다. 리액트 네이티브 주로 데이터를 준비하는 시점 앱 화면이 그려진 다음 데이터.. 2023. 3. 29.
스파르타 코딩클럽 앱개발 종합반 3주차 1. 3주차 배울 내용 컴포넌트(Component), 상태(State, useState), 속성(Props), useEffect 2. 앱 상세 화면 만들기 import React from 'react'; import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert } from 'react-native'; export default function DetailPage() { const tip = { "idx":9, "category":"재테크", "title":"렌탈 서비스 금액 비교해보기", "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.. 2023. 3. 24.
스파르타 코딩클럽 앱개발 종합반 2주차 1. 리액트 네이티브 & Expo 리액트 네이티브는 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두 가지 모두 만들어주는 라이브러리 Expo는 안드로이드 & iOS 코드를 건드려야 하는 대부분의 상황들을 안 건드려도 되게끔 도와주는 툴 개발 중인 앱 테스트를 위한 Expo Go 앱을 제공 npm install -g expo-cli expo start 윈도우 : 컨트롤 + c 맥 : command + c 2. JSX 문법 App.js는 앱의 화면을 그려주는 커다란 함수 HTML 태그 같이 생긴 이 문법은 JSX라 불리우며 실제 화면을 그리는 문법 styles 변수 : JSX문법을 꾸며주는 내용 import { StatusBar } from 'expo-status-bar'; import React f.. 2023. 3. 15.
스파르타 코딩클럽 앱개발 종합반 1주차 1주차 수업은 기본적인 스크립트에 대한 설명과 앱 개발을 위한 개발환경 세팅이어서 큰 어려움 없이 진행할 수 있었다. 1. 앱 서비스의 기본 동작 구조 클라이언트와 서버 : 클라이언트는 사용자가 보는 화면 서버는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 응답해주는 곳이기도 하다. 2. 앱과 리액트 네이티브 앱 개발은 "안드로이드" 와 "iOS(아이폰)" 안드로이드는 Java & Kotlin 기술로 개발 iOS는 Swift 기술로 개발 안드로이드, iOS 각각 개발 하는 건 네이티브 앱 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 건 하이브리드 앱 "크로스 플랫폼 앱" 개발이 존재 리액트 네이티브(React Native) 크로스 플랫폼 앱 개발 언어 중 하나 페이스북에서 만들고 지원하고 있으며.. 2023. 3. 13.
HTML 클래스 속성의 작명법 BEM (Block Element Modifier) 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시 HTML 삽입 미리보기할 수 없는 소스 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시 HTML 삽입 미리보기할 수 없는 소스 2022. 9. 9.
[CSS속성] 전환(transition), 변환(transformation), Overwatch 21. 전환 1. 전환 효과를 사용할 속성 이름을 지정 transition-property all : 모든 속성에 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 2. 전환 효과의 지속시간을 지정 transition-duration 0s : 전환 효과 없음 시간 : 지속 시간(s)을 지정 3. 전환 효과의 타이밍(Easing) 함수를 지정 transition-timing-function ease : 느리게-빠르게-느리게 linear : 일정하게 ease-in : 느리게-빠르게 ease-out : 빠르게-느리게 ease-in-out : 느리게-빠르게-느리게 cubic-bezier(n,n,n,n) : 자신만의 값을 정의(0~1) steps(n) : n번 분할된 애니메이션 4. 전환 효과가 몇 초 뒤에 .. 2022. 2. 7.
[CSS 속성] Flex 속성 정리 18. 플렉스(정렬) Container ~ 20. 플렉스(정렬) Items 1. Flex Items 묶음(줄 바꿈) 여부 flex-wrap nowrap : 묶음(줄 바꿈) 없음 wrap : 여러 줄로 묶음 wrap-reverse : wrap의 반대 방향으로 묶음 2. 주 축의 정렬 방법 justify-content flex-start : Flex Items를 시작점으로 정렬 flex-end : Flex Items를 끝점으로 정렬 center : Flex Items를 가운데 정렬 space-between : 각 Flex Item 사이를 균등하게 정렬 space-around : 각 Flex Item의 외부 여백을 균등하게 정렬 3. 교차 축의 여러 줄 정렬 방법 : 활용이 높지 않다. align-conten.. 2022. 1. 24.

티스토리툴바