노인과바다의 개발로그 노인과바다의 개발로그

html로 만들어진 회사 홈페이지를 직접 수정하다가 보니 vanilajs에서 getAttribute를 사용해야 되는경우가 있어서mdn을검색해봤는데 아래와 같은 설명이 나와있었다. 도통 무슨말인지 모르겠어서 간단히 직접 실험을 해봤다. 실험 결과를 밑의 스크린샷을 참고하면된다. Element.getAttribute() 요약 getAttribute() 은 해당 요소에 지정된 값을 반환 합니다. 만약 주어진 속성이 존재 하지 않는 다면, null 값이나 ""(빈문자열); 을 반환 할 것입니다. 자세한 사항은 Notes 참조 하십시오. 문법 var attribute = element.getAttribute(attributeName); attribute는 attributeName의 값을 가지고 있는 문자열입니다...

Thunk는 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다. 리덕스에서 비동기처리를 위해 Redux Thunk를 공부하다가 Redux-Thunk의 핵심 함수인 다음과 같은 함수를 만났다. 이해가 잘 되지 않아서 차근차근 살펴보았다. 이해가 잘 되지 않아서 내 나름내로 아래와 같이 이해를 해봤다(문법적으로틀림) const addOneThunk = x => return(const fn = ()=>addOne(x)) 즉 const AddOneThunk = x=> return값 이라는 함수가 있을 때, 이 함수의 리턴 값으로 무기명함수(fn으로 표시함)이 들어있는것이다. 이를 문법에 맞게 표현하면 위와 같다. 그렇다면 이렇게 복잡한 함수를 왜 쓰는걸까? 결국 이는 콜백함수의 형태..

req.cookies와 req.header.cookie의 차이점에 대해 궁금하여 찾아보았다 req.header.cookie: express를 설치하면 기본적으로 사용 할 수 있다. req의 header로 실려오는 cookie를 그대로 가져온다. 여기서 중요한게 '그대로'이다. 객체형태로 파싱하지 않고 그대로 가져오므로 express내부에서 바로 사용 할 수 없다! req.cookies: express에서 이것만 쓸 수 없다. 해보니 undefined가 뜬다. cookier-parser 를 설치 한 이후 미들웨어로 실행을 해줘야지 express에서 req.cookies를사용가능하다. 차이점으로는 쿠키를 파싱하여 js의 req.cookies 객체로 만들어 준다!! 말보다 코드이니 예제를 보자 EX) 밑의 스..

URL에서 주소를 통해 특정 값을 받아올 때 쿼리와 파라미터를 사용할 수 있다. 일반적으로 다음과 같이 사용 한다. 파라미터: 처리할 작업의 카테고리를 받아 오거나, 고유한 ID혹은 이름으로 특정 데이터를 조회할 때 사용 /about/:name과 같이 :(콜론)을 사용하여 라우트 경로를 설정 파라미터가 있을수도 있고 없을 수도 있는 경우에는 ?를 붙여준다 /about/:name? req.params로 파라미터 값을 가져와서 사용할 수 있다. //express app.get('/about/:name?',(req,res)=>{ const {name} = req.params; if(name)res.send(`introducing of ${name}`) else res.send(`introduce`) }) 쿼리..

useMemo와 useCallback의 차이는 다음과 같다. memo가 값을 저장하는거에 반에 callback은 함수 그 자체를 저장한다. useMemo: Returns and stores the calculated value of a function in a variable useCallBack: Returns and stores the actual function itself in a variable 예를들어 Average라는 컴포넌트에 아래와 같이 함수가 여러개 있다면 const Average = () => { const onChange = ()=>{} const onInsert = ()=>{} } 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 컴포넌트의 랜더링이 자주발생하거나..

useMemo를 사용해야 할 필요성이 있는 경우는 크게 두가지 경우가 있다. 1. 연산이 큰 작업이 반복되어서 호출 될 때 2. Referential equility가 발생할 경우에. 먼저 첫번째 경우를 살펴보자. 위와 같은 예제에서 input의 값을 증가시키면 그 두배가 되는 값을 화면에 렌더링 해주는데 약 0.5초의 시간이 걸린다. slowFunction에서 반복을 100000000만큼 돈후에 그 값을 두배로 해주기 때문이다. 여기까지는 이해가 쉽다. 하지만 여기에서 changeTheme버튼을 누르면 어떻게 될까? 마찬가지로 0.5초의 시간이 흐른후 화면의 theme색깔이 바뀐다. 왜그럴까? 이는 리엑트에서 state를 업데이트 하면 컴포넌트 전체를 다 리렌더링 하기 때문이다. 즉, 시간이 걸리는 작..

밑의 사진의 경로 순서는 App.js->AccountRoutes.js->SingUpPage->AuthApis.js 보면 AuthApis에서 경로가 memberIdCheck이라고 되어있는데(baseURL설정 없음) 콘솔창에 뜬 에러를 보면 /accounts/memberIdCheck이라는 라우터로 리퀘스트를 날린것을 볼 수 있따. 즉 리엑트 App.js에 있는 리엑트 라우터 상에서 /accounts/*이부분의 영향을 받아 기본적으로 url에 accounts가 딸려 붙는 것을 알 수 있다.

https://12ahn22.tistory.com/entry/express-%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4-%EB%BD%80%EA%B0%9C%EA%B8%B0