[코드캠프#12] 메모

useQuery : 요청과 렌더링 모두 자동이다. useLazyQuery : 요청은 내가 원할때, 렌더링은 자동 최초 실행만 내가 원하는 곳에서 가능하고 그 이후에는 useQuery와 동일 useApolloClient : 요청도 수동, 렌더링도 수동 가능,...

나의 권한은 어디까지인가? 권한분기

권한분기 우리가 자주 사용하는 네이버 까페를 살펴보면 ID 계정 별로 등급이 나누어져 있는 것을 볼 수 있다. 예를 들면 까페장, 운영진, 일반, 미승인회원 이런식으로 말이다. 까페장은 까페 가입의 승인 권한과...

브라우저는 비밀번호를 어떻게 기억할까?

Cookie(쿠키) HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는...

React Slick Css 수정하기

React Slick 이란?? React Slick 공식문서 보러가기 페이지에 캐러셀 효과를 주는 React 라이브러리 중에 하나이다. 다운로드 수도 높고 믿을 수 있는 라이브러리 라고 한다. 나는 라이브러리를 설치해서 캐러셀 효과를 지금...

[코드캠프#11] 메모

next.js 렌더링 원리 pre렌더링 먼저하고 diffing hydrfjdak? localStorage : 보안상 좋지는 않다 HOC vs HOF custom-hooks

Regular Expression

Regular Expression Regular Expression 공식문서 보러가기 정규표현식이란 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. javascript에서 정규식은 객체로 exec()와 test() 메서드를 사용할 수 있습니다. exec() 메서드는 주어진 문자열에서 일치 탐색을 수행한...

[코드캠프#11] 메모

리코일이 redux를 대체하기는 어렵다 로그인 방식 scale up sacle out https://tecoble.techcourse.co.kr/post/2021-10-12-scale-up-scale-out/ stateful Stateless https://www.redhat.com/ko/topics/cloud-native-apps/stateful-vs-stateless jwt 암호화 복호화 https://jwt.io/ jwt 토큰은 누구나 볼수나 있다. 그래서 중요한 정보는 적으면 안된다. 하지만 조작은...

상태 관리 도구 비교

Context Api React 공식문서 보러가기 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI...

[코드캠프#10] 메모

이번주 과정 지금까진 Props 드릴링 부모 > 자식 > 자식 이젠 글로벌 state를 배운다 글로벌 스테이트? props가 필요없대 > recoil 로그인에도 역사가 있다 > AcceessToken / refreshToken Next.js 렌더링 원리...

가끔은 스킵.. 디바운싱과 쓰로틀링

Debouncing 디바운싱이란, 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식이다. 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되는데 그 대표적인 예시가 자동검색이다. 구글이나 네이버에 debouncing이라는 단어를 검색을 하는...

Shallow-Routing : URL로 상태값 알아내기

Shallow Routing Shallow Routing Next.js 공식문서 바로가기 URL로 현재 상태를 알 수 있다? 예를 들어 PageNumber=2라는 state 값이 있다고 가정해보자. props로 다른 컴포넌트에 넘겨줄 일이 있을 수 있다. 이때 만약에...

알아두면 좋은 Object 메소드

Object.keys() Object.keys() 공식문서 바로가기 객체의 키를 전부 알려줄께 주어진 객체의 속성 이름(key)들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다. 예제 const object1 = { a: 'somestring', b:...

[코드캠프#9] 메모

CORS 브라우저가 차단하는 기능 CORS는 Cross-Origin Resource Sharing의 약자 출처(Origin)란? 출처(Origin)란 URL 구조에서 살펴본 Protocal, Host, Port를 합친 것을 말합니다. 브라우저 개발자 도구의 콘솔 창에 location.origin를 실행하면 출처를 확인할 수...

이것 좀 실행해줘 useEffect

useEffect 공식문서 바로가기 useEffect 개요 useEffect Hook은 우리가 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 지정할 수 있다. 페이지가 렌더링 된 후 무조건 1번은 실행된다. useEffect의 배열에 담긴 state값이...

특정 Dom에 접근해보자 useRef

useRef 공식문서 바로가기 JavaScript에서 우리는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 함수를 사용해서 DOM을 선택하여 조작합니다. 리액트에서도 가끔 이런 상황이 발생하는데 그때 리액트에서는 ref 라는 것을 사용한다....

[코드캠프#8] 메모

Class 형 컴포넌트 예시 import { Component, createRef } from 'react'; // router 통째로 임포트 import Router from 'next/router'; // class는 컴포넌트가 아니다 // component로 만들기 위해 extends Component(리액트에서 제공)...

state를 부모님께 드리자

state 끌어올리기 state 끌어올리기 문서보기 리액트에서 데이터는 단방향으로 흐르게 된다. 부모에게서 자식에게로 props로 전달되게 되는데 가끔은 동일한 state를 형제 컴포넌트가 필요한 경우가 있다. 이런 경우에는 형제 컴퍼넌트에 props로 데이터를 전달할...

페이지처리와 무한 스크롤

페이지네이션 게시판이나 까페글 리스트를 보다 보면 하단에 아래와 같은 이미지의 UI를 쉽게 볼 수 있다. 여러개의 리스트나 페이지들을 이렇게 페이지별로 나누어서 접근 할 수 있는 인터페이스를 페이지 네이션이라고 부른다. 무한...

Typescript Generic 이란?

Typescript Generic 문서보기 Poeimweb Typescript Gerneric TypeScript 또한 정적 타입 언어이기 때문에 함수 또는 클래스를 정의하는 시점에 매개변수나 반환값의 타입을 선언하여야 한다. 여기서 Generic은 자료형을 정하지 않고 여러 타입을 사용할...

Atomic Design Pattern

참고글1: atomic design 참고글2: Atomic Design and ReactJS 아토믹(atomic) 패턴은 단어에서도 느껴지듯이 컴포넌트들을 작은 단위로 만들되 재사용성이 크고 단단하게 잘 설계하는 것을 말한다. 웹 프론트 개발에 가장 많이 쓰이는 프레임워크인...

state와 prev 느낌잡기

4씩 오르는 카운터를 useState를 이용해서 만들어보자 import { useState } from 'react'; export default function StatePage() { const [count, setCount] = useState(0); const onClickCount = () => { setCount(count +...

State와 생명주기

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick()...

[React] 함수형 or 클래스형

과거에는 클래스형 현재는 함수형 권장 리액트에서 과거에는 클래스(class)형 컴퍼넌트를 많이 사용했었다. 하지만 2019년 이후 함수형(functional)컴퍼넌트에 리액트 훅(hook)을 지원하기 시작했고 이제는 공식 문서에서도 함수형 컴퍼넌트를 사용할 것을 권장하고 있다. 관련링크 함수형...

[코드캠프#8] 메모

input의 defaultvalue와 value defaultvalue는 최초값, 유저가 바꿀수 있다. value는 유저가 바꿀수 없다. 제어(controllered) 컴포넌트 : 장문일 경우 느리다 event 버블링 자식에서 부모로 이벤트가 전파 되는 것 event 캡쳐링 부모에서 자식으로...

[React] prop과 state

prop props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다. 주로 parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다. 특히 얼마전 배웠던 container-presenter 구조로...

꼰대 타입의 타입스크립트

자바스크립트의 시작 자바스크립트는 1995년 넷스케이프사의 브렌던 아이크(Brendan Eich)가 자사의 웹브라우저인 Navigator 2에 탑재하기 위해 개발한 스크립트 언어이다. 초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분...

똑똑한 배열 메서드들

.filter() filter MDN 문서 바로보기 filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) 구문 설명이 좀 복잡한데.. 예시로 이해하는게 더 빠를...

[코드캠프#7] 메모

타입스크립트 세팅하기 설치 : yarn add typescript –dev 설정 : tsconfig.json 파일 생성(기본폴더) 설치 : yarn add –dev @types/node 실행 : yarn dev next.js가 tsconfig.json 파일의 내용을 생성해줌 기존 js(리액트)파일들...

똑똑한 할당 구조분해할당

구조분해할당(Destructuring-Assignment) 객체나 배열을 변수로 ‘분해’할 수 있게 해주는 특별한 문법을 구조 분해 할당(destructuring assignment)이라고 부른다. 배열을 구조분해하는 예시를 통해서 감을 잡아보도록 하겠다. let arr = ["Seoul", "Korea"] let [city, country]...

[React]디자인패턴

presentational & container 디자인 패턴이란? 앱의 기능과 UI 분리하여 소스코드를 작성하는 패턴 container component 어떻게 동작하는지, 어떤 로직을 수행하는지 기능구현을 담당합니다. markup이나 스타일을 사용하지 않습니다. Data나 UI조작에 관한 함수를 만들고...

조건부 렌더링

&& || ?? 연산자 data && data.fetchProfile // data가 참이니까 뒤에가 실행된다 data || data.fetchProfile // data가 거짓이면 뒤에가 실행된다 data ?? data.fetchProfile // data가 null undefined 일때 뒤에가 실행된다...

[코드캠프#6] 메모

React의 리랜더링 setState는 비동기로 작동 합니다. setState가 동기로 작동하게되면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적이다. 따라서 임시 저장소에 모아두었다가 코드를 끝까지 읽고 한번에 바꿔서 렌더링한다. state변경사항을 바로 적용하기 위해서는?...

CSS 상속을 받는자와 받지 않는자

CSS상속이란? HTML 부모태그의 CSS 속성을 자식 태그가 그대로 이어 받는 경우를 말한다. 나는 지금까지 모든 속성이 다 상속이 되는 줄 알았는데 그게 아니었다. 어떤 속성은 상속이 되고 어떤 상속이 되지...

페이지를 이동시키자 Routing!

Router(라우터) 라우터란 객체로 페이지 이동과 관련된 정보를 가지고 있다. 라우터 객체를 이용해서 A페이지에서 B페이지로 이동할때 B페이지로 라우팅 한다 라고 말한다. 정적 라우팅과 동적 라우팅 정적 라우팅은 URL 고정되어 있는 URL의...

[코드캠프#5] 메모

삼항연산자 : 길게 사용하면 알아보기가 어려워진다. 1줄 정도일때만 사용하는 것을 추천 조건부 렌더링 data && data.fetchProfile // data가 참이니까 뒤에가 실행된다 data || data.fetchProfile // data가 거짓이면 뒤에가 실행된다 data...

에러 핸들링을 위한 try와 catch

try… catch try catch MDN문서 보기 try와 catch는 에러핸들링을 위해 자주 사용되는 문법이다. 아무리 경력이 오래된 개발자라고 해도 에러는 언제든 발생할 수 있다. 그래서 에러가 발생하는 경우 프로그램이 죽지않도록 하고...

Rest-Api VS GraphQl

API(Application Programming Interface) 흔히 말하는 컴퓨터와 인간을 연결시키는 사용자 인터페이스(UI)와는 다르게, API는 컴퓨터나 소프트웨어를 서로 연결한다. 내가 지금 공부하는 프론트쪽에서는 주로 클라이언트와 서버와의 연결을 뜻한다고 보면 될 것 같다. API와...

async / await

Syncronous(동기) and Asyncronous(비동기) 동기식 - 프로그램이 진행중 요청한 것에 대해 응답을 받아야만 다음과정이 진행되는 방식 비동기식 - 요청에 대한 응답과 상관없이 다음과정이 진행되는 방식 이 애기가 나오는 이유를 설명하자면 내가...

[JS] Template literals

Template literals(템플릿 리터럴) MDN 공식문서 바로가기 템플릿 리터럴.. 먼가 이름만 들어도 먼가 거부감이 느껴지는 단어이다. 그래서 위의 링크의 문서를 자세히 읽어봤는데, 이미 내가 사용해본적이 있던 문법(?)이었다. 우리말로 풀어 쓰기가 조금...

[코드캠프#4] 메모

동기와 비동기방식 비동기 실행 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행합니다. 이러한 특징 때문에 비동기 실행은 요청들...

[git] github와 자주 쓰는 명령어

Git이란? 프로그램 소스코드를 버전별로 관리할 수 있는 분산관리 시스템이라고 할 수 있다. 즉, 어떤 시점에 어느 소스의 어느 부분이 변경이 되었는지 기록, 관리하는 버전 관리 툴이라고 생각하면 쉽다. Github란? 보통...

[코드캠프#3] 메모

2개의 컴퓨터가 통신하는 방법 파일 전송 => FTP 간단한 메일 => SMTP 텍스트/하이퍼텍스트 => HTTP 상태코드 HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다...

[React] import / export

코드분할 서비스가 활성화 되거나 앱이 커지다 보면 그 소스의 양이 방대해지기 마련이다. 방대해진 소스의 양은 유지보수나 수정에 어려운 경우가 발생하게 된다. 이런 경우 코드를 분할하면 관리적인 측면에서 효율성을 높여줄 수...

[코드캠프#2] 메모

http://127.0.0.1:3004/ http://localhost:3004/ 위 2개 주소는 같은 주소이다 사이트이름 : npmtrends https://www.npmtrends.com/ 리액트의 핵심 component 리액트는 component들의 조립식이다. 기존에도 가능했다. 단순 복붙. 하지만 근본적으로 차원이 다르다. 필요한 곳에 import해서 사용가능하다 UI의...

[React] JSX란 무엇인가

JSX란? 자바스크립트를 확장한 문법이다 JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. 자바스크립트의 공식적이 문법은 아니다. JSX는 리액트에서 엘리먼트를 생성하는데 아래에 참고 코드를 작성해두었다. function formatName(user) { return user.firstName +...

[코드지갑#2] 난수 생성 후 타이머 작동하기

기능 난수번호 생성 버튼을 클릭하면 6자리의 난수가 생성된다. 난수가 생성되면 아래의 3분 타이머가 카운트 된다. 3분이 되면 카운트가 종료 된다. 카운트가 진행중에 버튼을 누르면 얼럿을 띄워준다. 예시 000000 난수번호 생성...

[코드지갑#1] select, radio 버튼 생성

Select 태그 활용 예시 지역을 선택하세요 서울 경기 인천 <select name="" id=""> <option disabled selected value="">지역을 선택하세요</option> <option value="">서울</option> <option value="">경기</option> <option value="">인천</option> </select> select 태그 안에 option 태그로 셀렉트...

[코드지갑#1] select, radio 버튼 생성

Select 태그 활용 예시 지역을 선택하세요 서울 경기 인천 <select name="" id=""> <option disabled selected value="">지역을 선택하세요</option> <option value="">서울</option> <option value="">경기</option> <option value="">인천</option> </select> select 태그 안에 option 태그로 셀렉트...

[JS #8] 계산기 코딩이 가르침을 주는구나..

제로베이스 JavaScript 완전 정복 계산기 프로그램 구현 계산기 소스 페이지 제로베이스 수업 중 간단한 계산기를 구현하는 과제를 하게 되었다. 처음에는 가볍게 천천히 하면 만들 수 있을 줄 알았는데, 생각보다 어려운...

[JS #8] 계산기 코딩이 가르침을 주는구나..

제로베이스 JavaScript 완전 정복 계산기 프로그램 구현 계산기 소스 페이지 제로베이스 수업 중 간단한 계산기를 구현하는 과제를 하게 되었다. 처음에는 가볍게 천천히 하면 만들 수 있을 줄 알았는데, 생각보다 어려운...