profile
공부하는거 정리
post-thumbnail

AOP를 활용한 로그 추적 기능

aop를 활용하여 메소드 실행중 슬로우 쿼리와 오류 발생시 해당 상황을 로그테이블에 저장하는 기능을 만들어 보았다.Service 클래스에 있는 특정 기능에 sleep을 걸고 메소드를 실행하였다. log가 잘 저장되었을까엣 저장 실패Connection is read-on

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

Next-Auth 소셜 로그인 [구글]

NextJS 에서 next-auth를 이용하면 google , facebook , naver 같은 소셜 로그인 기능을 쉽게 만들 수 있어요.next 13버전, next-auth 4버전을 사용했습니다..env 파일을 이용해서 google 클라이언트 키와 시크릿키를 저장합

2023년 3월 13일
·
0개의 댓글
·

CSS 선택자

띄어쓰기는 자손\> 는 첫번째 자식인접 형제 선택자 A + B A 근접 B만A 뒤에 따라오는 B는 전부 A ~ B자식 요소중 포커스에 걸리면

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

자바스크립트 in 연산자

유투브 보다가 팁 발견출처 : 제로초 : 잘 모르는 "간단한" 자바스크립트 문법 5가지

2022년 7월 5일
·
0개의 댓글
·
post-thumbnail

React 인라인 스타일의 단점

style을 적용할 때 인라인 스타일을 이용할 때가 많았다 (편하니까)이런식으로..하지만 인라인식으로 작성하게 되면 불필요한 리랜더링을 하게 된다. 이유는?결론부터 말하면 {} === {} 가 false 이기 때문!리액트의 버추얼돔이 검사를 하면서 어디가 달라졌는지 찾

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

Redux 응용

Redux 어떻게 써야 잘 썼다고 소문이 날까? 라는 글을 읽던중Presentational & Container 컴포넌트는 이제 그만(https://velog.io/@velopert/using-redux-in-2021직접 만들어보니 프리젠테이션과 컨테이너를 분

2022년 4월 28일
·
0개의 댓글
·
post-thumbnail

리덕스 개념 정리

리덕스 개념정리1\. 액션상태의 변화가 필요하면 액션이 발생되는데 액션은 하나의 객체로 표현됨액션 객체는 type 필드를 꼭 갖고 있어야함. 어떤 동작인지 알려주는? 그런느낌액션 생성 함수말 그대로 액션 객체를 만들어 주는 함수, 상태변화를 할 때마다 매번 액션 객체를

2022년 4월 26일
·
0개의 댓글
·
post-thumbnail

Git 최초 설정

Git 전역으로 사용자 이름과 이메일 주소를 설정GitHub 계정과는 별개git config --global user.name "(이름)"ex) git config --global user.name "hohoho"git config --global user.email

2022년 4월 16일
·
0개의 댓글
·
post-thumbnail

usePromise 커스텀 Hook

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

React Router

Route란 컴포넌트로 특정 주소에 컴포넌트를 연결하는것예시1에서 /abc를 들어가면 두 컴포넌트가 다 나오는데, /abc 경로가 /에도 일치하기 때문이를 수정 하려면 home을 위한 컴포넌트를 사용할 때 exact라는 props를 true로 설정 해야함Link는 클릭

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

React 최적화 어떤 방법이 있을까

state가 변경되면서 컴포넌트가 리렌더링됨부모 컴포넌트 리렌더링 -> 자식컴포넌트 리렌더링 -> 그 안에 무수한 컴포넌트 리렌더링리렌더링을 안 해도 되는 상황인데 모두 리렌더링되서 느린것함수형 컴포넌트에서는 컴포넌트를 만들고 나서 React.memo 함수로 감싸주면

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

React Hooks

useState useState useState는 가장 기본적인 Hook 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줌 const [value, setValue] = useState([상태의 기본값]);

2022년 4월 7일
·
0개의 댓글
·

React 라이프사이클 메서드

Will 접두사 : 어떤 작업 전에 실행되는 메소드Did 접두사 : 어떤 작업 후 실행되는 메소드마운트 페이지에 컴포넌트 등장업데이트 컴포넌트 업데이트언마운트 컴포넌트 소멸DOM이 생성되고 웹 브라우저상에 나타나는 것메서드 호출 단계1\. constructor : 컴포

2022년 4월 5일
·
0개의 댓글
·

React 이벤트 핸들링

함수가 호출될 때 this는 호출부에 따라 결정됨클래스의 임의 메소드가 특정 HTML 요소의 이벤트로 등록되는 과정에서메소드와 this의 관계가 끊김이 때문에 임의 메소드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해 메소드를 this와 바

2022년 4월 5일
·
0개의 댓글
·

화살표 함수 this

화살표 함수는 ES6 문법에서 함수를 표현하는 새로운 방식하지만 기존의 function을 다 대체할 수 없다.사용 용도가 다르기 때문.일반 함수의 this는 자신이 종속된 객체를 가리키고, 화살표 함수의 this는 자신이 종속된 인스턴스를 가리킨다.

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

HTTP 웹 기본 지식 #6

#6 HTTP 상태코드 상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 • 1xx (Informational): 요청이 수신되어 처리중 • 2xx (Successful): 요청 정상 처리 • 3xx (Redirection): 요청을 완료하려면

2022년 3월 31일
·
0개의 댓글
·
post-thumbnail

HTTP 웹 기본 지식 #5

#5 HTTP 메서드 활용 HTTP API 설계 5.1 HTTP 메서드 활용 5.1.1 클라이언트에서 서버로 데이터 전송 쿼리 파라미터를 통한 데이터 전송 GET 주로 정렬 필터 (검색어) 메시지 바디를 통한 데이터 전송 POST, PUT, PATCH

2022년 3월 30일
·
0개의 댓글
·
post-thumbnail

HTTP 웹 기본 지식 #4

#4 API URI 설계 HTTP 메서드 HTTP 메서드의 속성 4.1 API URI 설계 URI 설계의 가장 중요한 것은 리소스를 식별하는 것 리소스 = 자원 회원등록, 회원수정, 회원조회는 리소스가 아님 리소스는 회원 그 자체 회원이라는 리소스만 식별하면 됨 ->

2022년 3월 30일
·
0개의 댓글
·
post-thumbnail

HTTP 웹 기본 지식 #3

#3 HTTP 기본 클라이언트 서버 구조 무상태 프로토콜 (Stateless) 비 연결성 HTTP 메시지 3.1 HTTP 기본 HyperText Transfer Protocol 모든게 전송가능 HTML, TEXT , IMAGE, 음성, 영상, 파일 , JSON,

2022년 3월 29일
·
0개의 댓글
·
post-thumbnail

HTTP 웹 기본 지식 #2

URI 웹 브라우저 요청 흐름

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