진주의 개발괴발

💨코드스테이츠 메인 프로젝트 회고 목차💫 1️⃣새로운 팀 2️⃣유저플로우 3️⃣디자인 4️⃣개인 코딩 5️⃣에러, 그리고 또 에러 6️⃣마지막으로... 프리 프로젝트를 마치고 눈코 뜰 새 없이 바로 메인 프로젝트를 하게 되었다. 메인 프로젝트는 더 잘하고 싶은 욕심과 조금 지친 마음을 이끌고 새 팀원들을 만나게 되었다. 🖐새로운 팀 새 팀을 만드는 데 정말 힘들었다ㅋㅋㅋㅋ 그때 우리는 냉장고 재료로 레시피를 알려주는 플젝 아이디어를 염두에 두고 있었다. 처음에 효은언니네 프리 때 백엔드 분들이랑 같이 하는 건 어떠냐고 해서 연락을 드렸었는데, 백엔드 분들은 우리의 확고한 냉장고 아이디어에 조금 생각해 보겠다고 하셨었다. 그리고 대망의 팀 결성 날이 찾아왔고, 우리는 열심히 좋은 백엔드 분들을 영입하고자 ..

💅 Styled-Components 이번에 styled-components를 처음 써보았는데 확실히 직접 사용해보니 배우는 게 많았다. 아직 미숙한 점이 많지만 css보다 깔끔한 것 같기도 하고... 근데 내가 아직 잘 못써서 그런지 styled가 앞부분에 너무 많이 생겨버린다... ㅎㅎ 다른 분은 아예 파일을 파서 import * as W from "./styled.js"; function Login() { return ( ) }; 이렇게 가져와서 사용하셨다. 훨씬 깔끔해지는 듯! 1. attrs() 공식문서🔗 export const Input = styled.input.attrs({ autoComplete: "off" })` border: none; overflow: hidden; `; 추가적인 at..

코드스테이츠 프리 프로젝트를 마쳤다! 백엔드와 함께한 첫 협업이었는데 나름 성공적이었다 ㅎㅎ 역시 나는 프로젝트 체질...? 이라는 생각이 들 정도로 즐거웠다. 다양한 에러를 마주할 때마다 너무 힘들고 혹시 다 못 끝낼까봐 불안하기도 했지만😣 오늘은 나처럼 프로젝트 초보자들을 위한 글을 써보려고 한다! 백엔드와 (혹은 프론트엔드와) 첫 협업인데 어떻게 시작해야 할까요? 우선 가장 중요한 건 계획이다 사공이 많으면 뭐다? 팀 프로젝트는 사람이 많기 때문에 더욱 계획을 잘 짜둬야 한다. 이렇게 계획을 같이 짜도 "어...? 그게 그런 뜻이었어요?" 하는 일이 무조건 생기기 때문에 서로 소통이 중요하다 STEP1. 사용자 요구사항 정의서 : 시스템이 요구하는 사항을 나열 후 업무 단위로서 기술한 것 ◾ 기능 ..

💥Section3 이번 섹션은 정말 역대급으로 해이해진... 섹션이었다. 스스로를 어르고 달래느라 정말 힘들었다. 코딩 공부가 너무 재미있던 초반과 달리 점점 공부를 하며 알아갈수록 더 공부할 게 많구나... 싶어서 마음이 갑갑하다. 그러면서 코딩이 조금 지겨워졌던 것 같다. 회피하려고 자꾸 물건을 사들였다... 괜히 물건을 사면서 스트레스 풀고 공부하는 거 회피하고ㅠㅠ 다 본 유튜브를 괜히 켠다던지... 처음 부캠 시작했을 때랑 완전 반대다ㅋㅋㅋㅋㅋ 자꾸 왜 회피하려는 마음이 들었을까? 잘하려고 했는데 뭔가 실패할 것 같으니까 무서워졌나보다. 완벽하려고 하지 말고 그냥 마음을 비워야겠다. 하면 하는 거지 뭐! 다음 섹션의 목표는 '매일 한 걸음씩 발전하기!'로 정했다. 부캠을 시작한 지 벌써 3개월이 ..

