분류 전체보기

hashnode로 블로그 이사하였습니다.

https://ryankim.hashnode.dev/ Ryan Kim's blog Ryan Kim's blog ryankim.hashnode.dev 위 블로그에서 포스팅 하고 있어요:)

23년 회고 - 현업 개발자로 보낸 첫 1년 돌아보기

1. 올 해 한 일들 1.1 자율주행 로봇 소프트웨어 조작 화면단 구현 첫번째 회사에서 1월부터 3월까지 일했고, Vue.js에서 Three.js 를 사용한 로봇 제어 솔루션의 화면단 구현 작업에 참여했었다. 짧은 기간 있었기 때문에 길게 적을 만한 건 없지만 간략하게 되돌아보자. 개발자로 첫 취업이었기 때문에 여러모로 미숙한 점이 많았다. 맥북으로만 개발해봤고 얄팍하게 리액트만 조금 다뤄보았는데 리눅스 환경에서 Vue.js 프로젝트를 하게 되어서 처음에 혼란스러웠다. DOM, 브라우저 이벤트, 네트워크에 대한 이해가 많이 부족했음을 느꼈고, 자바스크립트 기본기 문제도 많이 느꼈다. 1.2 언리얼 기반 프로토타입 프로젝트 외주 두번째 회사로 극 초기 스타트업에서 일하게 되면서 신입~주니어 레벨에서 일반적..

너디너리 데모데이 후기 - 시장에서 살아남는 개발자 되기 (문동욱님-쿼타랩)

Intro Evans Library 부트캠프에서 한참 프론트엔드 과정을 수강하던 시절에 여러번 들어가 봤었고 북마크 해두었던 개발 블로그의 저자분을 실제로 뵈어서 좋아하는 연예인을 만난 기분이 들었습니다. 개발자란 직업과 전망에 대해 긍정적인 이야기를 해주시는 분들이 이미 많기 때문에, 전쟁과 금리인상으로 인한 냉랭한 현재 시장 상황에서 냉정하게 현실적인 이야기를 전하고 싶었다고 하시며 그에 맞는 현실적인 조언들을 이야기해 주셨습니다. 기술 이야기가 아닌 돈 이야기, 시장과 기업, 나를 바라보는 시각을 어떻게 전환해야 할 지 인사이트를 얻을 수 있는 시간이었습니다. 1. 연봉 코로나 시즌에 엄청나게 시장에 돈이 풀리고 이 돈으로 기업에 투자하면서 기업들은 너도나도 연봉 인상 릴레이를 이어갔습니다. 하지만..

22.11.12 토 TIL

1. Done Reference 코딩일레븐 님의 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] 강의를 수강하고 학습 내용을 정리합니다. 개념 설명 mousemove DOM 이벤트로 마우스의 수평(X), 수직(Y) 좌표를 clientX , clientY 로 받을 수 있다. 이 값으로 css의 transform 속성을 사용해 translate 해줄 px 값으로 사용한다. 리액트 버젼 코드 강사님 코드 useState x축과 y축 값을 프로퍼티로 가진 객체를 초기값 0, 0으로 state 초기값 지정 useEffect clientX, Y 값으로 setState 함수를 변수화하고 mousemove 이벤트에 addEventListener 콜백함수로 사용. 리턴값으로 클린업하는 함수에 removeEventL..

22.11.11 금 TIL

