본문 바로가기

프로그래밍 개발247

React Native - 작동원리 그리고 UI 스레드 / JS 스레드에 대한 고찰 작동원리 그리고 UI 스레드 / JS 스레드에 대한 고찰 지금까지 React Native을 통해 개발을 하면서 알게 된 근본적인 작동원리 그리고 작동원리와 관련된 UI 스레드와 JS 스레드에 대한 고찰을 기록해보자고 합니다. 기존 OS별 Native 단에서 앱 개발을 했던 과거에 비하여 React Native라는 프레임워크를 통해 OS 둘 다 함께 개발이 가능하도록 하고 JS 언어와 ReactJs 문법을 사용하면서 개발 생산성을 매우 높게 해주었습니다. ReactJs로 개발 공부를 시작한 저로서는 앱도 개발할 수 있는 능력을 갖추게 해 준 매우 고마운 존재이기도 합니다. 물론 Native로만 개발하면 React Native보다 생산성 말고는 성능적으로나 기능 구현에서는 더 앞서 나가는 건 사실이지만 엄청.. 2023. 9. 22.

下 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 下 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 上 편에서 앞서 인도네시아(동남아) 국가 인프라 상황과 스마트폰 보급 상황 그리고 국내 상황과의 차이점 등등을 전반적으로 알아보았습니다. 上 편: 동남아 국가 인프라를 고려한 성능 최적화 개선 과정 上 편: 동남아 국가 인프라를 고려한 성능 최적화 개선 과정 현재 서비스 중인 MyVenus는 인도네시아 중심으로 동남아 국가들을 타겟팅한 뷰티 플랫폼 서비스 App입니다. 제 개발자 커리어의 첫 서 k0502s.tistory.com 다시 정리하자면 동남아(인도네시아) 국가의 인프라 및 상황은 아래와 같습니다. 동남아(인도네시아) 국가의 인프라 및 상황 1. 국내보다 불안정한 인터넷 환경. 2. 대략 90%가 Android 디바이스, 나머지 10.. 2023. 9. 22.

NextJs - 4편: SEO(검색 엔진 최적화)를 위한 종류별 세팅 SEO(검색 엔진 최적화)를 위한 종류별 세팅 이번에는 NextJs을 사용하는 이유 중 하나인 SEO에 대해 더 깊이 기록하고자 4편을 쓰게 되었습니다. NextJs의 SSR이라는 특징으로 SEO 엔진에 최적화되었다는 것은 사실이지만 여기서 끝나는 것이 아니라 SEO 엔진에 최적화를 위해 추가로 설정해야 하는 개발 및 환경 세팅이 존재합니다. NextJs만 쓰면 모든게 해결되면 좋겠지만 추가적인 최적화 세팅 및 개발이 없다면 NextJs을 사용하는 가치를 최대한으로 끌어올릴 수 없으니 필수라고 생각합니다. 현재 실제로 제가 서비스 운영 중인 MyVenus 인도네시아 뷰티 플랫폼의 NextJs 프로젝트로 구축한 서비스 메인 웹 페이지를 통해 예시 또한 보여줄 예정입니다. MyVenus - Aplikasi .. 2023. 9. 18.

上 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 上 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 현재 서비스 중인 MyVenus는 인도네시아 중심으로 동남아 국가들을 타겟팅한 뷰티 플랫폼 서비스 App입니다. 제 개발자 커리어의 첫 서비스 운영/개발이었는데 동시에 첫 해외 서비스를 운영하는 경험 또한 하게 되었습니다. 서비스 운영/개발을 하기 전 과거에는 SI 업무를 통해 App 개발을 해보았기에 App 개발에는 완전 처음이 아니었습니다. 하지만 SI 업무에서 했던 App 개발들은 모두 국내용이었고 사실 이것은 일반적이었습니다. 하지만 지금 이렇게 동남아 해외 서비스 App을 개발/운영하면서 국내용 서비스와 다르게 추가적으로 개발/운영하는데 꽤 많은 고려사항이 있었습니다. 이번 上편에서는 국내 서비스와 동남아 서비스를 하면서 알게 된 .. 2023. 9. 18.

