요새 공부 중인 Nuxt.js의 서버가 익스프레스로 돌아가는 걸 보고 노드에도 관심을 가지던 중 Do it! 시리즈로 유명한 이지스퍼블리싱에서 Node.js 입문 도서가 나왔다는 소식을 들었다. Do it 시리즈는 프로그래밍 입문용 서적으로 많이 추천되는데, 최근 Vue.js를 공부할 때도 「Do it! Vue.js 입문」 책을 완독 하며 기초 개념을 쌓는데 큰 도움이 되었기에 기대가 됐다. 프론트엔드를 공부했던 터라 노드는 자바스크립트를 이용해 서버를 구성한다는 것 외에는 깊은 지식이 없었다. 책을 읽기 전에는 서버 쪽 책이라서 어려우면 어떡하지? 하는 생각이 들었는데 입문 도서답게 노드를 설치하는 방법부터 차근차근 목차가 구성되어 있었다. 또한 Do it 시리즈에서 내가 제일 좋아하는 N일 완독 플랜..
간단한 리팩토링 // 기존에 작성했던 코드 if (!isA && isB) { element.style.maxHeight = '384px' } else if (isA && !isB) { element.style.maxHeight = '360px' } else if (!isA && isB) { element.style.maxHeight = '320px' } else { element.style.maxHeight = '300px' } // 수정한 코드 let maxHeight = 300 if (!isA) { if (!sB) { maxHeight = 384 } else { maxHeight = 320 } } else if (!isB) { maxHeight = 360 } element.style.maxHeight..
지난 2주간 스스로 공부하거나 배운 것들! 하나씩 정리할 시간은 없고, 잊지 않기 위해 간단하게 기록해 둔다. 리액트는 왜 모든 요청이 비동기일까? 에서 시작된 궁금증싱글스레드와 이벤트 루프의 상관관계자바스크립트는 싱글 스레드여서 원래 동기적으로 작동하는데, 이벤트 루프를 활용해서 비동기적으로 여러 작업을 수행할 수 있다.자바스크립트에서 비동기 작업은 콜백함수, Promise, async-awiat 등을 통해 구현되며, 비동기 패턴을 통해 이벤트 루프를 조절할 수 있다. 이벤트 루프자바스크립트와 간은 단일 스레드 환경에서 비동기 작업을 관리하고 실행하는 핵심 메커니즘 중 하나코드 실행을 순차적으로 진행하면서 비동기 작업을 계획하고 처리하는 작업을 한다.즉, 브라우저 동작 타이밍을 제어하는 관리자이다. 프..
프로젝트 소개 프로젝트 명 DIEDIE.gg 기획 의도 리그 오브 레전드 게임 내 비매너 유저를 신고하고, 신고 전적 및 유저 정보를 확인할 수 있는 서비스 프로젝트 설명 프로젝트 기간 23/08/04 ~ 23/09/05 (프로젝트 주제 선정 및 담당 파트 구현 기간 전체) 사용 기술 Library React Programming Language TypeScript Styling Styled-Components State Management Recoil, Tanstack-Query Formatting ESLint, Prettier Version Control Git, GitHub Design Figma Communication Notion, Slack 기술적 의사 결정 TypeScript - 정적 타입 ..
비전공자의 개발 입문 이유"남들은 러닝화 신고 레이스를 달리는데 나는 그 트랙에 맨발로 서있는 기분이야." 재작년 커리어 전환을 준비할 때 친구에게 털어놓았던 고민이다. 준비하던 유학이 코로나로 인해 무산되며 이제 어떻게 해야 하나 많이 힘들었지만, 가만히 있을 수만은 없어 무엇을 하면서 살건지 정말 치열하게 고민했다. 그중 가장 큰 도움이 됐던 '내게 맞는 일을 하고 싶어'라는 책을 읽으며 아래와 같이 직업 선택을 위한 체크 리스트를 정리했다. ✅ 단순 작업이 반복되는 직무는 나와 맞지 않는다. ✅ 어려워도 꾸준히 성장할 수 있는 업무가 더 좋다. ✅ 일반 사무직으로는 성취감을 느끼기 어려웠다. ✅ 내가 하는 일이 직접적으로 나의 스펙 또는 성과가 되길 원한다. ✅ 자기 주도적으로 일할 수 있었으면 좋..
강릉의 바다를 처음 본 날을 잊을 수 없다. 자주 가던 서해 바다는 언제나 눈 끝에 뻘과 이름 모를 섬이 닿았다. 하지만 동해의 바다는 깊이도, 넓이도 가늠할 수 없는 지평선 같았다. 항상 넓은 곳으로 나아가고 싶은 꿈을 가진 내게 강릉의 넓은 바다는 괜스레 마음을 일렁이게 하는 무언가가 있었다. 많은 부트캠프 중에서 항해99를 선택한 이유는 여러 가지가 있었지만 그중 하나는 ‘항해’라는 단어에 영향을 받아서도 있다. 99일 동안 넓은 바다를 헤쳐가며 목표를 향해간다는 스토리텔링은 마음을 사로잡기에 충분했다. 나는 더 큰 세계로 갈 거니까. 매니저님, 동기들과 우왕좌왕 배를 조종하는 법을 배우며 천천히 나아간 지도 53일째가 되었다. 새로운 사람 만나기를 좋아하고 그 사람이 살아온 시간, 장점 등을 듣는..
요구사항 정의 구현해야 할 기능 1) 공통 UI 구현하기 API 명세서 작성하기 2) 본문 CRUD 구현 본문 리스트 조회하기 본문 조회하기 본문 추가하기 본문 삭제하기 본문 수정하기 3) 배포 json-server 서버 배포 (heroku 사용) 리액트 프로젝트 배포 (S3, vercel 등 자유) 필수 요구사항 동적 라우팅 사용 1개 이상의 Custom Hook 구현 Form에 유효성 검증 기능 적용 버튼 컴포넌트 1개로 모든 버튼 구현 배포된 결과물에서는 console.log()가 보이지 않도록 처리 .env를 이용해서 API 서버의 URL 코드 상에서 숨기도록 처리 프로젝트 설명 자신이 좋아하는 과자를 소개할 수 있는 웹페이지를 만들고자 했다. 2023.04.28 ~ 2023.04.30 기간동안 ..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 리액트 Lv.4 과제 제출하기 🤔 리액트 개념 정리해서 블로그에 업로드하기 ✅ 리액트 Lv.4 과제 제출하기 이번 주는 유독 정신없이 한 주가 흘러가서 다시 되짚어 본다. 월요일엔 지난주에 계획했던 대로 Lv.3 과제를 서로 바꿔 다시 구현해 보면서 리팩토링을 진행했고, 화요일은 각자 복습(나는 hooks와 js 복습 진행), 수요일부터 목요일까지 심화주차 강의를 2/3 들은 뒤 금요일 ~ 토요일 오전은 페어분과 빠르게 프로젝트 기획을 하고 HTML, CSS구현, 토요일 낮 ~ 일요일은 기능 구현을 진행해 일요일 18시에 과제를 제출했다. 심화주차 강의는 리덕스 툴킷, axios, thunk, react query 등으로 이루어져 있었는데 휘몰..
요구사항 정의 구현해야 할 기능 Button styled-components를 이용해 구현하며, props를 적절하게 활용할 것 버튼 label에 선택적으로 아이콘을 넣을 수 있도록 구현 Modal 취소, 확인이 있고, overlay 클릭 시 모달이 닫히지 않음 닫기 버튼만 있고, overlay 클릭 시 모달이 닫힘 모달을 on 시키는 버튼의 형태는 각각 달라야 하며 위에서 만든 버튼 재사용 가능 Inpnut 일반 형식의 Input 숫자를 넣었을 때 3자리 숫자마다 ,가 찍히는 input form을 구현하고 각 inpnut에 값 입력 후 저장 버튼 클릭 시 { name: '아무 텍스트', price: '콤마가 없는 금액' } 을 alert에 표시 Select select 클릭 시 option들이 나오고 ..
한 주 돌아보기 이번주에 해낸 것 이번주에 하지 못한 것 😎 리액트 Lv.2, 3 과제 제출하기 🤔 리덕스 이해하고 리코일과 비교해보기 ✅ 리액트 Lv.2, 3 과제 제출하기 리액트 Lv.1 과제는 useState로 투두리스트 만들기, Lv.2 과제는 redux로 투두리스트 만들기, Lv.3 과제는 스타일드 컴포넌트 연습하기였다. 4월 14일 금요일에 리액트 공부를 시작해 4월 23일인 오늘까지 과제 세 개를 끝낸 것에 대해서는 박수!👏🏼 Lv.5에 있는 JWT 토큰 로그인을 온보딩주차 미니 프로젝트 때부터 해보고 싶었는데 기한 내 끝내지 못할 것 같아 접어뒀었다. 로그인 여부와 유저의 권한에 따라 화면 요소를 달리하는 것도 재밌는 작업이고 일반 로그인, SNS 로그인이 아닌 JWT 토큰 로그인 방식은 ..
