리액트로 투두 리스트 만들기 useState와 useRef 훅 만을 이용해서 투두 리스트를 만들었다. 배포된 주소는 아래. https://todolist-phi-rouge.vercel.app/ 다른 훅은 이용하지 않았기 때문에 새로고침을 했을 때 유지가 된다거나.. 이런 부분은 안되지만! 한동안 바닐라 자바스크립트만 하다가 리액트로 다시 돌아오니 State란 녀석이 새롭게 다가와서 투두 리스트를 만들며 좀 헤맨 부분을 정리해보려 한다. 투두 객체에 id값 넣어주기 투두마다 각각의 아이디를 달아주기 위해서 여러 방법이 있지만, useRef 훅을 이용해보았다. useRef() useRef는 current라는 속성을 가지고 있는 객체를 반환한다. 이때 인자를 갖고 있다면, 이 값을 초기값으로 current에 ..

PropTypes 리액트에서는 props를 통해서 다른 컴포넌트에 데이터를 전달할 수 있고, 이를 통해 재사용 가능한 컴포넌트를 만들 수 있다. 우연찮게 props에 타입 검사를 할 수 있다는 것을 알게 되어 정리해보려 한다. props에 타입 검사를? 요새 핫한 타입스크립트는를 쓰는 이유 중 하나는 타입을 엄격하게 체크해서 에러를 줄이기 위함도 있다. props에 타입 검사가 필요한 이유도 이와 결이 같다고 본다. 컴포넌트가 잘못된 타입의 props를 전달받거나, 필요한 props가 누락된다면 의도치 않은 에러로 이어질 것!.. PropTypes는 이런 에러를 방지해줄 수 있다. 참고로 리액트 공식문서에 따르면 PropTypes는 React v15.5부터 prop-types라는 패키지로 분리되었다!....

12월 첫째 주를 보내며 발표도 성공적으로 끝마치고, 새로운 팀이 편성된 한 주였다. 무엇보다 벌써 12월이라니... 왜?....🥺 👀 Fact 자바스크립트 심화 강의를 들었다. 새롭게 편성된 팀에서도 팀장이 되었다. 😇 프로젝트 평가를 좋게 받았다. (야호!) 알고리즘 스터디를 시작했다. 🙂 Feeling 발표는 언제나 너무너무너무 떨린다.... 😨 완성도 높은 프로젝트라는 평가를 받아서 너무 기뻤다! 노력의 결실 😄 새로운 팀원들을 만났다.. 이번 프로젝트도 잘.. 해냈으면.... 🙃 혼자 공부할 때보다 튜터님의 강의로 깊은 이해를 하게 되어 너무 좋다.. 😀 새롭게 스터디를 시작했다. 의지가 뿜뿜!! 🔍 Finding 자바스크립트의 참조형 데이터 할당에 대한 이해!.. this의 용법.. 실행 컨텍..

문제 정수가 담긴 배열 numbers와 문자열 direction가 매개변수로 주어집니다. 배열 numbers의 원소를 direction방향으로 한 칸씩 회전시킨 배열을 return하도록 solution 함수를 완성해주세요. 입출력 예시 [1, 2, 3] "right" [3, 1, 2] [4, 455, 6, 4, -1, 45, 6] "left" [455, 6, 4, -1, 45, 6, 4] 풀이 처음에 방향에 따라 배열이 어떻게 바뀌는 것인지 이해를 잘 못했었다. 그래서 전체적으로 for문을 돌아야하는 걸까 ??? 싶다가 문제를 다시 보고 큐와 비슷하겠구나 알게 되었다. 한 칸씩 회전시킨다는 말은 아래와 같다. 방향이 오른쪽이라면 가장 마지막 요소를 빼서 맨 앞으로 넣어주고, 왼쪽이라면 가장 맨 앞 요소를..

자바스크립트의 '?' ES2020에서 도입된 새로운 문법들 중 옵셔널 체이닝 연산자 ?. 와 null 병합 연산자 ?? 는 모두 물음표를 쓴다. 사용되는 방식도 null이나 undefined 값을 체크할 수 있다는 점에서 비슷한 것 있는 것 같아, 이 둘을 한번 묶어서 정리해보면 좋겠다 싶어서 작성하게 되었다. 🙂 null 병합 연산자 우선 null 병합 연산자(nullish coalescing) ??은 간단하게 값이 할당되어 있는 변수를 쉽게 찾을 수 있다. 즉 undefined이나 null이 아닌 값이 할당된 경우를 말한다. a ?? b 이 연산자는 위와 같이 쓸 수 있는데, 이런 식으로 해석할 수 있다. a가 null 도 아니고 undefined가 아니라면 a 그 외(null이나 undefined)..