NextJs - 3편: NextJs에서의 서버 컴포넌트 RSC(React Server Component) 3편: NextJs에서의 서버 컴포넌트 RSC(React Server Component) 2편에서 기록하면서 알아가게 된 NextJs 13 ver.에서 등장한 서버 컴포넌트 RSC(React Server Component)에 대하여 개인적으로 많이 생소하여 좋은 블로그 글을 발견하여 제 블로그에 기록하게 되었습니다. NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서 2편: NextJs 버전 12에서 13으로 넘어오면서 NextJs는 12 버젼에서 13으로 넘어오면서 사용방법이 바뀔 정도로 많은 변화가 있었습니다. 당연히 최신 버전인 13을 바로 사용해도 되지만 아직도 많은 프 k0502s.tistory.com RSC(React Server Component) 서버 컴포넌트 RCC에서는.. 2023. 9. 14.

NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서 2편: NextJs 버전 12에서 13으로 넘어오면서 NextJs는 12 버젼에서 13으로 넘어오면서 사용방법이 바뀔 정도로 많은 변화가 있었습니다. 당연히 최신 버전인 13을 바로 사용해도 되지만 아직도 많은 프로젝트가 12 버전을 쓰고 있으며 유지보수를 위해서라도 13 버전 이전의 NextJs 사용 방법을 알고 가는 것이 맞다고 생각합니다. 아직 13버전의 Appdir와 같은 기능들이 공식 Docs에서 공식적으로 스테이블 단계에 들어갔다고 발표한 것도 몇 달이 채 되지 않았으며 12과 13의 차이점을 알고서 개발에 임하는 것이 매우 중요할 거 같아 이렇게 2편에 12과 13 버전의 차이점과 사용방법을 기록하고자 합니다. 우선 1편을 보고 읽는 것을 추천드립니다. 기본 이론 개념들이 많이 스킵됩니다. .. 2023. 9. 11.

NextJs - 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 NextJS는 ReactJs의 몇몇 한계점을 극복한 프레임워크라고 말할수 있습니다. ReactJs의 기반에서 더 좋은 SEO(검색 엔진 최적화), SSR을 통한 효율적으로 최적화된 랜더링 속도와 비용 절감 등등이 추가되었습니다. 하지만 그만큼 ReactJs에 비해 NextJs의 러닝커브가 올라갔다고 할 수도 있습니다. 그래서 NextJs에 대한 기본적인 이론과 알아야할점들을 기록하고자 합니다. ReactJs에 대한 개념이 우선적으로 알고나서 이 글을 보시면 NexJs에 대하여 더 디테일 하게 이해하는데 좋을거 같습니다. CSR과 SSR CSR과 SSR을 크게 두 가지로 비교할 수 있습니다. 1. 초기 화면 랜더링 방법. 2. 그 이후 페.. 2023. 9. 8.

프론트엔드 개발자의 백엔드 개발자/기획자/디자이너와의 협업과 투쟁 프론트엔드 개발자의 백엔드 개발자/기획자/디자이너와의 협업과 투쟁 프론트엔드 개발자는 필연적으로 백엔드 개발자 / 기획자 / 디자이너 등등 많은 다른 직군들과 협업하고 커뮤니케이션하며 업무를 진행해야 합니다. 개발자라는 직업이 혼자서 주로 일하고 사람들과 부딪히는 일이 별로 없다고도 합니다. 하지만 직접 프론트엔드 개발자가 되고 나서 일을 경험해 보니 개발자인 프론트엔드는 오히려 반대라고 생각합니다. 3년 가까이 프론트엔드 개발자로 일을 하면서 겪었던 커뮤니케이션 이슈, 협업 등등 깨달은 점들을 프론트엔드 개발자 관점에서 기록해보고자 합니다. 예비 프론트엔드 개발자 혹은 예비 기획자 / 디자이너 등등 IT 업계의 업무 방식이 궁금한 분들에게 많은 도움이 되고자 합니다. 왜 프론트엔드 개발자는 결국 부딪히.. 2023. 9. 6.

서비스 운영/개발팀의 가장 효율적인 QA 테스트 프로세스를 찾아서 서비스 운영/개발팀의 가장 효율적인 QA 테스트 프로세스를 찾아서 서비스 운영/개발팀의 QA 프로세스를 정립하는 것이 꽤 어렵고 과정이 있어 이렇게 기록하고자 합니다. QA 란? Quality Assurance의 약자로 품질 보증을 말합니다. 제품 출시 이전에 각종 테스트(Test)및 검수 작업을 하는 업무 일정 수준의 품질(Quality)을 가질 수 있도록 제품 출시 이전에 각종 테스트(Test) 및 검수 작업입니다. It 업계에서 또한 기능 개발 후 QA을 통하여 제대로 기능이 작동하는지 검증하는 시간을 필수적으로 갖게 됩니다. 개발자에게 QA 란? SI/SM/솔루션/서비스 업계 상관없이 QA 테스트는 마지막 완성을 위해서 꼭 필요한 프로세스이며 정말 중요한 과정입니다. 이 과정이 없다면 불안정한 제.. 2023. 9. 2.

