으니의 개발로그

What I wanted 회원탈퇴 페이지에서 비밀번호 인증을 한 뒤 페이지 내에 있는 링크를 통해 다른 페이지로 이동했다가 뒤로가기 동작으로 회원탈퇴 페이지에 돌아왔을 시 비밀번호 인증 된 페이지를 보여주고 싶음 해결방법 회원탈퇴 페이지에서 A페이지로 이동할때 isCheck=true 라는 파라미터를 넘겨주고 뒤로가기 클릭 시 그 때 받은 파라미터를 다시 넘겨주는 것으로 해결했다. 밑의 코드는 A페이지에 작성한 코드이다. // 회원탈퇴 페이지 const onClickGoAPage = useCallback( () => router.push( { pathname: '/a', query: { isChecked: true }, }, '/a', ), [router], ); // A 페이지 useEffect(() =..

CSR(Client Side Rendering) vs SSR(Server Side Rendering) CSR(Client Side Rendering) CSR, 즉 Client Side Rendering은 뜻 그대로 클라이언트 측에서 렌더링을 처리한다는 것이다. CSR 렌더링 순서 사용자가 웹사이트에 요청을 보낸다. (브라우저에 보고 싶은 사이트의 주소를 검색함) 서버(클라이언트 서버)에서 JavaScript 링크가 담겨있는 빈 HTML파일을 전송한다. 브라우저에서 HTML 파일을 다운로드 한다. 브라우저가 CSS 파일과 JavaScript 파일을 다운로드한다. 브라우저가 프레임워크(리액트) 또는 라이브러리를 실행한다. 브라우저가 웹사이트를 보여준다. 장점 초기 로딩 이후의 렌더링 속도는 빠르다. CSR의..

let num = 1; const x = num++ + 1; console.log(x, num) num = 1; const y = ++num + 1; console.log(y, num) num = 1; const z = num-- + 1; console.log(z, num) num = 1; const w = --num + 1; console.log(w, num) 퀴즈! 위의 코드를 실행했을때 x, y의 값과 z, w의 값은 같을까? 또한, 콘솔창에는 어떤 값이 출력될까? 이 글을 다 읽으면 정답을 알 수 있다! 먼저, 증감 연산자란 무엇일까? 증감 연산자는 전위 연산자 와 후위 연산자 로 나눌 수 있다. ++num 또는 --num 와 같이 증감 연산자가 앞에 붙으면 앞 전(前)을 사용해 전위 연산자라고 ..

JavaScript 코드를 읽고 있을 때는 HTML 코드가 파싱되지 않는 문제가 발생했었다. 하지만 이제 이 문제를 해결할 수 있다. 어떻게? script 태그에 async와 defer 속성이 추가함으로써!!! HTML5부터는 script태그에 defer와 async 속성이 추가되었다. 한 가지 주의할 점은 async와 defer 속성은 src 속성을 통해 외부 JavaScript 파일을 가져오는 경우에는 사용할 수 있다. 즉, 인라인 JavaScript에서는 사용할 수 없다. 그렇다면 defer와 async 속성을 추가하면 어떤 점이 바뀌는 걸까? 이 두 속성의 공통점은 HTML 파싱과 외부 JavaScript 파일의 로드가 비동기적으로 동시에 진행된다는 것이고 차이점은 JavaScript의 실행 시점..

hello() vs hello 보통 이름으로 정의된 함수를 호출할 때는 괄호를 추가한다. (함수가 필요한 모든 매개변수가 괄호 안에 들어가거나 매개변수가 필요하지 않은 경우에는 빈 괄호를 추가한다) => hello() 가끔은! 함수로 바로 실행하고 싶지 않을 때도 있다. JavaScript 미래의 어느 시점에(예를 들어 일부 이벤트가 발생할 때) 어떤 기능이 실행되기를 원할 수도 있다. 이 경우에는 함수를 직접 호출하는 대신 JavaScript에 함수 이름을 제공한다. => someButton.addEventListener('click', hello); 이 스니펫은 JavaScript에게 'someButton'이 클릭되면 hello를 실행하라고 지시하는 스니펫이다. 그럼 코드 어딘가에 hello를 추가하..

스크립트가 길어질수록 HTML 파일도 길어져서 웹사이트를 관리하기가 어려워진다. JavaScript 파일을 가져오는 방법 통상적으로 스크립트 파일의 위치엔 큰 따옴표를 사용한다. 스크립트는 셀프 클로징을 지원하지 않는다. head 태그 사이에 script 를 추가하면 JavaScript 코드를 읽기 전까지 HTML 코드가 파싱 되지 않는 문제가 발생한다. 그러면 사용자에게 화면이 보여지는 속도가 늦어지게 되고 의도치않게 불편함을 줄 수도 있다. 그렇다면 브라우저가 스크립트를 실행하기 전에 HTML 코드를 파싱하고 페이지를 보여주는 방법은 없을까? 물론 있다. body 태그 끝 부분에 추가하는 방법 💡 alert 함수의 경우 head 태그 안에 추가시 알림창에서 ‘확인’을 눌러야 페이지를 볼 수 있으나 b..