- async await VS Promise.all 언제 무엇을 써야할까? 비동기 처리를 하다 보면 자연스럽게 async / await을 쓰게 된다.그런데 막상 여러 API를 동시에 호출해야 하는 상황이 오면 고민이 생기는데.."그냥 await을 여러번 쓰면 되는 거 아닌가?" 결론부터 말하면 된다.근데 느리다.아래 async / await 예제 코드를 보자.const fetchData = async (userId) => { const user = await getUser(userId); const posts = await getPosts(userId); const friends = await getFriends(userId); return { user, posts, friends };}; getUser > getPosts > getFriends 순.. 2026.04.23
- React에서 export const vs const 후 export — 차이점과 실무에서의 선택 React + TypeScript 프로젝트를 앞두고 공부하다보니 컴포넌트를 export하는 방식이 헷갈렸다. const Header = () => {} export { Header }; 와export const Header = () => {} 이 두 방식은 과연 같은 걸까? 🤔 1️⃣ 두 방식의 공통점둘 다 named exportimport 방식 동일import { Header } from './Header';React 렌더링 결과 동일번들 결과 차이 없음기능적으로는 완전히 동일 2️⃣ 실제 차이가 나는 부분🔹 선언과 export의 가독성export const Header = () => {}선언과 동시에 export“외부로 공개되는 컴포넌트”임이 즉시 보임코드 스캔이 쉬움const Header = .. 2026.01.08
- accessToken / refreshToken(React with Zustand) 추후 실무에 투입된 내가 보려고 쓰는 게시글 Vue건 React건 상태관리를 위해 store를 사용하는데, 로그인 정보 같은걸 새로고침 하면 리로드 되는 이슈로 인해persist라는 옵션을 사용하게된다.근데 이 persist는 아시다시피 보안이슈가 있음.왜냐면 localStorage에 저장되는 거라 보안에 취약하기 때문이다. 그래서 token 같은 경우는 HttpOnly Cookie로 처리하게 되는데, 아래 예시는 accessToken은 js메모리 기반으로 저장하고, refreshToken은 spring 쪽에서 cookie에 저장해서 처리한다는 가정하에 미리 작성한 예시코드이다. Auth Store (메모리 기반 access token)// stores/authStore.tsimport { crea.. 2026.01.08
- 내가 보려고 만든 게시글(JWT 로그인버전 소스코드 분석) 로그인 정보를 클라이언트에서 받아와 처리하는 소스코드다.실무에서 자주 쓰지 않았기 때문에, 복기할 겸 정리함 AccountController.java @PostMapping("/api/account/login") public ResponseEntity Login(@RequestBody Map params, HttpServletResponse res) { Member member = memberRepository.findByEmailAndPassword(params.get("email"), params.get("password")); if (member != null) { JwtService jwtService = new JwtServiceImpl().. 2025.04.24
- JPA 에러 로그 확인 방법(InvocationTargetException) JPA를 사용하던 중, 프론트쪽에서 모든 데이터가 정상적으로 들어오고 있음에도계속 InvocationTargetException 에러를 뱉어냈다. run 탭에 로그도 안찍히고 답답하던 찰나,src > main > resources > application.properties에 아래 한 줄 추가해 주니까run 탭에서 그제야 어떤 에러인지 제대로 보였다. spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true DB설정이 UTF-8이 아닌 다른걸로 설정되있어서 발생했던 에러였다..2시간만에 에러 수정!!!!!!!!!!!!!!! 2025.04.23
- 자바스크립트에서 this란? 🔍 this란?자바스크립트에서 "누가" 실행했는지를 가리키는 키워드다.기본적으로는 window를 나타낸다. 웹을 켜고 콘솔창에서 this를 입력하면 window 관련정보가 출력된다. 예를 들어서어떤 객체(Object) 안에서 함수를 실행하면, 그 함수 안의 this는 그 객체 자신을 가리킨다. const student = { name: 'ashley', sayHello: function () { console.log(this.name + ' 안녕!'); }};student.sayHello(); // 👉 "ashley 안녕!" (this는 student를 가리킴) 익명 함수에서 this VS 화살표 함수에서 this 익명함수(function)const person = { na.. 2025.04.11