본문 바로가기

Frontend24

Javascript - Promise 콜백 지옥을 탈출하는 새로운 문법자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다.예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수(링크)로 이루어져 있다.비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에, 만일 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용했다. 콜백 함수란 비동기 작업이 완료되면 호출되는 함수의 의미로서, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업을 수행할 수 있다.. 2024. 12. 21.
Javascript - this this란?JS에서 실행 컨텍스트에 따라 다르게 바인딩되는 객체this는 함수의 블록 스코프 내에서 선언되어야 작동 cf) 실행 컨텍스트란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) }};console.log(group.title2); //undefinedgroup.title3(); // 1모둠  this의 기본 동작 원리'this'는 함수가 호출되는 방식에 따라 다르게 동작함- 일반 함수로 호출될 때: 전역 객체를 가리킴- 메소드로 호출될 때: 해당 메소드를 호출한 객체를 가리킴 왜냐.. 2024. 12. 21.
Javascript - Array의 map, reduce, forEach, filter 메소드 array.map()- 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어냄- 쉽게 말해, 맵 메서드로 맵핑해준다(매개변수로 함수가 들어가면 callback이라 함)let numbers = [1, 4, 9]let roots = numbers.map(function(num){ return Math.squrt(num)})//roots = [1, 2, 3]//numbers = [1, 4, 9]  array.reduce()- 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값 반환- 배열 축소의 원리로 작용. 즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정[0,1,2,3,4].reduce(function(acc.. 2024. 12. 21.
[kakao x goorm] 구름톤 12기 해커톤 후기(9oormthon in JEJU) 바쁜 취준을 이어가던 도중 구름톤 12기 해커톤 공고가 올라와서 지원했다. 구름톤이란? 구름톤은 카카오와 구름이 주최하는 제주에서 약 3박 4일동안 이루어지는 해커톤이다.  구름톤 in JEJUkakao x goorm 제주에서 펼쳐지는 해커톤9oormthon.goorm.io 오직 지원서 하나로 참가자를 선발하며, 포지션(기획자, 프론트엔드 개발자, 백엔드 개발자, 디자이너)을 선택하고 주어진 공통 질문에 답변해야 한다. 나는 프론트엔드 개발자로 지원했고, 이번 12기 질문은 다음과 같았다. 1. 구름톤 참여 동기 (300자) 2. 제주도가 직면한 사회문제는 무엇이라고 생각하나요? (300자) 3. 해당 문제를 해결하기 위한 서비스 아이디어 (500자) 4. 팀원과의 협업을 이끌어 나갈 나만의 장점 (30.. 2024. 12. 17.
캐시된 데이터로 인한 북마크 상태 미반영 문제 해결 STO 조각 투자 플랫폼을 개발하면서 주요 상품 현황에서 데이터들을 보여주고 있는데, 캐시된 데이터로 인해 북마크 상태가 반영이 제대로 안되는 문제를 해결한 경험을 적어보려 한다.   위 사진을 보면, 처음에 탭을 누를 때 API를 호출하고 한 번 호출을 하면 캐시된 데이터를 보여줘서 불필요한 API 호출을 방지해서 서버 호출 낭비를 최적화하였다. 전체 탭에는 부동산, 음악저작권, 한우, 미술품, 콘텐츠 총 5가지의 카테고리 중 하나의 카테고리가 나오게 되는데, 문제는 북마크를 추가했을 때 해당 데이터가 속한 특정 카테고리의 캐시만 무효화해야 하는데 그렇지 못해서 상태가 제대로 반영되지 않았다. 예로 전체 탭에 사진과 같이 음악저작권 데이터가 호출된 상태라고 가정해보면, 전체탭에서 데이터를 북마크한 후에.. 2024. 10. 21.
Refresh Token 프론트엔드 접근 방식 STO 조각투자 플랫폼 개발중에 있는데, 리프레시 토큰 관련해서 발생했던 오류 사항과 이를 해결한 방법을 정리하고자 한다.  우선 우리 프로젝트에서는 리프레시토큰을 다음과 같이 로그인을 하면 헤더의 Set-Cookie 를 통해 넘겨준다. 이렇게 넘겨받은 값은 로그인한 즉시, 쿠키탭에서 확인이 가능한데 왜인지 모르게 새로고침을 한 번 하고나면 그 토큰 값이 쿠키탭에서 사라졌다. 구글링을 정말 많이했는데 왜 사라지는지 관련해서 잘 찾을 수가 없었다. 저 상태에서 어세스토큰이 만료됐을 때, axios 인터셉터를 통해 리프레시토큰을 요청하면 사진처럼 리프레시토큰 호출 api가 계속해서 오류가 났다.401 에러가 뜬 이유는 내가 아래사진처럼 리프레시 토큰 요청을 잘못보내고 있었다. 내가 지정한 axiosInsta.. 2024. 9. 25.