분명 저번달에 당근을 안주겠다했는데 어느새 자연스럽게 당근을 주고있었다 섹션3때 뭘했냐?고 생각했을때 기억나는건 Redux, 인증/보안 밖에 기억이안난다... 리덕스는 하다가 뭔가 쓸데가없어서 계속 안쓰다보니까 자연스럽게 멀어졌다.. 인증/보안은 기억에남나!?? 그것도 아님 그냥 저번주에 배워서 기억이 나는거같다. 저번달의 회고에서 내가 뭐라고 다짐했었는지 다시 봐보자 흠... Keep은 진짜 웬만해서는 무조건 지키려고 노력을 많이했다. 섹션3 회고의 KPT 를 적어보자 Keep 섹션1회고부터 강조했던 것 같지만 블로깅 귀찮아하지말고 자주자주 쓰자 진짜 별거 아닌거라도 일기식이라도 적어보자 그냥 이정도면 됐겠지?? 이생각보단 그래서 이게 어떻게 이렇게되는지 자세히 알아보려고해보자 모니터 멍때릴 시간이나..
섹션3 기술면접 준비를 하기위해 정리를 간단하게 하려고한다. 1. 재귀 간단하게 말하면 재귀는 자기 자신을 호출하는 함수이다. 자신의 복사본을 호출하여 더 작은 문제를 풀게함으로써 문제를 해결 위의 단계를 재귀 단계라고 한다. 재귀 단계는 더 많은 수의 재귀 단계를 만들 수 있다. 매 단계보다 함수는 원본 문제보다 조금 더 단순한 문제를 가지고 자기 자신을 호출 장점 직관적이며 간단하게 구현할 수 있다. 깊이 우선 탐색, 분할 정복 등 많은 알고리즘에서 사용되는 기초개념 단점 재귀 함수의 종료조건을 설정해주지않으면 무한루프에 빠질 수 있다. 재귀 호출의 깊이가 너무 깊어지면 너무 많은 메모리를 사용 불필요한 반복 연산을 하게 될 가능성이 있다. 2. Redux 리덕스는 그냥 쉽게말해서 데이터를 중앙집권화..
원본내용 : https://beta.nextjs.org/docs/api-reference/notfound Server Component Functions: notFound | Next.js API reference for the notFound function. beta.nextjs.org Not Found notFound 함수는 라우트 세그먼트 내에서 찾을 수 없는 파일을 렌더링하고, 태그를 삽입하는 것을 가능하게 합니다. [notFound()]() notFound() 함수를 호출하면 NEXT_NOT_FOUND 오류가 발생하며 해당 오류는 호출된 라우트 세그먼트의 렌더링을 중단시킵니다. 찾을 수 없는 파일을 지정하면 해당 오류를 우아하게 처리할 수 있으며, 해당 세그먼트 내에서 Not Found UI를..
서버가 클라이언트 인증을 확인하는 방식은 대표적으로 3가지가 있다. (쿠키, 세션, 토큰) 그럼 JWT를 보기전에 쿠키, 세션, 토큰에 대해 먼저 간단하게 알아보자! 쿠키(Cookie)인증 웹브라우저에서 쿠키(Cookie)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, key=value 형식의 문자열 데이터 묶음이다. 브라우저는 이 문자열 데이터 조각들을 저장해놓았다가 동일한 서버에 재요청시 쿠키 데이터를 전송할 수 있다. 즉, HTTP 프로토콜은 기본적으로 무상태성을 가지고 있기 때문에 서버와 클라이언트 간의 연결 유지를 구현하기 위해 서로를 인식할 수 있는 식별데이터가 필요했다. 그것이 쿠키 데이터 조각이라고 생각하면 된다. 쿠키의 활용 크게 세션관리, 개인화, 트래킹에 사용된다. ..
이번 포스팅에서는 리액트에서 전역상태를 관리할 때 많이 사용하는 Context API 와 Redux의 사용법과 장단점을 써보려고한다. 먼저, Redux는 먼저 찍먹을 해보았었다. '프론트엔드/Redux' 카테고리의 글 목록 프론트엔드 개발자가 되고픈 개미의 일대기 🐜 jhbljs92.tistory.com 일단, 전역 상태 관리는 언제할까?? 지겹도록 사용했던 useState는 지역 상태를 관리했었다. 이는 사용하는 컴포넌트 안 또는 props로 전달할때는 하위 컴포넌트에서 사용했었다. 하지만 이렇게 props로 하나씩 계속 내려주고 하기에는 한계가 있었다. 즉, 다른컴포넌트에게 props를 사용하지않고 데이터를 넘겨주고싶었던 것이다. 이때 사용했던 전역상태 관리도구가 Redux, ContextAPI 등이..
총 3번에 걸쳐 리액트 Hook에 대해 알아보고 문제를 풀어보았다. 이번에 풀어본 useReducer는 리덕스를 먼저 한번 봐보고 풀어서 그런지 마지막 3번문제를 제외하고는 풀만 하였다. 하지만 아직까지 dispatch, reducer, useReducer에 각각 어떤 인자를 주어야하는지 헷갈린다. 이 개념은 리덕스에서까지도 계속 쓰이니 헷갈리지않게 계속 반복해서 완벽히 알아보도록하자. 문제 1. useReducer()를 이용하여 다음과 같은 결과를 출력하는 코드를 작성하세요. 1번 코드 풀이 useReducer 함수에 넣을 reducer인 priceReducer를 선언해준다. useReducer를 이용한 state를 0으로 초기화해준다. 클릭했을 때 dispatch 함수를 실행할 함수를 선언해준다. (..
저번 state와 event 문제 실습에 이어서 리액트의 주요 hook인 useState, useEffect, useRef 훅을 실습해보는 문제를 풀어보았다. useEffect를 잘못 사용하여 무한렌더링이 되는 문제점을 찾아서 따로 useEffect를 사용할 때, 이러한 실수를 하지 않도록 알아보았다. 또한, useRef를 통해 리렌더링이 되지 않아도 되는 부분이 리렌더링이 되는것을 막을 수 있다. 문제 1. useState()를 사용하여 다음과 같은 결과가 출력되도록 해보시오. 1번 코드 풀이 먼저, 변수를 저장할 상태 eating을 초기화. input에서 onChange 이벤트가 발생할 때 value값을 담을 상태 value를 초기화. inputHandler 함수를 정의. input에서 onChang..
리액트와 리덕스에 치이다 보니 내일 있을 알고리즘 스터디공부를 이제야... 이번 알고리즘 공부는 스택과 큐를 공부하기로했다. 이번 공부를 하다가 자료구조와 알고리즘에 차이를 알게 되었다. 자료구조 : 데이터의 표현과 저장 방법을 의미 알고리즘 : 저장된 데이터를 처리하는 과정 자주쓰는 배열이 자료구조에 포함되어 있다고 생각하면 된다. 스택 (Stack) 스택은 push와 pop만 할 수 있으며, 실행이 되는 특정한 순서를 따르는 선형적 데이터 구조 즉, 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조. 스택(Stack)의 특징 스택 내부의 데이터는 top을 통해서만 접근할 수 있다. 스택에 데이터를 삽입할 때는, top위에 쌓게 된다. (push) 스택에서 데이터를 삭제할 때는, top에 위치한 데..
