본문 바로가기

All

 (147)
recursion call stack 대부분의 프로그래밍 언어에는 함수의 호출 순서를 저장하는 자료 구조(data structure)가 구현되어있다. js에서 이는 call stack으로 불리며, 소스 코드에서 함수를 호출할 때 마다 stack에 그 정보가 쌓이고, 맨 꼭대기(top)에 쌓여있는 함수 호출 정보가 가장 먼저 삭제된다(pop). 재귀 함수를 호출하게 되면, 이 함수의 호출이 중단될 때 까지 call stack에 같은 재귀 함수가 여러개 쌓이게 된다. 그렇다면 재귀 함수란 무엇일까? what is recursion? a process(function) that call themselves from within their own code. +) 재귀함수는 거의 모든 곳에 존재하며, JSON.stringify, ..
how useRouter works how it works 어떤 컴포넌트 내부에서 useRouter 훅을 사용하면, 그 컴포넌트는 두 번 렌더링 된다. 컴포넌트 함수가 JSX 코드를 첫번째로 렌더링 한 뒤에, useRouter를 실행시키기 때문이다. 따라서 컴포넌트가 첫번째로 렌더링 되는 시점에서는 router 데이터에 접근할 수 없는 상태이다. example export default function EventSlugPage() { const router = useRouter() const { slug } = router.query console.log(slug) if (!slug) return loading... const [selectedYear, selectedMonth] = slug const eventList = getEvent..
what is _app.js? _app.js import '../styles/globals.css' function MyApp({ Component, pageProps }) { return } export default MyApp next.js 프로젝트를 생성하면, pages 폴더 내에 _app.js라는 파일이 위와 같이 생성되어 있는 것을 알 수 있다. 이 파일은 root component 역할을 한다. 즉 page 컴포넌트를 렌더링하기 위한 입구가 되기 때문에, 모든 페이지에 공통으로 적용해야 할 코드를 이 파일에서 작성할 수 있다. example code // 1. _app.js import Layout from '../components/layout/layout' import '../styles/globals.css' func..
컴포넌트 설계에 대해 궁금한 점 어디부터 어디까지가 view의 영역인가? React를 이용해 어플리케이션을 만들다 보면, 보통 컴포넌트 단위로 코드를 작성하게 된다. 이 때 컴포넌트는 최대한 단순하게, 다시 말해 view 레이어(사용자 화면에 어떻게 표시될 것인지) 만을 담당할 수 있도록 설계하는 것이 좋다는 이야기를 들었다. http 통신 로직 분리하기 예를 들어 백엔드로부터 event list 데이터를 받아오고, 이를 메인 페이지에 렌더링해서 보여주는 코드가 있다고 해보자. EventList 컴포넌트를 만들 때에는 다음과 같은 패턴이 가장 보편적이다. export default function HomePage() { const eventList = getAllEventList() return } eventList를 요청하는 것과 관..
problem solving patterns(2) 1. frequency counter pattern 예제 문제1 same([1, 2, 3, 3], [9, 4, 1, 9]) // true same([1, 2, 3, 3], [9, 4, 1]) // false 1. write a function called "same", which accepts 2 arrays. 2. the function should return "ture" if every value in the array has it's corresponding value squared in the second array. 3. the frequency of values must be the same. 문제 풀이한 방법 const squared = [1, 9, 25, 25] getFrequencyOf..
file based routing code based vs. file based routing React.js(code based routing)는 react-router와 같은 라이브러리의 도움을 받아 각 route에 해당하는 컴포넌트를 만들고, 그 컴포넌트를 app.js와 같은 파일에 import 하는 방식으로 라우팅을 이용했다. Next.js(file based routing)를 이용한 라우팅은 더 간단하다. Next.js 자체가 pages 폴더 내에 존재하는 컴포넌트 파일을 하나의 route로 인식하기 때문에, 추가로 라이브러리를 설치하거나, route와 관련된 코드(boilerplate code)를 따로 작성할 필요가 없기 때문이다. /pages # pages 폴더 구조 /pages - index.js # some-domain...
what is Next.js? what is Next.js? | official website Next.js is the React framework for production. => 대규모의 상업용 리액트 어플리케이션을 구축할 수 있도록 돕는 리액트 framework이다. 우선 React.js는 UI(User Interface)를 구축할 수 있도록 돕는 자바스크립트 라이브러리이다. 리액트는 오직 사용자의 화면(view)과 관련된 로직 만을 담당하기 때문에, 리액트로 대규모 어플리케이션을 구축하려면 추가로 여러 라이브러리를 설치해야만 한다. 예를 들어 routing, authentication 등과 관련된 라이브러리를 설치해야 한다. Next.js는 이러한 일부의 라이브러리 없이도 대규모의 리액트 어플리케이션을 더 쉽게 구축할 수 있..
problem solving patterns intro 문제를 해결하는 방법은 아래의 5 가지로 나누어 볼 수 있다. => 참고 도서) "how to slove it" by Georhe Polya 문제 이해하기(understad the problem) 구체적인 예제 살펴보기(explore concrete example) 세부적으로 분석하기(analyze) 문제 해결하기/단순화하기(solve/simplify) 재검토하기(look back and refactor) understand the problem 문제를 확실히 이해한 후에, 코드를 작성하는 것이 중요하다. 문제를 나만의 언어로 다시 정의할 수 있는가? input은 어떤 형태여야 하는가? 어떤 output을 반환해야 하는가? input을 이용해서 output을 결정할 수 있는가? 즉, outpu..

티스토리툴바