profile
`나는 ${job} 개발자`
태그 목록
전체보기 (115)자바스크립트(18)웹 프론트엔드를 위한 자바스크립트 첫 걸음(10)React(7)JavaScript(7)타입스크립트(6)러닝타입스크립트(6)hooks(5)useMemo(5)react hook(5)리액트(5)객체(4)DOM(4)SSR(4)mysql(4)배열(4)useEffect(4)CSS(4)useState(4)최적화(4)useCallback(4)동기(3)html(3)hook(3)함수표현식(3)Class Component(3)프로퍼티(3)CSR(3)비동기(3)상태관리(3)Wavve(3)React.memo(3)spa(3)react router dom(3)함수선언식(3)useReducer(3)redux(3)함수(3)싱글쓰레드(2)내로잉(2)Carousel(2)push(2)styled components(2)구글로그인(2)클래스형 컴포넌트(2)context(2)Map(2)Function Component(2)API(2)유니언(2)반복문(2)함수형 컴포넌트(2)for문(2)swiper(2)MPA(2)setTimeout(2)component(2)React Component(2)Web API(2)State(2)node.js(2)nextjs(2)객체리터럴(2)바닐라js(2)ajax(2)JOIN(2)todo(2)복합연산자(1)heap(1)lifecycle(1)슬라이드(1)함수프로퍼티(1)oAuth(1)findIndex(1)length(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)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)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)
post-thumbnail

[회고] 내가 그 날 toRefs를 사용한 이유를 찾아서.

api로 받아온 코드는 계속 바뀌는 값이라고 생각했다.받아온 데이터 중 '만료일' 값은 객체로 이루어진 데이터 중 1개 라고 생각했다.컴포넌트의 상태(state)가 바뀌면 자동으로 컴포넌트의 DOM을 변경하는 것자동으로 DOM을 변경하는게 어떻게 가능할까?전제조건: 자

2024년 4월 9일
·
0개의 댓글
·
post-thumbnail

프로그래머의 뇌를 다 읽고, 난 후의 내 뇌를 돌아보는 시간

입사 후 사내 개발자들과 책 1권을 정해서 일정 분량을 읽고, 그 생각을 교류하는 시간을 가져왔다(스터디라 쓰고, 친목이라 읽음). 첫번째 책은 프로그래머의 뇌 이걸 다 읽으면 내 뇌도 프로그래머의 뇌가 될 수 있겠지? 라는 기대로 읽었고, 마지막 챕터를 읽을 때 까

2024년 1월 19일
·
2개의 댓글
·
post-thumbnail

프로젝트 도둑을 잡았다.

일단 나: 사람을 잘 믿는 편임, 정이 많음 (좋은 사람이라는 뜻..), 하지만 내 기준에 '아니다' 싶을 땐 확실히 아니라고 말하는 편이다. 그래서 개인적으로 연락을해서 얘기할까? 한참을 고민했다.얼마전에 내 생일이었고 그걸 계기로 같이 교육받던 사람에게 안부인사

2024년 1월 9일
·
2개의 댓글
·
post-thumbnail

서버 사이드 렌더링(SSR: Server Side Rendering)은 뭐죠!

Client는 원하는 페이지를 Server에 요청Server는 요청받은 페이지의 데이터를 불러옴 그리고 요청받은 페이지의 완성된 .html을 생성반환브라우저는 렌더링이 완료된 페이지를 화면에 렌더링리액트 컴포넌트와 같이 자바스크립트로 작성되어 있는 페이지를 실제 HTM

2023년 10월 11일
·
0개의 댓글
·
post-thumbnail

[NEXT JS] 레이아웃 설정하는 방법

이 파일에서 전체적으로 반복되는 화면 구성을 설정예를 들면, 네비바 혹은 푸터 같은 것들 \_app.jsLayout.js{children} 으로 페이지 역할을 하는 컴포넌트들을 main 태그에 렌더링 시켜줌Layout 아래에 페이지들이 잘 렌더링 되는 것을 확인 가능레

2023년 10월 11일
·
0개의 댓글
·
post-thumbnail

[NEXT JS] 라우팅 기능에 사용되는 내장 훅

react에서는 라우팅 관련 라이브러리를 설치react-router-dom을 예로 들자면 useParams 등의 훅을 사용했음동적 라우팅: URL 일부를 매개변수로 사용하여 동적으로 페이지를 생성하는 기능쿼리 파라미터: URL에 추가 정보를 전달하기 위해 사용함수를 통

2023년 10월 11일
·
0개의 댓글
·
post-thumbnail

NextJS에서 페이지 라우팅 어떻게 하나요?(Page Router)

'/' 경로로 요청이 들어오면?pages의 index.js에 작성된 컴포넌트가 렌더링 됨'/about' 경로로 요청이 들어오면?pages이하의 about.js에 작성된 컴포넌트가 렌더링 됨'/post' 경로로 요청이 들어오면?post폴더 이하의 index.js에 작성된

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

React의 확장판이라고 하더라구(Next JS)

