총 4주의 기간 동안 프론트엔드 4명, 백엔드 3명으로 프로젝트를 진행하였다. 처음으로 백엔드와 함께 협업을 하면서 배려하며 소통하는 방법, 백엔드와 협의해야 할 점들에 대해 배울 수 있었다. 기획부터 개발까지 진행하면서 어려웠던 점, 느낀 점들에 대해 정리하고자 한다. 📌서비스 소개 서비스 명: WuMo 해당 서비스는 가족, 친구와 함께 모임에 대해 일정을 만들어서 기록할 수 있는 서비스이다. 카톡방에서 약속, 모임에 대해 이야기할 때 모임 내용과 관련없는 이야기가 섞여서 필요한 장소나 정보에 대해 찾기가 어렵다고 느껴서 모임에 대한 내용을 정리하고 기록할 수 있는 서비스를 만들게 되었다. 📱배포 사이트: https://5yes-wumo.vercel.app/ 🛠️프로젝트 깃헙: https://githu..
프로젝트를 진행하면서 이미지 등록을 위해 input type='flie'을 사용하였다. 그런데 기능을 구현하면서 올렸던 이미지를 삭제 후 다시 동일한 이미지를 선택하였을 때 input의 onChange 이벤트가 발생하지 않는 것을 알았다. A이미지 선택 ➡️ change 이벤트 발생 A이미지 삭제 A이미지 재선택 ➡️Change 이벤트가 발생하지 않아서 파일이 업로드되지 않음. input type이 file일 때 선택된 파일의 변경사항이 없으면 change 이벤트가 실행되지 않는다. 그래서 이미지를 삭제할 때 이미지 미리보기만 삭제하는 것이 아니라 input에 대한 초기화 과정이 필요했다. 여러 가지 방법 시도하기 시도한 방법 1 구글링 했을 때 봤던 방법 중 하나는 해당 input을 select하고 s..
총 2주 반 정도의 프로젝트 기간을 통해 '언성히어로'라는 서비스를 만들었다. 짧지만 기획부터 개발까지 진행하며 많은 것을 배울 수 있는 기간이었고 스스로에 대해서도 많이 깨달은 기간이었다. 그래서 프로젝트, 그리고 프로젝트 기간 동안 느낀 것들에 대해 간단히 정리하고자 한다. 서비스 소개 서비스 명: 언성히어로 해당 서비스는 '말 없는 아버지들의 고민 상담소' 라는 캐치프레이즈를 가지고, 많은 고민을 안고 살아가지만 쉽게 고민을 털어놓지 못하는 아버지들을 위한 자유로운 소통, 상담 그리고 위로받는 공간을 만들기 위해 기획하였다. 언성히어로는, 용기 있는 행동, 자기희생적 행동을 하여 훌륭한 업적을 달성했지만 유명하거나 알려지지 않은 사람’을 뜻하는 합성어 이런 뜻을 가지고 있다. 우리는 여기서 언제나 ..
타입 변환은 크게 개발자가 의도적으로 값의 타입을 변환하는 명시적 타입 변환과 자바스크립트 엔진에 의해 암묵적으로 타입을 변환하는 암묵적 타입 변환이 있다. 암묵적 타입 변환 : 코드의 문맥에 부합하지 않을 때 자바스크립트는 에러를 띄우는 것이 아니라 암묵적 타입 변환을 통해 표현식을 평가한다. '10' + 2 // '102' 5 * '10' // 50 !0 //true if(1) {} 문자열 타입으로 변환 이항 연산자 +를 사용할 때 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작하여 다른 하나도 문자열로 변환된다. 1 + '2' // '12' '2' + 1 // '21' → 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이기 때문! 0 + '' // '0' -0 + '' // '0'..
데브코스 첫 번째 개인 프로젝트로 노션 클로닝 프로젝트를 진행했다. 바닐라 자바스크립트를 컴포넌트 방식으로 사용하였고 데브코스에서 제공하는 API를 활용하여 서버에 데이터를 저장하고 불러와서 구현하는 것이었다. 💥결과물 💭기본 요구사항 바닐라 JS 사용 글 단위를 Document Document는 하위 Document를 포함할 수 있다. 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링한다. Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링한다. 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링한다. Document Tree에서 각 Docu..
이진법 관련 알고리즘 문제를 풀다가 알게 되었다. 하나의 줄만 사용하여 이진법 관련한 계산을 간단하게 할 수 있다. single vertical bar ('|') 란? : 각 수를 이진법으로 변환한 후 각 자리를 1 또는 0으로 합한 후 결괏값에 대한 십진법 수를 반환한다. single vertical bar를 사용할 때와 사용하지 않을 때 어떤 차이가 있는지 알아보자. single vertical bar 없이 구현하기 const number1 = 21; const number2 = 28; number1.toString(2); // '10101' number2.toString(2); // '11100' 이진법으로 변환하면 각각 10101, 11100이다. 그리고 이 두 이진법의 각 자리를 비교하여 1이 ..
강의를 보면서 애플스토어 클론코딩을 진행하던 와중에 429 에러 rate-limited 를 보게되었다. 한 ip에서 서버에 요청이 과도하게 많아지면 그것을 제한하는 오류라고 한다. 시간이 지나면 해결되거나, 브라우저의 쿠키를 삭제하면 된다길래 적용했지만 계속해서 실패했다. 클레이풀 api를 사용중이었고 테스터플랜이었기 때문에 api 요청이 꽉찼나? 생각했지만 그것도 아니었다. 다른 페이지는 괜찮은데 장바구니 페이지에서만 오류가 나서 확인해보니, 장바구니 내역을 불러오는 useEffect에서 setState를 사용하는데 의존성 배열을 설정하지 않아서 useEffect 실행 > setState 실행으로 state 변경 > useEffect 실행 ... 이렇게 무한 루프에 빠진 것이었다! 그래서 의존성배열로 ..
함수의 리턴 값은 언제나 하나! 리액트에서 정의한 함수의 return 내에는 오직 하나의 최상위 태그만 존재해야 한다. export default function Test (){ return( Hello, world! React ) } 그래서 이렇게 의미가 없는 로 감싸는 경우가 많다. 하지만 로 감싸면 태그 자체는 사용하지 않지만 DOM에는 div가 적용된다. 따라서 이럴 때 사용할 수 있는 것이 Fragment이다. Fragment 사용하기 import React, { Fragment } from 'react'; export default function Test (){ return( Hello, world! React ) } 이렇게 가 아닌 를 사용하는 경우 DOM에 영향을 미치지 않는다! 그리고 ..
코딩앙마님의 강의를 보고 작성한 글입니다. https://www.youtube.com/watch?v=ymmiuSl1t5k&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=16 PUT 현재 단어를 완료했다는 의미로 체크를 하면 회색으로 표시되도록 하였는데 아직 새로고침을 하거나 나갔다 들어오면 초기값으로 변경되어 있다. 그래서 저장되어 있는 데이터의 isDone 상태를 바꾸기 위해 PUT 메소드를 사용할 것이다. Word 컴포넌트의 toggleDone 함수를 수정해보자. //Word.js function toggleDone(){ fetch(`http://localhost:3001/words/${word.id}`, { method : 'PUT', headers : { 'co..
https://yj-zero.tistory.com/86 React #8 [json, 리액트 라우터] 코딩앙마님의 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=vI-XtN_Zdfg&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=10 본격적인 페이지 만들기 이제 페이지를 만들기 위해 불필요한 파일.. yj-zero.tistory.com 이전 글의 내용에서 이어집니다. 코딩앙마님의 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=B70lI2PvRnA&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=13 이제 단어 목록에서 뜻 보기, 숨기기, 삭제, 체크박스를..
