📚 알쓸코잡 : 알아두면 쓸모있는 코딩 잡학지식! 1️⃣ 서론 지난 포스팅에서 는 자바로 만들어진 독립적인 프로그램이라고 말씀드렸습니다. 이러한 이유 때문에 Node 개발환경에서는 를 조작하여 사용하는것이 어렵고 이때문에 를 함께 사용한다고 말씀을 드렸습니다. 를 사용하면 각종 커맨드 명령어(Command line interface) 를 통해 를 조작이 가능하지만 명령을 내리기위한 코드가 길어지고 관리가 어렵다는 단점을 갖고 있습니다. 이러한 문제점을 해결하기 위해 이라는것이 존재하는데요, 이게 무엇이고 어떻게 사용하는지 지금부터 살펴보겠습니다. 2️⃣ openapi-generator 버전 관리 간혹 팀원들과 협업을 하다보면 동일한 Oepnapi spec 을 갖고 를 통해 생성된 결과물이 서로 다를때가 있습니다. 해당 결과물들을 자세히 보면 띄어쓰기 혹은 interface를 표현하는 방식정도가 달라져 있는것을 볼 수 있습니다. 동일한 Openapi spec 을 갖고 만들었지만…

📚 알쓸코잡 : 알아두면 쓸모있는 코딩 잡학지식! 1️⃣ 서론 프론트엔드 영역에서 웹애플리케이션을 개발하다 보면 종종 백엔드 API와의 통신을 필요로 합니다. 이때 API와의 통합 작업은 많은 시간과 노력을 요구합니다. 특히 타입스크립트를 사용하고 있다면, 해야할 작업이 훨씬 많아지게 되는데요. 백엔드로 데이터를 요청할때 어떠한 형태로 보내야할지, 데이터를 받을때 어떠한 형태로 받을지에 대한 인터페이스 정의가 필요해지기 때문입니다. 이러한 작업을 더욱 효율적으로 수행하고 일관성 있는 코드를 유지하기 위해서 OpenAPI Generator 를 활용하는 방법이 있습니다. 지금부터 OpenAPI Generator 가 무엇인지 알아보도록 하겠습니다. 2️⃣ OpenAPI generator 앞선 포스팅에서 OpenAPI 와 OpenAPI를 만든 OpenAPI Initiative에 대해서 언급한적이 있었습니다. OpenAPI Generator는 OpenAPI Initiative 에 의해 시작된 프로…

📚 알쓸코잡 : 알아두면 쓸모있는 코딩 잡학지식! 1️⃣ 서론 개발을 하면서 Open API 라는 용어를 많이 접하게 됩니다. 최근에 비슷하지만 다른 의미를 갖는 OpenAPI 라는 용어를 알게 되었는데요. 이번글에서는 이 둘의 차이점이 무엇인지를 이야기 해볼까 합니다. 2️⃣ Open API 와 OpenAPI ? (1) Open API Open API 는 단어의미 그대로 개발자라면 누구나 사용할 수 있도록 공개된 API를 말합니다. 대표적인 예시로 우편번호 API 나 공공API 포털에서 제공하는 것들이 있습니다. (2) OpenAPI 반면에 Open API 와 띄어쓰기 한개(“ “) 밖에 차이가 나지 않는 OpenAPI 는 무슨뜻일까요? OpenAPI 는 “OpenAPI Specification”의 약자로 OAS 라고도 불리며, API 설계와 문서화를 위한 오픈 표준 형식을 의미합니다. OpenAPI 는 RESTful API를 문서화하고 정의하기 위한 명세(Specification)를…

🤔 고민 웹사이트를 개발하다 보면 백엔드와 프론트 간의 개발 속도 차이로 인한 문제와, API 응답 데이터에 의존하는 로직에 대한 테스트 코드 작성이 어려운 문제 등이 자주 발생합니다. 이러한 문제들은 현재 진행 중인 개발에 집중하기 어렵게 만들어줄 뿐 아니라 중복 코드와 같은 불필요한 작업을 초래합니다. 따라서 이번 글에서는 각각의 문제들이 발생하는 원인과 해결책에 대해 자세히 살펴보겠습니다. 함께 읽어보세요! < 정리 > 백엔드와 프론트 간의 개발속도 차이로 인한 문제 백엔드와 프론트가 동시에 개발하면 발생되는 문제점 API 응답 데이터에 의존을 갖는 로직에 대한 테스트코드 작성 API를 호출하는 Custom hooks 혹은 Component 코드에 대한 테스트 코드 작성 1️⃣ 첫번째 고민 ( 백엔드와 프론트 간의 개발속도 차이로 인한 문제 ) 회사에서는 일반적으로 의 순서로 제품을 개발합니다. 하지만 실제로는 처럼 백엔드, 프론트엔드 개발이 동시에 진행되는 경우가 많습니다…

1️⃣ 리액트 컴포넌트의 Props 란 Props 는 Property의 약자로 리액트에서는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용하는 옵션을 일컫습니다. 상위 컴포넌트가 하위 컴포넌트에게 전달하기 때문에 단방향 데이터 흐름을 갖는다는 특성을 갖고 있습니다. 뿐만 아니라 부모 컴포넌트에서 넘겨준 값을 자식컴포넌트에서 받을때는 하나의 Object 형태로 받게 되며, 각 내부 값은 부모 컴포넌트에서만 수정이 가능하다는 특성을 갖고 있습니다. 2️⃣ 자바스크립트 의 Object 란 자바스크립트는 *객체(Object) 기반 프로그래밍 언어로 자바스크립트를 구성하는 대부분의 것들이 객체 로 이루어져있습니다. 원시형값(number, string, boolean…) 을 제외한 나머지 값**(함수, 배열, 객체, Set, Map, 정규 표현식) 은 모두 객체 구조**를 갖습니다. 객체(*Object) 와 원시타입의 근본적인 차이 중 하나는 참조에 의해 저장되고 복사된다는 점입니다. 특정 변수…

😃 서론 React를 사용하다 보면 특정 컴포넌트가 화면에 그려질때 API를 호출하여 데이터를 가져오는등 특수한 로직을 수행해야할때가 있습니다. 이럴때 우리는 일반적으로 useEffect를 많이 활용하게 됩니다. 이렇듯 useEffect는 특정한 컴포넌트가 랜더될때(그려질 때) 특수한 로직을 처리하기 위해 사용되는 React의 공식 hook중 하나입니다. useEffect는 첫 랜더시에만 특정 로직이 동작하게 할 수도 있지만 dependencies array 를 통해 특정 값들이 변화되었을때만 특정 로직이 동작하도록 할수도 있습니다. 이처럼 의도치 않은 상황에 변화를 만드는 함수를 Side effect function 이라고 하는데요, 공식적으로 제공되는 hook들 중에는 useEffect 말고도 useMemo, useCallback 등이 있습니다. 여기서 제가 집중에서 이야기를 해보고 싶은 내용은 dependencies array 를 통한 useEffect 내부 로직수행 과정입니…