초기 스타트업 서비스 개발팀의 효율적인 업무 프로세스에 대하여 초기 스타트업 서비스 개발팀의 효율적인 업무 프로세스에 대하여 인도네시아 / 동남아 현지를 중심으로 운영 중인 MyVenus 뷰티 플랫폼 서비스는 한국인 멤버로 팀을 이루어 진행하였습니다. 운영은 인도네시아의 현지 팀이 따로 있으며 한국의 팀은 서비스의 기능 단위 제품을 주로 생성하는 담당을 하고 있습니다. 한국팀에서 저는 프론트엔드 포지션을 맡아 서비스 앱, 서비스 웹, Admin 웹/앱 등등 서비스를 운영하고 필요한 운영 유지보수/새로운 피쳐 개발/프로젝트 등등을 참여하고 발전시켰습니다. 물론 서비스의 하나의 새로운 기능이 나오기까지 물론 프론트엔드 개발자인 저 혼자서 뚝딱 만들어내고 있지 않고 있습니다. 하나의 서비스 기능 단위 제품을 생성하기 위해서 기획/디자인/개발/QA 단계를 거쳐 생성합니다... 2023. 8. 30.

SI 개발과 서비스 운영 개발 차이와 고찰 SI 개발과 서비스 운영 개발 차이와 고찰 제 개발 경력이 길지 않지만 SI 개발 업무와 서비스 운영 업무 둘 다 경험을 해보았습니다. 이 서로 다른 스타일의 업무를 둘 다 해보며 느낀 점과 깨달은 점을 정리하고 기록하고자 합니다. 대한민국 개발 업계는 크게 SI 회사, IT 서비스 회사로 나뉘어 있다고 생각합니다. SM 회사도 있지만 비중이 그렇게 커 보이지는 않은 것 같습니다. 예비 신입 개발자, 개발 입문 단계이신 분들은 SI 회사를 가면 커리어를 망친고 가면 절대 안되고 허위로 경력을 뻥튀기하여 파견을 보내버리기 때문에 크게 데이고 개발자를 그만두게 된다 등등 안 좋은 이야기들이 있습니다. 저는 신입으로 SI 회사를 들어갔습니다. 모든 SI 회사가 잘못된 것이고 모든 SI 업무가 잘못되었다고 생각.. 2023. 8. 29.

확장 가능 글로벌 서비스 멀티 타임존 도입기 글로벌 서비스 멀티 타임존 적용기 MyVenus - Aplikasi Perawatan Kecantikan Terlengkap & Terpecaya #1 di Indonesia Bergabunglah dengan komunitas kami untuk menemukan solusi dari berbagai masalah seputar dunia kecantikan, melihat real review hingga mencari tahu segala hal yang berhubungan dengan treatment kecantikan maupun operasi plastik! myvenus.io 현재 제가 운영 중인 서비스 MyVenus는 인도네시아 로컬 중심의 서비스입니다. 처음 서비스 초기에는 자카르타라.. 2023. 8. 28.

DeveOps - 깃허브 액션 GitHub Actions 적용해보기 (feat. Slack) 깃 액션 GitHub Actions 활용해보기 GitHub Actions는 CI/CD와 같은 workflow를 자동화 할 수 있는 도구라고 설명되어 있는데, 쉽게 말해 GitHub 내 어떤 이벤트(push, pull, merge ...)가 발생하면 해당 이벤트에 대해 정해진 동작을 실행하게 하는 도구입니다. GitHub Actions에는 event, trigger, job, step, uses, name ... 등 여러가지 키워드들이 있습니다. 지금 운영중인 저희 서비스 프로젝트 개발 환경에도 GitHub Actions을 활용하여 Slack 팀 메신저와 연동시킨 환경에서 개발을 진행 하고 있습니다. 개발팀으로서 협엽 상황이라면 CI/CD 구축은 필수라고 생각하고 있습니다. GitHub Actions의 필.. 2023. 8. 25.

