요구사항 정의 구현해야 할 기능 UI 구현하기 Todo 추가하기 Todo 삭제하기 Todo 완료 상태 변경하기 (완료 ↔ 진행 중) 요구사항 디자인은 자유이나 화면 구성은 동일하게 진행 제목과 내용을 입력하고, 추가하기 버튼 클릭 시 Working에 새로운 Todo 추가 추가 완료되면 제목, 내용 input 빈 값으로 바뀌도록 구성 Todo의 isDone 상태가 true면 상태 버튼의 라벨을 취소, 상태가 false면 버튼의 라벨을 완료로 조건부 렌더링 Todo의 상태가 Working이면 위쪽에 위치, Done이면 아래쪽에 위치 Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬 컴포넌트 구조는 자유롭게 구현하고 분리한 컴포넌트는 README에 작성 컴포..
구현하려고 하는 동적 테이블 리액트 주차를 시작하기 전에 바닐라 자바스크립트로 간단한 1/N 계산기를 만들어보고 싶었다. 사용자가 데이터를 편하게 입력할 수 있도록 행은 메뉴를, 열은 인원을 동적으로 입력할 수 있도록 table로 만들었다. HTML 구성 메뉴추가 인원추가 🍞 메뉴명 금액 - - 메뉴 삭제 식사비용 1/N 계산의 경우 메뉴 한 개, 사람 두 명 이상은 필수값이므로 HTML에 하드코딩했다. 두 번째 메뉴, 세 번째 사람부터는 버튼을 클릭해 동적으로 추가 및 삭제가 가능하도록 HTML을 구성했다. 버튼 클릭 시 행 추가하기 전체 코드 document.getElementById('add_menu').addEventListener('click', () => { // table 변수는 다른 함수에..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 안돼도 그냥 하기 🤔 코어자바스크립트 완독하기 😎 알고리즘 테스트 통과하기 ✅ 안 돼도 그냥 하기 지난주에 썼던 WIL. 이번 주에 얼마나 지켰나? 보면 칼같이 50%를 달성했다. 코어 자바스크립트는 반 읽었고 바닐라JS로 계산기 만들기도 1/2 만큼을 남겨두고 있고 과제물도 한 개 제출했다. 이번주차도 내용이 어려워서인지 집중이 잘 안 됐는데 어떻게든 그냥 하려고 많이 노력했다. 스코프가 좀 크기도 했지만 눈 딱 감고 했으면 다 해낼 수 있었을 것 같아 아쉽지만 생각을 줄이고 그냥 하는 연습을 많이 할 수 있었다. 한동안 알고리즘이 안풀린다고도 이전에 썼었는데 안 풀리던 알고리즘이 아주 느린 속도로 다시 풀리고 있다. 알고리즘도 풀어보고 안되..
리액트 기초 개념을 정리하다 궁금한 것들이 생겨 메모장에 정리하고 있었다. 그러다 아, chatGPT한테 물어보면 기다릴 필요 없이 바로 질문할 수 있겠군 싶어 이것저것 물어보았다. 대답에 또 궁금한 게 생기면 꼬리에 꼬리를 물고 질문해보기도 하고 정말 궁금했던 것들을 물어보기도 하고. 1. Virtual DOM을 초보자가 이해할 수 있도록 쉽게 설명해줘 어제 브라우저 렌더링의 결과물인 DOM에 대해 공부하고 리액트의 Virtual DOM과 무슨 차이가 있는 건지 계속 헷갈려서 질문했다. 더 효율적인 렌더링을 위해 VDOM을 쓴다는 건 알겠는데 그래서 정확히 어떻게 하는지! 2. 리액트에서 VDOM이 자주 리렌더링되는 것도 프론트엔드의 성능이나 성능 최적화에 안 좋은 영향을 주니? 항상 궁금한 성능 관련..
프론트엔드 기술 면접에서 중요하게 나오는 주제 중 하나가 브라우저 렌더링 원리이다. 그렇다면 왜 브라우저 렌더링 원리를 중요하게 여기고, 우리는 그에 대해 알아야 할까? 브라우저 렌더링 과정(원리)을 알아야 하는 이유 C나 JAVA와 같은 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행된다. 자바스크립트도 런타임 환경에서 사용한다면(node.js) 이야기가 다르겠지만, 프론트엔드 개발자가 개발할 클라이언트 사이드에서의 자바스크립트는 어떻게 실행될까? 웹 브라우저에서는 뼈대를 그리는 HTML, 살을 붙여 꾸며주는 CSS와 그것의 동작을 수행하고 제어하는 자바스크립트가 함께 실행된다. 따라서 내가 의도한대로 코드를 실행시키려면 브라우저가 우리가 작성한 코드를 어떤 순서대로 어떻게 읽어주는지, 즉 ..
문제 1부터 13까지의 수에서, 1은 1, 10, 11, 12, 13 이렇게 총 6번 등장합니다. 정수 i, j, k가 매개변수로 주어질 때, i부터 j까지 k가 몇 번 등장하는지 return 하도록 solution 함수를 완성해 주세요. 제한사항 1 ≤ i i + y); // 배열 안의 모든 수를 하나의 문자열로 만든다. const str = arr.join(''); // str의 전체 길이와 str에서 k를 제외한 길이를 빼 답을 return한다. return str.length - str.replaceAll(k, '').length; } 이전에 합성수 찾기 답안에서 배웠던 n부터 m까지의 수를 순차적으로 배열에 담는 법을 적용해 볼 수 있어 좋았다. String.prototype.replaceAll..
문제 설명 더보기 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해 주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입..
문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 4 3개 번호가 일치 5 2개 번호가 일치 6(낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. 당첨..
문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한사항 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 입출력 예 arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] 내가 작성한 답안 이중 for문 사용하기 function solution(arr1, arr2) { let answer = []; for(let i = 0; i < arr1.length; i++) { let newArr = []; for(let ..
