자바스크립트 배열을 유용하게 조작할 수 있는 메소드를 정리해보려고 한다! 출처는 mdn이고, 제목 그대로 간단 정리니까 더 유용한 예는 직접 만들어보면서 찾아보기로! 이번 글에서 다룰 메소드 = [pop, concat, every, fill, filter, find, findIndex, indexOf, includes, flat, forEach, join] # array method pop() : 배열의 마지막 요소를 제거하고 반환 concat() : 인자로 받은 배열이나 값을 기존 […]
문제 : https://programmers.co.kr/learn/courses/30/lessons/68644 코드 1. 내가 푼거 (처음에는 모든 인덱스를 다 돌았다 반성하자!) 코드 2. 어느 배우신 분의 코드 미쳤다 미쳤어! spread operator에다가 new Set 까지.. 오늘의 공부는 이것이다. 느낀점 역시 코딩은 재능인가. 좋은 코드보고 사고하는 법을 많이 배워야겠다.
문제 ) https://programmers.co.kr/learn/courses/30/lessons/64061 코드 1 (내 마음에 드는거) 코드 2) (프로그래머스 컴파일이 픽한 코드) – 왜 이 코드가 픽되었는지 궁금.. 속도가 더 빠른거면 왜 빠른지도…(아시는 분 댓글 주시면 감사하겠습니당) 주변 개발자들에게 조언을 구해야겠다! 느낀 점! 나는 난독이 문제다. 글을 읽고 이해하는 연습부터 해야겠다. 그리고 이해가 안될때는 배열을 그리면서 해보자!
SSR : SEO 최적화, 초기 구동 속보다 CSR보다 빠름 Next.js는 React기반으로 라우팅과 SSR을 간편하게 적용하기 위해 나온 프레임워크로 SSR이 필요한 페이지는 getServerSideProps를 이용하면 된다. 참고로 getStaticProps, getStaticPaths(였나) 함수도 있는데, 대부분 사용하지 않는다. 정적인 데이터나 화면을 사용할 경우엔 사용해도 된다. 사용하기 store, action, END, axios는 필수로 import한다. req.headers에서 cookie값을 가져와서 axios에 defaults값으로 설정한다. 기존에는 해당 역할을 […]
React의 러닝커브를 높이는 주범 ‘리덕스 사가’에 대해 간단한 개념과 예시를 정리하려한다. 까먹지말자 😮 Redux-saga란? Redux-saga는 리덕스의 액션을 dispatch하기 전에 해야할 작업들을 처리하는 미들웨어이다. Redux-thunk라는 미들웨어도 있지만, thunk는 여러개의 액션을 디스패치하게 해주지만, 그 외의 기능들은 모두 직접 구현해야 하기 한다. 그러나 Saga는 모두 effect로 구현해놔서 대부분 미들웨어로 saga를 사용한다고 한다. (Redux-saga는 Generator 문법을 기반으로 구현하기 때문에 […]
프레임워크 하나를 배울때마다 에러가 빵빵 터진다. 조용히 넘어가는 날들이 없다. Next.js에서 styled-components를 적용하려는데 SSR로 인해 style이 들어가기도 전에 렌더링이 되어버린다. 이럴 때는 일단 설치한다. 루트 디렉터리에 .babelrc를 생성한다. 3. pages에 _document.js를 생성해서 덮어쓴다.(_document.js가 index.hmtl) 해결이다. 진도 나가고 싶다. 오류 그만 터져라
처음에는 Eslint와 Prettier를 안 썼는데, 점점 세미콜론도 귀찮아지고… 코딩스타일이 뒤죽박죽이 되어가서 적용하기 시작했다. 그런데 할 때마다 순서가 헷갈려서 정리해놓고 이번 글대로만 계속 해야지 (Parsing 에러 검색으로 오신 분들은 밑에 내리다보면 ## 표시부터 보시면 됩니다) vscode에서 eslint, prettier extention 설치하기 2. eslint, airbnb 전부 설치하기(개발할때만 사용할거니까 dev옵션 필수) 3. prettier 설치하기 (마찬가지로 dev) 4. eslint-prettier 플러그인 […]
Redux-saga를 공부하고 나니 GraphQL과 Apollo의 조합에 관한 학습 의욕이 상승했다. 그리고 면접을 볼 때도 GraphQL을 쓰는 곳이 대다수여서 꼭 배워야겠다는 생각이 들었다. 먼저 GraphQL은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어이며, 서버에서는 하나의 endpoint를 가지고 있다. 그렇다면 기존의 원하는 데이터를 받기 위해 여러개의 endpoint를 필요로 하던 경우는 어떻게 대처할까? A. 프론트단에서 query, mutation을 이용해서 원하는 정보를 […]
페이지네이션 포스팅 한 김에 성격이 비슷한 무한스크롤도 정리를 해본다! 무한스크롤은 굉장히 어려울 것 같았는데, pagination을 하고나니 의외로 쉬웠다. 둘의 차이점은 setState에 있다. pagination은 불러온 데이터를 그대로 setState()에 넣어 변경하지만 infinite scroll은 처음에만 그대로 넣고, 그 후에는 전개연산자(spread operator)를 이용해서 기존의 state에 더해서 변경하는 방식이다. 이를 구현하는데에는 post로 정보를 요청할 때 단 한개의 boolean 속성만 추가하면 […]
Vue로 블로그 프로젝트를 시작하면서, react로 구현했던 게시판을 다시 리뷰했는데, 정리해놓으면 유용하게 쓰일 것 같다는 생각에 포스팅하게 되었다. 일단 구현한 환경은 react, nodejs, mongoDB인데 코드는 react만 다룰 것이다. 먼저 pagination.jsx를 구현한다. 게시판에 import될 컴포넌트이다. props와 state가 각각 어떤 의미인지만 알면 pagination은 끝이다. limit : 한 페이지당 나타낼 게시글의 수 currentPage: 현재 사용자가 보고 있는 페이지 (처음엔 […]