profile
코딩에 슬슬 재미를 붙이고 있는 자.
태그 목록
전체보기 (89)JavaScript(8)백준(6)custom hook(5)htmlcss(5)전개연산자(4)회고(3)알고리즘(3)딥다이브정리해보기(3)Fetch(2)promise(2)구조분해할당(2)memo(2)코딩애플(2)비동기(2)apply(1)git(1)typescript(1)가상돔(1)virtual DOM(1)callbackFunction(1)상수데이터(1)propType(1)import(1)useFetch(1)configureStore(1)terminal(1)동기(1)npm(1)indexOf(1)push(1)default parameter(1)Symbol(1)Primitive Type(1)지역변수(1)http(1)stack(1)queue(1)호이스팅(1)useTab(1)findIndex(1)iterable(1)위스타그램(1)rest parameter(1)state끌어올리기(1)useInput(1)React(1)useOutsideClick(1)router(1)Dispatch(1)enumerable(1)Prototype(1)await(1)ts(1)useEffect(1)ajax(1)async await(1)mock data(1)for ~ in(1)async(1)node.js(1)monster(1)Flex(1)export(1)pagination(1)reducer(1)콜백함수(1)CleanUpEffect(1)semanticweb(1)쿼리스트링(1)관심사의분리(1)template literals(1)REST API(1)find(1)concat(1)useDeferredValue(1)Reference Data Type(1)초기세팅(1)SideEffect(1)CSS in JS(1)웹브라우저 동작원리(1)backquote(1)key(1)정규화법칙(1)jquery(1)ES6변수(1)backtick(1)State(1)useMemo(1)Sort(1)리팩토링(1)this(1)arrow function(1)코인트랙커(1)axios(1)Sass(1)Constructor(1)이벤트처리(1)hook(1)useLockBodyScroll(1)batch(1)전역변수(1)transition(1)navermap(1)페이지네이션(1)tryCatch(1)spread operator(1)getter(1)setter(1)관계형데이터베이스(1)Soap(1)tagged literal(1)Query String(1)인증인가(1)JSX(1)노마드(1)destructuring문법(1)Database(1)styled component(1)Map(1)커스텀훅(1)Props(1)깃허브(1)버블링(1)useTransition(1)bubbling(1)WeCode(1)redux(1)deep copy(1)for ~ of(1)set(1)Stateless(1)pwa(1)
post-thumbnail

CSR & SSR

SPA(3세대 - Single Page App)하나의 HTML 파일npm run build ⇒ html 파일 하나 생성됨(ex. AWS 배포할 때)페이지 이동 시 AJAX로 필요한 데이터만 받아서 JS로 필요한 부분만 재 렌더링하기 때문에 화면 깜빡임이 없다.서버로부터

7일 전
·
0개의 댓글
·

패리티비트 & 해밍코드

패리티 비트는 정보의 전달 과정에서 오류가 생겼는지 검사하기 위해 추가된 비트이다. 문자열 내 1비트의 모든 숫자가 짝수 또는 홀수인지를 보증하기 위해 전송하고자 하는 데이터의 각 문자에 1 비트를 더하여 전송하는 방법으로1 2가지 종류의 패리티 비트(홀수, 짝수)가

2022년 11월 22일
·
0개의 댓글
·
post-thumbnail

REST API

