개발일기

return문 사용 이유 함수에서 결과값을 외부로 반환(output)할 때 사용! return문을 만나면 함수가 끝나기 때문에 return 뒤에 오는 코드는 실행되지 않음. return문을 사용하면 함수의 결과를 외부로 전달하고, 그 결과를 활용하여 다양한 작업을 수행할 수 있음. 1. 결과값 반환 return문 뒤에 반환값을 작성하고, 그 값을 함수를 호출한 곳에서 사용할 수 있음. function add(a, b) { return a + b; } let result = add(3, 5); console.log(result); // 8 2. 함수 종료 return문을 만나면 해당 함수의 실행이 종료됨. function divide(a, b) { if (b === 0) { console.log("b는 0..

브라우저 렌더링 과정 ① HTML parsing : 브라우저가 사용자가 요청한 주소를 방문해 HTML 파일을 다운로드하고, 파싱해 DOM 트리를 만듦. ② CSS parsing : CSS 파일 다운로드 받고, 파싱해 CSS 노드로 구성된 트리(CSSOM_CSS Object Model)를 만듦. ③ Render Tree : DOM 트리와 CSS 트리를 합친 트리인데, 화면에 보여질 노드들만 포함합니다.(예 : display: none 은 미포함) ④ Layout(reflow) : 각 노드가 브라우저 화면의 어느 위치에 나타나야 할지 계산하는 과정 ⑤ Painting : 색, 크기 등을 입히는 작업으로 CSS 스타일이 적용되는 단계 ⑥ Compositing : 여러 레이어를 합쳐서 실제 페이지를 완성 파싱(..

트러블 슈팅(카카오톡 공유하기 시 뒤로가기 이슈) ① 문제 카카오톡의 공유하기 버튼을 눌러 상세 게시글을 공유하고, 그 공유된 페이지에서 뒤로가기 버튼(전체 게시글로 돌아가는)이 작동하지 않음. ② 원인 카카오톡의 공유하기 기능 외에도 핸드폰 내부의 공유 버튼을 사용해 우리 페이지를 공유하려고 시도했을 때, 뒤로가기가 정상적으로 작동하지 않았음. 비슷한 기능을 가진 다른 웹 사이트에서는 페이지 이동이 제대로 이루어졌으며, 이를 통해 페이지 라우팅에 문제가 있을 것으로 판단함. ③ 해결 뒤로가기 기능이 navigate(-1)로 구현되어 있었고, 이전 페이지로 이동하는 역할을 하고 있었으며, 공유하기 기능은 이전 페이지가 없었으므로 페이지 이동이 실행되지 않았음. 게시글 전체 목록이 있는 (”/posts”)..

트러블 슈팅(Token 재발급 후 페이지 이동 이슈) ① 문제 axios interceptors를 사용해 axios가 서버로 HTTP 요청을 보내기 전, refresh Token으로 만료된 access Token을 재발급 받도로록 구현함. try catch문을 사용해 에러가 발생했을 때는 쿠키에 저장된 refresh Token과 로컬스토리지에 저장된 access Token을 모두 지우고 로그인 화면으로 이동하도록 useNavigate를 사용했는데, 페이지 이동이 되지 않는 이슈가 발생함. ② 시도 1) 토큰 재발급 코드 위치 변경 : axios interceptors → Layout axios interceptors는 useNavigate가 실행되지 않아 모든 페이지에 영향을 주는 Layout으로 옮겨서..

트러블 슈팅(프로필 사진 put 적용 이슈) ① 문제 마이페이지 프로필 사진을 수정하지 않았는데도 사진 수정 API가 동작함. 사진을 수정할 때도 API가 두번 동작함. ② 원인 useEffect가 1) 컴포넌트가 마운트될 때, 2) 이미지 수정 시 useState가 업데이트 될 때, 두번 실행돼서 발생함. ③ 해결 이미지 업데이트와 관련된 useState를 새로 생성해서, true일때만 수정이 동작하도록 useEffect를 수정함. const [isUpdate, setIsUpdate] = useState(false); // 사진 업데이트 상태 useEffect(() => { // 컴포넌트가 마운트 될 떄 // upLoadImage가 변경될 떄 if (isUpdate) { putUpdateProfileH..

enter 눌러서 로그인하기 // useRef 사용 import { useRef } from "react"; export default function LoginPage() { const loginButtonRef = useRef(); // 사용자가 Enter 키를 눌렀을 때 로그인 실행하는 함수 const handleEnterKey = (event) => { if (event.key === "Enter") { loginButtonRef.current.click(); } } } // onKeyPress 추가하기 return ( ; // loginButtonRef 연결 )