기술 메모장 14

빠르게 웹 개발을 시작하면서 내가 놓쳤던 것들

얼마 전, 길기도 하고 짧기도 한 2년 동안의 개발자 생활을 마쳤다. 회사에 다니던 2년 동안 항상 지녔던 고민이 있었다. 이론과 현실의 괴리에서 오는 고민, 내 실력에 대한 의심 등의 이야기들이다. 이제 이 고민이,이 찝찝함이 어떤 이유로부터 나온 것인지를 알 것 같다. 그 이유 중 일부분을 정리해 보았다. 어쩌다 (웹) FE 개발자 변명이겠지만.. 22년도에 FE 개발자가 되기 전.. 나는 흔한 대학 2학년 학부생이었다. SW단과대에는 속해있지만 전공으로 배운 거라곤 자료구조, 알고리즘, 그리고 C 언어뿐. 파이썬으로 인공지능, 데이터 분석에 입문, 공부하던 평범한 학부생이었다. AI 연구원, 엔지니어 사이를 고민하던 나는, 어느 날 “산업기능요원”이라는 기회를 발견하게 되었다. AI과 관련된 직무로..

기술 메모장 2024.01.22

잘하는 개발자를 보면서 포기하지 않기

회사에서 종종 동료와 산책을 하면서 여러 이야기가 오가곤 한다. 그 중 최근에 이야기했던 주제 중 하나를 글로 정리해 남겨두기로 했다. 잘하는 개발자가 너무 많아 (웹)개발자의 세계는 다른 직업군들에 비해 나이, 학력, 경력에 대한 제약이 상대적으로 적다. 대신 그 사람이 현재 무엇을 얼마나 할 수 있는지에 더 집중한다. 이런 특징 때문에 고등학생 개발자, 비전공 출신 유니콘/대기업 개발자가 존재하고, 다른 직업군들에 비해 높은 빈도로 목격된다. 기술블로그와 깃허브를 보면, 아는 것도 많고 멋진 서비스를 만드는 개발자들이 많이 존재하는 것만 같다. 심지어 회사 내 같은 환경에서도 눈에 띄는 차이를 보이는 동료가 존재한다. 나는 이런 사례들을 보며 나의 상황과 비교를 하곤 한다. 이로 인해 나의 의욕이 꺾..

기술 메모장 2023.12.17

오픈소스 저장소, PR에서 볼 수 있는 것들 (feat. react-query, @toss/slash)

이 글은 최근에 React Suspense 에 대해 공부하면서 겪은 일을 메모한 것을 정리한 글이다. React Suspense 에 대해 소개하는 글, 그것을 활용하는 영상은 아래를 참고해보면 좋다. https://reactjs.org/docs/react-api.html#reactsuspense React Top-Level API – React A JavaScript library for building user interfaces reactjs.org 토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 react-query 와 같이 사용해보려고 코드를 작성하던 도중 궁금한 점이 생겼다. suspense 는 어떤 작업이 완료될 때까지 컴포넌트의 렌더링을 지연(suspend)시키고 ..

기술 메모장 2022.11.16

나의 코딩 컨벤션과 폴더구조를 소개합니다. #2 (스타일 가이드와 템플릿 레포지토리)

https://ghoon99.tistory.com/92 나의 코딩 컨벤션과 폴더구조를 소개합니다. #1 (깃 컨벤션과 폴더구조) 최근에 다른 사람들과 같이 코드를 짜볼 기회가 늘어나면서 신기한 경험을 했다. // React Component export default function App({}: AppProps){} const App:React.FC = ({}) => {} const App:FC =({}) => {} c.. ghoon99.tistory.com 지난 글에서는 내가 직접 작성해본 깃 관련 컨벤션과 폴더구조에 대한 내용을 다뤘다. 이어서 코딩스타일 가이드, 그리고 이것들을 바탕으로 한 템플릿 레포지토리를 만들어보면서 생각난 것들을 간략하게나마 기록해본다. 코딩 스타일 가이드 https://g..

기술 메모장 2022.10.18

나의 코딩 컨벤션과 폴더구조를 소개합니다. #1 (깃 컨벤션과 폴더구조)

최근에 다른 사람들과 같이 코드를 짜볼 기회가 늘어나면서 신기한 경험을 했다. // React Component export default function App({}: AppProps){} const App:React.FC = ({}) => {} const App:FC =({}) => {} const App = ({}:Props) => {} // 등등 놀랍게도 ..같은 컴포넌트를 작성할때 나왔던 코드들이다. 리액트를 사용할때 가장 기본적인 컴포넌트 정의 스타일부터 여러개로 갈렸다. props 를 컴포넌트 내부에서 구조분해할당하여 사용하는 분도 계셨고, props type을 type 으로 정의하냐, interface 로 정의하냐라는 주제로 가벼운 토론도 해봤다. 이렇게 같은 언어, 같은 라이브러리(프레임..

기술 메모장 2022.10.13

React Router를 직접 만들어보는 과정 (with 프리온보딩 FE 챌린지 10월)

