- 전체보기(120)
- 자바스크립트(18)
- 웹 프론트엔드를 위한 자바스크립트 첫 걸음(10)
- React(7)
- JavaScript(7)
- 러닝타입스크립트(6)
- 타입스크립트(6)
- useMemo(5)
- hooks(5)
- 리액트(5)
- react hook(5)
- mysql(4)
- useState(4)
- useCallback(4)
- DOM(4)
- SSR(4)
- CSS(4)
- 배열(4)
- 최적화(4)
- 객체(4)
- useEffect(4)
- redux(3)
- react router dom(3)
- html(3)
- 함수표현식(3)
- spa(3)
- hook(3)
- Class Component(3)
- 프로퍼티(3)
- 상태관리(3)
- 함수선언식(3)
- Wavve(3)
- useReducer(3)
- 비동기(3)
- 함수(3)
- 동기(3)
- CSR(3)
- React.memo(3)
- 클래스형 컴포넌트(2)
- 함수형 컴포넌트(2)
- API(2)
- 반복문(2)
- 바닐라js(2)
- styled components(2)
- JOIN(2)
- ajax(2)
- Web API(2)
- 객체리터럴(2)
- component(2)
- node.js(2)
- 싱글쓰레드(2)
- todo(2)
- push(2)
- 구글로그인(2)
- 내로잉(2)
- context(2)
- for문(2)
- 유니언(2)
- swiper(2)
- nextjs(2)
- MPA(2)
- React Component(2)
- State(2)
- Function Component(2)
- Carousel(2)
- setTimeout(2)
- Map(2)
- 복합연산자(1)
- heap(1)
- lifecycle(1)
- 슬라이드(1)
- 함수프로퍼티(1)
- oAuth(1)
- findIndex(1)
- length(1)
- 크롬(1)
- vue(1)
- 뷰(1)
- 형변환(1)
- Page Routing(1)
- null 병합 연산자(1)
- MBTI(1)
- df.drop(1)
- 지역스코프(1)
- 리덕스(1)
- .replace(1)
- 오픈뱅킹(1)
- 실행컨텍스트(1)
- TDD(1)
- Read(1)
- head(1)
- 라우팅(1)
- router(1)
- useRouter(1)
- 프론트엔드(1)
- 리액트훅(1)
- input(1)
- toRefs(1)
- 튜플(1)
- 웹 프론트엔드를 위한 자바스크립트(1)
- Document(1)
- Recoil(1)
- while문(1)
- event loop(1)
- 함수 호이스팅(1)
- 공공API(1)
- 웹(1)
- Spread(1)
- ref(1)
- class(1)
- 리액트 훅(1)
- XML(1)
- includes()(1)
- usedispatch(1)
- 타입연산자(1)
- JSX ELEMENT(1)
- 포트폴리오(1)
- 프로그래머의 뇌(1)
- 콜백함수(1)
- 웹브라우저(1)
- multi page application(1)
- CREATE(1)
- keyframes(1)
- action(1)
- 소스트리(1)
- break(1)
- NIPA(1)
- react testing library(1)
- OAuth2.0(1)
- switch(1)
- find(1)
- 비동기처리(1)
- reactive(1)
- concat(1)
- const(1)
- let(1)
- var(1)
- 멀티스레드(1)
- 사칙연산자(1)
- 대입연산자(1)
- IT개발캠프(1)
- 레스트(1)
- 라우터(1)
- filter(1)
- Angular(1)
- api명세서(1)
- foreach(1)
- 인터페이스(1)
- 리액트 부트스트랩(1)
- delete(1)
- 크롬탭(1)
- 리터럴(1)
- select(1)
- 소셜로그인(1)
- local storage(1)
- 외부변수(1)
- 별칭객체타입(1)
- confirm(1)
- 증감연산자(1)
- media query(1)
- useContext(1)
- useRef(1)
- Sort(1)
- vite(1)
- this(1)
- window(1)
- 전역객체(1)
- VirtualDOM(1)
- body(1)
- dbeaver(1)
- 화살표함수(1)
- 유데미(1)
- if else(1)
- update(1)
- 폰트스타일(1)
- 전역스코프(1)
- alert(1)
- automatic(1)
- Data Base(1)
- useselector(1)
- Context API(1)
- to_csv(1)
- script(1)
- erd(1)
- 변수와 상수(1)
- 함수컴포넌트(1)
- 구조 분해 할당(1)
- type(1)
- localstorage(1)
- 로컬스토리지(1)
- server site generation(1)
- 클래스(1)
- 멀티쓰레드(1)
- 정보통신산업진흥원(1)
- vue3(1)
- 프로젝트(1)
- Fetch(1)
- todoList(1)
- Functional Component(1)
- jest(1)
- 구글폰트(1)
- github(1)
- 객체프로퍼티(1)
- 웹 프론트를 위한 자바스크립트 첫 걸음(1)
- toString(1)
- seo(1)
- morgan(1)
- JSX(1)
- Flask(1)
- subquery(1)
- express(1)
- slice(1)
- ssg(1)
- arr(1)
- babel(1)
- 자료형(1)
- CRUD(1)
- 개발자부트캠프(1)
- Props(1)
- 객체 생성자(1)
- df.columns(1)
- 블록스코프(1)
- 디비버(1)
- pandas(1)
- 파이썬(1)
- composition api(1)
- DOM API(1)
- 생성자(1)
- toRef(1)
- react router(1)
- callback queue(1)
- 생명주기(1)
- apply(1)
- git(1)
- 스레드(1)
- 변수 호이스팅(1)
- routing(1)
- 비동기 처리(1)
- server side rendering(1)
- 함수호출(1)
- Client Side Rendering(1)
- 서브쿼리(1)
- object(1)
- 앵귤러(1)
- 논블로킹(1)
- 스와이퍼(1)
- 콜백지옥(1)
- page router(1)
- promise(1)
- 핀테크(1)
- figma(1)
- 부트스트랩(1)
- 캐러셀(1)
- 쓰레드(1)
- javacsript(1)
- link(1)
- db연결(1)
- npm(1)
- indexOf(1)
- AI교육(1)
- visual studio(1)
- 오픈뱅킹API(1)
- 이벤트루프(1)
- runtime(1)
- 논리연산자(1)
- slide(1)
- 워크벤치(1)
- global object(1)
- read_csv(1)
- 타입제한자(1)
- 클래스컴포넌트(1)
- 스코프(1)
- 연결연산자(1)
- 지역변수(1)
- 블로킹(1)
- single page application(1)
- stack(1)
- 비교연산자(1)
- 호이스팅(1)
- 스프레드(1)
- REST(1)
- df.rename(1)
어쩌다 마주친 Unexpected end of json input오류. 다신 마주치지 말자.
갑자기 찾아온 'Unexpected end of json input' 빌드 오류어제였다.현재 NextJS app route를 사용하고 있는데, 배포된 화면에서는 이미지가 나오지 않는 것. 하지만 로컬에는 잘 나온다.(참고: 프론트 프로젝트는 셋팅부터 내가 했음, 자랑하
Next JS에서 react-query 적용기 1탄.
'NextJS에서 별도의 상태관리가 필요한 가?'에 대한 고민이 계속 됐다.그러던 중 회사 프로젝트에서 유지보수 해야할 업무(외주에서 진행하던)를 맡았고, 코드를 보는데 NextJS에서 React-query를 사용하고 있었다.그동안 상태관리는 Redux, Recoil,
(번역)Next.js 앱 라우터 마스터링: 애플리케이션 구조화를 위한 모범 사례
원문: https://thiraphat-ps-dev.medium.com/mastering-next-js-app-router-best-practices-for-structuring-your-application-3f8cf0c76580Next.js는 선도적인 Re
그거 아세요?(2탄) 개발자 도구에서 Toggle Device Toolbar로 반응형 화면이 확인이 안되는 거
지난 번 그거 아세요 1탄을 해결하고 뿌듯한 마음에 자수를 했다. 이게 무슨말이냐면 반응형(모바일)화면 개발을 동시에 해야했다. 그래서 media 쿼리를 적용했다. Toggle Device Toolbar로 반응형이 적용되지 않음을 확인했다. 하지만, 임의로 화면을 줄이면 어느 시점(내가 media 쿼리로 지정하지 않은 크기)에서 반응형이 적용된다. 차라...
그거 아세요? 크롬에서 폰트 스타일이 적용되지 않을 때 해결책.
프론트엔드를 선택한 이유1\. 화면을 구현하는게 재밌었다.2\. 화면을 구현하는게 자신있었다.하지만 화면 마크업을 하다 보면 CSS와 HTML이 전부가 아닐 때가 있다. 혼자 프로젝트를 하면 나와 타협해서 넘어갈 수 있지만, 그게 협업이고 업무일 때는 얘기가 달라진다.
[회고] 내가 그 날 toRefs를 사용한 이유를 찾아서.
api로 받아온 코드는 계속 바뀌는 값이라고 생각했다.받아온 데이터 중 '만료일' 값은 객체로 이루어진 데이터 중 1개 라고 생각했다.컴포넌트의 상태(state)가 바뀌면 자동으로 컴포넌트의 DOM을 변경하는 것자동으로 DOM을 변경하는게 어떻게 가능할까?전제조건: 자
프로그래머의 뇌를 다 읽고, 난 후의 내 뇌를 돌아보는 시간
입사 후 사내 개발자들과 책 1권을 정해서 일정 분량을 읽고, 그 생각을 교류하는 시간을 가져왔다(스터디라 쓰고, 친목이라 읽음). 첫번째 책은 프로그래머의 뇌 이걸 다 읽으면 내 뇌도 프로그래머의 뇌가 될 수 있겠지? 라는 기대로 읽었고, 마지막 챕터를 읽을 때 까
프로젝트 도둑을 잡았다.
일단 나: 사람을 잘 믿는 편임, 정이 많음 (좋은 사람이라는 뜻..), 하지만 내 기준에 '아니다' 싶을 땐 확실히 아니라고 말하는 편이다. 그래서 개인적으로 연락을해서 얘기할까? 한참을 고민했다.얼마전에 내 생일이었고 그걸 계기로 같이 교육받던 사람에게 안부인사
서버 사이드 렌더링(SSR: Server Side Rendering)은 뭐죠!
Client는 원하는 페이지를 Server에 요청Server는 요청받은 페이지의 데이터를 불러옴 그리고 요청받은 페이지의 완성된 .html을 생성반환브라우저는 렌더링이 완료된 페이지를 화면에 렌더링리액트 컴포넌트와 같이 자바스크립트로 작성되어 있는 페이지를 실제 HTM
[NEXT JS] 레이아웃 설정하는 방법
이 파일에서 전체적으로 반복되는 화면 구성을 설정예를 들면, 네비바 혹은 푸터 같은 것들 \_app.jsLayout.js{children} 으로 페이지 역할을 하는 컴포넌트들을 main 태그에 렌더링 시켜줌Layout 아래에 페이지들이 잘 렌더링 되는 것을 확인 가능레
[NEXT JS] 라우팅 기능에 사용되는 내장 훅
react에서는 라우팅 관련 라이브러리를 설치react-router-dom을 예로 들자면 useParams 등의 훅을 사용했음동적 라우팅: URL 일부를 매개변수로 사용하여 동적으로 페이지를 생성하는 기능쿼리 파라미터: URL에 추가 정보를 전달하기 위해 사용함수를 통
NextJS에서 페이지 라우팅 어떻게 하나요?(Page Router)
'/' 경로로 요청이 들어오면?pages의 index.js에 작성된 컴포넌트가 렌더링 됨'/about' 경로로 요청이 들어오면?pages이하의 about.js에 작성된 컴포넌트가 렌더링 됨'/post' 경로로 요청이 들어오면?post폴더 이하의 index.js에 작성된
React의 확장판이라고 하더라구(Next JS)
NextJS는 오픈소스 자바스크립트 프레임워크ReactJS는 오픈소스 자바스크립트 라이브러리기능 구현의 주도권이 누구에게 있는가? 프로그래머가 주도권을 갖으면 라이브러리 / 프레임워크가 주도권을 갖으면 프레임워크라이브러리 : 프로그래머가 원하는대로 구현하면 됨(무슨 도
리액트에서 페이지 라우팅?(react-router-dom)
페이지 라우징(Page Routing)이란? 사용자(user)가 특정 네이버 블로그에 접속을 하기 위해 Browser를 이용해서 WebServer에 주소를 요청했을 웹 서버가 적절한 브라우저를 반환해줌으로써 사용자가 원하는 페이지가 브러우저에 잘 렌더링되는 과정
최적화를 해야하는 이유와 최적화 hooks
유튜브를 켰다. 그런데, 로딩하는데만 5초, 10초 이상이 걸린다고 생각하면? '유튜브 고장났네...'싶고유튜브를 점점 떠나가겠지?엔지니어적으로나 서비스적으로나 최적화는 필수임코드 사이즈 줄이기폰트 사이즈 줄이기이미지 사이즈 줄이기페이지 로딩 속도 빠르게 하기5\. 불
git(+github) 필수 명령어
버전 관리 - 한 파일로 모든 버전으로 쓰고 싶어서 (버전관리는 대체 프로그램은 많음)협업 - 같은 파일을 동시에 작업하는 경우가 있음, 각각의 변경 사항을 한 파일에서 적용할 수 있음현재 브랜치는 main이고 (기존 master에서 main으로 브랜치명을 변경한 상태
useReducer 마이그레이션 전에 한 번 더 보고, 마이그레이션 해 봄
새로운 State를 생성하고, State를 업데이트 시키는 함수를 제공상태관리 로직을 컴포넌트 내부에 작성해야 함그래서 업데이트 시키는 상태관리 로직들이 복잡해지고, 길어지면 컴포넌트 내부에 상당히 많은 코드들을 작성해야 하고, 가독성이 너무나 떨어지게 됨컴포넌트 외부
React + vite로 TodoList 만들기(초기셋팅부터 시작)
Settings React Javascript Stack local start port: 5173 초기 파일 형태는 create-react-app으로 생성하는 것과 같음 assets와 public에 있는 svg파일을 삭제함 그리고 필요없는 다른 파일도 지웠음(이
오픈뱅킹API 실습(React + Express + MySql) A부터 한...T정도까지?(Z까지는 아님)
오픈뱅킹 API 활용일대기 준비1. 소스트리(Sourcetree) step1: git 설치하기 step2: 소스트리 설치하기 step3: 소스트리에서 git clone 3-1. url 에서 복제하기(깃 레파짓토리 주소) 
상태관리?state? 멈추고 싶어여. 멈추게 해주세요.
state는? = 변화하는 데이터?화면에서 <span style='background-color: - <span style='background-color: - 데이터의 호출이 <span style='background-color: - 리액트는 data