[React] Github API를 이용하여 자동 팔로우 기능 만들기
2022. 10. 22. 20:25
프로그래밍/React
🔧 삽질 기록입니다. 🔨 프로그래머스 데브코스 프론트엔드 3기에 합류하고 벌써 일주일이 지났네요. 깃허브에서 3기 분들 35명을 일일이 팔로우하다가 한 번에 팔로우 해주는 프로그램을 한 번 만들어봐야 겠다는 생각이 들었습니다. 아래는 완성본입니다. 깃허브 API 깃허브 REST API 공식 문서입니다. GitHub REST API - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com Users 문서의 user 리스트, user 정보, 팔로워 가져오기 등의 API를 postman으로 확인했습니다. 아래는 user의 정보를 가져오는..
[JS] 프로그래머스 Lv1 정복하면서 정리한 자바스크립트 개념
2022. 10. 18. 06:36
알고리즘
Lv1 총 56문제 풀이 기간: 2022.09.04 ~ 2022.09.16 파이썬으로 한 번씩 다 풀었던 문제들인데 코딩 테스트 언어를 자바스크립트로 바꾸면서 공부를 위해 다시 풀었습니다. 문제를 풀면서 정리한 자바스크립트 개념을 PR에 적어놨는데 검색에 불편함을 느껴 블로그에 정리해두려고 합니다. 📌는 다시 풀어볼 문제를 의미합니다. K번째 수 https://github.com/algo-malgo/jungo-malgo/pull/3 공부한 개념 slice for of / for in / forEach sort push 참고 레퍼런스 [Javascript] 배열 자르기 - slice() [javascript] for in / for of / forEach() 차이점 [Javascript] 배열 정렬하기 (..
[JS] 자바스크립트 클로저(Closure) 이해하기
2022. 10. 18. 05:07
프로그래밍/JavaScript
프로그래머스 데브코스 프론트엔드 📝 1일차 공부 내용 정리 노션 TIL 작성 후 클로저에 대한 추가적인 공부가 필요한 것 같아 정리하였습니다. 클로저(Closure)란? MDN 문서에 따르면 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합이다. 무슨 말인지 이해가 안 될 것이다. 조금 단순하고 가볍게 이해를 시작해보자. 자바스크립트는 함수 안에서 또 다른 함수를 선언할 수 있는데 이를 내부 함수라고 한다. function outer() { function inner(){ var title = 'coding everybody'; alert(title); } inner(); } outer(); } 위 코드에서 함수 outer의 내부에는 함수 inner가 정의되어 있다. 함수 i..
[JS] 자바스크립트 실행 컨텍스트(Execution Context)란?
2022. 10. 18. 04:21
프로그래밍/JavaScript
실행 컨텍스트(Execution Context) 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이게 무슨 소리인가 싶을텐데 글을 좀 더 읽어보면 이해할 수 있으니까 뒤로가지 말자. 실행 컨텍스트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 객체를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 ..
[Recoil] 리코일 이해하기
2022. 9. 15. 02:07
프로그래밍/React
Recoil 리코일은 리액트에서 사용할 수 있는 전역 상태 관리 라이브러리이다. 여기서 전역 상태(global state)란 어플리케이션 전체에서 공유되는 state를 의미한다. 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 리코일의 필요성은 위의 공식 문서에서 확인할 수 있다. 간단하게 props drilling으로 인한 불필요한 리렌더링 발생을 방지하고 유지보수의 어려움을 해결하기 위함으로 이해했다. Recoil은 다음 명령어로 설치할 수 있다. npm install recoil Atoms atom(options) | Recoil atom은 Recoil의 상태를 표현한..
[React Query] 리액트 쿼리 이해하기
2022. 8. 22. 13:10
프로그래밍/React
리액트 쿼리란? React Query는 리액트 앱에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업(fetching, caching, synchronizing, updating)을 도와주는 라이브러리다. function Coins() { const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await response.json(); setCoins(json.slice(0, 1..
[Next] Dynamic Routes / Router Hook / Catch All
2022. 7. 8. 17:52
프로그래밍/Next
1. Dynamic Routes NextJS는 폴더와 파일명을 이용해 라우팅을 할 수 있다. /movies/all이라는 URL을 만들고 싶다면 movies 폴더를 만들고 그 안에 all.js 파일을 생성하면 된다. 그냥 /movies라고만 하고 싶다면 movies 폴더 안에 index.js 파일을 만들어주면 된다. URL에 변수를 넣고 싶을 때는 대괄호 안에 사용하고자 하는 변수명을 적어서 Dynamic Route를 생성할 수 있다. 만일 page/movies/[id].js 파일을 생성했다면 /movies/1, /movies/abc 등과 같은 경로와 모두 일치한다. router를 콘솔에 찍어보면 query를 찾을 수 있다. query: {id: '1'} query에는 id가 있는데 이 id는 바로 URL..
[Next] Patterns / Fetching Data / Redirect & Rewrite / SSR
2022. 7. 8. 17:50
프로그래밍/Next
1. Patterns Custom App Component를 사용할 때 layout 패턴을 사용할 수 있다. component 폴더 밑에 Layout.js 파일을 만든다. Layout 컴포넌트에는 여러 페이지에서 반복적으로 사용되는 컴포넌트들을 넣을 수 있고, 스타일도 줄 수 있다. children은 리액트가 제공하는 prop으로 하나의 컴포넌트를 또 다른 컴포넌트 안에 넣을 때 사용할 수 있다. import NavBar from "./NavBar"; export default function Layout({ children }) { return ( {children} ); } MyApp에서 fragment를 우리의 Layout component로 바꾼다. Layout에 어떤 것을 넣더라도, Layout..
[Next] CSS Modules / Styled JSX / Custom App
2022. 7. 8. 03:17
프로그래밍/Next
1. CSS Modules 넥스트 어플리케이션에 CSS를 추가하는 방법 중 하나는 modules를 사용하는 것이다. NavBar.module.css .nav { text-decoration: none; } 이름은 상관 없고 중요한 건 .module.css이다. css를 작성하고 이 파일을 사용하고 싶은 곳에 자바스크립트 오브젝트로서 import를 시키면 된다. import styles from "./NavBar.module.css" 모듈이기 때문에 className="nav"가 아니라 className={styles.nav}처럼 작성해줘야 한다. 이게 작동하는 이유는 .module.css 패턴을 사용했기 때문이다. 이 패턴은 css 모듈이라고 불리는데 이건 개발자로 하여금 평범한 css를 사용할 수 있도..
[Next] Framework / Pages / Pre-Rendering / Routing
2022. 7. 8. 01:46
프로그래밍/Next
1. Creating a Project NextJS 프로젝트 최신 버전으로 생성 → npx create-next-app@latest 타입스크립트 사용 → npx create-next-app@latest --typescript 실행 → npm run dev 2. Library vs Framework 라이브러리는 개발자가 사용하고 싶을 때 불러와서 원하는 대로 코드를 작성하는 것이 가능하다. 리액트는 개발자가 원할 때 부르고 원할 때 사용하는 라이브러리이다. 프레임워크에서는 특정한 규칙을 따라서 특정한 걸 해야한다. 규칙을 따랐을 때 모든 게 정상적으로 잘 동작하고 프레임워크도 개발자를 도울 수 있다. 개발자가 규칙을 따라서 코드를 적절한 위치에 잘 작성하면 프레임워크가 그 코드를 호출하여 모든 걸 동작시킨..