개발

포스팅 계기 🙋 JSON과 XML의 차이에 대해 설명하라. 예전 회사의 면접 때, Pre Test 문제 중 하나였다. 사실 그 때 뭐라고 적었고 면접 때도 그걸 설명하는데 뭐라고 말했는지도 기억난다. (조금 부끄러워진다.. ☺️ 어떻게 합격했지❓ 🤔) 그래서 이번에 자세하게는 못하더라도 누구에게 정확하게 설명할 수 있는 정도는 정리하려고 한다. 잠깐 그 때 대답했던 내용을 되짚어보자.. 🌝 JSON과 XML의 차이가 … 더 읽기

0. 들어가기 전 🌝 추석 연휴가 끝나고 쓰는 포스팅! 정신없이 코드를 작성하고 나서 💻 나중에 보면 굉장히 읽기 어려운 코드가 되어 있다. 심지어 요즘은 IDE가 좋아져서 많이 괜찮아졌지만, 실수로 빠뜨린 세미콜론, 잘못 입력한 키워드 등 말썽인 부분이 많다.(특히, 프론트엔드 개발은 더더욱..) 그래서 이번 포스팅에서는 개발할 때 신경써야 할 이런 부분들을 최소화하고 자동화할 수 있는 방법에 대해서 … 더 읽기

AJAX AJAX는 Javascript Library 중 하나이며, Asynchronous Javascript And Xml의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침하지 않고, 필요한 데이터만 비동기적으로 가져오는 방식이다. 이 경우 Json 이나 XML 형태로 데이터를 주고 받는다. 보통은 JQuery의 AJAX를 이용해서 GET, POST 등의 요청을 하는 식으로 많이 사용한다. CORS CORS는 Cross Origin Resource Sharing의 약자로, 도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘이다. 웹페이지는 Image(<img />), css(<link />), script(<script />), Iframe, 동영상에 대해서는 자유롭게 가져올 수 있다. 하지만, 스크립트 태그 내에서 특정한 … 더 읽기

Intro REST API 설계원칙 중 마지막으로 Metadata와 Representation에 대한 내용에 대해 정리한다. Metadata는 API 통신을 할 때의 요청 또는 응답의 정보를 말한다. 그리고 Representation은 API 응답을 표현하는 형태를 말한다. Metadata 설계 Request Headers Response Headers Metadata의 설계 원칙 HTTP Header의 역할 📚 Rule: Content-Type을 사용해야 한다. 📚 Rule: Content-Length를 사용해야 한다. 📚 Rule: Last-Modified는 Response에 사용해야 한다 📚 … 더 읽기

Intro 이전 포스팅에서 REST API의 배경과 정의에 대해서 정리했었다. 이번 포스팅부터는 REST API를 설게하는 원칙에 대해서 정리하고자 한다. 사실 “설계 원칙”이라고 해서 완벽히 따라야 하는 표준은 아니다. 이 책의 저자는 사실상 표준, Defacto라고 말하고 있기 때문이다. 많은 개발자들이 오랫동안 이런 식으로 설계하여 써왔었기 때문에 어느 정도(?) 검증된 것이라고 생각하면 된다. 이번 포스팅에서는 REST API의 URI와 HTTP에 대한 설계 원칙을 정리한다. URIs … 더 읽기

Intro 앞으로 REST API에 대한 내용으로 포스팅을 하려고 한다. REST API가 무엇이고, 나오게 된 배경 그리고 더 나아가 설계원칙에 대해서 다루고자 한다. 포스팅은 아래 도서(REST API Design Rulebook)를 참고하여 진행한다. 이번 포스팅에서는 REST API의 정의와 배경에 대해서 정리한다. 용어 정리 앞으로 자주 나오게 될 용어에 대해서 간단하게 정리한다. URI (The Uniform Resource Identifier) HTTP (The HyperText Transfer Protocol) HTML (HyperText Mark-up Language) API (Application Programming Interfaces) REST … 더 읽기

Intro 서비스 오픈을 앞두고 썼던 회고 글이 엊그제 같은데 거의 한 달이 다 되어 간다. 진짜 서비스 오픈 날인 2020년 7월 25일 전까지는 상용 서버 테스트만 했었다. 단순히 BackOffice 개발이었기 때문에 성능에 대해서 크게 고려를 하지 않았다. (왜냐면 사용자가 기껏해야 5명도 안될테니까 😹) 문제의 발생 (2020.07.30) 서비스 오픈 행사(2020.07.25)가 잘 마무리 되었고, 서비스에 이상이 없었다. … 더 읽기

(아래 회고는 2023년 8월 26일에 작성되었습니다.) 이제 곧 있으면, 2~3개월 동안 진행한 ‘마음을 담다 -목소리 찾기-‘ 프로젝트가 상용 오픈을 앞두고 있다. 물론 이 글을 쓰는 지금도 열심히 개발하고 있다. 오픈되고 나서부터 한 달 동안은 계속 잡고 있어야 할 듯하지만, 아쉬웠던 점을 위주로 회고를 하려고 한다. 내가 맡은 역할 이 프로젝트에는 사업 부서를 비롯해 여러 개발자들이 … 더 읽기

1. VSCode Extension 설치 ESLint Prettier 2. 설정 커스터마이징 package.json … “eslintConfig”: { “extends”: [ “airbnb”, “prettier” ], “parser”: “babel-eslint”, “rules”: { “react/jsx-filename-extension”: 0, “import/no-named-as-default”: 0, “import/no-named-as-default-member”: 0, “import/no-unresolved”: 0, “import/prefer-default-export”: 0, “no-underscore-dangle”: 0, “no-console”: 0, “react/forbid-prop-types”: 0 }, “env”: { “browser”: true } }, 3. VSCode 설정 & Prettier 포매팅 설정 기본 Javascript 포매팅 … 더 읽기

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다. redux는 정의된 Action과 Reducer에 의해 구독하고 있는 컴포넌트에 state를 전달하게 된다. 1) store/modules/ 폴더에 파일 생성 or 만드려는 reducer와 관련된 파일에 작성 2) action type, action creator, initial state, reducer 작성 import { createAction, … 더 읽기