REST API Example(https://poiemaweb.com/js-rest-apiREST : 가장 보편화된 API 설계 규칙 RESTful API : REST의 기본 원칙을 성실히 지켜 설계된 APIself-descriptiveness의 특징을 살려

2022년 11월 22일
·
0개의 댓글
·

[Wecode] 2차프로젝트 회고

2차프로젝트 Happin👏🏻 깃허브 레파지토리 바로가기 !! 작업내용 2022.10.17 - 2022.11.10(4주) SUPER MOVE 프로젝트 소개 지도기반 모빌리티 데이터 시각화 통합 길찾기 경로 검색 기능 대중교통 데이터 시각화(버스, 정류장, 지하철

2022년 11월 13일
·
0개의 댓글
·
post-thumbnail

[Wecode] 회고 - 기업협업

웹 지도 기능 구현 ( 추후 깃헙 주소 추가)2022.10.17 - 2022.11.10(4주)지도기반 모빌리티 데이터 시각화통합 길찾기 경로 검색 기능대중교통 데이터 시각화(버스, 정류장, 지하철)지도기반 서비스와 API 및 실시간 처리 기술이해슈퍼무브 자체개발 데이터

2022년 11월 11일
·
0개의 댓글
·

팁 링크 모음

No 'Access-Control-Allow-Origin' header is present on the requested resource.출처: https://kimyhcj.tistory.com/263 기억과 기록:티스토리https://kimyhcj.

2022년 10월 20일
·
0개의 댓글
·
post-thumbnail

[TS]TypeScript 필수 문법

TypeScript = JS + Type 문법기존 JS의 경우 하면 알아서 숫자로 바꿔서 연산해줌(Dynamic Typing)But, 프로젝트 사이즈가 커지면 자유도&유연성은 우리의 적이 됨타입 스크립은 위 코드 처럼 짜면 타입 에러 띄움간단하게 타입스크립트는 언어라기

2022년 10월 19일
·
0개의 댓글
·
post-thumbnail

[JS]jQuery 기본 문법

이거를요래 줄여줌.document.querySelector == $addEventListener == onjQuery는 JS의 querySelectorAll, addEventListener, classList.add얘네를 짧게 바꿔줄 뿐. 즉 편하게 쓸 수 있음.jQu

2022년 10월 18일
·
1개의 댓글
·

NaverMap(작성중)

네이버 맵 API 문서

2022년 10월 16일
·
0개의 댓글
·

[React]Styled-Component

1. CSS-in-JS 1-1 정의 CSS-in-JS는 JS 파일 내에서 CSS를 작성할 수 있는 방법. 1-2 특징 CSS-in-JS는 js 파일 내에서 css 코드를 작성하기 때문에 css의 변수와 함수를 그대로 사용 가능. 그리고 css 클래스명을 해시 값으로

2022년 10월 3일
·
0개의 댓글
·

[CustomHook]useTab

useTabs에 초기값 0과 content(데이터)를 넘겨줌.커스텀훅에서는 유효성 검사.커스텀훅은 초기값에 해당하는 데이터와 데이터를 선택하는 스테이트 변경함수를 넘겨줌컴포넌트에서는 버튼을 클릭하면 해당 인덱스 값을 changeItem에 넘겨주고 즉 커스텀훅의 setC

2022년 10월 2일
·
0개의 댓글
·

[CustomHook]useInput

variable shadowing 참고<a href="https://www.techiediaries.com/react-spread-operator-props-setstate/value = {name.value} onChange = {name.onChang

2022년 10월 2일
·
0개의 댓글
·

[CustomHook]fetch, lockScroll, outsideClick

모달 창 활성화 시 마우스 스크롤로 인해서 모달창 뒤의 UI의 움직임을 방지useLayoutEffect :리액트 내장 훅으로 렌더링 후 실행되는 useEffect와 달리 렌더링 되기 전에 동작하는 훅.useLayoutEffect 내에서 body의 스타일이 overflo

2022년 10월 2일
·
0개의 댓글
·

[React]Custom Hook

Hook 등장 이전React의 관심사로직- API 호출, state변경, 이벤트 핸들링 등UI - JSXPresentational - Container 퍁ㄴ로직을 담당하는 컴포넌트(Container)와 UI를 담당하는 컴포넌트(Presentational)를 분리해서 관

2022년 10월 2일
·
0개의 댓글
·
post-thumbnail

[React] 관심사의 분리

개발자가 자주 맞이하는 고민 중 하나는 아무리 코드를 잘 짜도 다양한 이유로 지금까지의 코드를 변경해야할 상황이 발생하는 것에서 비롯된다. 이 고민을 해소하려면 어떡해야할까?관심사의 분리(SoC: Seperatio of Concerns): 각각의 관심사에 따라 코드를

2022년 10월 2일
·
0개의 댓글
·
post-thumbnail

[wecode]1차 프로젝트 회고

ZINWOOS220919 초기세팅지누스 매트릭스 커머스사이트를 참고하여 굿즈샵 컨셉으로 기획했습니다.한정된 시간동안 진행되는 첫번째 프로젝트라 그동안 배웠던 기본지식들을 최대한 활용하여 개발하였습니다.개발은 초기 세팅부터 전부 직접 구현했으며, 시연영상에서 보이는 부분

2022년 10월 2일
·
0개의 댓글
·

[JS]이벤트 버블링

모든 부라우저는 이벤트 버블링이 발생한다.이벤트가 상위 html로 퍼지는 현상임.h4 클릭하면 상위 두개의 div도 클릭한 것처럼 작동하면서결과적으로 3번 눌리게 됨.e.target : 유저가 실제로 누른 곳.e.currentTraget : 이벤트리스너가 달린 요소=

2022년 9월 25일
·
0개의 댓글
·

[React]PWA

Progressive Web App웹이지만 어플리케이션처럼 URL창도 제거되고 구동됨.(모바일앱인척 하는 웹)설치 마케팅 비용 적음아날로그 유저들 배려html css js 로 모바일 앱까지 대응 가능푸시알림, 자이로센서 적용 가능.PWA가 셋팅된 리액트 프로젝트 생성하

2022년 9월 25일
·
0개의 댓글
·

[React]useTransition, useDeferredValue

ajax, setTimeout 내부라면 batching 이 일어나지 않음하지만! 리액트 18부터는 batching이 발생함.느린 컴포넌트 성능향상 가능(카드 빚 돌려막기)useTransition 갖고오기성능저하 일으키는 state 변경함수 감싸기.코드 시작을 뒤로 늦춰

2022년 9월 25일
·
0개의 댓글
·

[React] memo, useMemo

렌더링 할 때 부모 컴포 내의 자식 컴포도 함께 렌더링됨.만약 자식 컴포넌트가 렌더링 시간이 1초씩 걸리는 무거운 컴포넌트라면 어떡할까? memo : 해당 컴포넌트가 변경될 때만 재렌더링 해주세요.let 컴포넌트명 = memo( function(){})이렇게 메모로 감

2022년 9월 25일
·
0개의 댓글
·