한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 리액트 Lv.2, 3 과제 제출하기 🤔 리덕스 이해하고 리코일과 비교해보기 ✅ 리액트 Lv.2, 3 과제 제출하기 리액트 Lv.1 과제는 useState로 투두리스트 만들기, Lv.2 과제는 redux로 투두리스트 만들기, Lv.3 과제는 스타일드 컴포넌트 연습하기였다. 4월 14일 금요일에 리액트 공부를 시작해 4월 23일인 오늘까지 과제 세 개를 끝낸 것에 대해서는 박수!👏🏼 Lv.5에 있는 JWT 토큰 로그인을 온보딩주차 미니 프로젝트 때부터 해보고 싶었는데 기한 내 끝내지 못할 것 같아 접어뒀었다. 로그인 여부와 유저의 권한에 따라 화면 요소를 달리하는 것도 재밌는 작업이고 일반 로그인, SNS 로그인이 아닌 JWT 토큰 로그인 방식은 ..
📚 코어자바스크립트 (정재남, 2022) 책과 인프런의 코어자바스크립트 강의를 보고 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. 객체 지향 언어에서의 this 이번주 면접 스터디 발표 주제는 this! 기술매니저님들 말씀에 따르면 현업에서는 잘 쓰지 않지만 면접에서는 꼭 나온다는 this를 그렇다면 왜 중요하게 생각하고 왜 쓰는 것일까? 부터 찾아보았다. 객체 지향 언어에서 클래스는 하나의 큰 모듈이라고 할 수 있다. 위와 같이 이름, 체력, 마력이 지정되어있고 스킬 사용 시 이 캐릭터의 마력을 50만큼 깎는다고 지정할 때 this를 사용해 이 클래스 내부의 변수를 지칭할 수 있다. 조사해 본 자료에 따르면 자바스크립트는 맨 처음 개발할 때 이러한 객체 지향 개념 없이 만들고 싶었는데, 당시 객..
문제 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해 주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자 영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 siz 7 se..
요구사항 정의 구현해야 할 기능Create TodoRead Todos, TodoUpdate TodoDelete Todo 요구사항[공통]todos 데이터는 리덕스를 사용해 전역으로 상태 관리todos 모듈은 Ducks 패턴으로 구현 [메인 페이지]디자인과 화면 구성은 자유롭게 구현Todo의 상태에 '완료' 그룹과 '진행 중' 그룹을 나뉘어서 보이도록 구현Todo 추가 시 제목 input과 내용 input은 다시 빈 값이 되도록 구현input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value 초기화Todo의 완료상태가 true면 상태 버튼의 라벨을 취소, false면 라벨을 완료로 보이도록 구현Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운..
요구사항 정의 구현해야 할 기능 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이 자주 리렌더링되는 것도 프론트엔드의 성능이나 성능 최적화에 안 좋은 영향을 주니? 항상 궁금한 성능 관련..
