관리 폴더 public 폴더 webpack에 의해 관리됨 PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능 파일 못찾으면 컴파일에러 없이 파일 깨짐 src 폴더 webpack에 의해 관리됨 (import하여 사용가능) 파일 못찾으면 컴파일 에러 발생 import logo from "경로"; require로 불러오기 가능 추가 팁 VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능 index.html 위치한 곳에 jsconfig.json 파일을 생성해준다. 아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다. { "rootDir": "src", "compilerOptions": { "baseUrl": "src",..
appear to have any style information associated with it. The document tree is shown below. AccessDenied Access Denied Q0VD4RZ9J91T64KN aHcYCUcGMNqbkWwNs15iqwTaNqFIalmBh2l9Ylw6XZqNYzMnIF+vUG8c55rF6S2CU6SUbhag9fk= 분명 메인페이지는 되는데 다른 페이지는 위와같은 메세지가 나오면서 접근이 안된다. 모든 권한 다 찾아봤는데 안되서, 결국 해결방법은 아래와 같다. cloudFront 에서 오류코드를 404뿐만 아니라 403도 처리를 해줘야한다.
.env 파일은 환경 변수를 저장하는 데 사용되는 파일입니다. 여기에는 데이터베이스 연결 문자열, API 키, 암호 등과 같은 민감한 정보를 저장할 수 있습니다. 이 파일은 저장소에 커밋되지 않아야 하며, 각 개발자나 환경에 따라 달라질 수 있는 설정을 관리하는 데 유용합니다. .env 파일을 사용하면 코드가 서로 다른 환경에서 실행될 수 있게 되며, 그로 인해 개발, 테스트, 프로덕션 등에서 약간씩 다른 설정을 적용하는 것이 가능해집니다. CRA(Create React App)와 Vite에서 .env 파일을 사용하는 방법에는 약간의 차이가 있습니다. CRA(Create React App) CRA에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 이러한 변수는 REACT_APP_ 접두사로 ..
redux의 기본버전의 데이터 흐름을 이해해야 toolkit을 쓰던 미들웨어를 쓰던 이해가 갈것 같아서 클론을 해봐도 머리에 안들어와서 표로 만들어 보았다. 여기서 todosContainer.js는 connect함수가 아닌 useDispatch, useSelector를 사용하면 없어도 되고 한단계 단순해지지만, 그럴경우 dispatch를 사용하는 함수를 useCallback으로 감싸주고, 해당 부모 컨테이너가 리랜더링될 경우, props가 바뀌지 않아도 리렌더링이 되므로, 해당 컴포넌트를 React.memo로 감싸주어야 한다. 작성중..
기억해야 할 것 패키지 설치 yarn add redux react-redux 폴더구조 생성 src > redux > config > configStore.js src > redux > modules > todos.js users.js... configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; import todos from '../modules/todos'; const rootReducer = combineReducers({ todos, }); const store = createStore(rootReducer); export default store; index.js impor..
https://leehwarang.github.io/2020/07/28/setState.html React의 setState가 어떻게 동작하는지에 대해 설명하고 있습니다. 여기서 설명하는 주요 개념은 setState가 비동기적으로 동작한다는 것입니다. JavaScript에서 비동기적(asynchronous)이라는 말은 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행한다는 의미입니다. React의 setState 메소드 역시 비동기적으로 동작합니다. 다시 말해, setState를 호출하면, React는 이를 '예약'하고, 모든 JavaScript 실행이 끝난 후에 일괄적으로 상태를 업데이트합니다. 이것이 setState의 비동기적인 특성입니다. 예를 들어, 아래의 코드를 보겠습니다...
.env파일을 가지고 작업을 하는데 분명 .gitignore에 선언을 해뒀음에도 불구하고 자꾸 git status를 하면 눈에 보이는 현상이 발생하는 경우가 있다. 이는 .env파일이 이미 원격 저장소에 푸시가 되어있는 상황이라서 그렇다. 해결방법은 간단하다 원격 저장소의 .env파일을 지우면 되는것이다 git rm .env --cached git commit -m "remove .env file from git repo" git push 보통 원격 저장소에는 .env파일을 직접 올리지 않고 .env.example 같은 형식으로 다르게 올려서 공유한다. (key값만 빼놓음) 위에 명령어로는 로컬 파일은 지워지지 않으니 걱정 말것. .gitignore에 .env 관련 파일들이 제대로 적혀있나 확인 한번 하..
Todo import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO" const addToDo = (text) => { return { type: ADD_TODO, text } } const deleteToDo = (id) => { return { type: DELETE_TODO, id } } const reducer = (state = [], actio..
scss(sass) 의 html data-theme속성을 toggle해서 구현했습니다. https://github.com/taehyunkim3/TODOList GitHub - taehyunkim3/TODOList: react react. Contribute to taehyunkim3/TODOList development by creating an account on GitHub. github.com https://todolist-pre.vercel.app/ React App todolist-pre.vercel.app
https://dudghsx.tistory.com/18 hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com
브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔을 때 거치는 과정이다. 이때 브라우저는 새로운 DOM을 만든다. (참고 : 렌더링이란 브라우저에 리소스(html,css,js)를 그리는 작업을 뜻한다.) 두번째, 업데이트시의 렌더링은 다른 페이지로 이동했을때 발생하는 렌더링을 말한다. 브라우저는 업데이트된 DOM을 만들고 기존에 있던 DOM은 전부 날리는 식으로 업데이트가 진행된다. 하지만 리엑트는 이것과 다르게 동작한다. [리엑트의 렌더링 과정] 내용이 바뀌어 업데이트된 DOM을 새로운 사본으로 만든 뒤, 그 사본에 업데이트된 항목을 표시한다. 사본과 기존의 DOM을 비교하면서 달라진 점이 없는지 확인한다. D..
터미널에 npm start 입력시, 맥북에서 아래와 같은 오류가 자주 생긴다. 터미널에 아래와 같이 입력한다. (경로는 사진에 나온 경로에서 .cache를 빼고 입력) sudo chown -R $USER /Users/mac/Desktop/reactbootstrap/reactbootstrap/node_modules//경로수정후사용 이제 잘 나온다. 근데 저장을 하려고 하니 아래와 같은 새로운 오류가 나온다. 저 버튼 눌러도 해결은 안되고 , 터미널에 아래와 같이 입력한다. (경로는 해당 프로젝트 경로로 바꿔야한다) 프로젝트 폴더 경로는 터미널에서 현재 폴더 위치를 보여주는 pwd를 입력해서 알아내면 편하다. sudo chmod -R 777 /Users/mac/Desktop/reactbootstrap/rea..
리엑트 설치 sudo npx create-react-app reacttodo(name) cd reacttodo(name) 부트스트랩설치 sudo npm install react-bootstrap bootstrap 리엑트 아이콘 설치 https://react-icons.github.io/react-icons npm install react-icons --save scss 설치 https://sunnyfterrain.github.io/devlog/tips-react-scss.html sudo npm install node-sass styled components 설치 최근 오류로 아래 버전 명시 필요 sudo npm install styled-components@5.3.10 권한수정 pwd (경로 알아내기)..