실행 컨텍스트를 알아보자! 실행 컨텍스트를 위해 책을 읽던 나날들... 그러나 텍스트만으로는 쉽게 이해할 수 없었던 나.. 하지만 이대로 넘어갈 수 없지.. 🤔 이번 기회에 자바스크립트를의 동작 원리를 보다 깊게 이해하기 위해 실행 컨텍스트에 대해 정리해보자! 실행 컨텍스트를 알기 위해서는 먼저 콜 스택에 대해서 알아야 한다. 콜 스택 우선 스택은 위와 같이 하나하나 차례대로 쌓고 빼고를 반복하는 자료구조다. 콜 스택은 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하여 코드의 실행 순서와 환경을 관리한다. 현재 실행중인 코드의 실행 컨텍스트가 콜 스택의 최상위에 존재한다! 이런 콘텍스트를 실행 중인 실행 컨텍스트 (running execution context)라고 한다. 그럼 컨텍스트가 뭐길래 콜 ..

참조형 데이터 먼저 자바스크립트의 데이터 타입 중 참조형으로는 이런 것들이 있다. Object Array 함수(function) Date 정규표현식 Map, Set 자료 구조 + null도 object 타입! 참조형 타입들은 아래와 같은 형태로 값을 참조하고 있다. 실제 객체 내 프로퍼티들이 담긴 주소 값들을 데이터로 갖고 있는 주소 값!.. 을 복사해서 참조하고 있기 때문에 참조형이라고 부른다. 1. obj1을 위한 별도의 데이터 영역 안의 프로퍼티들은 또 그 안에서 각각의 메모리를 할당받고 있다. (위의 주소 7103~7104 부분) 2. 데이터 영역 안에 프로퍼티들의 주소 값이 별도의 메모리 할당을 받는다. 3. obj1은 2의 주소 값을 참조한다. 결국 기본형과의 차이는 기본형은 값을 가리키는 주..

프로젝트 swivee를 갈무리하며 지난 금요일부터 시작된 프로젝트! 프로젝트 발표까지 마치고 KPT 회고 방법론에 따라 작성한 팀원 각자의 회고를 취합해보았습니다. Keep 노션으로 프로젝트를 문서화한 것 와이어프레임 이후 구체적인 UI를 잡아서 HTML 마크업을 수월하게 한 것 팀원들과의 유연한 소통, 서로 배려해주는 협업방식 팀원들 간의 성취도를 고려해서 업무를 분담한 것 진행사항 체크를 자주 하며 프로젝트를 진행한 것 팀원 간 소통이 원활하여 구현이 어려운 부분을 함께 공유하고 해답을 도출하는 분위기 주어진 시간 안에 최선을 다해 완성도를 높인 부분 각자의 브랜치로 작업한 부분 끝까지 포기하지 않고 목표를 달성하겠다는 마음가짐 Problem 성취도를 고려했음에도 역량이 부족한 팀원들의 프로젝트 참여..

기초 프로젝트를 마치며 아주 열심히 달린 기초 프로젝트가 끝이 났다!.. 피곤과 스트레스로 인해 인후염을 얻고 말았지만.. 🥺 지난 프로젝트 회고를 기반으로 더 계획적이고 완성도 높은 프로젝트를 발표해서 기쁘다. 미니 프로젝트처럼 튜터님의 피드백을 바탕으로, 또 개인적으로 좋았던 부분과 아쉬운 부분을 정리해보려 한다. 아쉬웠던 부분 뒤로 가기가 안 되는 점 이번 프로젝트의 특성상 SPA로 구현을 했기 때문에 hash URL을 이용해야만 했는데, 우리 프로젝트는 브랜드별 신발 > 각 신발들의 모든 리뷰 > 리뷰 상세페이지로 이어지는 구조였기 때문에?.. 이벤트 타겟으로 값을 지정해서 넘어갈 수밖에 없었다. 더 좋은 방법이 있었겠지만.. 🥺 지금은 모름... 파이어베이스 요금제 읽기 할당량이 이렇게 빨리 채..

11월 넷째 주를 보내며 프로젝트로 정신없이 보낸 한 주.... 정말 시간이 어떻게 가는지 모르겠다. 🫠 드디어 발표를 앞두고 있다!... 발표를 빨리 해치워버리고 싶은 맴.. 👀 Fact 파이어베이스의 DB API를 다룰 수 있게 되었다. 깃허브로 협업을 원활하게 진행하고 있다. 프로젝트 노션 관리를 열심히 했다. 데이터를 가져와서 렌더링 하는 작업을 진행했다. 팀원들에게 코드를 설명해주면서 나도 코드에 대한 이해가 늘어났다. 🙂 Feeling 팀원들을 잘 만나서 너무나 좋았다. 이렇게 잘 굴러가는 프로젝트라니.. 🥺 심지어 주말에 서울에서 만나기까지 함... 너무 즐거웠다! 깃허브에 대한 두려움이 좀 더 감소 😂 내가 썼던 파이어베이스 기능들은 정말 일부였구나... 🔍 Finding 깃허브에서 내 브..