All
9 posts
openapitools.json 활용편

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

July 05, 2023
블로그
알쓸코잡
라이브러리
OpenAPI-generator 와 OpenAPI-generator-cli

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

June 27, 2023
블로그
알쓸코잡
라이브러리
Open API 와 OpenAPI 란?

📚 알쓸코잡 : 알아두면 쓸모있는 코딩 잡학지식! 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)를…

June 22, 2023
블로그
알쓸코잡
MSW - 더 나이스한 목킹을 위한 고민

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

June 11, 2023
블로그
라이브러리
TODO LIST - 2023 상반기

💻 개발관련 할일 매드업 인턴기 블로그로 작성하기 구름 인턴기 블로그로 작성하기 Tag-tools 개발기 블로그로 작성하기 OpenAPI 개념설명 블로그 작성하기 OpenAPI generator 개념설명 블로그 작성하기 Openapi-tools 활용기 블로그로 작성하기 독서감상 블로그로 작성하기 일상관련(취미) 블로그로 작성하기 node fetch api 를 이용한 데이터 streaming 방법정리 공부할것 서버로부터 비동기 데이터를 프론트에서 잘 받아 활용하는 방법 web rtc 혹은 web socket 과 같은 기술들을 살펴볼 것, 더 가벼운 방법은 없는지도… PWA를 활용한 알림메시지 전달방식 공부하기 개발 아이디어 Flutter로 간단한 토이프로젝트를 해볼까나? 자주 사용하는 Es lint config 만들기 참고링크 🏃 ‍일상관련 읽고싶은 도서목록 어른의 대화법 역행자 익스트림 프로그래밍 함께 자라기 💻 개발관련 할일 공부할것 개발 아이디어 🏃 ‍일상관련 읽고싶은 도서목록

June 11, 2023
할일
React - 리액트 컴포넌트 Props 와 Object

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

May 03, 2023
블로그
React
주간 일상공유 - 2024 03 마지막주

개발일상 플루터 스터디 매주 플루터 스터디를 진행하고 있습니다. 다트라는 언어가 자바스크립트랑 비슷하다보니 학습에는 큰 어려움은 없는것 같아요. 물론, 엥? 싶은 문법들이 종종 보이긴 하지만요 🤣 최근에 개인적인일로 다이어트를 하게되면서 식단관리 캘린더를 만들면 재밌을것 같다 생각이 들었어요.. 그래서 기획 및 제작하여 사용해보려고 합니다 ㅎㅎ 해당 앱 제작기 및 결과는 다른 포스팅으로 찾아뵙겠습니다. ( 올릴게 많다 많아 😇 ) 디자인시스템 그 외로는 팀 내 다자인시스템에 애정을 쏟고 있습니다. 저희 디자인 시스템은 Vite + React + Typescript 환경에서 Radix 라는 프레임워크를 이용해서 개발하고 있는데요, 디자이너와 긴밀하게 소통하면서 기초 컴포넌트를 만들고 이들를 응용하여 실제 화면에 적용하고 있습니다. 만드는 과정에서 디자이너 관점에서의 새로운 시야도 얻고, 퍼블리싱 스킬도 향상되는것 같아 큰 재미를 느끼고 있습니다. 사생활 남한산성 제 주도하에 회사 사…

March 31, 2023
일상
주간 일상공유 - 2024 03 넷째주

⚠️ 주의 ⚠️ 블로그 주인의 나태함으로 인해 이번글은 다소 근황내용이 많습니다. 그간 개발 근황 팀이동 & 승진 입사하고 함께 개발하던 팀원들을 떠나 같은 회사내 다른 개발팀으로 이동하게 되었습니다. 지금팀의 프론트 리더님께서 저를 너무 좋게 평가해주셨고, 좋은 기회로 지금의 팀에서 새롭고 또다른 개발경험을 할 수 있게되었습니다. 네, 별일은 아니지만 승진을 했습니다 😊. 사실, 개발에 대한 애정 혹은 업무에 대한 열정은 승진 전후로 달라진것이 없습니다. 여전히 뜨거운것 같아요. 하지만 승진에 따른 저를 향한 기대감, 신입개발자들과 함께할 개발경험 때문인지 전보다 큰 책임감을 느끼고 있습니다. 이제는 코드 뿐 아니라 업무태도, 동료와 잘 소통하는 방법에도 신경을 더 쓰게되는것 같아요. 🧐 스크럼마스터 지금 회사는 에자일 개발 방법론을 사용하고 있는데요, 올해 팀내에서 3분기 스크럼마스터 포지션을 맡게 되었습니다. 평소에도 에자일에 관심이 있었는데, 이완 한번 맡은 포지션 열심히 해보…

March 22, 2023
일상
React.useEffect 와 dependencies Array

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

February 23, 2023
블로그
React