🍋 프로젝트 소개 간단하게 할 일을 입력, 수정, 삭제, 완료할 수 있는 프로그램입니다. 프론트엔드 기술로만 구현되었고, 타입스크립트의 학습을 위해 진행한 프로젝트입니다. 👍 사이트 체험해보기 ➡️ 깃허브 보러가기 개발 기간, 인원 11. 16 - 22. 11. 22(7일), 개인(1인) 프로젝트 (개발 기간 후에도 필요한 부분 리팩토링 중입니다.) 사용 기술 React TypeScript styled-components recoil fontawesome react-bootstrap �

➡️ 투두리스트 전체 코드 구경하기 ➡️ 이 포스팅 관련 코드만 보기 투두리스트를 만들던 도중 수정버튼을 클릭했을 때 해당 투두의 input으로 바로 focus가 가지 않아서 한번 클릭해야 하는 점이 불편하게 다가왔다. 수정 버튼을 클릭하면 바로 해당 input에 focus가 가고, 사용자가 다른 동작 없이 바로 수정할 내용을 입력하게 하고싶었다. useRef를 통해 element에 직접 접근하는 방법을 사용해보았다. react, typescript를 사용했다. <img width="7

netlify는 간단하게 깃허브 레포지토리만 연결하면 배포가 되는 줄 알았는데 여러번 시도해보고 main이 최신 상태인지도 확인해봤는데 실패했다. 문제는 react 프로젝트를 배포할 때 필요한 Build command를 따로 설정해주지 않았다는 것이었다. 발생했던 오류 <img src="https://velog.velcdn.com/images/lynn080/post/7197360c-cb73-4e42-81e5-3

Javascript의 filter메서드를 이용해서 투두리스트 삭제기능을 구현해보자. Typescript를 사용하긴 했지만 filter메서드는 JS 문법! > ➡️ 깃허브 가기 filter() callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 세가지 매개변수를 받는다. element: 처리할 현재 요소. index(옵션): 처리할 현재 요소의 인덱스. array(옵션): filter를 호출한 배열. thisArg(옵션): callback을 실행할 때 this로 사용하는 값. filter() 예시 투두리스트

문제상황👀 > 예약페이지를 구현 중 이름, 휴대폰번호, 쿠폰, 포인트를 input으로 관리해야 했다. 처음엔 각각의 state로 관리했는데 그렇게 하니 input의 값이 변경되는 함수도 각각 작성해야하는 불편함이 있었다. 해결방안👏 > 관리해야 하는 inpute의 값을 각각의 state로 만들지 않고, input들의 값을 객체에 넣어서 하나의 state로 관리. 실제로 사용한 코드의 요약본 input을 하나의 상태로 관리할 경우의 장점 코드가 짧아진다. 중복

웹페이지에서 클릭이벤트가 일어났을 때 페이지를 이동하는 기능을 구현하던 중 useNavigate와 window.location.replace의 차이가 궁금해 알아보았다. useNavigate 특징 React 훅임. 사용자의 정보가 저장됨. 뒤로가기하면 이전 페이지로 이동. 스크롤를 페이지 맨 아래로 한 후 이동 시 이동한 페이지에서도 맨 아래에 위치해있다. window.location.replace(); 특징 자바스크립트 메서드(함수). 웹브라우저의 히스토리 저장안됨. 뒤로가기로 이전 페이지로 가는 것을 차단하거나, 방문 히스토리를 남기지 않아야 하는 경우에 사용. 페이지(창)자체를 이동하는 것임. 실제 사용했던 코드 > 나는 로그아웃 버튼을 클릭 시 메인페이지로 돌아오는 기능이 필요했다. 사용자의 정보가 저장되기보단 새로운 창이 로드되는 것이 더 알맞다고 생각해서 window.location.replace()

Todo리스트를 만들면서 input창에 관련해서 겪었던 문제들, 해결방법들을 모아봤습니다. 토픽 별로 관련된 코드부분만 간략하게 표현했습니다! > ➡️ 직접 체험해보기 링크! 타입스크립트 학습을 위해 만든 Todo List 토이프로젝트입니다. ➡️ 깃허브 Skill: TypeScript, React, Styled-components, recoil placeholder가 아니라 value를 설정해서 그 값을 수정하기 placeholder는 클릭 시 사라지는데 value로 설정하면 그 텍스트에서 수정가능함. 할일을 입력하고 저장하면 그 입력값이 각각 리스트 input의 value초기값으로 들어감. value에 들어갔기 때문에 수정하려고 하면 입력된 값에서부터 수정이 가능. input 자동완성 끄기 할일 수정기

브라우저의 뒤로가기만 사용해봤지 화면내에 뒤로가기 버튼을 만들어본 것은 처음이라서 기록! > 🔽아래 링크에서 체험해보기 https://playkeyboard-front-team-1.netlify.app 원하는 키보드 테마를 누르고 왼쪽 상단 ← 버튼을 눌러보세요! 👉깃허브에서 코드보기 useNavigate를 사용하자 예전엔 useHistory 객체를 이용했는데 이제 react-router-dom의 useNavigate가 지원해준다고 한다. useNavigate는 특정 위치로 이동하게 할 때만 사용해봤는데, 뒤로가기/앞으로가기 기능도 있다는 것을 알게되었다. > 방법은 아주 간단하다.

🎲벌써 1주일이 지난 원티드 프리온보딩 코스...! 원티드 프리온보딩 코스 - 1주차 WANTED가 주최하고 JustCode, Wecode 의 수강생(?)들이 참여하는 프리온보딩 코스. 난 JUSTCODE 수강생으로 참여했고 기업협업과제라니 걱정반 기대반이었다. 총 3주간의 기업협업과제 기간이 예정되어있는데 벌써 1주가 지났네... 1차 과제를 만들고 바로 2차과제를 시작해서 1차 후기도 아직 남기지

CRA 설치 시 생성되는 기본폴더 1) node_modules CRA를 구성하는 모든 패키지의 소스코드가 존재 2) public index.html, images, data 등으로 구성 CRA를 배포했을 때 실제 서버에 배포되는 폴더 3) src components, asset/images, pages, styles 등으로 구성할 수 있음 4) .gitignore github에 올리고 싶지 않은 폴더/파일 작성 5) package.json 설치된 라이브러리/패키지의 종류와 버전이 기록 "dependencies"에서 사용한 모든 패키지의 리스트, 버전 확인 가능 새로운 라이브러리(/패키지) 설치시 npm install 라이브러리 --save 를 해야 dependencies 에 추가됨. 자동으로 추가되는 경우도 있지만 --save입력 권장