콛 다이어리

리액트 라우터 돔(react-router-dom)React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리  a태그를 사용하지 않는 이유:a태그를 사용하면, 화면이 새로 로딩이 된다. 이 때 필수적으로 발생하는 화면 깜박임이 사용자의 경험을 떨어뜨리는 요인이 되기 때문에 라우팅으로 부드러운 화면 전환을 꾀하는 것이다.결론:1. a태그쓰면 화면 깜박여서 bad2. 라우팅을 사용하면 화면이 부드러워져서 good   설치하는 방법import {BrowserRouter, Routes, Route } from "react-router-dom"   BrowserRouterhistory API를 활용해 history 객체를 생성history API는 내부적으로 stack 자료구조의 형태를 띄기..

import해서 데이터를 던졌고export해서 데이터를 잡았다.'코딩은 절대 거짓말을 하지 않는다' 라고 하지만나는 정말 틀린게 없었다.. 억울할 정도였다.. 브라우저는 왜 계속 에러를 띄우는지 모르겠고개발자 도구도 왜 자꾸 에러를 띄우는지이해를 할 수가 없었다. 에러나는 부분이 당연히 작성해야 하는'import react from "React" 와"import styled from "styled-component" 였다.안 쓰면 안 썼다고 작동 안 시켜 줄거면서.. 마침 화면 공유로 내 코드를 보고있던 분이 도와주셨다.결론은 내가 styled-components 패키지 설치를 하지 않아서였다;; 터미널 → new Terminal에 가서yarn add styled-components 를 입력해서패키지 설..

사용하는 방법프로젝트 디렉터리에 'node-sass' 설치 scss는 자체로는 웹에서 작동하지 않음(css의 전처리기라서)node-sass패키지로 css로 컴파일 후 css가 웹에서 동작변수, 연산자, 함수, extend, import등을 사용할 수 있어(css에서)코드의 재사용성 및 가독성이 높아지고, 유지보수가 용이 명령어:npm인 경우npm install -g node-sass yarn인 경우$ yarn add node-sass

GlobalStyle- 모든 컴포넌트에 적용해야 할 속성이 존재한다면,전역적으로 지정해주는 스타일  사용법변수 선언→ 백틱(`) 안에 적용받고 싶은 곳 입력ex)const GlobalStyle = createBlobalStyle `          body {       // 모든 컴포넌트에 적용할 속성          }`; export default GlobalStyle   css reset- *크로스 브라우징 이슈를 해결하기 위한 기법(사람마다 쓰는 브라우저가 다르다.누구는 크롬, 누구는 사파리, 누구는 엣지, 파이어폭스...그래서 같은 태그여도 크기가 다르기 때문에그 크기를 맞춰주기 위해 default style을 제공한다.     (*크로스 브라우징 :여러 종류의 웹 브라우저에서 동일한 사용자 ..

태그에 스타일 주는 방법html파일에서 클래스나 아이디를 부여계속 import 해야함유지보수하기 힘듬 style을 사용하여 객체 형태로 부여가독성이 떨어짐 3. css in js모든 파일을 import 해줄 수 있음조건문, 변수 등 다양한 로직을 작성할 수 있음 기본 사용법최상단에 import styled from 'styled-components' 입력→ const 변수 = styled. 표준태그 `      속성: 값;      속성: 값;      속성: 값;    `→ 변수를 표준태그처럼 사용      + 표준태그 말고 함수도 입력할 수도 있다.const 변수 = styled. ('함수')`      속성: 값;      속성: 값;      속성: 값;`

문제 설명철호는 수열을 가지고 놀기 좋아합니다.어느 날 철호는 어떤 자연수로 이루어진 원형 수열의연속하는 부분 수열의 합으로 만들 수 있는 수가 모두 몇가지인지 알아보고 싶어졌습니다.원형 수열이랑 일반적인 수열에서 처음과 끝이 연결된 형태의 수열을 말합니다.예를 들어 수열 [7, 9, 1, 1, 4]로 원형 수열을 만들면 다음과 같습니다.         원형 수열은 처음과 끝이 연결되어 끊기는 부분이 없기 때문에연속하는 부분도 일반적인 수열보다 많아집니다.원형 수열의 모든 원소 elements가 순서대로 주어질 때,원형 수열의 연속 부분 수열 합으로 만들 수 있는 수의 개수를return 하도록 solution 함수를 완성해주세요.  제한사항3 1  입출력 예elementsresults[7, 9, 1, 1..

벌써 질문이 이렇게 많아도 괜찮은 걸까ㅠㅠ  Q1) 리액트에서는 화살표 함수만 써야하는지.Ans) '꼭 그래야한다' 는 아닌데, 화살표 함수가 편하다.        협업할 때는 (화살표 함수를 쓸건지 아닌지) 맞춰야 한다. Q2) index.css 파일 내용을 지우고 시작해도 되는건지.Ans) 본인 마음이다. Q3) 강의에서는 태그를 사용했고 나는 아니고       태그를 사용하지 않으면 출력이 안 될 때도 있는데       맞다고 쳐야하는지.Ans) 맞다고 틀리고 하기 보다는 시멘틱 태그를 따르는 것이 좋다.

리액트웹 페이지를 만들 때 사용하는 자바스크립트 라이브러리다양한 화면 요소를 컴포넌트로 나눠서 만들 수 있음 DOM (Document Object Model)웹 페이지의 구조를 나타내는 트리구조트리구조를 이루는 것들은 엘리먼트(여는태그+닫는태그)(엘리먼트들이 모여서 트리구조가 됨)웹 브라우저는 이것을 읽어서 화면에 페이지를 출력   2. 하는 일리액트- 컴포넌트를 DOM이 읽고 웹 브라우저에 보여주는 역할을 한다. 가상 DOM (Virtual DOM)- 실제 DOM의 복사본- 페이지의 변화가 생기면 여기서 변화를 계산한다.- 실제 DOM과 비교해서 필요한 부분만 업데이트한다.  → 페이지가 더 빠르고 효율적으로 작동 즉,리액트 DOM은 리액트 컴포넌트를 웹 페이지에 실제로 보여주고 관리하는 역할을,가상 ..

Terminal → new Terminal (윈도우? Gitbash : powershell)→ Git Bash로 변경→  yarn create vite입력→  프로젝트명 입력→ react 선택→ javascript 선택  내 리액트 파일 인터넷창에서 보는 방법yarn dev→ 파란색 로컬주소 뜨면1. Ctrl 누른채로 클릭2. 웹 브라우저에 로컬주소 복사 붙여넣기

깃에서 Repository를 생성한다.→ git init → git remote add origin 깃 주소 → git add . →  git commit -m "" →  git push 깃에  접속→ 내 프로젝트가 맞는 레포지토리에 들어갔는지 확인 → 초록색 버튼들 다 클릭