본문 바로가기

분류 전체보기

 (109)
이지스퍼블리싱) Do it! 리액트 모던 웹 개발 with 타입스크립트 출간 기념 서평단 웹 개발 공부한다하면 누구나 알만한 Do it! 시리즈. 이지스 퍼블리싱에서 출판하는 책인데 동영상 강의도 함께 제공한다. 리액트에 관한 책도 있었으면 좋겠다고 생각했었는데 이번에 타입스크립트와 함께 웹 개발을 하는 Do it! 리액트 모던 웹 개발 with 타입스크립트 가 새로 출판되어서 출판 기념 서평단으로 책을 읽어볼 수 있었다. Do it! 리액트 모던 웹 개발 with 타입스크립트 저자 : 전예홍 출판 : 이지스 퍼블리싱 발매 : 2023년 01월 09일 나름 열심히 리액트를 공부한다곤하지만 혼자 공부하는 만큼 필요한 정보를 찾기도 강의를 찾기도 어려웠는데 이번에 Do it! 리액트 모던 웹 개발 with 타입스크립트 를 읽어보고 공부하는데에 큰 도움이 되었다. 친절한 Do it 답게 각 챕터별..
개발자 사이드 프로젝트 회고 | BMI 지수로 맞춤 식단을 추천해주는 헬스잇 | 사이드 프로젝트에 미쳐버린 취준생이 있다? 충격실화, 세상에 저런일이. 아무리 취준생이라지만 사이드 프로젝트 3개를 돌리는 취준생이 있다?? 코드에 미쳐버린듯한 과거의 내 자신을 뒤로하고,, 하나 둘 마감일자가 다가오면서 취준생은 미쳐가기시작하는데... 그렇게 미쳐가기직전 완성되어버린 2번 프로젝트였던 헬스잇... 12월 31일을 배포 날짜로 열심히 작업하였는데... 마지막 검수를 앞두고 서버가 터져버렸다. 하필 백엔드 맡아주셨던 차리님이 힐링하러가셔서 이유를 알 수가 없었다. 그렇다. 오늘은 가짜 마감이였던 것이다. 230107 22년의 여름, 팀 프로젝트를 구하려고 여기저기 찾아보던 때가 있었다. 그러다 SWYG 라는 사이트를 알게되었는데 기획자와 개발자를 매칭해주고 프로젝트 호스팅까지 도와주는 사이트였다. 4기 개발자로 지원하여 기획자가 기..
리액트 일지 005 | 스크롤 따라다니는 하단 플로팅 바 구현하기 | 리액트 특정 위치에서 스크롤 고정하기 | 리액트 스티키 플로팅 바 | 스크롤 고정 메뉴바 | 리액트 sticky components 에러로그 아래와 같은 사이트 메인 페이지 내 하단에 위치하는 메뉴바를 구현하고자했다. 처음에는 윈도우 화면의 스크롤을 조작해서 설정해야할 줄 알았는데 position: sticky; 라는 속성을 사용하면 css 코드 몇 줄로 간단하게 구현할 수 있는 기능 같았다. 이에 조금 더 찾아보니 플로팅 버튼이나 스티키 헤더같은 경우로 종종 사용되는 경우 같았다. sticky 속성 설정과 위치값만 설정하면 간단하게 해결할 수 있는 부분일 줄 알았는데 생각보다 시간이 좀 걸렸다.. 응애 나 코린이... 플로팅 헤더로는 자료가 많지만 하단에 고정하는 예시는 많이 없는 것 같기에 간단하게 구현했던 방법을 기록해보려한다. 내가 시도했던 다양한 방법들을 기록해놓은 관계로 하단에 3줄요약도 적어놨다. 나의 멋진 해결 /* 스..
리액트 일지 003 | 리액트 배열 렌더링하기 | API 연동하여 데이터 출력하기 | 리액트 배열 오류 에러로그 아래와 같이 음식 데이터를 받아와 화면에 출력하는 메뉴판을 만들던 중, 데이터를 배열로 받아와 출력하는 과정에서 여러가지 에러를 만났다. 분명 이전에 리액트 배웠을 때엔 배열을 가져와서 배열을 저장하고 map 함수를 써서 출력해주었던 것 같은데 다른 내용으로 시도해보았을 때 잘 안됐어서 좀 많은 시간을 소비했다ㅠㅠ 나의 멋진 해결 타입스크립트에서는 타입 명시를 보다 명확하게 해주어야하는데 그 부분이 부족했다. 이렇게 recoMenu라는 이름으로 useState를 설정하고 axios.get을 통하여 데이터를 받아온 뒤 두번째 인자에 배열을 저장해주었다. 오류가 난 근본적인 이유는 배열도 명시적으로 입력해주어야하는데 그렇지 않으면 암시적으로 항상 비어있는 항상 비어있는 배열을 가져오기 때문이였다(n..
깃허브 프로필 꾸미기 | 깃허브 핀 꾸미기 | GITHUB GIST | 깃허브에 최근 활동 보여주기 | GITHUB ACTIVITY-BOX | 개발자의 깃꾸 텅텅빈 깃허브가 허전해보이기 시작할 즈음, 고정된 핀을 통해 깃허브를 꾸밀 수 있는 방법을 발견했다! 나는 보여주기에 그럴싸한 레포가 없어서 따로 추가해두지않았었는데 이번에 귀여운 핀들을 발견해서 해당 핀으로 고정시켜두었다. 사용법이 생각보다 간단해서 5분이면 완성된다. 깃허브 활동내역과도 관계있는 핀들이 많아 시도해보았었는데 너무 귀여워서 하나 더 추가하는 김에 추가 방법에 대해 간단히 글을 작성해보았다. 이전에 추가한 핀은 유저의 커밋시간을 알려주는 productibe-box, 이번에 추가하는 핀은 유저의 최신 활동을 보여주는 activity-box이다. Activity-box는 활동 내용에 따라 다른 이모지들과 함께 내역을 알려줘서 너무 귀여운 것 같다. 보자마자 반해서 바로 적용시켰다. 1. 템플..
테오의 스프린트 13기 후기 | 일주일(사실 5일)동안 기획부터 배포까지 | 넷째 날, 다섯째 날, 여섯째 날에 우린 뭐했을까? | 내 아이디어가 만들어졌다고!! 넷째 날(개발 시작) 넷째 날에는 본격 개발을 위한 회의를 했다. 오랜(5일중 3일) 기획희의를 마치고 드디어 기능 정리에 들어가는 시간..! 기능 정리 이전에 팀 이름도 정했다! 테오의 스프린트 어쩔트리 해서 팀 테트리스! 흘러가는 드립처럼 내가 낸 아이디어였는데 이게 당첨되버렸다. 이번 스프린트에서는 내 아이디어가 채택도 많이 되고 뭔가 많은 것을 해보는 것 같아 좀 뿌듯하기도했다. 다음엔 BDD를 기반으로 기능 정리를 하였고 비슷한 기능끼리 묶어서 각자 담당 파트를 정했다.스프린트가 끝난 지금 우리 모두 공통적으로 아쉬웠던 점은 시간에 쫓겨서 프로젝트 구조들에 대해 깊은 이야기를 나누지않고 프로젝트를 진행했다는 점이다. 약간 통일성이 없긴 했지만 이쁘게 맞출만큼의 시간은 없어서 다들 개발에 집중했다..
리액트 일지 002 | 리액트 SVG 파일 겹침 현상 | 여러개의 SVG 파일 사용시 이미지 겹침 현상 | 리액트 SVG 오류 에러로그 아이콘 이미지와 메뉴명을 같이 사용하는 하단 네비게이션 바 구현 중, 이미지아이콘을 SVG링크로 복사하여 사용할 때에 이미지가 겹치는 일이 발생했다. 프로젝트에서 icons 폴더내에 각각의 파일들로 svg링크들을 보관하여 사용하고 있었고, import 경로도 각각 파일로 확실했는데 어디가 틀린지 몰라서 한참 고민했다 ㅠㅠ 심지어 미리보기에서도 각 이미지가 제대로 출력되었다. 이거 확인하려고 svg미리보는 확장팩까지 깔았다. 나의 멋진 해결 알고보니 이런 현상이 발생하는 이유가 SVG 링크의 id가 제일 처음 올린 id와 중복되어서 발생한 에러였다. id가 한가지로 지정되어있었기때문에 해당 아이디를 갖고 있는 홈 이미지만 출력됐던 것이였다. 요렇게 SVG 링크는 각각의 pattern id 를 갖게..
테오의 스프린트 13기 후기 | 일주일(사실 5일)동안 기획부터 배포까지 | 첫째 날, 둘째 날, 셋째 날에 우린 뭐했을까? | 내 아이디어가 뽑혔다고!! 테오의 스프린트 13기에 참여했다. 스프린트는 구글에서 시작되어 한 팀이 짧은 시간안에 일정 프로세스를 작업하게 되는 프로젝트이다. 어쩌다 알게된 백엔드 개발자 차리와 이야기하다 알게된 스프린트! 알고보니 이전에 프로젝트를 같이 진행했던 웬디님과 10기에서 같은 팀으로 스프린트를 진행했더랬다. 이런 기막힌 우연이 있나 싶을 차에 이번에 새로 13기 스프린트를 진행한다기에 냉큼 참여 신청하고 5일 가량의 짧은 시간동안 스프린트에 참여해보았다. 스프린트는 5일동안 온라인으로 피그잼과 개더를 사용하여 진행된다! 첫째 날 평소 창의성없이 살아가는 나지만 이번 스프린트에서는 하고 싶은 아이디어가 있었기에 마음 속에 꼭꼭 품고 스프린트 첫 날을 참여했다. 그런데 이렇게 수많은 아이디어가 나왔었고 각자의 아이디어를 ..

티스토리툴바