🌊 Minju DevLog 🌊 Minju DevLog

전체 글

• 검증된 UI 패턴을 이용해 리액트 어플리케이션 만들기

  카테고리 없음 2024. 2. 7. 17:01

  https://martinfowler.com/articles/modularizing-react-apps.html#ApartFromTheUserInterface 위 글을 읽고 번역 및 학습한 내용이다. 이 글의 제목에서 ‘리액트 어플리케이션’이란 표현을 사용했지만, 사실 리액트 어플리케이션이라는 것은 없다. 자바스크립트 혹은 타입스크립트로 작성하고 리액트를 뷰를 그리기 위해 사용한 프론트엔드 어플리케이션이 있을 뿐이다. 종종, 사람들은 리액트 컴포넌트나 훅스에 다양한 것들을 욱여넣어 어플리케이션이 돌아가도록 한다. 이렇게 덜 정리된 구조들은 작은 어플리케이션이나 비즈니스 로직이 많지 않을 때에는 괜찮을 수 있다. 그러나, 요즘같이 더 많은 비즈니스 로직들이 프론트엔드로 넘어온 시점에서는, 모든것을 컴포넌트..

  Read More
• Nextjs 에서 fetch 커스텀하여 사용하기(feat. 이중 화살표 함수)

  카테고리 없음 2024. 2. 4. 19:50

  지난번에 https://minju-k.tistory.com/15 에서 Next.js 는 다양한 캐싱 옵션을 가지고 있는 fetch를 이용하길 권장하는 것을 알아보았다. 이 글에서는 그래서 어떻게 프로젝트에 fetch를 사용하면서도 axios를 쓸 때처럼의 이점을 누리도록 했는지 글을 써보기로 한다. 만들 때에는 아래에 레퍼런스로 걸어놓은 return-fetch 라이브러리를 참고하였다. axios는 fetch에 반해 다음과 같은 이점을 가지고 있다. - 기본적으로 데이터를 별도 serialize, deserialize 할 필요가 없이 객체 형태로 바로 사용할 수 있다. - baseUrl을 설정할 수 있다. - default header를 설정할 수 있다. - request, response interce..

  Read More
• axios와 fetch, 그리고 Next는 왜 fetch 사용을 권장할까?

  카테고리 없음 2024. 1. 14. 23:42

  최근에 회사에서 Next14로 새로운 프로젝트를 시작하게 되면서, 공식문서에서 설명하고 있는 native fetch API를 확장한 fetch를 사용할지, axios 라이브러리를 사용할지에 대한 고민에 부딪히게 되었다. 맨 처음에 fetch를 사용하다가 axios를 사용하게 되었을 때, 정말 정말 편리함을 느꼈었는데, 둘 사이에 정확히 어떤 차이가 있는지 자세히 알지 못해 기술 결정을 못 내리고 있는 자신을 발견하게 되었다. 그리하여 둘 사이 차이점을 살펴보기로 했다. Axios란 ? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.j..

  Read More
• hooks는 어떻게 closure을 사용하고 있을까

  카테고리 없음 2023. 6. 9. 18:39

  hooks가 클로저를 사용한 거라던데, 그게 무슨의미일까요? 라는 질문에 답하지 못한다면 다음 영상을 볼 것을 추천한다. 클로저부터 리액트 내부 동작을 형상화한 라이브코딩을 보며 단계별로 리액트 훅의 내부 원리를 이해하기가 좋았다. 원문은 블로그로 되어 있는데, 검색하면 바로 나오지만 미래의 나를 위해 내 언어로 다시 한 번 정리하고자 한다. 클로저란? 먼저 클로저에 대해서 질문을 통해서 정리하고 가보자. 1. 클로저란? 함수와 함수가 선언된 어휘적 환경의 조합이다. 2. 클로저를 언제 사용하는가? 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고, 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 추가로, 부분적용 또는 커링함수에 사용된다. 3. 클로저에서 함수가 실행 종료되었음에도 변수..

  Read More
• CORS와 SOP, 해결방법은?

  카테고리 없음 2023. 3. 20. 01:20

  CORS에 대해 알아보기 전, 먼저 SOP를 알아봐야 한다. CORS란 결국 SOP가 지켜지지 않았을 때 발생하는 오류이기 때문이다. SOP (Same-Origin-Policy) SOP란 말 그대로 동일한 출처에서만 리소스를 공유할 수 있다는 규칙을 가진 정책이다. 두 URL간의 Scheme, Host, Port중 하나라도 다르면 SOP를 위반한 것이 된다. 아래 예시로 같은 Origin인지 조금 더 알아보자 나의 블로그 출처인 https://minju-k.tistory.com/와 출처를 한번 비교해보자. CORS (Cross-Origin Resource Sharing) CORS는 교차 출처 리소스 공유라고 해석할 수 있는데, 교차 출처라는 것은 결국 같은 출처가 아니라는 것이다. 앞서 살펴본 SOP에 ..

  Read More
• 쿠키와 세션, 그리고 쿠키의 옵션들에 대하여

  카테고리 없음 2023. 3. 19. 22:51

  1. 쿠키란? 쿠키는 사용자의 브라우저에 저장되는 작은 문자열로 최대 4KB까지 저장될 수 있다. HTTP는 무상태성(stateless)이란 특징을 가지고 있는데, 따라서 서버는 두 요청이 같은 브라우저에서 오는지 알 수 없다. 따라서 초기 웹 생태계에서는 이를 해결하기 위해 한 요청에 대한 response로 어떤 토큰을 돌려주고 다음 요청시에 해당 토큰을 같이 보내는 방법으로 이런 무상태성을 해결해 왔던 것이다. 예를 들어, 로그인 요청을 통해 한번 네이버에 인증이 이뤄지고 나면, 나는 네이버 내 설정 페이지도 들어갈 수 있고 여러 내가 가입한 카페에도 들어갈 수 있는 등 내 정보를 가지고 활동할 수 있는데, 인증 후 서버에서 돌려받은 정보를 가지고 매 요청에 실어 보내고 있기 때문에 서버가 이 요청을..

  Read More
• 클래스와 생성자 함수의 차이

  카테고리 없음 2023. 2. 27. 01:20

  TLDR; 클래스와 생성자 함수의 차이 클래스는 생성자 함수보다 엄격하며, 생성자 함수에서는 제공하지 않는 기능도 제공한다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행된다. 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다. 클래스의 contructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 Enumerable의 값이 false다. 즉, 열거되지 않는다. 정적 메서드와 프로토타입 메서드의..

  Read More
• 화살표 함수는 일반 함수와 무엇이 다른가

  카테고리 없음 2023. 2. 26. 18:34

  TLDR; 함수선언문과 함수표현식의 차이 함수 선언문은 함수 호이스팅이 일어난다. 즉, 런타임 이전에 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다. ( 변수 호이스팅과 다르게 undefined가 아니라 함수 객체로 초기화된다.) 반면, 함수표현식은 변수 호이스팅이 발생하여 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 화살표 함수와 일반 함수의 차이 화살표 함수는 함수 자체의 this 바인딩을 갖지 않아서, 화살표 내부 함수에서 this를 참조하면 상위 스코프의 this를 그대로 참조한다. 이를 lexical this라고 한다. 화살표 함수는 constructor가 없기 때문에, new와 함께 호출할 수 없다. 즉 생성자 함수로서 사용할 ..

  Read More