Front End 시점에서의 서비스 대량 트래픽 발생 그리고 대응 Front End 시점에서의 서비스 대량 트래픽 발생 그리고 대응 현재 제가 운영 중인 서비스 MyVenus는 아직 초기이기 때문에 대량 트래픽이 발생하지 않는 수준입니다. 대량 트래픽에 대한 걱정은 사실 평소에 많이 하지 않고 있었습니다. 하지 어느 날 운영팀에서 운영 중인 서비스 인스타그램 광고 계정의 하나의 릴스 영상이 1600만 뷰 이상의 조회수가 발생하면서 사건의 발단이 되었습니다. 이 릴스의 광고 효과로 지금까지 경험해보지 못한 대량 트래픽이라고 말할 수 있는 수치를 기록하게 되었습니다. 엄청난 유저들이 앱을 인스톨하고 회원가입 이벤트가 엄청나게 발생한 것이었습니다. 이때 일어난 일들을 Front End 관점에서 기록하였습니다. 물론 서버 쪽의 대응이 더욱더 중요한 시점이었지만 제 포지션은 F.. 2023. 8. 24.

React Native - 구글 맵(Google Map) SDK 환경세팅과 위치 기반 서비스 적용기 구글 맵(Google Map) SDK 환경 세팅과 지도 운영 서비스 적용기 제가 운영 중인 서비스 특성상 위치 기반 서비스가 필요했습니다. 유저 고객들이 Map을 활용하여 가까운 방문 가게나 병원을 더 수월하게 찾도록 하는 것이 목표였습니다. 현재도 많은 플랫폼 서비스들이 지도 기능을 이용한 서비스 운영을 하고 있습니다. 예를 들어 카카오 택시, 배달의 민족, 등등 위치 기반 서비스는 흔하면서도 플랫폼 서비스 운영의 활성화를 위한 필수 기능이라고 생각합니다. 국내용이 아닌 글로벌 서비스라는 특성으로 인하여 구글 Map을 사용해야 한다는 결정을 하게 되었습니다. React Native 프레임워크를 쓰고 있는 프로젝트여서 구글 Map SDK를 React Native 프로젝트에 얹을 수 있는 적당한 라이브러리.. 2023. 8. 22.

실제 서비스 운영중 생긴 API 인증(Certified) 이슈 트러블슈팅과 Axios 인터셉터(interceptors) 실제 서비스 운영 중 생긴 API 인증(Certified) 이슈 트러블슈팅과 Axios 인터셉터(interceptors) 운영 중인 서비스 프로젝트에는 Axios라는 API 연동 라이브러리를 사용하고 있습니다. Axios 기능을 통해 RestFul 한 기능들을 만들고 기능을 생산하는데 많은 도움을 주고 있는 라이브러리입니다. Axios interceptors는 API을 관리하는데 아주 유용하면서도 필수적이라고 생각합니다. request/response 둘 다 공통적으로 호출 작업을 실행하기 전 처리하는데 매우 유용합니다. Axios interceptors의 간단한 사용 방법과 Axios interceptors을 활용을 통한 서비스 이슈 해결을 기록하려 합니다. Axios interceptors 란? 인터.. 2023. 8. 21.

React Native - E2E UI 테스트 도입, Detox E2E UI 테스트 도입, Detox Detox Made For CI Execute your E2E tests on CI platforms like Travis CI, CircleCI or Jenkins without grief. wix.github.io 💡 현재 서비스 운영 중인 사용자 앱의 서비스가 점점 커지다 보니 개발 및 유지보수 후 예측할 수 없는 사이드 이펙트로 인한 중요 비즈니스 기능들의 이슈에 대한 영향이 더 많이 있을 수 있다고 판단하였습니다. 그래서 사용자 앱 서비스 프로덕션 배포전 E2E 테스트를 거쳐갈 필요가 있다고 판단하여 Detox라는 E2E 자동화 테스트 라이브러리를 도입하여 개발 환경에 E2E 자동화 테스트 환경을 구축하게 되었습니다. Detox는 React Native 앱의.. 2023. 8. 18.

실제 서비스 운영 중 생긴 치명적인 인증(Token) 이슈 트러블슈팅 실제 서비스 운영 중 생긴 치명적인 인증(Token) 이슈 트러블슈팅 지금 운영 중인 서비스에서 과거 가장 치명적이면서 급박했던 이슈 발생과 해결까지의 상황을 기록하였습니다. 다시는 이런 일이 벌어지지 않았으면 하는 마음으로 기록을 남겨봅니다. 치명적인 수준까지 간 이유는 사용자가 앱을 실행시키면 사용 자체를 하지 못하는 이슈였기 때문이었습니다. 로그인 인증 기능/로직에 관련된 원인으로 매우 영향이 큰 이슈였습니다. 이슈 발생 💡 장애에 대해 간단한 요약 설명 모두가 아닌 특정 유저들이 앱 실행 후 스플래시 화면에서 넘어가지 않는 이슈를 운영팀에서 보고 받아 퇴근시간 이후 이슈가 발생하는 불상사가 일어났습니다. 퇴근 시간이 지난 이후에도 저희 팀은 퇴근 생각할 틈도 없이 바로 대응에 들어갔었습니다. 이슈.. 2023. 8. 17.

