개발78 개발팀장은 무엇을 해야할까? 기존 프로젝트를 접고 새로운 프로젝트를 시작하면서 기존의 팀에서 몇몇 멤버가 변경되었다. 그 과정에서 원래 프런트엔드 팀장이던 분이 나가게 되어서 내가 팀장을 맡게 되었다. 내가 팀장을 맡은 이유는 어떠한 책임이 나에게 주어졌을 기대에 부응하기 위해 평소보다 훨씬 많은 노력한다는 것을 알기 때문이다. 하지만 막상 팀장을 맡고 나니 무엇을 해야 할지 막막하여 자료를 조사해서 나의 생각과 함께 정리를 하게 되었다. 나처럼 처음으로 프런트엔드 팀장을 맡게 되신 분에게 도움이 되었으면 좋겠다. 1. 개발팀장이란? 팀장은 그 팀에서 가장 개발을 잘하는 사람이 아닌 팀을 좋은 성과로 이끄는 사람, 팀을 서포트하는 사람이다. 즉 자신이 주어진 업무를 잘 해야하며 또한 팀원을 보조하고 팀원과 임원 사이를 연결해 주며 .. 개발 2024. 1. 9. 깃헙 프로필 꾸미기 1. 기술 뱃지 뱃지 제작 사이트 뱃지 제작 사이트가 있는데 나는 이 사이트를 참고하지 않고 markdown만 복사해서 사용하였다. https://simpleicons.org/ simpleicons 사이트에서 icon에 대한 데이터만 가져와서 사용하면 된다. 자바스크립트 뱃지를 만들면서 설명해본다. 아이콘이름 : javascript 색깔 : F7DF1E (#은 제거해준다.) style : 뱃지의 디자인인데 logoColor : 로고의 색을 정한다. (black이면 좌측, white이면 우측이다.) 완성된 코드 2. 타이핑되는 타이틀 https://github.com/DenverCoder1/readme-typing-svg?tab=readme-ov-file 이 사이트에서 설명만 잘 읽으면 할 수 있다. h.. 개발/github 2023. 12. 28. node.js, NPM은 무엇인가 처음으로 개발을 시작할 때 node.js와 NPM을 깔아서 시작을 하라고 해서 시키는 대로하고 왜 이것을 설치해야되는지 몰랐다. 개발을 어느정도 공부한 지금이라도 이 두 가지에 대해서 아무것도 모르면 안 될 것 같아서 글을 작성하게 되었다. Node.js가 만들어진 배경 웹 페이지를 만들기위해서는 뼈대가 되는 HTML, 꾸며주는 CSS, 동작하게 하는 JS가 필요하다. 여기서 JS는 HTML 조작과 변경을 위해서 만들어진 언어이다. JS를 해석하고 동작하게 하기 위해서는 엔진이 필요하다. 과거에는 브라우저의 엔진을 통해서 실행을 시켰고 반드시 JS는 브라우저를 통해서 실행하는 방법밖에 없었다. 브라우저를 통해서만 JS를 실행하면 다음과 같은 불편함이 있었다. 자바스크립크의 빠른 발전보다 웹 브라우저의 지.. 개발 2023. 11. 28. 내가 React를 선택한 이유 1. React란 무엇인가. React는 웹 개발에서 중요한 자리를 차지하고 있는 JavaScript 라이브러리이다. 주로 SPA (Single-Page Application)의 사용자 인터페이스를 구축하는 데 사용된다. React는 페이스북의 소프트웨어 엔지니어인 Jordan Walke에 의해 처음 개발되었으며, 2013년에 페이스북에 의해 공개되었다. 이후로 전 세계적으로 수많은 프로젝트와 애플리케이션에서 중요한 역할을 담당하고 있다. 2. 리액트를 선택한 이유 0) 쉽다 JS만을 사용하여 React를 쉽게 배우고 웹 및 모바일 프로그램을 개발할 수 있다. JS만을 사용해도 되지만 HTML과 JS의 혼합된 JSX 구문을 사용하면 휠씬 쉬워진다. 1) 강력한 커뮤니티와 생태계 많은 회사와 사람들이 사용.. 개발/React 2023. 11. 25. pwa란 무엇인가 1. PWA(Progressive Web Apps)란 무엇인가 PWA는 우리 모두가 알고 있고 좋아하는 HTML, CSS, JS와 같은 웹 기술로 만드는 앱이다. 하지만 그 느낌과 기능은 실제 네이티브 앱과 견줄 수 있을 정도로 좋다. PWA는 모바일환경에서 일단 홈 화면에 저장되면 브라우저에서 실행되며, 네이티브 앱처럼 동작한다. 또한, 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들도 전부 제공할 수 있다. 위 그림에서 볼 수 있는 것과 같이, PWA란 웹 앱의 발견 용이성과 네이티브 앱의 강력함을 모두 제공하는 것을 목표로 한다. 웹 앱의 발견 용이성 웹 사이트에 방문하는 것이 훨씬 쉽다. 설치해야 하는 네이티브 앱과는 달리 웹 사이트에 방문하면 바로 사용할 수 있다. URL 링크로 웹 앱.. 개발/PWA 2023. 11. 17. 무한 슬라이드 구현 (with React, TypeScript, styled-component) 무한 슬라이드(?)를 구현해 보았다. 1. setTimeout을 통해서 이 데이터를 하나씩 추가되도록 만들어 데이터가 끊임없이 만들어지도록 만들고 2. transform: translate3 d(0px, 0px, 0px)};을 활용하여 x축에 해당되는 첫 번째 인자가 계속해서 증가하는 -값으로 만들고 3. 좌우 그러데이션으로 사라지게 하기 1. 데이터가 계속해서 생기게 만들기 무한 슬라이드가 되도록 만들려면 데이터가 끊임없이 생성되어야 한다. slideNum가 2초마다 1씩 증가하도록 만들고 또한 WorkSlideData도 2초마다 순차적으로 하나씩 데이터가 들어가도록 만들었다. 첫 번째 데이터를 0으로 넣은 이유는 렌더링 되는 과정에서 첫 번째 데이터가 두 개가 생성되기 때문에 이를 숨기기 위해 빈 .. 개발/개발일지 2023. 11. 17. TS에서 svg파일을 가져오지 못 할 때 willa 클론코딩을 하고있는데 이상한 일이 발생하였다. import를 해도 안되고 img 태그를 사용하여도 파일을 제대로 불러오지 못 하는 상황이였다. img 폴더안에 분명히 cut.svg파일이 있는데 이 놈의 컴퓨터가 없다고 한다. (경로도 확실하다) img태그를 사용하면 인식을 못한다. const WorkSlide = () => { return ( ); }; 하지만 아래의 방식처럼 직접 svg을 넣으니깐 제대로 작동을한다. const WorkSlide = () => { return ( ); }; 원인 svg 파일은 자바스크립트가 아니므로 자바스크립트 모듈처럼 사용할 수 없다. 대신 http 요청을 사용하여 해당 파일을 로드해야 한다고 한다. 해결 src/custom.d.ts 파일 생성 declare.. 개발/버그일지 2023. 11. 16. 화면크기에 따른 자식순서 바꾸기 반응형으로 화면을 만들고 있는데 화면크기가 767px이하일 때 3번째 있는 자식이 첫 번째로 와야하는 화면을 만들어야 했다. 이걸 css를 통해서 구현을 해보자. React와 styled-component를 사용하였다. 코드 컴포넌트부분 const Header = () => { const navigate = useNavigate(); return ( { navigate('/work'); }} > work VNTRS { navigate('/'); }} > WILLACREATIVE.COM CONTENT INFO ); }; css부분 (order있는 부분만 가져왔다.) .work { order: 1; } .vntrs { order: 2; } .url { order: 3; } .content { order: 4.. 개발/개발일지 2023. 11. 2. 마우스 커서 div박스로 만들기 cousor옵션을 사용하는 것이 아닌 div박스를 통해서 커서를 만들어보자. 1. x, y축 데이터 가져오기 const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event: React.MouseEvent) => { setMousePosition({ x: event.clientX, y: event.clientY, }); }; return ( willacreative.com ); }; useState를 사용해서 x축과 y축 데이터를 담아줄 state를 만들어준다. handleMouseMove함수를 만들어 event.clientX와 event.clientY를 이용하여 커서의 위치를 state에 담.. 개발/개발일지 2023. 10. 20. 엘리먼트가 변경될 때 함수가 여러번 실행되는 버그 마우스를 올리면 +1씩 올라가는 함수인데 엘리먼트에서 엘리먼트로 변경될 때 함수가 3번 실행이 되는 버그가 발생하였다. 원인 const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = () => { setLeftNum(leftNum + 1); }; return ( {leftNum % 4 === 3 ? ( ) : ( )} ); }; export default Home; onMouseEnter는 해당 박스에 커서를 올렸을 때 발동을 한다. leftNum % 4 === 3일 때 문제가 발생한다. 1. 커서를 올릴 때 leftPlusNum 함수 발동하여 leftNum % 4 -> 3이 된다. 2. 엘리먼트로 변경되면서 l.. 개발/버그일지 2023. 10. 19. 이전 1 2 3 4 5 6 ··· 8 다음