- 전체보기(127)
- 북클럽(11)
- 노개북(11)
- 노마드코더(11)
- 알고리즘(4)
- React(3)
- CSS(3)
- 실용주의프로그래머(3)
- 실용주의 프로그래머(3)
- var(2)
- JavaScript(2)
- redux(2)
- DOM(2)
- const(2)
- react.js(2)
- let(2)
- variable(2)
- scope(1)
- 객체 지향 설계의 5가지 원칙(1)
- Search Algorithm(1)
- function(1)
- nextjs(1)
- 크로스브라우징(1)
- 배열(1)
- 회고(1)
- hydration(1)
- BEM(1)
- promise(1)
- 로버트 마틴(1)
- 마틴 파울러(1)
- 깊은복사(1)
- 동기(1)
- 자료구조(1)
- 객체 지향 설계(1)
- header(1)
- 리액트(1)
- Client Server Architecture(1)
- 해시(1)
- REST(1)
- 함수형 프로그래밍(1)
- 객체(1)
- 리덕스(1)
- 검색엔진(1)
- res.headers(1)
- primitive(1)
- destructing(1)
- 엄격모드(1)
- reference(1)
- script태그위치(1)
- ajax(1)
- ux(1)
- Sync(1)
- Blocking(1)
- non blocking(1)
- js(1)
- Spread(1)
- async(1)
- 비동기(1)
- SOLID(1)
- 빅 오 표기법(1)
- js dom(1)
- UIUX(1)
- UI(1)
- 해쉬테이블(1)
- React란?(1)
- 인스턴스(1)
- @media(1)
- Node(1)
- REST API(1)
- redux-toolkit(1)
- big o notation(1)
- 클로저(1)
- 얕은복사(1)
- 재귀함수(1)
- 원시자료형(1)
- 함수(1)
- global(1)
- 정렬알고리즘(1)
- 코드스테이츠(1)
- rtk(1)
- axios(1)
- 개발서적(1)
- 참조자료형(1)
- Sass(1)
- html(1)
- 미디어쿼리(1)
- 자바스크립트라이브러리(1)
- CSR(1)
- SSR(1)
- 리팩터링(1)
- 정렬(1)
- 클래스(1)
- CSS flex(1)
- css selector(1)
- 리팩터링 2판(1)
- 재귀(1)
- array(1)
- ES6문법(1)
- local(1)
- use strict(1)
- 시맨틱(1)
- seo(1)
- Binary Search(1)
- JSX(1)
- next.js(1)
- 변수(1)
- styled component(1)
- Token(1)
- Hash Table(1)
- linear search(1)
- 한달회고(1)
- hash(1)
- 빅오표기법(1)
- 부트캠프(1)
- 자바스트립트(1)
- 리액트란?(1)
- 웹 표준(1)
- algorithm(1)
- closure(1)
- element(1)
- 웹표준(1)
- css grid(1)
- cdd(1)
A title element received an array with more than 1 element as children
title element에 1개 이상의 자식요소가 있다는 경고문자만 자식으로 가질 수 있다수정 전 코드문제되는 부분이부분이 React render에서는변수 앞뒤로 주석으로 되는데 주석은 HTML노드여서 하위노드로 간주된다주석-글자-주석-글자 => 이런식으로 여러 개의
Next.js 13 버전 - Data Fetching
SSG: Static-Site Generation 정적사이트 생성빌드 시 html 생성해두고 요청이 오면 생성해둔 html 재사용SSR: Server-Side Rendering 서버사이드 렌더링SEO 성능 향상시키고 요청마다 데이터를 최신상태로 업데이트해야 될 경우미리
git 폴더명 변경하기
로컬에서 폴더명 변경 시 github에는 반영이 안된 문제vercel에 배포하려는데 파일 모듈을 못찾는다는 에러발생원인이 경로나 대소문자 불일치일수 있다는데 vscode에선 다 맞았음(참고)예전에 로컬에서 폴더명을 바꿨던게 생각남 Button => button 소문자로
[Recoil] Duplicate atom key 에러 +Next.js
Next.js + Recoil 에러.env 생성참고https://github.com/facebookexperimental/Recoil/issues/733
tsconfig 수정 후 변경사항 적용됐는지 확인하기
vscode 기준command + shift + pTypeScript: Restart TS server 입력하면 새로고침 됨
Next.js + TS에서 ESLint, Prettier 설정하기 (+ styled-components, airbnb, husky, lint-staged)
Next.js 공식문서Next.js, TypeScript 프로젝트에서 ESLint, Prettier 설정하기새 프로젝트를 Next.js + TS로 생성Next.js -> Next.ts로 기존 프로젝트에서 생성
모바일 반응형 - onMouseUp 이벤트 안걸림
버그 문제 모바일반응형에서 input range 조절해도 필터에 안걸리는 버그 원인 모바일에선 터치로 하기 때문에 onMouseUp이벤트에 안걸림 해결 Touch 이벤트 추가하여 적용하기
input type='date' 삭제 안될 때
input type='date'에서 삭제 누르면 리셋이 안되는 문제input 속성에서 required 삭제변경 전변경 후
[axios] interceptors로 토큰을 모든 요청/응답 전 헤더에 담기
요청 전 처리가 가능한 interceptors로 모든 요청 전에 access토큰 만료시간 체크하기!!이미 요청을 보낸 후에 만료됐는지 체크하면 늦었기 때문이다.access토큰 있으면 JWT 디코딩해서 만료시간 체크만료됐으면 만료된 access와 refresh 토큰 같이
base64를 Blob(FormData)로 변환하기
이유미리보기때문에 base64인코딩했던 문자열 다시 Blob으로 변환이미지 업로드 & 압축 - 기억보다 기록을
[axios] 응답 Header로 Token 전달받기
FE에서 한 작업응답 헤더에서 Authorization으로 온 토큰을 받고콘솔에 찍어보고 (여기서 undefined출력)LocalStorage에 저장하기console에 찍어보면 undefined가 출력됨
setState는 비동기!!!
✴️ setState같은 갱신함수는 비동기로 처리됨!!!!console.log(programs); 로 콘솔에 찍어보면 undefined가 출력된다이는 갱신함수가 비동기이기 때문에 JS에서 갱신함수를 건너뛰고 다음줄인 콘솔을 바로 출력해서 undefined가 뜨는 것이다
TS - react-hook-form 사용하기
https://velog.io/@ckm960411/react-hook-form-TypeScript-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85-%ED%8F%BC-%EC%82%AC%EC%9A%A9%EB%B2%95%EA%B3%BC-%ED%8
소셜로그인 가이드라인 - 구글, 네이버, 카카오
가이드에 안맞추면 reject 당할 수도 있다..네이버 로그인 버튼 사용 가이드버튼 형태 : 네이버 고유의 이미지를 해치지 않는 범위 내에서 변경 가능메시지 내용 : 네이버 로그인 목적에 부합한다면 한글이나 영문 상관없이 변경 가능구글 브랜드 가이드라인(https&#x
TS - setState 갱신함수 props로 전달하기
리턴 값 명시적으로 설정안한 경우 (비추)리턴 값을 반환하지 않는 경우에 사용해야하는데 무분별하게 남발하는 것은 바람직하지 않음✅ 갱신함수 타입 정의 import 해서 사용하는 경우 import없이 React.~로 사용하는 경우
TS에서 svg import 안될 때
'Logo' is declared but its value is never read.ts(6133)Cannot find module '../images/Logo.svg' or its corresponding type declarationssrc/custom.d.ts 파
리액트에서 폰트어썸 사용하기
1. 무료버전 한번에 설치 패키지명 @fortawesome 오타 아님! 그대로 설치! free라고 붙은 것만 무료고 pro는 2. 따로 설치하기 기본 패키지 설치 regular solid light duotone brand 폰트어썸 아이콘 검색
TS - 리액트 타입스크립트로 적용하기
Dynamic Typingex) 1 + '2' = 3 가능type을 엄격히 검사하여 에러메시지를 정확히 짚어줌ex) 1 + '2' = 에러 출력해줌공식문서CRA 리액트와 같이 TS설치기존 CRA 리액트가 존재할때 TS만 추가하기npx typescript --init나
Pre-Project 회고
개선점 FE axios 필요 (json()안해도 되고 .post하는 짧은 코드) 전역상태관리 사용 이유? 로그인시 유저정보인가? 팀 전체 화면정의서, API명세서가 정말 중요하다!!! 이걸 토대로 서로 작업하는데, 서로 정확한 소통이 없다면 계속해서 미스(서로 다르게