- 전체보기(56)
- TIL(33)
- js(17)
- React(9)
- CSS(6)
- 배포(4)
- Flex(2)
- JavaScript(2)
- 구조분해할당(2)
- filter(2)
- 조건부렌더링(2)
- 프론트엔드(2)
- github(2)
- Props(2)
- 조건문(2)
- 객체(2)
- 반복문(2)
- Map(2)
- localstorage(2)
- 베이스캠프(2)
- 배열(2)
- 함수(2)
- DOM(2)
- 부트캠프(2)
- 노마드코더(1)
- Apollo client(1)
- animation(1)
- routing(1)
- 로그인(1)
- usequery(1)
- destructuring assignment(1)
- 동기/비동기(1)
- position(1)
- hydration(1)
- 3 Way-Handshake(1)
- promise(1)
- every(1)
- 깊은복사(1)
- lifting state up(1)
- GET(1)
- 이벤트버블링(1)
- a태그(1)
- 이벤트루프(1)
- http(1)
- 옵셔널체이닝(1)
- cache-state(1)
- 아임포트(1)
- 개발(1)
- for문(1)
- 결제프로세스(1)
- responsive(1)
- lifecycle(1)
- Hooks pattern(1)
- 코딩테스트(1)
- 마이크로 태스크큐(1)
- oAuth(1)
- ssl(1)
- memoization(1)
- 컴포넌트(1)
- 함수형 컴포넌트(1)
- FileReader(1)
- rest parameter(1)
- Class Component(1)
- 나머지매개변수(1)
- PORT(1)
- 연산자(1)
- callback(1)
- DOMPurify(1)
- redis(1)
- OpenGraph(1)
- TDD(1)
- react hook form(1)
- scraping(1)
- 클라우드(1)
- capturing(1)
- localhost(1)
- await(1)
- useState(1)
- event loop(1)
- 매크로 태스크큐(1)
- async await(1)
- prevState(1)
- 이벤트캡처링(1)
- async(1)
- 일상(1)
- Presenter(1)
- 클래스형 컴포넌트(1)
- 웹에디터(1)
- 동적파일(1)
- 타입스크립트(1)
- 폰트(1)
- observable(1)
- optional chaining(1)
- 레이아웃(1)
- login(1)
- prev()(1)
- refresh_token(1)
- query(1)
- Generic(1)
- keyframes(1)
- XSS(1)
- https(1)
- TLS(1)
- REST API(1)
- Optimistic UI(1)
- replace(1)
- docker(1)
- 동기와비동기(1)
- 얕은복사(1)
- foreach(1)
- for...in(1)
- 동적라우팅(1)
- 결제솔루션(1)
- 삼항연산자(1)
- State(1)
- useMemo(1)
- setInterval(1)
- setTimeout(1)
- 테스트코드(1)
- 챌린지(1)
- 선택자(1)
- html(1)
- useCallback(1)
- kill_port(1)
- 카카오맵(1)
- 협업(1)
- accesstoken(1)
- onerror(1)
- 서버사이드렌더링(1)
- state 끌어올리기(1)
- critical rendering path(1)
- HoF(1)
- preload/prefetch(1)
- transition(1)
- 멀티쓰레드(1)
- for...of(1)
- Functional Component(1)
- yup(1)
- JWT토큰(1)
- jest(1)
- 공통컴포넌트(1)
- HoC(1)
- Crawling(1)
- JSX(1)
- 단위(1)
- GRAPHQL-API(1)
- 변수(1)
- Injection(1)
- CRUD(1)
- 싱글쓰레드(1)
- new Date(1)
- img태그(1)
- 정적라우팅(1)
- 권한분기(1)
- 원시타입(1)
- 참조타입(1)
- bubbling(1)
- grid(1)
- pg사(1)
- closure(1)
- memo(1)
- promise.all(1)
- set(1)
- 이벤트(1)
- container(1)
- 생명주기(1)
- 터미널(1)
- scope(1)
- git(1)
- react-quill(1)
- typescript(1)
[GIT] github으로 협업하자!! / 코딩테스트 TIPS
미래는 PWA다! => serviceworker.js 활용! webRTC => 홈페이지 상에서 화상채팅, 줌, 음성인식, 녹음기능 webGL => 웹 그래픽라이브러리 d3.js ReactNative(모바일앱) github 협업방법 gitflow workflow
[React] 최종배포!! Docker 사용하자!
ec2에서 yarn start했을 때이미 사용중인 포트라고 뜰때! (프로그램이 비정상적으로 종료된 경우)ps -ef | grep node 라고 입력kill -9 9933ps -ef | grep nodeyarn start\--가상머신 - VM(Virtual Machine
[React] 악수를 3번? 3-Way-Handshake, 주소창에 자물쇠를 붙이자! HTTPS/SSL/TLS, 동적파일 배포해보자! Frontend-Server
와이어샤크란 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구 중 하나이다.80번 포트와 443번 포트💡 표시되어 있는 80은 http를 의미하며, 443포트는 https를 의미한다.이 포트 번호들은 생략이 가능하다!!와이어샤크를 사용하면 api의 문제인지
[React] 드디어 배포하자..!!
배포를 하면서 전반적인 시스템을 이해할 수 있게 된다.배포를 공부하면서 cs지식을 함께 기를 수 있다.구글클라우드플랫폼 => 비교적 가격이 저렴아마존웹서비스(AWS) => 제일 인기많음!마이크로소프트애저AWS4GB - 5~6만원8GB - 10만원구글클라우드플랫폼 4GB
[React] 기능을 검사하는 테스트코드를 만들자!
테스트란? 테스트란 마우스로 클릭하는거(api 요청 등) 대신해주기! 기능을 검사해주는 코드를 만들어야 한다고? 기능 만들기도 바쁜데? 업데이트 배포를 한다고 생각해보자! 업데이트 배포와 테스트코드 이해 테스트코드를 만들어야 하는 이유 개발자들이 어떤 프로젝트
[React] Optimistic-UI, 서버사이드렌더링
Optimistic-UI - 낙관적 UI optimistic UI는 실패 시 좋지 못한 UX가 된다. 99% 성공을 확신 할 수 있을 때 사용하는 것이 좋다. Opengraph Scraping? Crawling? 다른 사이트 정보를 가져오는 것을 스크래핑, 크롤링
[React] new FileReader(), Promise.all()
useEffect에서 setState를 사용하면 추가렌더링이 발생해서 비효율적인 경우가 있으므로 useMemo로 바꿔보자! > * 기존 이미지 업로드가 비효율적인 부분 2가지* 이미지 찌꺼기가 남는다. 이미지 미리보기가 느리다. 바뀐 이미지 업로드 방식 => 업
[JS]set(), get() 사용하기, for...in, for...of 함수정리
object와 흡사한 개념으로 set, get을 이용해야 요소를 참조할 수 있다. 사용은 간단하며, get 사용시 요소가 없다면 false가 반환된다. Js에서는 for(int i=0; i<arrary.length; i++)을 이와같이 간단하게 작성할 수 있다.
[React] 리렌더를 멈춰줘! Memoization, 속도를 더 빠르게! Preload/Prefetch
Memoization 모든 컴포넌트에 메모를 거는 것은 좋지 않은 방법이다! useMemo나 useCallback에 의존성배열이 너무 길어지면 오히려 유지보수를 깨뜨릴 수 있다! 브라우저에 어떻게 그림이 그려질까? -Critical-Rendering-Path-
[React] RefreshToken, Observable
RefreshToken 작동 원리 login에서 인증(Authentication) 과정을 거친다 똑같은 JWT토큰인데 하나 더 만드는거! accessToken(JWT 1h) refreshToken(JWT 2주간 지속) 두가지 만들어서 브라우저로 전달함 => paylo
Injection 공격
https://owasp.org/www-project-top-ten/ Injection 비밀번호 입력에 로직을 추가해서 성공되게 하는 것 SQL-Injection
[JS] Callback 함수 => Promise => async-await
Callback 함수를 실행할 때 함수에 인자를 넣어준다. 함수의 인자에는 함수도 넘길 수 있는데, 그 함수를 Callback 함수라고 한다. promise와 async-await가 나오기 전까지는 콜백함수를 썼다! 콜백지옥! Promise async-await
[React] 카카오맵, cache-state
a태그와 라우터 a태그는 기존 HTML 페이지 이동방식 => 페이지를 다운로드 받아서 보여준다. 일반적인 속도. router.push는 react/next에서의 페이지 이동방식 => 이미 있는 화면에서 추가 다운로드를 받아서 화면에 보여줌 => 속도가 매우 빠름!
[React] Custom Hooks, 나만의 useQuery만들기!
* custom hooks => useState, useEffect를 우리가 직접 만드는 것! container, presenter로 나눌 필요가 없다!! 구조분해할당(=비구조화할당) 
[React] 결제프로세스, Event Loop, 싱글스레드, 멀티스레드
카드사의 결제를 해주는 PG사 들이 있다.nicepay, KG이니시스, NHN 등등,,PG사는 payment gateway라고 해서 결제를 대신 해주는 회사이다.하지만 pg사를 이용하려면 필요한 api들을 직접 만들어서 이용해야 하기 때문에 굉장히 복잡하고 시간 소요가
[React] 웹에디터(React-quill) 적용, 크로스 사이트 스크립트(XSS)를 막기 위해 Dompurify를 설치하자!, Hydration Issue
React에서 쓸 수 있는 에디터 라이브러리로는 React-quill, React Draft Wysiwyg 등이 있고 국내에서 만든 것은 TOAST UI Editor이 있다.📍나중에 팀플할 때 적용해 볼 것!설치하는 법yarn add react-quill또는 npm
[React] 폼을 자동으로! React-Hook-Form, 공통 컴포넌트란?
폼들을 어떻게 하면 효율적으로 관리할 수 있을까?Formik이 원래 인기가 많았으나, 클래스형 컴포넌트에서 함수형 컴포넌트로 넘어가면서 '굳이 Formik을 써야하나?' 라는 인식이 생겨 굉장히 편리한 React-hook-form이 나왔다. 사용법도 쉬워서 요즘 많이
[React] accessToken 저장, 권한분기, HOC,HOF
새로고침 후에도 로그인이 되어있게 하려면 refresh token을 사용해야 하지만 아직 배우기 전이기 때문에 임시로 localStorage에 저장하는 방법이 있다.localStorage에는 객체형태 데이터를 넣을 수 없기 때문에 JSON.stringify를 이용해 객
[React] 로그인 구현하기
로그인 기능이 요즘 어떤게 트렌드인지, 어떻게 하면 보안을 강화할 수 있는지 생각해야함!인증(Authentication) - 한번만!인가(Authorization) - 내가 로그인됐다는 걸 필요로 하는 API 요청할 때마다 한다. (결제목록 보기, 등등)접속자가 많다