전체 글 54

[ 코딩애플 ] React 리액트 기초 Part3

✏️ 번외) fragment 문법 return( ) - HTML 코드를 짤 때, return() 내부는 하나의 태그로 시작해서 하나의 태그로 끝나야 함! - 그래서 굳이 두개를 나란히 적고 싶으면 위와 같이 하나의 div로 또 감싸거나, 로 감싸야 함! ✏️ Component - 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법 function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 1) 줄이는 법 1. function을 이용해 함수를 하나 만들고 작명. 2. 그 함수 안에 return() 안에 축약을 원하는 HTML 담음. 3. 그럼 원하는 곳에서 사용하면 아까 축약한 HTML 등장. - 이렇게 축약한 HTM..

Frontend 📚/React 2023.10.14

[ 코딩애플 ] React 리액트 기초 Part2

💁‍♀️ 블로그 글 초기 레이아웃 function App(){ let posts = '강남 우동 맛집'; return ( 개발 blog 글제목 2월 17일 발행 ) } (App.css) div { box-sizing : border-box } .list { text-align : left; padding-left : 20px; border-bottom : 1px solid grey; } ✏️ state 만드는 법 - 맨 윗줄에 import {useState} from 'react'하고 원하는 곳에 useState('보관할 자료') 쓰면 state에 자료를 잠깐 저장할 수 있다. - 나중에 저장한 자료를 쓰고 싶으면 let[a,b] = useState('남자 코트 추천'); import { useState..

Frontend 📚/React 2023.10.11

[ 코딩애플 ] React 리액트 기초 Part1

✏️ 개발환경 설치 및 세팅 1. 구글에 Nodejs를 검색해서 LTS라고 써있는 버전을 설치 2. Visual Studoi Code 에디터 설치 ✏️ 리액트 프로젝트 생성 1. 작업용 폴더 만들기(찾기 쉽게 바탕화면에 만들기) 2. 맥북 기준! control 누른 상태에서 클릭, 터미널 열기 3. 아래 코드 입력하면 프로젝트 생성 완료! (프로젝트 이름은 개인이 원하는 이름으로 설정) npx create-react-app 프로젝트이름 4. Visual studio code 에디터 켜서 File - Open Folder 누른 다음 생성된 폴더명 선택 5. 에디터 상단 메뉴에서 Terminal - New Terminal 누르고 아래 코드 입력하면 내 사이트 브라우저로 미리보기 가능! npm start ✏️..

Frontend 📚/React 2023.10.11

[HTML] HTML 주요 태그

문장 내 구조 : 굵게 강조 : underline to Tags: ... 점점 작아짐. 제목 태그용 : 줄 바꿈 : 단락으로 줄 바꿈 css 문법으로 속성 바꿀 수 있음 ex: : 사진 이렇게 사이즈 조정도 가능, 위치 상관x : 의 부모 태그 (도 사용가능) : 숫자가 매겨지지 않는 list(Unordeded list) : 숫자가 매겨지는 list(Ordered list) : 목차, 목록 : 링크 걸기 : 링크 클릭시 새 탭으로 열림 : 링크에 마우스 커서 올리면 툴팁이 나타남 전체 구조 : 페이지 제목 설정 : 웹 브라우저가 열 때도 utf-8로 열기 → 관용적으로 HTML이 담겨있다는 뜻으로 이라고 씀 : 설명하는 태그 : 본문 묶는 태그

[Flutter]Memo App Project_(4)

2022.02.19 - [Flutter] - Memo App Project_(3) Memo App Project_(3)2022.02.19 - [Flutter] - Memo App Project_(2) Memo App Project_(2) 2022.02.18 - [Flutter] - Memo App Project_(1) Memo App Project_(1) 간단한 메모장을 만들어 볼 거임! 1. 다른 페이지 가져오기 - Naviga..jaejae-sosp.tistory.com1. 삭제 기능!: OnLongPress- InkWell2. 메모 보기 기능!: OnTap - Navigator.push1. 삭제 기능! - InkWellMemo App에 삭제 기능을 넣어보겠다.먼저 나중에 함수에 쓰일 전역 변수 선언..