8월에 참여했던 FE 프리온보딩 챌린지.. https://ghoon99.tistory.com/88 원티드 프리온보딩 챌린지 8월 참여 후기 원티드에서 운영하는 프로그램인 프리온보딩 챌린지, 8월 첫주 부터 2주동안 강의가 진행되었다. 마침 무언가 해볼 것들을 찾고있었는데 커리큘럼도 너무 좋아보였고, 이 기회에 리액트 쿼리 ghoon99.tistory.com 너무 만족했었고 10월에도 진행한다고 해서 바로 신청을 했다. 이번 주제는 CSR/SSR with Next JS 이다. 첫 시간에서는 MPA , SSR , SPA , CSR 에 대한 내용을 다뤘다. 리액트만으로 라우팅을 구현해보는 것이 과제로 나왔다. 혹시 완성된 코드가 궁금하면 여기서 확인하면 된다. https://github.com/GHooN99/..

기술 메모장 2022.10.09

UNITHON 9TH 참가 후기 - 찐 I의 2박3일 오프라인 해커톤 도전기

별건 없구요.. 그냥 일기에요.. 이것저것 해보려던 8월, 마침 지인 분께서 재밌는 소식을 전해주셨고.. 고민 끝에 한번 참여해보기로 했다! UNITHON 9TH https://www.unit.center/unithon UNITHON IT community United Hackathon, UNITHON 유니톤은 IT 커뮤니티 구성원들의 즐거운 성장과 교류를 목표로 하는 해커톤입니다. www.unit.center 오랜만에 진행되는 오프라인 해커톤 참가인원을 선발 할때 IT 커뮤니티 활동을 하고 있는 인원 ( IT 연합동아리 등등)을 위주로 선발하였다고 한다. 그래서 대부분의 사람들이 이름을 들으면 알법한 대외활동단체에 소속된 사람들이였다. 심지어 (SW 특성화)고등학생 분들도 꽤 많이 참여 하신 것 같다...

기술 메모장 2022.09.13

원티드 프리온보딩 챌린지 8월 참여 후기

원티드에서 운영하는 프로그램인 프리온보딩 챌린지, 8월 첫주 부터 2주동안 강의가 진행되었다. 마침 무언가 해볼 것들을 찾고있었는데 커리큘럼도 너무 좋아보였고, 이 기회에 리액트 쿼리도 다뤄보고 싶어서 바로 신청하였다. 신청 후 처음에는 별 생각이 없었는데 사전과제를 진행하고, 강의를 들으면서 은근히 생각할 것들이 많아서 기록을 남겨본다. 사전과제 : Todo App CRUD with react-query 강의 시작 전, 사전 과제에 대한 안내가 있었고 로그인, 회원가입 폼 로직, 인증 , CRUD 로직을 구현해 보라고 했다. 사전과제를 바탕으로 강의가 진행된다고 하니 바로 구현을 시작하였다. express 와 json db 를 이용한 간단한 API 를 미리 제공해주었고, 로컬이라도 백엔드 서버를 키고 ..

기술 메모장 2022.09.11

테오의 스프린트 11기에 참여하다.

테오 스프린트 11기! 테오의 프론트엔드 시리즈 | 테오의 프론트엔드 - teo.log 안녕하세요. 테오입니다. 스프린트가 시작될 주의 첫날이네요 :) 1 개인의 소중한 시간을 스프린트에 써 주기로 결심한 빈츠, 민민, 비비, 곤이, 혜심쓰, 웹린이, 폴, 해달 모두 모두 감사드립니다 velog.io 회사에서 블로그들을 찾아보다 너무나 멋진 글들이 많이 올라오는 곳을 발견했다. 마침 프론트엔드에 대한 정보를 공유하는 카톡방도 있다고 해서 찾아들어갔고, 그 곳에서 이런 프로그램을 진행한다고 공지가 올라왔다. 반복되는 회사생활에 지쳐 뭔가 자극이 필요했던 나, 관심사가 비슷한 다른 사람들을 만나보고자.. 그리고 뭔가 나의 프로젝트 하나가 생기지 않을까? 막연한 기대감을 가지고 참가 신청을 하였다. 활동 요약..

기술 메모장 2022.09.09

첫 실전업무! 모달 제작해보기 with React Portal, 애니메이션 적용기

첫 업무 처음으로 사내에서 쓰는 페이지가 아닌 사용자가 직접 볼 수 있는 페이지를 맡게 되었다. 간단한 초대 이벤트 페이지를 만드는 것이였고 구현해야 될 것 중에는 SNS 공유하기 모달창이 있었다. 사내 CMS에는 UI 라이브러리(Ant Design)를 사용하여 직접 모달을 구현하지 않아도 괜찮지만 이 프로젝트에서는 라이브러리 없이 내가 직접 만들어서 사용해야 했다. 공유하기 모달창의 구현 내용은 다음과 같다. - 버튼을 클릭하면 밑에서 공유하기 모달창이 올라오고 뒷 배경은 어두워진다. - 뒷 배경을 클릭하면 모달이 닫히도록 구현해야 한다. - 열고 닫을 때 페이드인/아웃, 슬라이드 업/다운 애니메이션이 적용되어야 한다. 처음 혼자서 만들어볼 때는 검색을 하면서 금방 만들어 볼 수 있었다. 그리고 팀장님..

기술 메모장 2022.07.27