전체보기106 [바닐라 JavaScript] 화면 전환과 리렌더링 (에러핸들링) 바닐라 자비스크립트와 웹팩을 사용하여 SPA를 구현했습니다. (제작 과정에서 참고했던 링크는 콘텐츠 하단에 있습니다.) React에서는 State 변경 시 자동으로 재조정(Reconciliation)이 일어납니다. 그러나 바닐라 자바스크립트에서는 재랜더링 관련 코드를 직접 작성해야 합니다. 화면 전환 시 리렌더링 문제상황 화면 전환 시 새로운 페이지가 기존 페이지를 대체해야 합니다. 그러나 기존 페이지와 새로운 페이지가 합쳐져 버렸습니다. 원인 참고했던 자료에는 innerHTML 메소드를 사용해서 리랜더링을 진행했습니다. 해당 메소드를 사용하면 기존에 내용은 삭제되고 새로운 내용이 대체됩니다. 저는 DOM 객체를 만들어 append 메소드를 사용했습니다. 이 메소드는 기존 Node는 그대로 둔 채 새로운.. 2022. 1. 18. [코딩테스트] Codility 4-1 FrogRiverOne (Javascript) - set, add, size 전달인자 : 양의 정수 X, 배열 A 리턴값 : 배열 A의 엘리먼트를 0번 인덱스부터 순차적으로 조회하여, 1~X 사이 모든 양의 정수가 조회되는 시간 조건 : A의 엘리먼트는 1이상 X이하 문제 링크 : https://app.codility.com/programmers/lessons/4-counting_elements/frog_river_one/ 솔루션1 정답률 : 81% 시간복잡도 : O(N) 코드 작성 배열 arr에 조회된 값을 true로, 조회되지 않은 값을 false로 할당하여 모든 엘리먼트가 true가 되는 지점을 찾기 1. 조회한 A의 엘리먼트를 기록하기 위한 배열 arr 선언 2. 배열 arr의 길이는 X+1이며, 각 엘리먼트는 false 3. A를 반복문으로 순회하며 조회된 A의 엘리먼트.. 2022. 1. 18. [DOM] object HTMLElement 에러 핸들링 문제 상황 : 의도한 웹 페이지가 렌더링 되지 않고, 브라우저 화면에 [object HTMLElement]가 표시됨 원인 : DOM 객체가 HTML 엘리먼트의 내용(content)으로 전달됨 해결방안 : append 메소드를 사용하여 DOM 객체를 자식 노드로 연결하기 에러 코드 (innerHTML 메소드 사용) // page.js module.exports = function createHTML () { const main = document.createElement('main'); const h1 = document.createElement('h1'); h1.textContent = '페이지'; const div = document.createElement('div'); div.textContent .. 2022. 1. 18. [SPA] HTML 대신 JavaScript로 웹페이지 제작 후 이벤트 함수 등록 1. SPA 구현 : HTML 대신 JavaScript로 웹페이지 제작 2. Vanilla JavaScript 사용 : React의 JSX 문법 없이 진행 3. 해당 웹 페이지에 이벤트 할당 Single Page Application를 구현하는 과정에서, HTML이 아닌 JavaScript로 대부분의 웹 페이지를 제작해야 했다. 리액트를 사용할 경우 JSX 문법을 사용할 수 있었지만 Vanilla JS에서는 그것이 불가능하다. 아래와 같은 방법으로 JavaScript를 사용해서 웹 페이지를 제작했고, 이벤트 함수를 등록했다. 1. Template literals 사용 (이벤트 함수 등록 실패) 모듈 내 함수에서 HTML 문법을 Template literals 로 리턴한다. 그리고 특정 HTML 엘리먼트에.. 2022. 1. 17. [Firebase] Uncaught FirebaseError: Missing or insufficient permissions 문제 상황 : firebase의 firestore에 데이터가 입력되지 않음 에러메세지 : Uncaught FirebaseError: Missing or insufficient permissions 원인 : firestore 데이터베이스에 접근 권한 허용이 안 됨 해결방안 : Cloud Firestore의 '규칙'에서 false를 true로 변경 rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; // false를 true로 변경 } } } 2022. 1. 17. [코딩테스트] Codility 3-1 TapeEquilibrium (Javascript) 문제 링크 : https://app.codility.com/programmers/lessons/3-time_complexity/tape_equilibrium/ 솔루션1 점수 : 53% 시간복잡도 : O(N*N) 코드 작성 i의 값을 1부터 N-1 까지 for문 돌리기 i 기준으로 slice를 해서 전달인자를 두 개의 배열로 나누기 두 배열의 차이를 선언된 arr 배열에 담고, 최소값을 리턴하기 function solution(A) { let arr = []; let Length = A.length function sumArr (A) { let result = A.reduce((acc,cur)=>{return acc+cur}) return result; } for (let i=1; i acc + cur) .. 2022. 1. 17. [코드스테이츠] 프론트엔드 특별 심화반 & 프로젝트 후기 코드스테이츠 부트캠프의 커리큘럼이 끝난 후 프론트엔드 특별 심화반 과정을 추가로 수강했다. 프로젝트 배포 링크 : https://dazzling-ardinghelli-71d8ff.netlify.app/ 프로젝트 Github : https://github.com/jacobways/BasicInvest 1. 나만의 시간 관리 해당 코스는 6주 안에 프로젝트, 알고리즘 공부, 개념 공부, 면접 대비 등을 모두 진행해서 시간이 절대적으로 부족했다. 코스에서 제공하는 학습 시간표 또한 나와는 잘 맞지 않았다. 나는 오전에는 머리가 잘 돌아가지만, 저녁 이후 시간에는 집중력이 떨어진다. 그러나 학습 시간표에는 집중력을 요구하는 작업이 오후나 저녁 이후에 배정되어 있었다. 효과적인 학습을 위해 코드스테이츠에서 제공하.. 2022. 1. 16. [JavaScript] 십진수를 이진수로 변환하기 십진수를 이진수로 변환하기 (toString 메소드 사용) - 문법 : 변수.toString(2) - 매개변수에 따라 다른 진수로도 변경 가능 // 십진수 100을 이진수로 변경 let number = 100; number.toString(2) // '1100100' // 십진수 100을 오진수로 변경 let number = 100; number.toString(5) // '400' // 숫자를 변수에 할당하지 않으면 에러발생 100.toString(2) // Uncaught SyntaxError: Invalid or unexpected token 이진수를 십진수로 변환 (parseInt 메소드 사용) - 문법 : parseInt(변환할 숫자, 2) - 매개변수에 따라 다른 진수로도 변경 가능 // 이진.. 2022. 1. 12. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음 반응형
