본문 바로가기

전체 글402

006. [코딩애플] [part1] array, object state 변경하는 법 state의 데이터 타입에 따른 상태변경 함수 사용법state의 자료형이 숫자형이나 문자열 등은 어떻게 수정해도 상관없으나, 배열이나 객체인 경우에는 spread operator로 깊은 복사를 해주어야 한다.만약 아래처럼 수정하면 원본 배열 자체가 덮어 씌워져 버린다.function App() { const [cities, setCites] = useState(["서울", "인천", "제주"]); return ( { setCites(["성남"]); }} > 수정하기 );}수정하기 버튼을 누르면 cites라고 상태로 정의한 배열의 첫번째 값을 '서울'에서 '성남'으로 바꾸기 위해 setCites라는 상태변경 함수를 .. Programing/React 2024. 5. 21.
005. [코딩애플] [part1] 버튼에 기능개발을 해보자 & 리액트 state변경하는 법 간단한 팁터미널 Warning(노란색) 지우기.Error(빨간색)은 코드 작동 불가이기 때문에 중요하나, Warning은 변수를 선언해놓고 쓰는 곳이 없다든지, 이런 사항에 대해서 알려주는 기능이다. 도움은 될 수 있으나, 이것 때문에 터미널이 복잡하다면,코드 최상단에 아래 내용을 붙여 넣는다./* eslint-disable */좋아요 버튼 만들기버튼 레이아웃 만들기. 이모지로 만들었다.function App() { let [ title, updateTitle ] = useState( [ '가을 남자 코트 추천', '강남 우동 맛집', '오늘의 일기 예보' ] ); return ( .. Programing/React 2024. 5. 21.
004. [코딩애플] [part1] 중요한 데이터는 변수말고 state에 담습니다 App.js (jsx)에서 HTML 작성하기return 키워느 내부에서만 html 마크업 문서를 작성해야 함.주의사항으로는 한 줄에 병렬로 두 개 이상의 태그를 사용할 수 없음.function App() { return ( {/* 이 곳에서만 HTML 작성 가능 */} {/* 이와 같이 열고 닫는 태그도 병렬로 작성 불가*/} {/* 이렇게 한줄씩 작성해야 함. */} );} Programing/React 2024. 5. 21.
2024-05-17 React To Do List 만들기 배포주소https://bootcamp-0517.vercel.app기존코드와 개선된 코드기존 코드 (하나의 App.jsx에 작성)import { useState } from 'react';import './App.css';function App() { const [cards, setCards] = useState([]); const [newTitle, setNewTitle] = useState(''); const [newBody, setNewBody] = useState(''); const addCard = (e) => { e.preventDefault(); if (newTitle === '' || newBody === '') { setNewTitle(''); setNe.. Programing/TIL 2024. 5. 19.
내 로컬에 있는 폴더를 CSS에 적용시키는 방법 상황웹 폰트를 지원하지 않는 폰트를 별도로 설치하여 사용하고 싶다. 예를 들어 AppleSDGothicNeo 즉 애플고딕은 웹 폰트를 지원하지 않으나, 상업적 비상업적 무료로 라이센스를 지원하기 때문에 폰트를 별도로 사용 가능하다.방법원하는 폰트를 설치한다.프로젝트 폴더에 fonts라는 폴더를 만든 후 그곳에 폰트를 넣는다. (자유작명)설치한 폰트를 CSS에서 import한다.@font-face { font-family: 'AppleSDGothicNeoEB'; src: url('../fonts/AppleSDGothicNeoEB.ttf') format('truetype'),; font-weight: normal; font-style: normal;}아래처럼 여러 개 할 수도 있음.format은 폰트.. Programing/CSS 2024. 5. 18.
Mac OS Safari 트랙패드 제스처 모음 외부에서 맥북만을 이용하여 개발을 할 때 트랙패드로 safari 브라우저를 더 편리하게 이용할 수 있다.사파리 트랙패드 제스처 정리단축키제스처두 손가락 오른쪽 왼쪽뒤로가기, 앞으로 가기두 손가락 위 아래스크롤세 손가락 모으기열려있는 탭 모두 보기두 손가락 회전이미지나 pdf를 회전 IT/Computer 2024. 5. 17.
Mac에서 push 할 때 생성되는 .DS_Store 앞으로 계속 업로드 제외시키기 상황Mac OS 환경에서는 에디터로 작업 후 push를 할 때 DS_Store라는 파일이 자동으로 생성되어 함께 push된다.이 파일에는 보기 옵션이나 아이콘 위치 등 민감할 수 있는 정보들이 담기면서 계속 수정이 되는데, 개발자의 의도와는 다르게 파일에 계속 변경사항이 생기기 때문에 merge 과정에서 계속 성가신 충돌을 발생시킨다.이 문제를 해결하기 위해선 .gitignore파일을 만들어서 push할 때 업로드 되지 않도록 하여야 한다.그런데 매번 프로젝트를 생성할 때마다 이 작업을 하긴 번거로우니, .gitignore를 전역으로 생성하도록 설정하면 된다.방법// .gitignore 파일 생성git config --global core.excludesfile ~/.gitignore_global// ... Programing/Git 2024. 5. 17.
2024-05-17 스탠다드 특강 2회차 이번 과제에서 공통 피드백느슨한 비교와 엄격한 비교// 느슨한 비교console.log( 5 == "5" ); // true// 엄격한 비교console.log( 5 === "5" ); // false느슨한 비교는 특별한 경우가 아니면 무조건 엄격한 비교를 우선적으로 사용하도록 한다.이유는 느슨한 비교를 하게 되면 코드 실행 기대값은 같더라도 코드를 읽는 사람이 한 번 더 생각을 해야 되기 때문에 시간이 오래 걸리고,코드 실행적인 측면에서도 의도치 않은 에러를 발생시킬 수 있다.const vs let변수 선언할 때 무조건 const로 선언한다고 생각한다.그리고 이후 재할당이 필요한 경우 let으로 바꾼다.이유는 let으로 변수를 선언한 경우, 값이 재할당 된다고 생각되기 때문에 코드를 읽는 사람이 개발자.. Programing/TIL 2024. 5. 17.
2024-05-14 스탠다드 미니 과제 import { useState } from "react";import "./App.css";function App() { const initialState = [ { id: 1, name: "John", age: 20 }, { id: 2, name: "Doe", age: 21 }, ]; const [users, setUsers] = useState(initialState); // TODO: 이름과 나이를 각각 상태로 정의하세요. 초기값은 빈문자열("")입니다. const [name, setName] = useState(''); const [age, setAge] = useState(''); // 빈 문자열을 초기값으로 state 값 초기화 // 각각 name, age라는 변수명.. Programing/TIL 2024. 5. 14.
003. [코딩애플] [part1] React에서 사용하는 JSX 기초 문법 프로젝트 기본 준비터미널에 밑의 명령어를 넣어서 실시간 미리보기를 웹 브라우저에 띄운 상태로 작업 시작한다.npm startApp.js 파일 내에 있는 코드 중 가장 최상단의 div 하나만 남기고 다 지우면 됨.JSX 문법 시작하기HTML 만들기 (정확히는 JSX)가장 최상단의 div 안에 HTML 태그를 입력하면 된다. 그런데 이것은 엄밀히 말하면 HTML이 아님. HTML은 .html이라는 파일에만 입력할 수 있고 이건 js 파일이기 때문에 자바스크립트에 HTML 마크업 언어를 입력하기 쉽게 만들어 주는 jsx라는 방식임. HTML과 거의 흡사하게 생겨 편리하지만 조금씩 차이점이 있음.가장 큰 차이는 class를 선언할 때 class라고 속성을 만들면 안 되고, className이라고 속성을 만들어야.. Programing/React 2024. 5. 14.

티스토리툴바