profile
개발 좋아 취준생

구조분해 할당으로 코드의 가독성은 높이고 길이는 줄이기 | JavaScript

센서의 목록을 나열하는 표가 있고, 그 표를 배터리수준과 카드 번호로 필터링할 수 있는 필터를 작성하는 도중 구조분해 할당으로 효율적으로 코드를 리팩토링했다. ➡️ 깃허브에서 코드보기 원래 코드 > 카드번호 필터와 배터리수준 필터를 조작하는 함수를 각각 만들고, 그 함수 내에서 각각 상태를 반영해줬다. 상태를 반영하는 로직은 똑같은데, 분리해서 쓰다보디 코드가 중복되고, 읽기도 힘들다는 느낌이 든다.

2023년 1월 9일
·
0개의 댓글
·

YYYY-MM-DD으로 날짜 포맷 변경하기 | JavaScript

투두리스트 최상단에 현재 날짜가 표시되고, 날짜를 선택할 수 있는 input을 뒀었는데 작년 12월에는 멀쩡하게 나오던 현재 날짜가 1월에 다시 들어가보니 나오지 않고 있었다...! 이유는 ` 는 YYYY-MM-DD의 포맷을 인식하는데 내가 작성했던 코드가 월, 일의 자리수에 따라 YYYY-M-D`로 들어갈 수도 있는 코드였던 것. 날짜 포맷에 대한 이해가 부족했던 것 같다. 이번에 경험했으니 이제 실수는 없다🔥 수정 전 > 이렇게 작성할 경우 2022년 12월 25일 등 월, 일의 값이 두 자리수이면 오류가 안나고 2023년 1월 3일 등 월, 일의 값이 하나라도 한 자리수이면 input이 value로 인식하지 못해 오류가 발생했다. 'Y

2023년 1월 9일
·
0개의 댓글
·

boolean을 string으로 변환하기 | .toString() | JavaScript

포스팅 계기 > To do 리스트를 만드는데, 할 일 완료 여부 상태값을 boolean으로 관리했다. 그리고, 그 상태값을 이용해 css를 다르게 주어야했기 때문에 props에 상태값이 들어가야 했다. 그러나 boolean값은 들어갈 수 없어서 boolean을 string으로 바꾸는 메서드를 찾아보게 되었다. 아주 간단한 메서드지만 정리해두고 싶어서 정리해둔다. 코드 보기 Boolean.prototype.toString() string으로 바꾸고자 하는 boolean값에 .toString()을 하면 된다. 실제 사용 코드 요약본 >References >[MDN- Boolean.prototype.toString()](https:

2022년 12월 18일
·
0개의 댓글
·

useNavigate와 window.location.replace의 차이

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

2022년 11월 27일
·
0개의 댓글
·
post-thumbnail

팀 프로젝트 회고 | 감지 센서 관리 프로그램 | 프론트

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

2022년 10월 9일
·
0개의 댓글
·
post-thumbnail

논리연산자 | JavaScript

논리연산자가 생각보다 많이쓰이는데 종종 헷갈려서 정리해봅니다! 논리 연산자 연산자 우선순위 연산자 우선순위 (Operator Precedence) 자세한 내용은 MDN 링크를 참고 truthy, falsy 아래에 있는 것들은 falsy한 값으로 인식되고 나머지는 전부 truthy한 값으로 인식됩니다. 어떤 값을 boolean 타입으로 변환하기 어떤 값을 명시적으로 boolean 타입으로 변환해야 하거나, 그 값을 boolean값으로 변환하면 어떤 값인지 알고싶을 때, 두 가지 방법을 사용할 수 있습니다. !은 여집합, ||는 합집합, &&는 교집합, true는 전체집합, false는 공집합이라고 생각하면 조금 더 이해가 쉬울 것 같습니

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

받은 인자의 개수에 따라 출력되는 결과물을 다르게하기 | JavaScript | JustCode 미션

함수가 받는 인자의 개수에 따라 출력되는 결과물이 달라지는 함수를 만들어보았습니다. if문을 사용해서 작성해보다가 더 편한 방법을 찾아서 해보는 포스팅! 바로 arguments객체를 이용하는 것이다. 자세한 설명은 아래에서 해보겠습니다. 미션❗ meetAt 함수를 만들어주세요 인자를 세개 받습니다. 첫번째 인자는 년도에 해당하는 숫자입니다. 두번째 인자는 월에 해당하는 숫자입니다. 세번째 인자는 일에 해당하는 숫자입니다. 인자가 1개인 경우 (년도 인자만 받았을 경우) "1234년" 과 같은 형식의 문자열을 리턴 해주세요. 인자가 2개인 경우 (년도, 월 인자를 받았을 경우) 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요. 인자가 4개인 경우 (년도,월,일 인자를 전부 받았을 경우) 년도,월,일을 조합해서 "1234/5/6"

2022년 8월 10일
·
0개의 댓글
·
post-thumbnail

엔터치면 댓글등록하기 | forEach | JavaScript | JustCode 부트캠프

forEach문을 이용해 각각의 피드에서 댓글을 입력하고 엔터를 누르거나 게시버튼을 누르면 댓글이 등록되는 기능을 구현해보았습니다.😊 이 포스팅에서는 엔터를 누르면 등록될때의 코드만 다루고 있습니다. 이제 막 시작한 코린이라 코드가 깔끔하지 않을 수 있습니다. 피드백은 언제나 감사하게 받으니 오류나 개선점이 보인다면 꼭! 댓글부탁드립니다:D 만약 하나의 피드에만 댓글을 입력하고싶다면 forEach문으로 반복을 할 필요가 없습니다. 하지만 모든 피드에 댓글을 입력할 수 있게 하기위해 forEach문을 사용해보도록 하겠습니다. ✅주석없는 소스코드는 포스팅 맨 아래에 있습니다 😀결과이미지😀 😀JavaScript 소스코드😀

2022년 8월 5일
·
0개의 댓글
·