Studying Front-end
노마드코더에서 우버클론코딩을 하면서 GraphQL, Apollo를 배우고 있다. Typescript와 함께 쓰면서 백엔드와 타입을 일치시켜서 보호하는 법도 배워서 매우 유용하다 생각해서 정리를 해보려고 한다! Apollo만을 정리하기 때문에 GraphQL서버는 이미 구현되어있다고 가정을 한다. set up 2. apollo client 파일 생성(이름은 마음대로) Apollo client를 생성할 때는 uri, cache가 기본으로 요구된다. 해당 코드에서는 link를 사용했는데 그 이유는 header에 token을 넣고 […]
문제: https://programmers.co.kr/learn/courses/30/lessons/12901 코드1. 처음 문제를 보고는 어떻게 해야할지 감이 안잡혔다..ㅋㅋㅋㅋ 그런데 다른 사원분의 일수 계산하면 되겠다는 말에 문제가 급 쉬워짐. 31일이 들어가는 달만 배열에 넣어놓고, 분기를 걸어 총 일 수를 계산한다. 그리고 7을 나눈 나머지를 이용해서 해당하는 인덱스의 요일을 반환하면 끝! 그런데 검색하다보니, 아예 모든 달의 총 일수를 한 배열에 넣어놓은 코드를 봤는데 훨씬 깔끔하고 […]
문제 : https://programmers.co.kr/learn/courses/30/lessons/42862?language=javascript 코드1. Note!! 항상 문제를 잘 읽으시오. 중복되어 문제해결에 도움이 안된다면 filter를 사용해서 제거하고, sort로 정렬해서 비교하시오! 화이팅!
문제 : https://programmers.co.kr/learn/courses/30/lessons/42748 코드1. slice와 sort만 알면 크게 어려운 건 아닌거같다. splice와 slice의 차이점만 조심하면 될 듯! 다른사람의 코드2. 상위권에 있는 답안인데 다른것보다 배열 구조분해를 하고, filter를 돌려 배열을 채우는게 새로웠당. filter의 인덱스를 활용해 slice처럼 활용하기! (근데 쓸 수 있으면 slice쓰는게 좋다 다른 사람과의 소통이 더 편하니까)
문제 : https://programmers.co.kr/learn/courses/30/lessons/42840 코드1. 흠.. 이게 효율적인 코드인지는 잘 모르겠다. 문제도 별로 와닿지도 않고… 졸리다 월요일ㅠ_ㅠ
문제: https://programmers.co.kr/learn/courses/30/lessons/42576 코드1. 처음엔 반복문, includes면 금방이겠거니했다. 하지만 동명이인이 있을 수도 있다는 전제로 인해 방법을 찾다가 어차피 value는 한가지 빼고 같을테니 정렬 후 비교하게 로직을 세웠다. find()를 사용한 이유는 완주하지 못한 선수가 한 명이라는 조건으로 가능했다. 인자 함수를 통과하는 첫번째 요소만 반환될테니! 그런데 만약 완주하지 못한 선수가 한 명이 아니라면? 여기서는 생각이 나지 않아 다른 […]
자바스크립트 배열을 유용하게 조작할 수 있는 메소드를 정리해보려고 한다! 출처는 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값으로 설정한다. 기존에는 해당 역할을 […]