TIL

단기 프로젝트에서 반응형 웹으로 서비스를 구현해야 해서 반응형 웹에 대해서 공부했다!태블릿, PC, 모바일 등 다양한 해상도로 접근할 때 동일한 서비스를 제공하기 위한 웹각 해상도에 따라서 레이아웃과 스타일 변화를 준다구체적인 조건을 필요한 스타일에 적용할 수 있도록

이미지 저장하기 버튼을 하단에 고정시키려고 하는데 세가지만 설정해주면 바로 고정이 된다

\[Git/GitHub] - 소스트리(Sourcetree)에서 push시 토근 인증 요구\[Support for password authentication was removed on August 13, 2021. Please use a personal access to

변수를 관리하거나 DOM 요소에 접근을 할 때 사용하는 React Hooks변수 관리Ref 안에 값을 저장하면 아무리 변경해도 컴포넌트는 다시 렌더링되지 않는다 → 변수들의 값이 유지됨불필요한 렌더링을 막을 수 있다렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리St

지금 하는 프로젝트가 모바일 환경에서의 웹에서 사용하는거라 작동이 잘 되는지 테스트하고 싶었다. 근데 아직 배포도 안했고 테스트하는 방법이 없나 해서 여러 방법들을 생각해봤다.배포될 때 까지 기다려보기github pages에서 지금까지의 프로젝트를 배포해보기2번 방법을

현재 개발하고 있는 프로젝트가 모바일 화면에서만 사용하는 용도라서 모바일에 맞춰서 개발했는데, 노트북 사이즈도 고려해달라고 해서! 반응형 웹을 적용해보려고 한다모바일에 맞춰 놓은 사이즈가 노트북에서는 바로 깨진다➡️ 찾아낸 해결 방법이 바로 ‘반응형 웹'!노트북, 태블

큐 vs 우선순위 큐큐 : 먼저 넣은 데이터가 먼저 나오는 FIFO 구조우선순위 큐 : 들어간 순서에 상관없이 우선순위가 높은 데이터가 먼저 나오는 구조우선순위 큐모든 항목에는 우선순위가 있다우선순위가 높은 요소는 우선순위가 낮은 요소보다 먼저 큐에서 제외된다두 요소의

멘토 이름 바꾸기 버튼을 눌러서 새로운 멘토 이름을 입력하면 화면에 바로 보이고 싶음중첩 객체로 선언되어 있는 상태버튼을 누르면 setPerson에 변경된 데이터를 포함한 person 정보를 넣어줌mentor 부분만 바뀌니까 이전 데이터는 …prev 로 가져옴mento

useState처럼 상태를 업데이트하는 또 다른 방법컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다다른 파일에서 작성한 뒤에 불러올 수 있다는 장점reducer : state, action을 파라미터로 받아서 새로운 상태를 반환해주는 함수action :

불변성을 유지하면서 상태를 업데이트 해줄 수 있는 라이브러리불변성 : 상태를 변경하지 않는 것 , 불변성이 지켜지지 않으면, 값이 새로워져도 바뀐 것을 감지 못함 사용법produce(수정하고 싶은 상태, 어떻게 업데이트할지 정의한 함수) {}

map배열 순회하면서 요소마다 콜백함수 적용하고 새로운 배열로 리턴배열.map((요소, 인덱스, 배열) ⇒ { return 요소 });cf. 배열.reduce((누적값, 현재값, 인덱스, 요소) ⇒ { return 결과 }, 초기값);filtermap, filter 비

쓸데없는 폴더가 git에 올라갔을 때 터미널에서 명령어로 지워주면 된다해당 경로에 가서git rm --cached -r .idea // 나는 .idea 폴더를 삭제하고 싶었음cmd이미지삭제되었다는 내용이 나오고 깃 커밋에서도 확인할 수 있다!

브라우저가 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 작업요청해서 받은 내용 = HTML, CSS, JS 문서클라이언트인 브라우저가 렌더링을 처리하는 방식브라우저가 화면을 그리는 주체가 되는 것브라우저에서 자바스크립트로 콘텐츠를 렌더링하는 방식장점빠른

node package manager 줄임말노드 설치할 때 자동으로 설치되는 기본 패키지 관리자역할온라인 플랫폼 : 사람들이 노드 패키지 만들고 공유할 수 있음명령 줄 인터페이스 : (cli) 패키지 설치 및 제거 가능명령어node -vnpm -v페이스북에서 개발한 패

서버에서 가져온 데이터를 웹 브라우저에서 사용하기 쉽도록 도와주는 용도서버 데이터, 클라이언트 데이터를 분리하는 용도로 자주 사용Redux, Recoil이 전역 상태를 관리하는 라이브러리라면, React-Query는 서버 데이터와 클라이언트 데이터를 분리해서 Redux

리액트 최상위 루트에 .env 파일 생성, .gitignore에 .env 파일 추가변수 내용 작성 : 반드시 변수명 앞에 REACT_APP\_ 붙여줘야함전역 어디서든 process.env.변수명 으로 선언 후 사용, 별도의 import 없이 사용 가능

useEffect(…, \[]) 내에서 선언된 카카오맵 변수를 useEffect 밖에서도 사용하고 싶음시도 1. 컴포넌트 밖에 아예 전역적으로 map 변수 선언 \-> 🙁 document 내에서 map을 선언할 요소를 찝어야 하기 때문에 컴포넌트 밖에서 사용하는 건

내가 사용한 방법이랑 드림코딩 강의에서 사용한 방법이 달라서 정리BrowserRouter > Routes > Route 순으로 컴포넌트 감싼다Link 컴포넌트에서 to={path}를 이용해서 원하는 경로로 이동react router v6.4부터 이용 가능최상단에서 를

한개의 페이지로 이루어진 어플리케이션index.html 하나만 존재하고 라우터를 통해서 페이지 이동을 구현서버에서 사용자에게 보여줄 파일을 담당(MPA)하지 않고 브라우저가 담당(SPA) → 자바스크립트!웹페이지가 자바스크립트로 의해 렌더링됨데이터베이스와 연결해주는 방

구글의 디자인 철학인 Material Design을 구현한 자바스크립트 라이브러리리액트 UI 라이브러리 중 하나대표적인 리액트 UI 라이브러리 : antd, react-bootstrap, material-uiMUIv5가 릴리즈되면서 요즘 갑자기 급상승 (그만큼 레퍼런스

렌더링이 클라이언트쪽에서 발생하는 방식클라이언트에서 화면을 구성하는 방식서버가 요청을 받으면 클라이언트에 html, js를 보내줌, 클라이언트는 응답을 받아서 렌더링 시작서버에서 처리하지 않고 클라이언트로 보내줌 → js가 모두 다운로드되고 실행이 끝나기 전까지는 사용

변수를 선언하고 아무 값도 할당하지 않은 상태자료형이 없는 상태변수를 선언했는데 이후 값을 할당받지 않은 경우 = 초기화되지 않은 경우개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값→ 변수에 값이 없다는 것을 명시하고

재사용성이 높은 컴포넌트를 만들 때 자주 사용여러가지 타입에서 동작하는 컴포넌트를 만들 때 제네릭이란 ?타입을 마치 함수의 파라미터처럼 사용하는 것제네릭은 코드를 작성할 때가 아니라 코드를 수행할 때 (런타임) 타입을 명시제네릭 사용 예시Enum, Namespace는

Next.js란?리액트에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크작동 방식서버측에서 리액트 코드 실행서버에서 리액트를 pre-렌더링을 통해 html 생성 → 브라우저에게 전송브라우저에서 리액트를 이용하여 페이지 완성장점검색 엔진들이 html을 직접 검색할 수

이미지 file들을 담아놓은 배열에 map 함수가 적용되지 않는다배열이 아니라 FileList라서 발생하는 이슈FileList는 배열이 아닌 file 객체를 여러개 담고 있는 유사 배열 (array-like)유사 배열이기 때문에 .length는 사용 가능 but 배열이

React로 module css 불러올 때처럼 선언했더니 오류가 났다해당 모듈을 찾을 수 없다고 에러가 나온다이렇게 불러오면 오류가 나타나지 않는다Typescript가 scss, css 파일을 모듈로 인식하지 못해서 발생한다scss, css 에 대한 모듈 형식을 선언해

재생목록 리스트에서 해당하는 div를 클릭할 때 마다 옆 화면에 div에 대한 정보를 보여주고 싶다컴포넌트에 props로 이미지를 전달하려고 한다동적으로 이미지가 변경될 때 어떻게 적용해야 하는지 모르겠다이미지 파일을 따로 분리하는 것이 재사용성에 용이할 것 같아서 따

프로젝트의 목표가 웹앱이기 때문에 반응형으로 제작해야 한다. 안드로이드, iOS 모두 고려했을 때 폰트를 통일하는 것이 화면 통일하는데 편하므로 Pretendard 폰트를 적용하려고 한다.html 부분에 추가index.css에 @import 추가, html에 fon

투두리스트의 새로운 투두를 추가하는 부분을 구현중input이 변화할 때 마다 input의 value 값을 바꿔줄 handleChange 함수를 구현하려고 한다handleChange 함수의 매개변수인 event의 타입을 어떻게 명시해줘야 할지 모르겠다React.Chang

codeerrorhtml header를 살펴봤는데 이렇게 되어 있었다올바르게 고치니까 에러가 사라진다

새로운 Todo를 Todo 배열에 추가하는 부분에서 오류가 났다codeloguseState 선언이 잘못됐다! -> 제네릭을 선언해줘야 한다codeuseState<number>() : state의 type은 제네릭 안에 지정제네릭 사용하면 좋은 경우상태가 null일

공식 문서커스터마이징

로고 이미지를 import 했는데 찾을 수 없다고 뜬다확장자를 타입스크립트가 받아들이지 못하고 있는 상황이어서 발생한 것이다프로젝트 최상위 경로에 @types/global/index.d.ts 파일 생성파일 내용 필요한 확장자를 추가 tsconfig.json 의 co