전체 글 (114) 썸네일형 리스트형 <button>을 클릭하면 무슨 일이 벌어질까? 여기 아주 간단한 코드가 있다.import React, { useState } from 'react';function CounterButton() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( Count: {count} );}export default CounterButton; 누군가 '버튼을 누르면 무슨 일이 벌어지나요?' 라고 물으면, 다음과 같이 쉽게 대답할 수 있다. "버튼을 누르면 count 상태가 1씩 증가합니다." (아마도) 군더더기 없는 설명이다. 한편, 이렇게 대답할 수도 있다. "버튼을 누르면 onClic.. 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를 .. 이전 1 2 3 4 ··· 15 다음
