전체 글 (146) 썸네일형 리스트형 [ 토스 기술 블로그 ] SLASH 21 - Day 3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 바로 쓰는 Frontend Clean Code실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집toss.im 실무에서 클린코드의 의의== 유지보수 시간의 단축 유지보수를 하려면 - 코드 파악- 디버깅- 리뷰등의 과정을 거쳐야 하는데 이를 하는 시간을 줄인다는 것은 비용을 줄인다는 말이다. 그때는 맞고 지금은 틀리다 코드에 유지보수를 할 때는 항상 위와 같은 생각을 염두에 두어야한다. 실제로 예시를 보여줬는데 이거 이렇게 하면 되겠는데? 하고 머리속으로 생각한 것을 그대로 보여줬다. ㅋㅋㅋ.... 뒤이어 그 방법이 잘못된 것은 아니지만 유지보수에 어려움을 주.. [ 토스 기술 블로그 ] SLASH 21 - Day 3 TDS로 UI 쌓기 : 그 많던 코드는 누가 다 치웠을까? TDS로 UI 쌓기: 그 많던 코드는 누가 다 치웠을까?TDS(Toss Design System)로 구성되어 있는 토스의 제품들. 복잡한 화면도 단숨에 개발할 수 있도록 큰 힘이 되어주는 TDS를 개발자들이 사용하고, 확장하는 과정을 공유합니다.toss.im TDS란? Toss Desgin System 토스는 글꼴이나 애니메이션 등 디자인 관련한 시스템이 존재해서 일관된 UI를 제공한다. 이로써 다른 제품을 개발할 떄 쉽게 적용가능해서 생산성을 높인다.( 역시 큰 회사는 이런게 있구나 ) 1. 컬러들을 팔레트로 나누어 변수명 ex) blue_700으로 사용 이러한 규칙을 사용해서 앱, 웹에 적용하며 디자이너, 기획자랑도 소통이 좋다 또한 테마에 적절하게 적용할 수 도 있음 2. 상황에 맞는 디자인을 적용.. 99클럽 코테 스터디 42일차 TIL, 프로그래머스 / 코딩테스트공부 🔑 오늘의 학습 키워드 : DP🔗 문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/118668 def solution(alp, cop, problems): max_alp, max_cop = 0,0 for p in problems: max_alp = max(max_alp,p[0]) max_cop = max(max_cop,p[1]) # 현재 alp와 cop가 목표보다 높을 경우를 대비 alp = min(alp, max_alp) cop = min(cop, max_cop) dp = [[1e9] * (max_cop+1) for _ in range (max_alp+1)].. 99클럽 코테 스터디 41일차 TIL, 프로그래머스 / 도둑질 🔑 오늘의 학습 키워드 DP🔗 문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/42897 def solution(money): answer = 0 dp1 = [0] * len(money) # 첫 집을 털었을 때 dp2 = [0] * len(money) # 첫 집을 안 털고 두 번째 집을 털었을 때 dp1[0] = money[0] dp1[1] = dp1[0] dp2[1] = money[1] for i in range(2, len(money) - 1): dp1[i] = max(dp1[i - 1], dp1[i - 2] + money[i]) dp2[i] = max(dp2[i - 1].. 99클럽 코테 스터디 40일차 TIL, 프로그래머스 / 등굣길 🔑 오늘의 학습 키워드 DP🔗 문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/42898# def solution(m, n, puddles): grid = [[0] * (m+1) for _ in range (n+1)] for x,y in puddles: grid[y][x] = -1 for i in range (1,n+1): for j in range (1,m+1): if i == 1 and j == 1: grid[1][1] = 1 elif grid[i][j] == -1: grid[i].. [ 토스 기술 블로그 ] SLASH 21 - Day 2 Micro-frontend React, 점진적으로 도입하기 Micro-frontend React, 점진적으로 도입하기거대한 모놀리식 Django 프로젝트에 현대적인 프론트엔드 인프라를 구축한 사례를 공유합니다. 어떻게 해야 오래된 코드 베이스를 대대적으로 수정하지 않으면서도, 최신 프론트엔드 기술들을toss.im Django MVC 프로젝트가 Micro-frontend React 프로젝트가 되는 이야기 웹 개발을 하다보니 한계를 느껴 React를 점차 도입하기로 했음 저희, CRA로 시작해볼까요 ? 하지만 Django에 조금씩 도입하는 과정에서 CRA로 하는 방법은 옳지 않았음 webpack 빌드의 결과물을 Django에 삽입하기 위해 ( Django는 템플릿 언어이다 ) webpack-bundle-tracker라는 webpack 플러그인과 django-webp.. [ 토스 기술 블로그 ] SLASH 21 - Day 1 결제 시스템의 SDK와 API 디자인 결제 시스템의 SDK와 API 디자인PG 연동 개발자들에게 쉽고 빠른 가이드 제공을 위해, 20년 동안 유지된 기존 시스템에 추상화 레이어를 만들고 SDK와 API를 설계했던 경험을 공유합니다. 추가로 인터페이스의 일관성과 예측 가능toss.im PG ExperiencePayment Gateway 온라인 결제 연동 개발을 해야한다면 1. 구매자가 쇼핑몰에서 물건을 사면2. 쇼핑몰에서 PG에게 요청을 한다음 카드사로 결제를 요청한다 이때 쇼핑몰에서 PG로 연동하는 개발이 필요하다 우리나라에는 많은 PG가 있으나 여러 문제가 있다. 환경이 비슷하다보니 python ,node, go를 이용해 개발하는 업체들한테는 제공을 못하는 문제가 발생했다. -> 개선전략이 필요했다 기존 연동 흐름 1. 서버 ) 연동 모듈.. [ 토스 기술 블로그 ] SLASH 21 - Day 1 토스의 서버 인프라 모니터링 토스의 서버 인프라 모니터링서버 인프라를 효과적으로 트러블 슈팅할 수 있도록 노력한 경험과 모니터링 인프라를 운영한 경험을 공유합니다.toss.im 모니터링 시스템의 변화토스는 모니터링 시스템에서 2019년 -> 2021년 사이 인프라 변화가 있었음 DC/OS , Vamp -> Istio , kubernetes ( k8 ) 이렇게 모니터링 시스템의 변화가 생김 쿠버네티스를 주로 사용하다보니 프로메테우스가 메인 모니터링 시스템이 되었음 Service Mesh는 분산 API Gateway로 서버사이드 로드 밸런싱이 아니라 클라이언트 사이드 로드 밸런싱임 -> 하나의 Api Gateway에 장애가 발생해도 영향이 적었음 서비스 메쉬?마이크로서비스 아키텍처에서 서비스 간의 통신을 관리하고 제어하기 위한 인프라 .. 이전 1 2 3 4 ··· 19 다음
