- 전체보기(268)
- React(26)
- typescript(17)
- JavaScript(8)
- 기술면접(8)
- login(6)
- redux(5)
- next.js(5)
- react-query(5)
- react router dom(4)
- 타입스크립트(4)
- typescript exercises(4)
- 프리온보딩(3)
- button(3)
- hook(3)
- swr(3)
- 자바스크립트(3)
- 코드스테이츠(3)
- scss(2)
- 노션(2)
- 비동기(2)
- todo(2)
- regex(2)
- 프론트엔드(2)
- CSS(2)
- 원티드(2)
- 리덕스(2)
- useRef(2)
- 배열(2)
- 정규표현식(2)
- Naver(2)
- const(2)
- ts(2)
- 포트폴리오(2)
- html(2)
- styled components(2)
- Recoil(2)
- Sass(2)
- useNavigate(2)
- 자료구조(2)
- 리액트(2)
- Generic(2)
- 크롬익스텐션(2)
- 클린아키텍처(1)
- Event(1)
- loading.io(1)
- signup(1)
- 크로스브라우징(1)
- RouterProvider(1)
- usequery(1)
- 면접대비(1)
- caruosel(1)
- component(1)
- npm run eject(1)
- state와 ref(1)
- :focus-visible(1)
- Notion API(1)
- tab(1)
- 캐러셀(1)
- 우선순위(1)
- 페어(1)
- closed(1)
- GET(1)
- session storage(1)
- enter(1)
- 권한(1)
- CUD(1)
- useHistory(1)
- 스코프(1)
- 리스트(1)
- http(1)
- cookies(1)
- CRA(1)
- git branch -d(1)
- createBrowserRouter(1)
- type tree(1)
- tab focusing(1)
- .some(1)
- for문(1)
- 선언형 프로그래밍(1)
- image(1)
- mac(1)
- 브랜치 삭제하기(1)
- eject(1)
- @types/chrome(1)
- Cache(1)
- 관심사의 분리(1)
- useTab(1)
- 객체(1)
- block in mobile(1)
- validation(1)
- a(1)
- 도메인(1)
- 형변환(1)
- useInput(1)
- refetch(1)
- 리덕스툴킷(1)
- 크롬웹스토어(1)
- 연산자(1)
- TS2554(1)
- exercises7(1)
- 실행컨텍스트(1)
- HTTP Messages(1)
- 알고리즘(1)
- 면접(1)
- useRouter(1)
- chatGPT(1)
- input(1)
- 리액트리덕스(1)
- 노션api(1)
- uxui(1)
- while문(1)
- SQRT(1)
- useEffect(1)
- useState(1)
- Utility Types(1)
- ux(1)
- props drilling(1)
- type hierarchy(1)
- js(1)
- number(1)
- CODESTATES(1)
- network(1)
- branch(1)
- includes()(1)
- &&(1)
- useParams(1)
- UIUX(1)
- 외부링크(1)
- UI(1)
- 흥달쌤(1)
- Non-Null(1)
- admin(1)
- 1차(1)
- role(1)
- typeof(1)
- bootcamp(1)
- outline(1)
- exercises9(1)
- CREATE(1)
- 호출(1)
- 노션 이미지(1)
- loading(1)
- 조건문(1)
- typescript hierarchy(1)
- 문자열(1)
- error(1)
- 당근마켓(1)
- 반복문(1)
- JWT(1)
- let(1)
- var(1)
- exercises6(1)
- 클로저(1)
- format(1)
- pdf(1)
- CS(1)
- 캐싱(1)
- filter(1)
- z-index(1)
- window.open(1)
- before(1)
- exercise(1)
- Day(1)
- 우발적 중복(1)
- 타입(1)
- tabindex(1)
- local storage(1)
- 제네릭(1)
- 상태를 동기화하지 말것(1)
- naver login(1)
- 목표(1)
- 원시자료형(1)
- State(1)
- Sort(1)
- 깨알c언어(1)
- 함수(1)
- 네이버지도(1)
- DOM(1)
- rtk(1)
- stale-while-revalidate(1)
- function overloads(1)
- 타입계층(1)
- spinner(1)
- 챌린지(1)
- 참조자료형(1)
- 안드로이드스튜디오(1)
- semantic(1)
- Pagespeed Insights(1)
- CSR(1)
- SSR(1)
- 모달(1)
- type(1)
- disable app security(1)
- onKeyPress(1)
- 이력서(1)
- 가상선택자(1)
- 뒤로가기(1)
- after(1)
- 단축키(1)
- 접근성(1)
- 스택(1)
- 프로젝트(1)
- 기술블로그(1)
- 함수스코프(1)
- view/domain(1)
- react native(1)
- submit(1)
- 인증인가(1)
- 폴더구조(1)
- github(1)
- FLOOR(1)
- seo(1)
- Generics(1)
- 변수(1)
- svg(1)
- Map(1)
- Token(1)
- 블로그만들기(1)
- CRUD(1)
- headlessUI(1)
- mobile(1)
- document.getElementById('root')(1)
- resize(1)
- 맥(1)
- logout(1)
- 플러터(1)
- Props(1)
- 큐(1)
- 타입구조(1)
- useMutation(1)
- kakaopay(1)
- 블록스코프(1)
- 깃허브(1)
- remote(1)
- new FormData()(1)
- single source of truth(1)
- 폴더(1)
- exercises8(1)
- ES6(1)
- FE(1)
- grid(1)
- 타입별 변수명(1)
- 단일연결리스트(1)
- 상태관리(1)
- closure(1)
- 맥북(1)
- Suspense(1)
- 원격저장소(1)
- set(1)
- closed branch(1)
- 의존성 역전 원칙(1)
- 가상 클래스 선택자(1)
- 비밀번호(1)
- 웹표준(1)
- 생명주기(1)
- 블로깅(1)
- tanstack/react-query(1)
- git(1)
- Auth(1)
- JSDoc(1)
[typescript] svg 파일 사용하기
ts 전에는 {ReactComponents as Logo} 이런식으로 import해서 사용이 가능했다.그런데 tsx로 확장자를 바꾸니까 svg 경로에 빨간줄이...^^찾아보니 d.ts를 추가하라고 해서 svg.d.ts 파일을 src 폴더내에 만들었다.그리고 tsconf
[typescript] event의 type
프로젝트 리팩토링하면서 사용했던 event 관련 타입을 정리해보겠다.onChange eventonClick eventuseRef를 이용해 영역 밖을 클릭하는 경우 메뉴가 닫히는 기능을 구현했다.ref에 div 컴포넌트를 주고 HTMLDivElement 타입으로 지정했다
[react] styled components의 타입 중 SimpleInterpolation
프로젝트에 타입스크립트를 적용하는데 예끼치 않은 곳에서 다소 막막한 에러에 직면했다.버튼의 테마를 몇가지 지정해두고 props로 받는데, 이때 받는 타입을 어떻게 하느냐가 문제였다.아무리 봐도 string일거같은데 에러가 사라지질 않았다. 뭐 엄청 길게 뭐라고 하는 것
[react] htmlFor, id의 타입
리팩토링 중 htmlFor, id에 타입에러가 나는 걸 발견했다. 오잉?보니까 htmlFor과 id는 string이었다....!
[Challenge] useRouter hook 만들기(with. react-router)
window.location은 종종 사용했는데 .pathname은 뭘까? 이름만 봤을때는 현재의 라우팅 위치를 가져오는 것 같다.
[Challenge] useRef로 Dom이 아닌 변수 관리하기
우선 멘토님의 코드를 살펴보자.우선 리렌더링은 state값이 수정되었을때 발생한다. useRef는 값이 바뀌어도 리렌더링되지 않는다. ref는 일반 자바스크립트 객체라 react가 변경여부에 관심을 두지 않는다. useRef로 cur 값이 true로 바뀌었을 때는 유저
[Challange] 유저정보 리코일로 관리하기
recoil은 사용해본 적이 없는데 왜 쉽다고 하는지 알 것 같다. useState쓰듯이 쓰면 되더라.atomuseRecoilValue
[Challenge] 로그인 구현 lv.4
reactreact-router-domtypescriptrecoiladmin & authlogout유저의 role에 따라 접근 권한이 주어지는 경우가 있다. admin 페이지가 대표적이다. 이때는 서버에서도 통제를 해주어야한다. 멘토님이 말씀하시기를 가끔 너무 바쁘고
[Challenge] 로그인 구현 lv.3
reactreact-router-domtypescriptCookieLocal StorageSession Storage사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 시간세션방식 로그인사용자 로그인이 유효한 시간동안 서버에 세션아이디를 기록해두고 인증에 사용한다.간
[Challenge] 로그인 구현 lv.2
reactreact-router-domtypescriptTokenJWT(Json Web Token)Refresh Tokenurl : 'https://url.com/auth/login;body: { username: string, password: string
[Challenge] 로그인 구현 lv.1
reacttypescriptlogin 함수는 비동기함수이다. 올바른 username, password를 입력받았을때 LoginRes를 리턴한다. 목데이터에 없는 username과 password를 리턴하는 경우에는 null을 리턴하게 된다.여기서 토큰이라고 보낸 건 임
[Challenge] 로그인 여부에 따른 페이지 라우팅
로그인 여부에 따라서 노출되어도 되는 페이지와 블락해야하는 페이지가 있다. 이 페이지들의 노출 여부를 판단해주는 컴포넌트를 따로 분리하는 과정을 프리온보딩 섭(신성환님)에서 들은 것 + 내가 이해한 것 에 따라 정리해보려고 한다. reacttypescriptreact-
[React] react router dom, RouterProvider와 CreateBrowserRouter
버전 : react-router-dom@^6.3.0내가 기존에 작업하던 방식프리온보딩을 통해 알게된 방식. v6.4에 추가되었다.1\. BrowserRouter로 감싸지 않는다.RouterProvider를 import해서 router를 제공하면 됨.2\. 이때 Crea
[React] 네이버지도 api
네이버 지도 api 예제 https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html 로그인 api와 달리 지도 api는 공식문서에 설명이 잘되어있다. 그리고 react로 네이버맵을 연동하
[React] 네이버로그인
생각보다 네이버 로그인 오픈api 사용방법 정보가 많지 않고 복잡한 것 같아서 더듬더듬 해보면서 기록하려고 한다.네이버 로그인 개발가이드https://developers.naver.com/docs/login/devguide/devguide.md네이버 로그인버튼
[ReactNative] 무작정 시작하기
[기술면접] javascript
실행 컨텍스트(Execution Context)는 JavaScript 코드가 실행될 때 생성되는 환경을 말합니다. 즉, 코드가 실행될 때 해당 코드의 변수, 함수, 객체 등이 저장되는 공간이라고 할 수 있습니다.각 실행 컨텍스트는 크게 3가지로 구성됩니다.Variabl