Section 2를 돌아보며... 섹션 1 회고를 적을 때만 해도 섹션 2는 언제 끝나나 했는데, 벌써 섹션 2 회고를 적고 있다. 막상 회고를 적으려니까 뭘 적어야 할지, 어디서부터 이야기해야 할지 잘 모르겠다. 섹션 1에서는 정말 아무것도 모르던 나였기에 오히려 당당하게 모른다고 얘기할 수 있었다. 그런데 이번 섹션에 들어서면서 잘해야 할 것 같다는 압박감이 들었다. 나름 배웠는데도 기억 안나는 것들이 늘어가면서 회피를 했던 것 같다. 공부 시간도 제대로 안 지키고... 첫 지각도 했다. 레퍼런스도 살펴보지 않았다... ㅠㅠ 꼭 앞으로는 레퍼런스 확인하고 코드 읽어야지. 자꾸 스스로한테 ‘이 정도는 쉬어줘야 나중에 안 지쳐^^’ 라던지, ‘마라톤 완주하려면 페이스 조절해야지^^’ 같은 변명을 하며 주..

Section 1 체크리스트를 보면서 '아직 가야 할 길이 멀었네...' 라고 생각한 게 엊그제 같은데 벌써 세션회고를 적고 있다...! 첫 세션에서는 아직 처음이라 어색한 게 참 많았다. 하루하루가 적응과 조정의 연속이었다. 잘 풀리는 날도 있었고, 아쉬웠던 날도 있었지만 어쨌건 이번 세션을 끝냈다는 사실이 무척 기쁘다😍 정말 한 달만에 많은 걸 배웠다. 코딩의 'ㅋ'도 모르던 내가 혼자서 코딩테스트를 풀고 코드를 짜다니...! 생각보다 코딩은 내 적성에 잘 맞았다. 내가 원하는 기능을 구현하는 것이나, 컴퓨터에게 논리적으로 명령하는 것도 재미있었다. 어떤 식으로 해야 이 기능이 나올까...? 하면서 고민하다가 결국 해냈을 때의 뿌듯함도 잊지 못할 것 같다. 다만 아쉬웠던 점은 내가 꼼꼼히 공부하지 못..

📌 git 협업 ◽ git init : local git repository 생성 ◽ git add 파일명 : untracked flies를 staging area로 추가/ 파일명에 .를 쓰면 현재 디렉토리의 모든 파일이 추가된다. ◽ git staus : staging area에 있는 파일 확인 ◽ git restore 파일명 : 파일의 변경사항 폐기 ◽ git commit -m "message" : staging area의 파일을 저장소에 기록 커밋 시에는 간결하게 변경 사항의 정확한 기술 용어를 사용해서 기록한다. ◽ git reset HEAD^ : 커밋한 파일을 바로 직전으로 되돌린다. ◽ git log : 커밋 기록 조회 ◽ git remote add : local repository에 remo..

📌 배열 : 순서가 있는 값 [] 로 감싸져 있음 index가 존재함, length 속성이 있음 typeof array // object 배열 메서드 array.push : 배열의 맨 뒤에 요소를 추가 array.pop : 배열의 맨 뒷 요소를 삭제 array.unshift : 배열의 맨 앞에 요소를 추가 array.shift : 배열의 맨 앞 요소를 삭제추가하는 메서드(push, unshift)는 추가된 length를 리턴하고 삭제하는 메서드(pop, shift)는 제거된 요소를 리턴한다. Array.isArray(attribute) : attribute가 배열인지 아닌지 boolean 값을 리턴 array.slice(start, end) : start에서부터 end 전까지 복사한 배열을 리턴 let ..

📌position: static : 요소를 일반적인 문서의 흐름에 따라 배치 relative : 요소를 일반적인 문서의 흐름에 따라 배치하고 자기 자신을 중심으로 top, right, bottom, left 값에 따라 배치 absolute : 요소가 일반적인 문서의 흐름에서 제거하고 조상 요소에 대해 상대적으로 top, right, bottom, left 값에 따라 배치 ,단 조상요소 중 위치 배치 요소가 없다면 초기 컨테이너 블록이 기준 sticky :요소를 일반적인 문서의 흐름에 따라 배치하고 조상 요소에 대해 상대적으로 top, right, bottom, left 값에 따라 배치 가장 가까운 조상 요소에 대해 끈끈한 움직임을 보임 그 조상 요소는 스크롤이 불가, 스크롤 가능한 조상 요소일 경우는 끈..

📌advanced 계산기 advanced는 오히려 bare minimum을 하면서 감을 잡아서 나쁘지 않았다. 막혀도 금방 풀리는 느낌이었다. 먼저, advanced는 계산기 화면이 따로 되어있지 않고 하나로 이어져 있다. 물론 bare minimum 처럼 한자리수 숫자를 넣는 게 아니다. const display = document.querySelector('.calculator__display--for-advanced'); // calculator__display 엘리먼트와, 그 자식 엘리먼트의 정보를 모두 담고 있습니다. let firstNum, operatorForAdvanced, previousKey, previousNum; buttons.addEventListener('click', funct..