프론트엔드 로드맵 2023 | Front End Road Map 2023 GitHub - Han-Kyeol/developer-roadmap-kr-: 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh. Contribute to Han-Kyeol/developer-roadmap-kr- development by creating an account on GitHub. github.com 2023. 8. 17.

React Native - Firebase Push Notification, Image 이미지 표시 iOS 환경 세팅 Firebase Push Notification, Images 표시 iOS 환경 세팅 번거롭게도 React Native에서 Firebase push 알림을 사용할 때 메시지 텍스트와 함께 이미지를 push 하려면 iOS에서 따로 설정을 해줘야 합니다. 다행히 Android는 따로 설정할 필요 없고, iOS에서만 설정해 주면 됩니다. 주로 Xcode에서 설정 작업을 합니다. 설정을 하려는 프로젝트를 Xcode로 실행했다고 가정하여 진행하겠습니다. 1. Xcode를 실행해서 File > New > Target... 을 누릅니다. 2. Notification Service Extension을 찾아서 선택합니다. 3. Product Name과 Language를 수정해 주면 됩니다. firebase 문서에서 Pr.. 2023. 8. 16.

서비스 운영 A/B 테스트 적용기 (feat. Firebase) 서비스 운영 A/B 테스트 적용기 A/B 테스트는 여러 많은 서비스에서 쓰이고 있는 아주 기본적인 테스트입니다. 해외 서비스는 인스타그램, 국내는 토스 등등 대표적인 서비스들도 많이 사용하는 테스트입니다. 말 그대로 A, B 두 조건의 기능 두 개를(두 개 이상이도 됩니다.) 50대 50으로 기능을 사용자들에게 골고루 배포하여 사용자들의 기능 사용 수치와 효율성을 비교하여 따져보는 것입니다. 무작정 예측으로만 기능을 때려박아 수치가 올라가는 것을 지켜보기만 하는 것이 아니라 직접 기능의 수치를 측정하여 사용자들이 진심으로 원하는 것을 현실적으로 파악하여 냉정하게 기능을 빼기도 하며 많은 도움이 되지 못할 것 같은 예상치 못한 기능들이 들어가는 경우도 있었습니다. 실제 제가 운영중인 서비스도 A/B 테스트.. 2023. 8. 14.

React Native - 코드 푸쉬(Code Push) 정의 / 개발 환경 세팅 / Staging 환경 세팅 코드 푸시(Code Push) 정의 CodePush는 마이크로소프트의 Visual Studio App Center에서 제공하는 서비스 중 하나로, 클라우드 기반의 앱 원격 업데이트 서비스입니다. 원리는 git과 유사하다. git은 코드를 수정하고 우리가 터미널을 통해 수정한 코드를 커밋하고 우리의 git 서버에 push 하면 다른 개발자가 pull을 통해 내가 수정한 코드를 내려받을 수 있는 구조입니다. CodePush도 우리가 터미널에서 배포 명령을 실행하면 앱을 bundle 파일로 변환하고 이를 CodePush 클라우드 서버에 저장합니다. 그럼 사용자가 기존에 설치한 앱을 실행하면 CodePush 서버에 업데이트 여부를 확인하고 수정된 내용을 병합하는 것입니다. Code Push를 통해 얻는 이점 R.. 2023. 8. 10.

IT 서비스 개발 운영 - 글로벌 서비스 다국어 지원 기능 구현하기 (feat. i18next) 글로벌 서비스 다국어 지원 1. 서비스 다국어 지원 도입 배경 MyVenus - Aplikasi Perawatan Kecantikan Terlengkap & Terpecaya #1 di Indonesia Bergabunglah dengan komunitas kami untuk menemukan solusi dari berbagai masalah seputar dunia kecantikan, melihat real review hingga mencari tahu segala hal yang berhubungan dengan treatment kecantikan maupun operasi plastik! myvenus.io 현재 제가 서비스 운영 중인 뷰티 플랫폼 MyVenus는 인도네시아 중심으로 주변 동.. 2023. 8. 9.

