개발일지

https://ko.javascript.info/recursion 재귀와 스택 ko.javascript.info 재귀와 스택 함수에 대해 좀 더 깊이 알아보도록 하겠습니다. 함수 심화학습, 첫 번째 주제는 재귀(recursion) 입니다. 프로그래밍을 새롭게 학습하는 초심자가 아니라 이 주제에 익숙하시다면, 본 챕터를 건너뛰어도 괜찮습니다. 재귀는 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴입니다. 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화시킬 수 있을 때도 재귀를 사용할 수 있습니다. 곧 살펴보겠지만, 특정 자료구조를 다뤄야 할 때도 재귀가 사용됩니다. 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있습니다. ..

먼저 우리는 프로젝트 주제를 드라이브 방식의 데이터 관리로 정했다. 구글드라이브와 핀터레스트를 처음에 레퍼런스로 잡고 진행을 하다가 서로 장점을 겹치다 보니 방향성을 잃어버리는게 있어서 기획회의에 조금 더 구체적으로 정해야함을 느껴 수정 중이다. 먼저 작성해둔 스펙은 첫 회의 때 작성해두고 두 번째에 바뀐 것들이 있는데 첫번째로 피드백을 받게 되어 아쉽지만 큰틀은 거의 같고 기술 피드백에서 소중한 부분이 많아 중요한 것들을 체크해보겠다. 토큰 방식을 access token, refresh token 두개를 기간 차이를 두고 사용하기로 했고. 파일 관리하며 드는 서버 비용을 알아봐서 이미지는 s3 storage 프리티어로 정했고 CI/CD 구축완료 목표 피드백으로는 기획을 더 탄탄하게 잡기 API 설계는 ..

아침에 굿모닝 프론트 회의를 진행했다ㅎㅎ 컴포넌트와 폴더 이름명을 정하고 오후 전체회의에서 얘기해 볼 백엔드와 JWT 로그인시 Refresh 토큰까지 적용할 것인지. 디자이너님과는 기존 mvp에 있던 온보드 페이지를 뒤로 미루고 띄운다면 팝업이나 어느 페이지에서 띄울지 그리고 모달창 디자인 정도가 있고 다같이 만나서는 게시글 부분에서 타입 설정하고 우선순위를 어떤것부터 만들어둘지, 쓰기, 편집시 어떤 형태로 할지, 전체적인 상세기획 추가로 하고 폴더를 메인 관리페이지에서 공개,비공개 설정을 명확히 하나로 정해야한다. 그렇게 회의를 마친 결과는 이렇다. 1. 온보딩 페이지 ( 앱 소개 페이지 ) → 나중에 좀 진행이 됬을때 1. 웹서비스 소개 영역 2. 처음에 소개처럼 나올수도 있고 3. 온보딩이 메인에서..

6월 24일을 시작으로 실전 프로젝트 조가 배정되었다. 우리는 프론트 3명, 백엔드 3명 , 디자이너 1명이다 다들 가볍게 자기소개 한 뒤 바로 기획회의를 시작해서 저녁에도 디자이너님과 저녁회의를 한 번도 안쉬고 3시간 30분에 걸친 대장정을 끝냈다ㅎㅎㅎㅎ 그 첫번째 모두가 진 빠진 대장정의 결과는 이렇다!! 전체 기획 # 링크,글 자료 기반 카탈로그 작성 및 공유하는 소셜 네트워킹 서비스 # 정보 아카이브 서비스 1. 온보딩 페이지 ( 앱 소개 페이지 ) a. 웹서비스 소개 영역 2. 로그인/회원가입 페이지 1. JWT 토큰 발급을 통한 로그인 2. 일반 로그인 3. 소셜 로그인 3. 메인 페이지 1. 드래그 앤 드롭으로 내 계정 폴더에 복사/붙여넣기 2. 게시물 공개/비공개 설정 3. 게시물 작성하기..

이번 프로젝트를 진행하면서 처음 기능 구현하는 로그인와 회원가입에서 트러블 슈팅들을 정리해둔 글이다 처음이다보니 당연히 어려웠지만 그 중에서도 지금 진행중인 유효성검사hook-form사용과 토큰 받아오기다. 로그인과 회원가입은 프로젝트에서 계속 포함되면서 질문에 대한 답과 참고할 코드가 있지만 refresh토큰 받아오기와 유효성 검사 hook-form 사용은 찾아보기 어려웠다. 지금 현재는 유효성 검사에 hook-form과 Ref를 같이 사용하는데 오류가나서 헤매는 중이다. 추후에 해결 후 작성하고자 한다. 고민이 되는것은 훅폼+Ref을 먼저할지, 로컬에 있는 refresh를 쿠키로 받아오는것을 먼저 할지 우선순위가 애매해진 상황이다. 결과들은 카테고리 - 실전프로젝트 - 에 올리겠다. https://m..

리액트 회원가입 부분을 만들면서 navigate로 회원가입 axios/post 후 메인으로 페이지 이동을 넣으려고 작성한 코드이다 // userSlice.js import { useNavigate } from "react-router-dom"; ㅡㅡㅡㅡㅡㅡㅡ export const signup = (username, nickname, password) => { return async function (dispatch) { const navigate = useNavigate(); try { const repsonse = await axios.post("http://localhost:5001/signup", { username: username, nickname: nickname, imgPath: null,..

처음 Object.assign을 보고 차례대로 값을 복사한다고 생각해서 중첩되는줄 알았다. 그래서 콘솔 결과값은 color = red,blue size = big 인줄 알았지만 차례대로 덮어가면서 복사한다는 메소드로 설명되었다. assign 아래 추가 설명 (제네릭 관련 기호이기 때문에 아직 모르는게 당연하다) 복사하려는 target과 복사하려는 source로 구성되어있다. 차례대로 T와 U와 V가 겹쳐서 복사된다. 위에 color와 같이 복사되면서 없는 property는 덮어진다. 교집합처럼 https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7

드림코딩 프론트엔드 개발자 입문편에서 자바스크립트 문법강의를 보던 중 되게 편리해서 쉽게 사용해보자! 라는 생각에 가져와 봤습니다! 기존 for반복문을 사용했을 부분을 value부분으로 돌려 보아도 되겠군요. 단, 알고리즘 공부하며 직접 오브젝트를 건드린다는 의미로 사용하기를 자제하라했던 말이 남겨두고 사용전에 찾아보도록 하겠습니다. 일단 아래 문법은 이렇습니다. value of array로 변신 14분 20초 추가 강의에서는 foreach도 나온다 8강 16분 45초 https://www.youtube.com/watch?v=1Lbr29tzAA8&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=7 https://www.youtube.com/watch?v=yOdAVDuHU..