분류 전체보기124

• 

  개발팀장은 무엇을 해야할까? 기존 프로젝트를 접고 새로운 프로젝트를 시작하면서 기존의 팀에서 몇몇 멤버가 변경되었다. 그 과정에서 원래 프런트엔드 팀장이던 분이 나가게 되어서 내가 팀장을 맡게 되었다. 내가 팀장을 맡은 이유는 어떠한 책임이 나에게 주어졌을 기대에 부응하기 위해 평소보다 훨씬 많은 노력한다는 것을 알기 때문이다. 하지만 막상 팀장을 맡고 나니 무엇을 해야 할지 막막하여 자료를 조사해서 나의 생각과 함께 정리를 하게 되었다. 나처럼 처음으로 프런트엔드 팀장을 맡게 되신 분에게 도움이 되었으면 좋겠다. 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.

• 

  [나는 주니어 개발자다]개발자 취업의 힘듦에 위안을 주는 책 나는 30대가 되기전에 개발자로 취업을 하고자하는 목표가 있다. 그 목표를 달성하기 위해서는 많은 노하우들을 필요로 했다. 그래서 도서관에서 취업을 위한 노하우나 마음가짐을 배우기 위해서 '나는 주니어 개발자다'라는 책을 선택하였다. 책을 30분쯤 읽었을무렵 나에게 큰 임팩트를 주는 노하우나 마음가짐을 하나 주지 않고 그냥 넋두리를 하다가 결국에는 이겨내었다는 느낌이 들어서 흥미가 꺼졌다. 그렇게 책을 덮어두고 다음날 다시 읽었다. 새로운 사람, 힘듦, 이겨냄 똑같은 레퍼토리였지만 글을 읽을 때 어제와 다른 느낌이 들었다. 다음 날 다시 책을 읽었다. 똑같은 레파토리하지만 편안한 마음 왜일까?라는 의문이 들었고 블로그를 켜서 글을 써보았다. 썼다가 지웠다가 반복하다 보니 그 이유를 찾을 수 있었다. 책에.. 일상/독서록 2023. 11. 25.

• 

  경제적 자유를 위한 5가지 공부법 역행자라는 책을 읽으면서 경제적 자유를 얻고 싶어졌다. 책을 읽기에서 그치기보다는 실천을 해보자 마음을 먹어서 "경제적 자유를 위한 5가지 공부법"을 블로그에 정리하고자한다. 1. 정체성 변화 내 중학교 친구를 만나면 항상 대한민국의 문제점에 대해서 토론을 한다. 출산율이 어떻고, 이런 식으로 정치를 하면 안되고, 남녀갈등이 어떻고 항상 불만만 토로했다. 전문적 지식이 하나도 없이 그냥 커뮤니티의 글과 댓글을 토대로 의미 없는 토론을 했었다. 이런 토론을 하는 친구는 현재 공무원 시험에 계속 낙방을 하고 있고 나도 그냥 아무 일도 하지않고 개발자가 된다면서 엄마한테 용돈이나 받으면서 생활을 하고있다. 사회에 대한 불만만 이야기하고 정작 아무것도 실천하지 않는 사람인 것이다. 우리 어머니는 주변 사람들도 .. 일상/독서록 2023. 11. 19.

• 클린코드 개념 왜 클린코드가 중요한가 코드 그자체로 설명이 되는 코드 방법 1) 검색이 가능한 이름을 써라(ex 하루가 몇초인지 변수로 정해놓기) 2) 함수명은 반드시 동사로 써라(한가지 기능만 하는 함수로 만들어라) 함수는 여러가지 기능을 하기보다는 한가지 기능만 수행하는것이 좋기 때문에 동사로 명칭을 정해놓으면 좋음 두 가지 기능을 한다면 쪼개는게 좋다. 3) 함수의 인수는 3개이하가 좋음 4개이상일 경우에는 객체로 묶어서 보내는게 좋다. (configuration object) 4)boolean값을 함수로 보내는건 자제하자. 함수안에 if, else가 있다는 뜻이고 각자 함수로 만드는게 좋다. 5)짧은 변수명이나 축약어를 쓰는 것을 피하자 ex) e, i, btn 6) 주석을 남기자 처음부터 클린코딩을 하려.. 카테고리 없음 2023. 11. 18.

• 

  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.