Development22 [error log] firebase Page Not Found error 해결(feat. location.reload()로 새로고침하기) firebase로 프로젝트를 배포한 이후, 로그아웃 기능을 실행한 다음과 같은 페이지가 나타나면서 에러를 뱉어냈다. 이에 대해 구글링해보니 생각보다 쉽게 에러를 해결할 수 있었다. firebase.json 파일에 hosting 키워드 하위에 rewrites 설정 코드를 추가해주면 된다. { ...... "hosting": { "rewrites": [{ "source": "**", "destination": "/index.html" }] } } 몇가지 설정만 추가하면 쉽게 문제를 해결할 수 있다. 하지만 결과적으로 나는 이 방법을 이용하지 않았다! 앞선 방법으로 설정을 변경한 이후에 메인페이지 이동을 하면 빈 화면이 나타나는 현상이 발생했기 때문이다. 페이지 이동 후 새로고침을 해줘야겠다. 그래서 다른 방.. 2023. 4. 1. 개발자가 코딩테스트를 준비해야 하는 이유 (feat. 자바스크립트 코테 강의 추천) 왜 기업은 코딩테스트를 볼까? 코테푸는 게 개발에 도움이 될까? 실제 내가 코테에 발을 들이기 전에 들었던 생각이다. 이 글은 내가 코테 문제를 풀면서 배우고 느꼈던 것을 정리하는 글이다. 우선 나는 코테 고수가 아님을 밝힌다! (이 세상엔 고수가 너무 많다...) 프로그래머스 level 2를 기준으로 정답률이 60% 정도 되는 것 같다. 5문제 풀면 3문제는 맞추는 정도다. 처음 문제를 풀기 시작했을 때는 level 2 문제는 평생 풀 일이 없겠다고 생각했을 정도로 자신이 없었다. 그때는 단지 취업을 목적으로 문제를 풀기 시작했다면 지금은 심심할 때 프로그래머스 홈페이지를 들락날락할 정도로 문제 푸는 것 자체를 좋아하게 되었다. 이제는 매일 시간을 들여 코테 문제를 푸는 것이 하나의 습관으로 자리잡았다.. 2023. 3. 30. [수강후기] 인프런「하루만에 Cypress로 작성하는 자바스크립트 E2E 테스트 코드」 ▶︎ 도대체 테스트가 뭐길래? - 최근에 본 기술면접에서 테스트 코드 작성 경험 유무에 대한 질문을 받았다. 프론트엔드에서 점점 더 빈번하게 사용되는 기술이라는 것은 인지했지만 그것을 어떻게, 왜 사용해야 하는지에 대해서는 항상 의문이었던 것 같다. 테스트 관련 강의를 수강하기 위해 여러 플랫폼를 알아보던 중에 인프런에 메이커준님이 만드신 강의가 있는 것을 발견했다. 유데미에서 들었던 「문벅스 카페 메뉴 앱 만들기」 강의가 정말 유익하기도 했고 메이커준님이 활동하시는 우아한테크코스에서 사전과제를 통해서도 많은 도움을 받았기 때문에 별 고민없이 강의를 결제했다. (믿고 듣는 메이커준...) ▷ 뭘 배웠나? - 간단한 동작을 수행하는 웹사이트에 대해 E2E(End-to-End) 테스트를 직접 실습해보았다. .. 2022. 11. 17. [Development] 프론트엔드 면접 예상 질문 - React 1. Virtual DOM 작동 원리에 대해 설명해주세요. 2. React를 사용하는 이유에 대해 말씀해주세요. 3. React에서 JSX 문법이 어떻게 사용되나요? 4. React hook에 대해서 설명해주세요. 5. 상태관리의 필요성에 대해서 설명해주세요. 1. Virtual DOM 작동 원리에 대해 설명해주세요. 가상 돔은 실제 돔보다 상대적으로 가벼운 자바스크립트 객체 어떤 데이터가 변경이 되어서 화면을 업데이트 해야할 때, React는 가상 돔을 이용해서 빠르게 랜더링을 진행함 React는 메모리에 가상 돔을 올려놓고 (데이터 변경) 이전와 이후의 가상 돔을 합리적인 알고리즘으로 비교하여 변경된 부분만 실제 돔에 반영함 React에서 데이터 변경에 의한 화면 업데이트는 크게 렌더단계와 커밋단계를.. 2022. 9. 27. [Development] 프론트엔드 면접 예상 질문 - JavaScript(3) 1. 호이스팅(hoisting)에 대해서 설명하세요. 2. call 메서드와 apply 메서드의 차이점은 무엇인가요? 3. 함수 선언문과 표현식의 차이점은 무엇인가요? 4. 전역 스코프(global scope)를 사용했을 때 장단점에 관해 설명해주세요. 5. 가비지 콜렉터(garbage collector)에 대해서 아는대로 설명해 주세요. 1. 호이스팅(hoisting)에 대해서 설명하세요. 함수가 실행되기 전에 코드 안에 있는 변수들을 최상단으로 끌어올리는 것 이러한 현상이 발생하는 이유는 변수가 선언되는 시점과 값의 할당이 되는 시점이 다르기 때문 (자바스크립트 엔진에 의해) 변수 선언은 런타임 이전에 실행되고 값의 할당은 런타임에서 실행됨 호이스팅으로 발생하는 var과 let, const의 차이 호.. 2022. 9. 27. [Development] 프론트엔드 면접 예상 질문 - JavaScript(2) 1. 자바스크립트의 원시 타입(primitive type)과 참조 타입(reference type)에 대해서 설명해주세요. 2. 이벤트 버블링(event bubbling)과 캡쳐링(event capturing)에 대해서 설명하세요. 3. 이벤트 위임(event delegation)에 관해 설명해주세요. 4. 이벤트 루프(event loop)란 무엇인가요? (+ call stack, task queue 포함 ) 5. 불변 객체(immutable object)에 관해 설명해주세요. 1. 자바스크립트의 원시 타입(primitive type)과 참조 타입(reference type)에 대해서 설명해주세요. 원시 타입과 참조 타입은 데이터가 메모리에 어떻게 저장되느냐에서 가장 큰 차이를 보인다. 원시 타입 문자열.. 2022. 8. 3. [Development] 프론트엔드 면접 예상 질문 - JavaScript(1) 1. 클로져(closure)는 무엇이며, 어떻게/왜 사용하는지 알려주세요. 2. 스코프(scope)에 대해서 아는 대로 설명해주세요. 3. 프로토타입(prototype) 기반 상속은 어떻게 이루어지는지 설명해주세요. 4. this는 자바스크립트에서 어떻게 작동하는지 알려주세요. 5. null과 undefined 그리고 undeclared의 차이점은 무엇인가요? 1. 클로져(closure)는 무엇이며, 어떻게/왜 사용하는지 알려주세요. 클로져란 함수의 실행이 끝난 후에도 함수에 선언된 값을 접근할 수 있도록 만든 함수이다. 이것이 가능한 이유는 자바스크립트에서 함수는 호출되는 환경과 관계없이 자신이 정의된 환경을 기억하기 때문 정확히 말하면 함수는 자신의 내부 슬롯에 자신이 정의된 환경, 즉 상위 스코프에.. 2022. 8. 2. [Books] 일 잘하는 개발자가 되는 방법? - 「함께 자라기, 에자일로 가는 길(김창준 저)」 일 잘하는 개발자는 어떤 개발자일까요? 이 질문에 대해 우리가 흔히 내리는 결론은 '일 잘하는 사람은 전문성을 가진 사람, 그 분야에서 오래 일한 사람일 것이다.'입니다. 이 책을 읽기 전의 저의 생각도 크게 다르지 않았습니다. 부트캠프 혹은 스터디에서 저보다 오래 개발을 한 사람의 말을 절대적으로 신뢰하였고, 누군가에게 질문을 할 때 '당연히 저 사람은 이 문제에 대한 정답을 알고 있겠지', '당연히 A라는 기술에 대해서 나보다 훨씬 더 잘 알겠지'라는 생각을 하며 그분의 피드백을 한 치의 의심과 고민 없이 받아들이곤 했던 기억이 있습니다. 하지만 이 책은 이러한 통념을 정면으로 반박합니다. 대다수의 조직에서 직원을 뽑는 데 중요하다고 생각하는 요소가 많은 경우 별로 중요하지 않고, 중요하지 않다고 .. 2022. 6. 21. [log] 엘리스 SW 엔지니어 트랙 회고 & 새로운 계획 2021년 9월에 내가 썼던 글이다. '앞으로 공부하면서 이런 걸 알아 가야지...' 하는 마음으로 작성했던 체크리스트인데, 놀랍게도 이 글을 쓴 다음 날 엘리스 SW 엔지니어 트랙 1차 서류전형에 합격했다는 연락을 받았고 실제로 저 항목 중 대다수를 엘리스에서 공부하게 되었다. 9월에 이 글을 쓴 이후로 내용을 계속 떠올리거나 의식하고 있지 않았는데, 코스가 끝난 지금 대부분의 항목을 이해하고 있다. 옳은 방향으로 잘 가고 있다는 안도감이 든다. 16주의 기간 동안 많은 것을 배웠다. 배운 것들을 간단히 정리해보았다. 1주차: HTML과 CSS, 웹의 기초, git의 활용 2주차: JavaScript 기초(자료형, 변수, for문) 3주차: JavaScript(DOM, scope, 함수) 4주차: Ja.. 2022. 3. 14. [TIL] 2022-01-18 (input tag properties, arrow function) ▷ input tag properties import React, { useState } from "react"; function Problem(props) { return {props.text} ; } const GradingForm = (event) => { const [score, setScore] = useState(0) const answer1 = "아닌 밤중에 홍두깨"; const answer2 = "세살 버릇이 여든까지 간다"; const handleSubmit = (event) => { event.preventDefault(); let totalscore = 0 if (event.target.answer_one.value === answer1) totalscore += 50 if (even.. 2022. 1. 18. 이전 1 2 3 다음
