바른소리

#1 INTRODUCTION TypeScript는 왜 만들어졌을까? ⭐️타입의 안정성⭐️ 때문에 만들어졌다. 타입이 안정적이면 코드의 버그와 런타임 에러가 줄어들고 생산성이 늘어나게 된다. 이에 반해 JavaScript는 매우 유연한 언어이기 때문에 멍청한 코드를 작성해도 이해해주고, 에러를 보여주지 않으려고 많은 노력을 한다. 예시 // ex 1. [1,2,3,4] + false // '1,2,3,4false' // ex 2. function div(a,b) { return a/b; } div(2,3); // 0.6666666666666666 div("xxx"); // NaN ex 1.의 경우, 숫자가 들어있는 배열과 boolean을 더했는데 결괏 값으로 string이 나왔다. 배열은 배열의 모습이 사..

배열에는 원소가 모두 2번씩 들어있지만 오직 1개의 원소만 1번 들어있다. 1번만 들어가 있는 원소를 출력하는 문제이다. 처음 진행한 방법 1. 배열 길이만큼 0으로 채워진 새로운 배열을 선언한다. 2. 배열 내 값들이 [1, 1, 2, 2, 3, 5, 5] 이면 새로운 배열의 각 숫자 인덱스에 count를 해준다. 3. 그러면 새로운 배열은 [0, 2, 2, 1, 0, 2]로 카운트가 될 것 이다. 4. 배열을 순회하면서 2로 나눈 나머지가 0이 아니면 (홀수이면) 새로운 배열에서 홀수의 인덱스를 반환한다. → 이렇게 하니까 실행은 되지만 제출할 때에는 다 틀렸다고 나왔다. 해결 방법 xor의 원리를 이용하는 방식이다. xor은 자기 자신과 xor 연산이 되면 0이 나오고 0과 xor 연산을 하면 자기..

기존에 만들었던 나름 만족스러웠던 프로젝트를 리팩토링 해보려고 한다! https://jeongeum1202.tistory.com/152 [1인 프로젝트] My Todo Site js-MyTodoSite [1인 프로젝트] what to do today? 의 업그레이드 버전입니다! (투두리스트) 노마드 코더의 크롬 앱 만들기와 그림판 만들기 강의를 수강한 후 두 강의를 조합하여 What todo today? 라는 솔로 프 jeongeum1202.tistory.com 위 프로젝트는 자바스크립트로 진행했던건데 리액트를 사용해서 리팩토링 할 예정이다. 리액트 + ts 이 조합으로 리팩토링 해야지 생각했는데.. 타스를 하나도 1도 공부를 안한상태라 조금 고민이다. 그냥 간단히 유튜브로 강의듣고 무조건 부딪혀볼까....

게시물 limit를 무려 1000으로 걸어놓고 무한스크롤은 구현하지 않은 과거의 나........ 정말 사용하기 싫은 자유게시판이 아닐 수 없다😇 거의 뭐 이 수준이 아닐까?ㅎㅎㅎ;;; 무한 스크롤 구현하는 것을 구글링 해보니 Intersection Observer API로 구현하는 방법도 있었긴 한데 나는 팀프로젝트에서 react query를 사용했다보니 거기서 제공하는 훅을 사용해 구현해보고자 했다. 우선 react query에서는 무한스크롤 구현을 위해 useInfiniteQuery라는 훅을 제공하고 있으며 Intersection Observer API 대신 react-intersection-observer를 사용할 수 있다. 그리고 react-intersection-observer는 useInVi..

팀프로젝트에서 자유게시판 게시물에는 총 3개의 이미지를 올릴 수가 있는데 이미지가 여러개일때 슬라이드가 안된다^^.. 아니 아예 안되는 건 아닌데 이렇게 용을 써야 다른 이미지도 제대로 볼 수 있다😂 정말 아무 편의 기능도 넣지 않은 날 것 그대로의 게시판이라 얼른 바꿔주려고 한다. js로는 캐러셀을 구현해본 적이 있는데 리액트는 다른 방법이 없을까 하고 구글링해보다가 React-Slick 이라는 것을 찾았다! react-slick은 리액트에서 슬라이드를 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 이 라이브러리를 사용해서 귀여운 강쥐 사진들을 편하게 볼 수 있도록 해보자. react-slick 설치 npm i react-slick npm i slick-carousel // css 커스텀을 위해서 설..

