본문 바로가기

전체 글47

2022년에 취업한 비전공자 개발자 근황 2021년 치과 업계에서는 제일 큰 회사를 그만두고 1년 동안 독학으로 개발을 공부해서2022년 6월에 프론트엔드 리액트 개발자로 첫 취직을 했다. 처음 회사는 SI 회사였는데 LG 가전 앱 ThinqApp 내부에 들어가는 웹뷰를 개발하는 업무였다.아무래도 SI 회사는 인건비로 먹고 살기 때문에 나처럼 비전공자인 나이많은 신입들을 뽑아서경력을 뻥튀기해서 견적을 받고 신입들을 투입시키고 신경을 쓰지 않는다.다른 회사의 경력이 있는 사람들이기 때문에 책임감 하나로 어떻게는 야근을 해서라도 꾸역꾸역일정을 지켜나가고 결국 배포하고 마무리까지 했다.지금 생각해보면 너무하다는 생각이 든다. 연봉도 2600밖에 주지 않았다. 그렇게 1년을 경험하고 SI 보다는 자체 회사에서 개발을 하고 싶다는 생각에 이력서를 열어두.. 2024. 9. 26.
vite로 빌드 시에 에러 Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory. 요즘 CRA보다는 vite로 프로젝트를 구성한다고 해서 CRA -> vite로 마이그레이션을 진행했다.config파일까지 다 수정하고 젠킨스에서 빌드를 하는데 Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory. 이런 에러가 발생하면서 빌드에 실패했다.에러 문구에 나와있는대로 서버에 있는 node_modules와 package-lock.jso.. 2024. 7. 8.
tailwindcss intellisense color hex로 보기 tailwind를 사용하면서 확장프로그램인 tailwindcss intellisense에서 color를 미리 보여주는 기능이 있다.근데 color format을 rgba로 보여주기 때문에 불편하다고 생각해서 구글 검색결과 hex로 변경해서 보여주는 방법이 있어서 공유해보려고 한다.  문제점// tailwind.config.jsmodule.exports = { content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { colors: { mainColor: { light: '#3D4975', DEFAULT: '#1C2035', }, ...config파일에서 hex형식으로 지정을 해주어도 클래스명에 호버를 했을 때 미리.. 2024. 5. 13.
FullCalendar 라이브러리 more Popup 커스텀 하기 (antd) 캘린더 라이브러리로 FullCalendar 라이브러리를 사용하면서 이벤트들이 숨김 표시될 때 more 버튼이 생기는데 이 more 버튼을 클릭하면 전체 일정을 볼 수 있는 popup창이 뜬다. 기본으로 제공해주는 popup 컴포넌트 말고 새로 디자인 된 컴포넌트를 사용하기 위해 커스텀해야 할 일이 생겼다. 먼저 기본적으로 제공하는 것 이외에 필요한 것을 나열해보자면 1. 이벤트 타이틀만 표시되는 것이 아니라 start부터 end까지 표시되길 원함. 2. 그 이외의 추가적인 디자인 3. 이벤트 클릭 시에 작동은 동일해야 함. 처음에는 커스텀으로 만드는게 싫어서 기존에 있는걸 최대한 쓰려고 했지만 이벤트들이 묶여있어서 캘린더에서부터 날짜가 나오게 하는 방법 말고는 찾지 못했다. 그래서 아예 새로 만들기로 했.. 2024. 4. 16.
원티드 프리온보딩 프론트엔드 리뷰 프론트엔드 개발자 2년차가 되어 가면서 직장에 사수가 있어본 적 없이 혼자 개발을 하고 있다. 혼자 개발을 하면서 내가 만들고 있는 코드의 질에 대해 고민하게 됐다. 누구와 함께 같이 고민하지 못하고 혼자 만들기만 하니 내 실력이 정체되어 있는 것 같고 길을 잃은 느낌이었다. 그러던 중 원티드에서 눈에 띄는 주제가 보이길래 바로 신청하게 되었다. 그 주제는 바로 비즈니스 로직 완정 정복하기! 커리큘럼은 아래와 같다. 오종택님의 비즈니스 로직 완전 정복하기 1. 컴포넌트가 복잡해지는 원인에 대해 고찰해보기 2. 비즈니스 로직을 제압하는 개발자가 퇴근을 한다 3. SOLID한 컴포넌트 만들기 4. Logic First, React Later 강의이다 보니 강의의 내용을 블로그에 적을 수 없다. 강의를 들으면.. 2023. 12. 16.
Next.js 13버전 라우팅 기초적이지만 몰랐던 사실이 있다. dev로 페이지를 보게 되면 변경한 내용이 바로 화면에 보여져야하기 때문에 SSR로 렌더링이 된다. 그래서 저장을 할 때마다 터미널에 보게 되면 아래 문구를 볼 수 있다. 요청할 때 컴파일했다는 것이다. wait - compiling /products/[pants]/page (client and server)... event - compiled client and server successfully in 819 ms (508 modules) build를 하게 되면 친절하게 어떤 페이지가 SSR인지, SSG인지를 알려준다. start는 빌드 된 파일을 실행 시킬 때 쓰면 된다. 위에서 build한 내용을 보면 about은 static으로 만든 페이지다. 빌드할 때 HTML.. 2023. 4. 27.
Next.js 왜 쓰는거야? React는 UI를 편리하게 해주는 라이브러리다. Next.js는 React를 사용하여 Web을 만드는 프레임워크이다. 라이브러리란? 특정한 문제를 해결하기 위한 툴 프레임워크란? 큰 단위의 솔리션을 위한 골격을 제공해준다. 여기에는 특정한 문제를 해결하는 툴도 포함되어 있다. Next.js Full Stack을 가능하게 해준다. 파일을 베이스로 한 Routing을 해준다. SEO, Image, Font 최적화를 해준다. Server Side Render, Static Site Generation을 가능하게 해준다. 하이브리드 렌더링을 기능하게 해준다. Next.js는 2016년에 gitHub 오픈소스로 공개되었다. Vercel이란 회사에서 만들었는데 Vercel은 미국의 클라우드 플랫폼 (PaaS 서비.. 2023. 4. 21.
[Three.js] skyBox 만들기 (feat.OrbitControls적용법) 1. 기본적으로 Scene 추가하기, render 정의하기 import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' const floorColor = 0x555555 const scene = new THREE.Scene() scene.background = new THREE.Color(floorColor) const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, }) document.body.appendChild(renderer.domElement) //body 밑에 렌더링 renderer.setSize.. 2023. 3. 28.
텍스트에서 일치하는 문자 자동으로 링크 걸어주기 긴 텍스트들에서 원하는 문자열을 자동으로 링크를 거는게 필요했다. 제목과 설명으로 된 객체들이 반복되는 배열에서 설명글에 제목이랑 같은 텍스트가 있으면 해당 글로 라우팅되는 기능을 구현하고 싶었다. 일단 배열들을 반복을 돌면서 제목들을 하나 하나 비교했다. const docList = [{title: "제목1", desc: "설명1"}, {title: "제목2", desc: "제목1이 들어가는 설명2"}, …] // 이런 배열이 있다고 할 때 const desc = "제목1이 들어가기도 하고 제목2가 들어가기도 하는 설명" // desc에서 title과 같은 문자는 링크가 되도록 하고 싶었다. // 정규 표현식으로 일치하는 것을 링크로 변경했다. docList.forEach((doc)=>{ // 처음에는.. 2023. 3. 22.

티스토리툴바