우선 키 생성하기ssh-keygen -t ed25519 -C "your-email@example.com" -f ~/.ssh/id_ed25519_new ssh에이전트에 키 추가eval "$(ssh-agent -s)"ssh-add ~/.ssh/id_ed25519_new - ssh 키 복사하기cat ~/.ssh/id_ed25519_new.pub 깃헙에 SSH 키 등록하기. ssh 설정파일 업데이트nano ~/.ssh/config 하단에 이거 추가Host github.com-work HostName github.com User git IdentityFile ~/.ssh/id_ed25519_new 그리고 해당 설정으로 클론 받아오기git clone git@github.com-work..
티스토리는 왜 마크다운 문법이 잘 안먹을까... 원본은 아래 링크에 있음 https://iodized-pond-201.notion.site/JWT-e273e7ea07f743da856ceea1adfc39fd?pvs=4 클릭! JWT Json Web Token 등장 배경 기존 세션 기반 인증 방식 stateful (클라이언트, 서버의 state를 (서버에) 저장) 실제 인증 정보는 서버(세션)에 저장하고, 클라이언트에게 세션의 id만 전달하는 방식 쿠키로 전달, 해당 session-id에 해당하는 인증정보가 존재하면 인증된 사용자로 판단함. 단점 세션이 많아질수록 매 요청시 해당 세션을 찾아야하므로 서버 부담이 증가함. 다중 서버 환경에서 모든 서버가 동일한 세션을 유지하기 위해 별도의 조치 필요 유연한 확..
관리 폴더 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도 처리를 해줘야한다.
악수(Handshake): 이는 클라이언트(예: 웹 브라우저)와 서버가 처음 만나 서로 인사를 나누는 과정을 의미합니다. 이 단계에서 양측은 서로 데이터를 주고받을 수 있는지, 어떤 방법으로 데이터를 주고받을 것인지를 확인합니다. 공개키와 대칭키: 여기에서 공개키 방식은 각 키가 다른 암호화 방식입니다. 공개키로 데이터를 암호화하면 비공개키(혹은 개인키)로만 복호화가 가능합니다. 그러나 이 방식은 컴퓨터 자원을 많이 사용합니다. 대신 대칭키 방식은 암호화와 복호화에 같은 키를 사용하므로 효율적이지만, 키를 안전하게 공유해야하는 문제가 있습니다. SSL의 방식: SSL은 이 두 방식의 장점을 결합합니다. 클라이언트와 서버는 처음에는 공개키 방식을 사용하여 안전하게 대칭키를 공유하고, 이후에는 대칭키를 사용..
window.location 객체는 브라우저 창의 현재 URL을 표현하며, 다양한 방법으로 사용자가 페이지를 이동하거나 URL 정보를 다루는 데 사용될 수 있습니다. window.location 객체는 주요한 여러 속성과 메서드를 가지고 있습니다. window.location.href : 전체 URL을 얻거나 설정하는 데 사용됩니다. 아래는 그 예시 ``` console.log(window.location.href); // 현재 페이지 URL을 출력 window.location.href = 'http://www.example.com'; // 페이지를 www.example.com으로 이동 ``` window.location.replace(URL) : 지정한 URL로 이동하되 브라우저의 히스토..
.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..
다들 버그에 맞게 코드를 써버려서 아직까지 고쳐지 못하고 있는 자바스크립트 버그 typeof '' // string typeof '123' // string typeof 1 // number typeof true // boolean typeof {} // object typeof /test/index // object typeof function () {} // function typeof undefined // undefined 위에는 논리적으로 맞는 결과값인데 참고 : 자바스크립트의 원시타입은 number, String, Boolean, null, undefined, Symbol, Bigint 가 있음. 아래는 ? NaN은 뭐 number가 비어있는거라 치고, null은 심지어 원시타입인데 왜 obj..
https://chat.openai.com/share/3c93f263-b068-4c6b-bc75-3de7989b4bcc ChatGPT A conversational AI system that listens, learns, and challenges chat.openai.com 위에는 내가 자바스크립트의 String이 C언어처럼 참조형이 아니고 원시값인게 이해가 안가서 gpt에게 물어본 내용이 들어있는 대화록 링크. GPT내용 요약하자면 자바스크립트는 효율적이 사용을 위해 문자열을 원시값으로 만들어 빠른 엑세스가 가능하도록 했고, 원시값임에도 동일한 문자열이 여러개 있는 경우 자바스크립트 엔진에 자체적으로 한군데의 메모리값을 여러군데 할당해서 메모리 사용을 효율적으로 관리한다. 이때 C언어와 다르게 가비지..
터미널에 npm start 입력시, 맥북에서 아래와 같은 오류가 자주 생긴다. 터미널에 아래와 같이 입력한다. (경로는 사진에 나온 경로에서 .cache를 빼고 입력) sudo chown -R $USER /Users/mac/Desktop/reactbootstrap/reactbootstrap/node_modules//경로수정후사용 이제 잘 나온다. 근데 저장을 하려고 하니 아래와 같은 새로운 오류가 나온다. 저 버튼 눌러도 해결은 안되고 , 터미널에 아래와 같이 입력한다. (경로는 해당 프로젝트 경로로 바꿔야한다) 프로젝트 폴더 경로는 터미널에서 현재 폴더 위치를 보여주는 pwd를 입력해서 알아내면 편하다. sudo chmod -R 777 /Users/mac/Desktop/reactbootstrap/rea..
터치로 빠르게 클릭하면 반투명 정사각형이 잠깐 보였다 사라진다. 찾아봐야겠다.. 참고: 카카오톡 자체 브라우저에서 발생함.
https://taehyunkim3.github.io/JS30/drum.html 왜 Bootstrap demo 제목이 안바뀌는지 모르겠다. 아마 github 혹은 티스토리 자체 캐쉬가 있나..? Bootstrap demo taehyunkim3.github.io 소리가 좀 거슬릴것 같아서 음소거 버튼을 제작해서 넣었다. 클릭할때마다 muted라는 변수가 false인 경우에만 sound.play함수를 실행한다. muted변수를 그냥 전역에다가 놔뒀는데, 뭔가 풍파에 노출시켜둔 뭔가 찝찝한 기분이라 찾아보니 클로저라는 뭔가 어려운데 필요해보이는 개념이 있었다. 요거는 조금만 더 공부해보고 적용볼 예정. https://codepen.io/arlekino/pen/DEBeRE Simple switch ... cod..
https://taehyunkim3.github.io/JS30/drum.html 해당 프로젝트 링크 Bootstrap demo taehyunkim3.github.io 왜bootstarp demo는 바꿔도 안바뀔까. 하. 겨우 찾았다. 마우스로 해당 버튼을 클릭하면, 해당 버튼에 애니메이션이 구현되도록 해야했는데, 여기서 에니메이션은 key-code로 묶여있기에, 큰 수정 없이 기능을 추가하기 위해서는 마우스 클릭을 하면 해당 요소의 data-key 값을 불러올 수 있어야 한다. 보통 해당 요소의 속성을 불러올땐 getAttribute를 사용하는데 this는 getAttribute를 사용할 수 없다. ㅠㅠ 따라서 this 대신에 addeventlistener에서 인자를 넘겨줘야하는데, 문제는 addEven..