useQuery를 통해 검색이 잘 되도록 구현해둔 기존 코드에서는 input 창에 검색어를 입력할 때마다 호출을 계속 하고 있었다. 예를들어 "춘식" 을 검색하고 싶은데 실제 호출은 "ㅊ, 추, 춘, 춘ㅅ, 춘시, 춘식" 이렇게 매~번 다 가고 있는 것이다.😱 불필요한 호출을 줄이고 검색어를 입력 후 일정 시간이 흐르면 한번만 호출이 가도록 바꾸어보자. 여기서 나는 debounce를 사용해주려고 한다! 처음 검색 기능을 구현했을 때에는 정말 검색만 되게 ^^.. 성능이나 최적화는 1도 고려하지않고 정말 검색만 되도록 하느라 디바운스라는 것에 대해서 아예 몰랐었던 바보였는ㄷ...ㅔ.... 이번에 대충 만들어둔 검색 기능을 하나하나 고쳐가면서 디바운스에 대해 처음 알게 되었다. debouncing (디바운싱..

팀프로젝트에서 나는 유저 검색 페이지 구현을 했었다. 그런데 마감에 쫒기고 뒤에 남은 기능 구현이 너무 많아서 아주 급하게 대충,, 유저 검색 기능을 구현하다보니 말도안되는 코드로 구현을 했고 난리가 난 것을 이제야 확인했다. ^^ㅠㅠㅠ 키워드를 제대로 잡아주지 못하다보니 api 내 모든 유저 데이터를 불러오고 있었던 것이다. 추가로, "김"을 검색해도 바로 검색이 되지 않고 스페이스바를 한번 누르거나 해야 해당 키워드를 가진 유저만 필터링되어 나타나고 있었다. 이런 성능 점수 첨본다 나 진짜,,,,,,,,,,,,,, +) 아 이거 모바일 기준이었네 휴.. 라고 안심할 건 아닌것 가튼데,,,, 데스크톱은 이정돈 아닙니다........................ 암튼 ㅃ...빨리 바꿔보자!! 우선 성능이..

프로그래머스 내에서 문제를 검색할 수 있는 사이트 🔗프로그래머스 문제 검색 사이트 링크🔗 개발 취지 나는 평소 코딩테스트 준비를 위해 프로그래머스의 문제를 풀고 있다. 현재 소속되어있는 부트캠프에서도 많은 동료들이 프로그래머스 문제를 푸는데 한 동료 분의 질문으로 문제 제목만으로는 사이트 내에서 검색이 불가능하다는 것을 알았다. 코딩 테스트 준비를 위해 프로그래머스를 사용하고 있고 앞으로도 꾸준히 사용할 유저의 입장에서 필요한 기능이 구현되어있지 않다고 생각했고 불편함을 해소하기 위해 직접 구현을 해보기로 했다. 🤔 개발 전 궁금증 / 의문 프로그래머스에는 왜 문제를 이름으로 검색하는 기능이 없을까? 내가 프로그래머스의 개발자라는 가정하에 생각해보면.. 이미 다양한 경우로 문제를 필터링 할 수 있기 때문..

✅ 기간 : 2022.11.7-2022.11.10 🌟FACT 미니 프로젝트를 본격적으로 시작했다. 팀프로젝트 편성 시험을 봤다. 리액트를 잘 받아들이고 있다. (신기함) 조금 지친다. 한것도없는데 🍃FEELING 미니프로젝트를 본격적으로 시작했고 나름(?) 열심히 하고 있다. 병합 충돌과 함께 성장하는 나^^....ㅠㅠ 오류잡느라 1~2시간 지체되는 것은 껌이다. 팀프로젝트 팀 편성을 위한 시험을 봤다. 오픈북이라고 하셨지만 최대한 내 실력대로 봐야겠다 생각해서 풀 수 있는건 풀었다. 근데 모르겠는건 오픈북했다. ㅋㅋㅋㅋㅋㅋㅋ 코드 쓰는건 할만했는데 오히려 객관식이 모르겠는게 많았다. 이론 부족......... 구현문제는 js 아예 하지도 못했다. 변수 선언만 해놓음 ㅋㅋㅋㅋㅋ큐ㅠㅠ 마크업도 제대로 한건..

✅ 기간 : 2022.10.31-2022.11.4 🌟FACT 프로그래머스 문제 검색 사이트를 만들었다. 자바스크립트 기초반 과제를 기반으로 동료분과 작은 프로젝트를 해보기로 했다. 벤딩머신 기능 구현까지 완료했다. 🍃FEELING 자스에서 가장 어려워하던 부분 중 하나인 fetch, async/await 을 이용해서 문제 검색 사이트를 만들어보니 정말 뿌듯하고 좋았다. 이번달은 내가 프론트 공부를 시작하게 된지 약 1년 된 달이다. 요즘 1년 전의 나와 지금의 나는 얼마나 달라졌는가에 대해 많은 고민과 아쉬움, 속상함 등의 생각을 하게 되는데 무작정 만들어본 검색 사이트가 나에게 꽤 큰 힘을 주었다. 작년 아니 불과 몇달 전만해도 비동기로 무엇을 해볼 것이라는 생각은 전혀 하지도 못했는데 내가 무언가 만..