1. 타입스크립트 1.1 TS 고유의 타입들 - unknown 타입 어떤 타입의 값이 들어올 지 모를 경우에(ex: api 호출의 결과) unknown 타입을 지정해줌으로써 어떤 작업을 하기 위해 unknown 타입을 지정한 변수의 값을 먼저 확인하도록 타입 프로텍션을 받을 수 있다. 예시코드 let a:unknown if(typeof a === 'number'){ let b = a + 1; a.concat('안될걸'); // Property 'concat' does not exist on type 'number'. } if(typeof a === 'string'){ let b = a.toUpperCase(); let c = a * 1; // The left-hand side of an arithmeti..

22.11.10 목 TIL

1. Done 1. 자바스크립트 원시타입, 참조타입, 원시 래퍼타입 원시타입 원시 타입은 있는 그대로 저장되는 데이터를 표현한다. 원시타입의 종류 boolean : true, false number: 1, 2, 0.134, NaN, ...etc string: '문자열인거' null undefined 원시타입의 특징 원시값을 변수에 할당하면 값이 복사되어 들어간다. 이 말은 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 된다는 것을 의미한다. 따라서 값을 할당한 변수의 값이 바뀌더라도 값을 할당받았던 변수의 값은 원시값이 할당된 변수는 자기 자신만의 고유한 값을 가지게 되므로 변하지 않는다. 예시 코드 let num1 = 1; let num2 = 2; num1 = num2; num1..

인프런 회사 견학 후기

Table of contents 후기 질문과 답변 1. 후기 소중한 분께서 만들어주신 소중한 기회로 인프런 회사 견학을 해볼 수 있는 기회가 생겼고, 함께 열심히 부트캠프를 진행했던 인원들과 인프랩 사무실을 견학하였습니다. 인프랩 사무실 소개, 인프런과 랠릿 프론트엔드 파트 업무와 서비스에 대한 소개, 신입 개발자의 온보딩 과정, 사전에 준비해간 취업준비를 갓 시작하는 신입 프론트엔드 개발자가 가장 궁금해할 만한 여러 질문들에 대해 인프런과 랠릿 프론트엔드 파트의 여러 팀원분들, 그리고 CTO이신 향로님께서 긴 시간 자세하게 답변을 해주셨습니다. 다소 많은 인원이 한꺼번에 방문드려 업무에 너무 차질을 드리진 않았을까 죄송스러웠지만, ”우리는 성장 기회의 평등함을 추구합니다.” 라는 인프런의 모토에 걸맞게..

22.10.27 TIL - 포폴앱 타입스크립트 마이그레이션

1. Done 1.1 리액트 개인포폴앱 타입스크립트로 마이그레이션 하기 React.FC를 사용하지 않는 방법이 더 좋아보인다. 함수 컴포넌트는 화살표 함수보다 function 키워드를 사용하는게 요즘 트렌드라고 한다. 1.1.1 기존 프로젝트에 타입스크립트 추가하기 참고 git switch -c dev 또는 git branch -b dev 로 새 브랜치(dev) 생성 관련 패키지 설치 typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom ( *라우터 사용하는 경우에만 ) 프로젝트에 타입스크립트 추가 (npx tsc —init) tsconfig.json 환경설정 값 프로젝트에 맞게 변경 관련 패키지 설..

22.10.26 TIL

1. Done 1.1 포폴앱 성능최적화 계획잡기 별도 문서로 정리: https://handsome-parcel-51e.notion.site/1-1044e2798c5f49838dd87e39eb2640cc 2. 타입스크립트 - ref로 사용자 입력 받기 (state 양방향 바인딩 안 쓰는 경우) const todoOnSubmit = (e: React.FormEvent) => { e.preventDefault(); }; event 객체의 타입은 react.FormEvent 이다. useRef useRef 호출 ref 타입 할당 (HTMLInputElement) 초기값 null 할당 (useRef()가 jsx 리턴문보다 위에 있어 최초 렌더링 시 아직 jsx가 렌더링 되지 않았으므로) reference 값을 D..

포트폴리오 앱 성능최적화 작업기 1편

0. Intro 기존에는 Three.js를 사용해서 외부 소스의 gltf 모델링 파일을 컴포넌트로 변환하여 웹에서 3d를 구현했었다. 하지만 이번에 꼭 사용해보고 싶은 게 있어 3d 모델링 툴인 Spline을 사용해서 구현한 3d 모델링 파일을 코드로 export 하여 포트폴리오 앱에서 받아와 사용했다. 이 과정에서 모델링 파일을 받아오는 방식이 빌드 파일 내에 저장된 걸 사용하는 게 아니라 네트워크를 사용해서 받아오게끔 되어있어, 모바일에서는 정상적인 열람이 힘들 정도의 심각한 성능 저하가 발생하였다. 구글 라이트하우스를 돌려보면 데스크탑 환경에서 해당 3d 파일을 불러오는 코드만 삭제해도 퍼포먼스 점수가 28점에서 64점이 될 정도이다. 이를 해결하려면 모델링 파일 자체를 더 적은 폴리곤을 사용하거나..