NextJS는 오픈소스 자바스크립트 프레임워크ReactJS는 오픈소스 자바스크립트 라이브러리기능 구현의 주도권이 누구에게 있는가? 프로그래머가 주도권을 갖으면 라이브러리 / 프레임워크가 주도권을 갖으면 프레임워크라이브러리 : 프로그래머가 원하는대로 구현하면 됨(무슨 도

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

리액트에서 페이지 라우팅?(react-router-dom)

페이지 라우징(Page Routing)이란? 사용자(user)가 특정 네이버 블로그에 접속을 하기 위해 Browser를 이용해서 WebServer에 주소를 요청했을 웹 서버가 적절한 브라우저를 반환해줌으로써 사용자가 원하는 페이지가 브러우저에 잘 렌더링되는 과정

2023년 10월 9일
·
0개의 댓글
·
post-thumbnail

최적화를 해야하는 이유와 최적화 hooks

유튜브를 켰다. 그런데, 로딩하는데만 5초, 10초 이상이 걸린다고 생각하면? '유튜브 고장났네...'싶고유튜브를 점점 떠나가겠지?엔지니어적으로나 서비스적으로나 최적화는 필수임코드 사이즈 줄이기폰트 사이즈 줄이기이미지 사이즈 줄이기페이지 로딩 속도 빠르게 하기5\. 불

2023년 10월 6일
·
0개의 댓글
·
post-thumbnail

git(+github) 필수 명령어

버전 관리 - 한 파일로 모든 버전으로 쓰고 싶어서 (버전관리는 대체 프로그램은 많음)협업 - 같은 파일을 동시에 작업하는 경우가 있음, 각각의 변경 사항을 한 파일에서 적용할 수 있음현재 브랜치는 main이고 (기존 master에서 main으로 브랜치명을 변경한 상태

2023년 10월 5일
·
0개의 댓글
·
post-thumbnail

useReducer 마이그레이션 전에 한 번 더 보고, 마이그레이션 해 봄

새로운 State를 생성하고, State를 업데이트 시키는 함수를 제공상태관리 로직을 컴포넌트 내부에 작성해야 함그래서 업데이트 시키는 상태관리 로직들이 복잡해지고, 길어지면 컴포넌트 내부에 상당히 많은 코드들을 작성해야 하고, 가독성이 너무나 떨어지게 됨컴포넌트 외부

2023년 10월 4일
·
0개의 댓글
·
post-thumbnail

React + vite로 TodoList 만들기(초기셋팅부터 시작)

Settings React Javascript Stack local start port: 5173 초기 파일 형태는 create-react-app으로 생성하는 것과 같음 assets와 public에 있는 svg파일을 삭제함 그리고 필요없는 다른 파일도 지웠음(이

2023년 10월 1일
·
0개의 댓글
·
post-thumbnail

오픈뱅킹API 실습(React + Express + MySql) A부터 한...T정도까지?(Z까지는 아님)

오픈뱅킹 API 활용일대기 준비1. 소스트리(Sourcetree) step1: git 설치하기 step2: 소스트리 설치하기 step3: 소스트리에서 git clone 3-1. url 에서 복제하기(깃 레파짓토리 주소) ![](https://velog.vel

2023년 9월 18일
·
4개의 댓글
·
post-thumbnail

상태관리?state? 멈추고 싶어여. 멈추게 해주세요.

state는? = 변화하는 데이터?화면에서 <span style='background-color: - <span style='background-color: - 데이터의 호출이 <span style='background-color: - 리액트는 data

2023년 8월 28일
·
0개의 댓글
·
post-thumbnail

useReducer나 Redux가 싫다는게 아냐. Recoil이 더 나을거 같단 얘기지(초간단이라고 해놓고 초간단 아님 안 초간단임 어려움)

Recoil > ### 페이스북이 개발한 전역상태관리 라이브러리 근데, 그거알죠? React를 개발한 곳 = facebook 거기에서 상태관리를 편리하게 도와주려고 개발한 상태관리 라이브러리가 있다?! 외않씀?? React문법과 유사한 부분이 많음 동작은 어떻게 합

2023년 8월 28일
·
0개의 댓글
·
post-thumbnail

라이브러리 없이 리액트에서 구글 로그인 구현하기 !

그래서 간단하게 로그인 버튼을 만들어서 구글 로그인을 구현하려고 한다.1단계: 우선, https://console.cloud.google.com/ 에 접속2단계: 새 프로젝트 생성하기2-1. 새 프로젝트 이름 (마음대로 해도됨)2-2. 클라이언트 ID, 클라이

2023년 8월 25일
·
0개의 댓글
·
post-thumbnail

소셜로그인에 관하여(OAuth 2.0)

(거의 아모레의 노예라고 할 수 있음)그러니깐 👧🏻 '<span style='background-color: <span style='background-color: Resource owner(자원 소유자-사용자)Client(서비스 제공자)Authoriza

2023년 8월 24일
·
0개의 댓글
·
post-thumbnail

fetch()로 공공 api 받아오기 해보쟈 !

우선, 공공데이터포털에서 접속, 회원가입 + 로그인하기 !키워드로 검색해도 좋고테마별로 구분된 곳에서 찾아봐도 좋고인기/최신테마에서 찾아봐도 좋음예시로 테마별에서 '교육'을 선택함세부조건을 <span style='background-color: 원하는 데이터에서

2023년 8월 23일
·
0개의 댓글
·
post-thumbnail

[책리뷰] 그림으로 이해하는 네트워크 구조와 기술-네트워크, 쉽고 재밌게 시작하자!

'나, 비전공자. 네트워크? 그게뭔데. 먹는건가 '여기서 <span style='background-color: - 여기서 <span style='background-color: - 여기서 <span style='background-color: -

2023년 8월 22일
·
0개의 댓글
·