React Native - IOS / Android 개발 환경 세팅 (M1 Mac용) React Native 개발 환경 세팅 React Native 개발 환경 세팅입니다. 맥(Mac) OS M1 전용 환경세팅이니 참고 부탁드립니다. Expo CLI와 React-Native CLI, 2가지가 있는데 그중에서 React-Native CLI를 구축하는 방법 입니다. 아래는 기본적으로 환경세팅 관련하여 기본적으로 필요한 프로그램이니 프로그램 설치 후 진행 부탁드립니다. homebrew 설치 Item2 설치 (선택입니다. 기본 터미널도 가능합니다.) iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website update.. 2023. 8. 8.

React Hooks React Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리입니다. 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있으며 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 서로의 장점을 전부다 가지고 있습니다. Hooks 간단 소개 1. useState: 컴포넌트의 state(상태)를 관리 할 수 있습니다, 2. useEffect: 어떤 변수가 변경될때마다, 특정기능이 작동하도록 할 수 있습니다. 3. useContext: 여러개의 컴포넌트에서 사용할 수 있는, 변수 or 함수를 만들 수 있습니다. ( 전역으로 관리 ) 4. useReducer: state(상태) 업데이트 로.. 2022. 5. 16.

REST API( Representational State Transfer) REST API( Representational State Transfer) REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었습니다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했습니다. HTTP 프로토콜을 정확히 의도에 맞게 활용하여 디자인하게 유도하고 있기 때문에 디자인 기준이 명확해지며, 의미적인 범용성을 지니므로 중간 계층의 컴포넌트들이 서비스를 최적화하는 데 도움이 됩니다. REST의 기본 원칙을 성실히 지킨 서비.. 2022. 5. 10.

MVC 패턴 MVC MVC 패턴은 'Model, View, Controller' 를 뜻하는데 프로젝트 구성요소를 나누는 일종의 패턴입니다. MVC 패턴의 기본 구성 위의 사진은 MVC 패턴의 가장 기본적인 구조를 설명하고 있습니다. 각각의 패턴들이 하는 역할은 다음과 같습니다. - Model : Controller에게 받은 요청에 따라 데이터를 관리합니다. 해당 데이터는 다시 Controller에게 전송합니다. - Controller : Client로부터 요청을 받아 데이터를 가져와야 한다면 Model에게 해당 데이터를 요청합니다. Controller는 Client, Model, View에 모두 접근할 수 있습니다. Controller는 Model로 부터 받은 데이터를 조건에 맞게 View로 .. 2022. 5. 8.

Test-Driven Development(TDD) TDD Test-Driven Development(TDD)는 매우 짧은 개발 사이클의 반복에 의존하는 소프트웨어 개발 프로세스입니다. 우선 개발자는 요구되는 새로운 기능에 대한 자동화된 테스트케이스를 작성하고 해당 테스트를 통과하는 가장 간단한 코드를 작성하고 일단 테스트 통과하는 코드를 작성하고 상황에 맞게 리팩토링하는 과정을 거치는 것입니다. 말 그대로 테스트가 코드 작성을 주도하는 개발방식입니다. TDD의 종류 - Add a test 테스트 주도형 개발에선, 새로운 기능을 추가하기 전 테스트를 먼저 작성한다. 테스트를 작성하기 위해서, 개발자는 해당 기능의 요구사항과 명세를 분명히 이해하고 있어야 합니다. 이는 사용자 케이스와 사용자 스토리 등으로 이해할 수 있으며, 이는 개발자가 코드를 작성하기 .. 2022. 5. 8.

JS ES5 핵심 개념(JS ES5 Core Concept) JS ES5 핵심 개념(JS ES5 Core Concept) 1. 데이터 타입(Data Type) 데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말합니다. - 기본형(Primitive Type): 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 합니다. 즉 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있습니다. 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 .. 2022. 5. 5.

함수형 프로그래밍과 객체지향 프로그래밍 객체지향 프로그래밍 객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법입니다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 “객체(Object)"들의 모임으로 파악하고자 하는 프로그래밍의 패러다임 중에 하나입니다. 각 “객체(Object)" 들은 서로 메시지를 주고 받을 수 있으며 데이터를 처리할 수 있습니다. 객체지향 프로그래밍의 장단점 - 장점 1. 코드 재사용이 용이 남이 만든 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있습니다. 2. 유지보수가 쉬움 절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는.. 2022. 4. 28.

이전 1 2 3 4 ··· 9 다음

티스토리툴바