본문 바로가기

전체 글

 (121)
IT 회사의 개발조직 느낀 점 IT 개발 조직의 일원이라면 UX와 DX를 모두 고려해야 한다.- UX -> 사용자 경험 -> 유입 및 리텐션 상승 -> 매출 증대- DX -> 개발 생산성 -> 비용 감축 && 더 다양한 시도와 빠른 이터레이션으로 장기적 매출 증대 도모- UX와 DX는 상충되기도 한다. UX를 위해 무거운 라이브러리를 도입했다가 DX가 훼손되는 경우가 그 예이다. 이런 경우에는 정답이 없다. Trade off를 잘 비교해보되, 비슷하다면 UX의 손을 들어주고 이에 수반되는 기술적 챌린지는 문제해결능력을 발휘해서 해소한다. 업무 방식- 워터폴 방식 vs 애자일 방식- 워터폴: 기획 > 기획 리뷰 > 디자인 > 디자인 리뷰 > 개발- 애자일: 왔다갔다 빠른 피드백루프[GPT: IT 서비스 환경에서는 종종 하이브리드 방식이..
월간 회고 | 24.07. 업무 목록1. 위클리 발표- Prefetch 방법: Nuxt가 제공하는 useAsyncData vs Tanstack Query 비교- useQuery로 데이터 prefetching하여 SEO 개선하기  2. [Asset 페이지, Research 콘텐츠 페이지]에 스크롤 반응형 앵커 도입/개선3. [모바일 앱] 내 Webview의 CSS 버그 개선- 리서치/이벤트 섹션에서 상단 메뉴 탭이 고정되지 않는 문제였음. 4. [Asset 페이지] 자산 커뮤니티 게시판 phase 1 개발 및 운영 배포- 커뮤니티 페이지 분리 및 레이아웃 작업- 커뮤니티 페이지 상단 배너 도입(리서치 배너, Analytics Module)- 기능 관련 API 모델 구현 및 API 연동- 게시판 및 게시글 내부 댓글 시스템 개선- U..
월간 회고 | 24.06. 무슨 일을 했나?온보딩 (Onboarding) - 2주- Vue 공부- Nuxt 공부- 우리팀 프로젝트 구조 파악 첫 업무 (알림센터 2차 개선) - 2주- 뷰 쿼리 활용해서 API 요청 캐싱- 스타일링- 무한 스크롤 구현 배운 점FE 마크업, 언어스타일링- 스타일링 레이아웃 잡는 법 (1. flex만 잘 사용하면 끝난다, 2. margin 말고 padding과 gap 사용 (서로 개입 못하게))- 레이어 개념 (css alpha blend, mix-blend-mode, 알파 채널, 게임 픽셀 쉐이터, 해골책)- (vue) deep 속성- 마스크 속성- 숫자 고정값, % 는 가능한 CSS에 포함되지 않는게 좋다. - 믹스인(mixin) (SCSS)- CSS Nesting (SCSS)- 다양한 CSS 속성..
TypeScript | Return 타입 명시, Function 타입 명시, 콜백함수 타입 명시 Return 타입 명시매개변수 받는 괄호 오른쪽에 콜론(:) 찍고 return 타입 명시 가능.// 올바른 return 타입 설정const combine = (arg1: number, arg2: number): number => { return arg1 + arg2}// 에러const combine = (arg1: number, arg2: number): String => { return arg1 + arg2}console.log(combine(1, 2))  void 타입자바 등 다른 프로그래밍 언어에는 있는 반환타입이다. 자바스크립트에는 void가 없었지만 타입스크립트에서 추가되었다.void는 return 값이 없는 경우이다.// void 타입 - return 값이 없음 (엄밀히 말하면, 기..
Frontend 개발자 | 첫 회사, 첫 일주일 출근 후기 첫 회사에 출근한지 일주일이 지났다. 정신없고 기빨리고 신기하고 재미있는 시간이었다ㅎㅎ 그냥 매순간이 황송하고..😭😭 내가 과연 이 회사에서 1인분을 할 수 있을까 싶기도 하고.. 아직 회사 건물에 드나드는게 어색하고 막 그렇다. 작년엔 아무것도 모르던 내가 이젠 개발자라니??? 내가 프로젝트에 가담한다니?? 다음은 첫 일주일동안 느낀 감상들이다.  1. 또 다시 강남이구나 회사생활을 많이는 안해봤지만, 인턴 등 계약직을 포함해서 늘 강남, 선릉, 압구정 쪽 근방으로 출퇴근을 했었다. 현 회사도 강남역에 바로 붙어있고 그래서 매일 아침 출근할 때마다 데자뷰같은 느낌이 든다. 늘 느끼지만 강남역엔 사람이 참 많다. 어지러워서 싫어하지만 또 사람 구경하는 맛도 있다. 새삼 반 년 전에는 경기도 기숙사에 ..
TypeScript | 기초 설정, 기본 데이터타입 기초 설정기본 셋팅1. npm 설치해당 프로젝트에 npm init 해서 node.js 설치 2. lite server 의존성 설치 (optional)npm install --save-dev lite-server 의존성 설정(package.json) 들어가서 "start" 명령어에 lite-server 등록하기 * 컴파일 하는 방법TS 컴파일 명령어tsc 파일명// tsc app.ts 그럼 ts 파일이 컴파일되어 js 파일이 생성된다. 만약 IDE 단에서 오류를 발견했다고 하더라도 컴파일 자체를 막진 않는다. 따라서 컴파일 하기 전에 에러가 있는지 잘 확인하고 고친 후에 컴파일을 해야 한다. 안그러면 오류가 있는 버전의 JS 파일이 도출된다. 데이터타입TS는 JS의 슈퍼셋. 즉 JS의 기존 데이터타입을 다..
CSR vs SSR - 로드되는 HTML 파일의 내용 비교 CSR과 SSR의 차이를 공부할 때, CSR 방식은 초기에 서버로부터 빈 껍데기의 HTML 파일을 받아오고 동적으로 컨텐츠를 채운다고 배웠고, SSR 방식은 렌더링 준비가 어느정도 된 상태의 HTML 파일을 받아온다고 배웠다.  실제로 그런지 확인해보고자 내가 참여한 프로젝트(CSR)와 SSR 방식으로 구축된 서비스의 HTML 파일을 비교해보았다 😋 CSR 웹사이트 [개발자 도구 - 네트워크 탭 - HTML 파일] 선택HTTP 헤더 포함 다양한 정보들이 나온다.   우클릭하고 [소스 패널에서 열기] 클릭 그럼 소스(Source) 탭으로 이동해서 서버로부터 받은 HTML 파일 내용이 보이는데 진짜 껍데기만 있다. 태그 안에 초기 컨텐츠가 없는 것이 특징이다. 이는 리액트가 클라이언트에서 실행되어 UI를 ..
JavaScript | 실행 컨텍스트 (3) - 클로저 인터넷에서 클로저의 정의를 둘러보다보면 잘 이해가 가지 않는다. 굉장히 모호하게 서술되어있기 때문이다. 개념 자체가 모호해서 그런 것일 거다. 내가 책에서 이해한 방식대로 한번 정리하는 것이 필요할 것 같다. 클로저를 활용하는 방식은 다양한데, 솔직히 말하면 내가 아직 거기까지 다루기엔 시기상조인 것 같다. 그래서 이번에는 클로저가 어떤 개념인지를 명확히 이해하는 것에만 초점을 맞추려고 한다. 클로저(Closure)란? 클로저에 대한 서술은 저자마다 상이한데, 코어 자바스크립트 저자에 따르면 그나마 다음 문장들이 잘 정의한 것에 가깝다고 한다. 클로저는 함수를 선언할 때 만들어지는, 유효범위가 사라진 후에도 호출할 수 있는 함수 - , p116 클로저는 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는..

티스토리툴바