일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 리액트 훅
- 파이썬 list
- 자바스크립트
- 내일배움캠프 프로젝트
- JavaScript
- 타입스크립트 props
- useState
- js
- 파이썬 for in
- 파이썬 enumerate
- 리액트 팀 프로젝트
- React Hooks
- 파이썬 반복문
- 파이썬 for
- 내일배움캠프
- 타입스크립트 리액트
- 내배캠 프로젝트
- REACT
- Next 팀 프로젝트
- 리액트
- 타입스크립트
- 프로그래머스
- 파이썬 replace
- 내일배움캠프 최종 프로젝트
- 한글 공부 사이트
- typeScript
- 코딩테스트
- 파이썬 slice
- tanstack query
- 리액트 프로젝트
- Today
- Total
목록전체 글 (210)
aotoyae
💡 블로그나 SNS 같은 피드형 웹페이지 프로젝트 🧑🏻💻 역할 분담 우선 필수 구현인 페이지, 기능들만 역할을 나눠두었다. react 로 팀 프로젝트가 처음이라 어떻게 나눠야 할지 애매했는데 우선 컴포넌트 별로 분담했다! 🎀 와이어 프레임 와이어 프레임도.. 컴포넌트를 어떻게 쪼개야할지 고민됐는데 일단 크게 나누고 하위는 담당하는 사람이 잘 나눠두고 전달하기로 했다! 🥹
https://learngitbranching.js.org/?locale=ko Learn Git Branching An interactive Git visualization tool to educate and challenge! learngitbranching.js.org
💡 useState : 컴포넌트 상태 관리 훅 리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화(버튼이 눌리면 숫자가 올라가야할 때!)💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅state 와 비슷하게 저장한다는 느낌.리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수 초기화 XXX import { useRef, useState } from "react";function RefApp() { const ref = useRef(""); const [value, setValue] = useState(""); console.log("hi"); return ( state : { setV..
💡 git clone : 다운로드만 해오는 것 다운로드 해 온 레파지토리 깃과 연결되어 있지 않다. 그러니 내 레파지토리로 연결을 바꿔준 뒤 push 를 해야 한다. 💡 git remote add origin : origin 은 그저 변수명, 뒤에 오는 링크를 가리킨다. origin 은 다운 받아온 레파지토리가 연결되어 있던것이고, abc, orgin 은 내가 새 변수명으로 내 레파지토리와 연결한 것 💡 git remote remove '변수명' 저 셋을 다 지우고, origin 에 내 레파지토리를 다시 연결하자 이제 푸쉬하면 된다!
💡 MPA : 멀티 페이지 애플리케이션 - 2개 이상의 페이지(html)로 구성된 App 클릭을 하면 서버에서 새로운 전체 페이지를 다시 보내줌 💡 SPA : 싱글 페이지 애플리케이션 - 1개 페이지로 구성된 App 클릭을 하면 서버에서 필요한(바뀌는) 부분반 보내줌 장점 1. 자연스러운 사용자 경험 가능 : 깜빡임 X 2. 웹 성능 향상 : 필요한 리소스반 받아 부분적 렌더링, 서버 부담 줄어듬 3. 개발 생산성 향상 : 컴포넌트별 개발 용이(협업 엄무 분담, 유지 보수) 단점 1. 첫 랜딩 속도가 느림 2. 검색엔진최적화(SEO)에 취약, SEO :검색 엔진에서 상위에 노출되도록 최적화하는 과정 (html 파일을 읽어 검사하는데 비어있으니 불리함) 💡 Hashed Routing: hash 값이 변경됨..
💡 현재 위치한 브랜치 확인 git branch 💡 브랜치 이동 git switch '브랜치명' or git checkout '브랜치명' ❗️ 'branch1' 에서 'branch2' 로 이동하면 'branch1' 코드는 사라진다 그러니 미리미리 커밋해두어야 한다. 💡브랜치 한 번에 생성 & 이동 git switch -c '브랜치명 or git checkout -b '브랜치명' 💡브랜치 합치는 명령어 git switch '최종 브랜치명' and git merge '합칠 브랜치명' ❗️ 최종 브랜치인 'main' 으로 이동한 뒤 merge 해야 한다. Pull Request .. 깃헙 사이트에서 브랜치 합치는 법..
💡 리액트에서 api 데이터를 가져와보자! import { useEffect, useState } from "react"; function JsonApp() { const [data, setData] = useState([]); {/*데이터 들어갈 곳 초기 설정*/} useEffect(() => { fetch(`https://jsonplaceholder.typicode.com/posts`) .then((response) => response.json()) .then((json) => { setData([...json]); {/*가져온 json 복사해 데이터 갱신*/} return console.log(json); }); }, []); return ( {data.map((item) => ( {/*가져온 데..
💡동적 라우팅 Dynamic Route path 에 유동적인 값을 넣어 특정 페이지로 이동하게끔 구현한 방법 이렇게 페이지들을 하나씩 지정해주는게 아니라 works/ 뒤 숫자들을 유동적으로 파라미터로 받아 오게 해보자! 1. 먼저 Router.js 에서 works/:id 를 적어준다. 2. Work.js 에서 useParams 를 연결 그럼 이동한 페이지의 id 를 얻을 수 있다! Router.js 에서 넣어준 id 가 객체에 들어가 있다. const { id } = useParams(); // 이런 식으로 가져올 수 있다. 3. 테스트 할 데이터 파일을 하나 만든다. Data.js export const data = [ { id: 1, todo: "리액트 공부", }, { id: 2, todo: "노드..