팀과제 - 뉴스피드 만들기 (1. 추가, 삭제 코드 구현)
주특기 숙련 주차를 마무리하고 팀 과제의 시즌이 돌아왔다. 과제를 할 땐 항상 과제에 치여 TIL을 신경쓸 수 없었기 때문에 기록을 잘 못했는데, 이번엔 조금이라도 해놓자 싶어서 블로그를 쓴다. 격정의 포켓몬 개인과제를 지난 나는 이제 어느 정도 기능을 위한 로직을 짤 줄 알게 되었다. 추가, 삭제, 업데이트의 로직은 쉽진 않지만 검색과 질문을 겸하면 어렵지 않게 해낼 수 있는 수준이다. 따라서 나의 자신감도 많이 올랐다. 과제에 많은 파트가 있었는데 나는 미니 프로젝트 때 도전하고 싶어했으나 너무 어렵다고 해서 엄두가 안났던 '댓글 기능(추가, 수정, 삭제)'을 맡기로 했다. 팀원들하고는 기능 구현이 거의 마무리된 지금 시점에서도 크게 갈등을 겪지 않아서 기능 구현을 하기 위해 내가 어떤 노력을 했..
Medal Tracker 컴포넌트 분리, 리팩토링하기
컴포넌트 분리를 끝내고 튜터님에게 질문을 하러 갔다. 여러 가지를 물어봤는데, 그중에서 기록할만한 것들을 적는다. 장장 50분 정도 멘토링을 받았는데 내가 이해를 못해도 천천히 자세히 가르쳐주셔서 정말 좋았다. 어제 Medal Tracker 같이 한 것도 그렇고 튜터님들이 너무 좋다. 친절하고 열심히 가르쳐 주시고 알아듣기 쉽다. 코딩도 자바스크립트는 좀 힘들었는데 적응 하고 튜터님들 도움 받기 시작하니까 리액트 들어와서는 좀 속도가 나는 것 같다. 어떻게 코딩 공부를 해야 하는지 조금은 알 것 같기도 하고. 그래서 요즘 좀 재밌다. 컴포넌트 분리- App.jsx를 부모로 Input,List,Title를 .jsx 파일을 만들어 나누었다.- 컴포넌트를 어느 정도로 잘게 나누어야 하는지 튜터님한테 물어봤는..
개인과제 - Medal Tracker 코드 분석하기
학원을 다니니 복습을 해야 한다는 말을 정말 많이 듣는데, 프로젝트 하고 강의 듣고 이러면 정보량이 몰아쳐 복습할 여건이 잘 안된다. 오늘은 새벽에 깼는데 잠이 안와서 잠도 안오는 김에 오늘 개인 프로젝트 복습을 여유롭게 하려고 한다. 오늘 완성한 Medal Tracker의 코드를 새로 작성하며 분석할 것이고, 내일이 조금 걱정되긴 해서 하다가 잠오면 바로 잘 것이다. 스케줄에 헐떡이는 게 아니라 이렇게 자유롭게 복습하는 시간이 좀 생겼으면 좋겠다. Medal Tracker는 국가 이름, 메달 개수를 입력하면 해당 정보를 추가할 수 있고, 메달의 개수가 달라지면 정보를 업데이트할 수 있다. 삭제 기능, 정렬 기능 등등을 포함한 리액트 입문 첫 개인 프로젝트이다. 1. UI 레이아웃 작성하기import ..
자바스크립트 팀 과제 : 감정구슬(1) / 기획, 와이어프레임, 계획 짜기 단계
첫 번째 팀 과제가 끝났다. 전체적인 과정을 되돌아보며 회고한다. 1. 팀 컨셉, 과제 방향 정하기주어진 과제는 개인과제였던 영화 페이지를 기반으로 팀 영화 페이지 만들기였다. 어떻게 만들까 하다가, 우리 팀 이름이 IN사이드 아웃이라서 감정에 따른 영화 추천 페이지는 어떨까요? 라고 이야기했다. 팀원들 모두 오케이했고, 그렇게 우리 팀 방향이 잡혔다. 구현 기능은 학원에서 필수 구현 사항이라고 리스트를 주었기 때문에 먼저 와이어프레임을 짜야 했다. 먼저 각자가 생각하는 프로젝트 컨셉 이미지를 가져왔고, UI 참고가 될만한 이미지도 함께 정했다. 컨셉과 색상 등이 정해지니 컨셉에 맞는 구체적인 기능 아이디어도 나왔다. 팀원들이 다들 적극적으로 아이디어를 내서 즐겁게 의견 교환을 했었다. 2. 와이어프레..
git 사용하기
*아래 방법은 git 아이디를 만들고 원격 저장소에 파일이 있는 것을 전제로 한다.*원격 저장소 : 로컬저장(로컬 서버, 로컬은 '내 컴퓨터' 자체를 의미한다)소 외에 위치한 저장소1. 원격 저장소에 파일이 있고 나는 처음 파일을 받거나 원격 저장소에 있는 파일을 통으로 받고 싶을 때 - git clone 1. 내 컴퓨터에 저장할 폴더를 만들어야 한다. 컴퓨터에 새 폴더를 만든다. 2. 터미널을 연다 (vscode 기준 좌측 상단 새 터미널) 2. 터미널에 cd 입력 후 폴더를 드래그해온다.3. clone 할 원격 저장소 주소를 복사해온다. 4. git clone (github 주소) 를 입력한다. 5. 새 폴더에 clone 파일이 생성된다. 1. 원격 저장소에 최신 파일이 있고 최신 파일을 불러오고 ..
좋아요 기능 구현하다가 코드 하나하나 파헤치면서 공부하기
부트캠프 1주차, 미니 팀프로젝트로 팀 소개 웹페이지 만들기가 발제되었다. 우리 팀은 다이어리를 컨셉으로 소개 페이지를 만들기로 하였고, 나는 '좋아요'기능 구현을 맡게 되었다. 내가 아이디어를 내서 내가 맡는다고 하긴 했지만, 막막하다! 일단 좋아요 기능을 다른 사람들은 어떻게 만들었는지 쭉 보면서 흐름을 파악하고, 좋아요 기능에는 어떤 효과가 들어가야 할지 생각하는 것을 출발점으로 삼았다. 좋아요 기능에는 어떤 효과가 들어가야 할까? - 좋아요 버튼을 누르면 빈 하트가 꽉 찬 하트로 바뀌어야 한다. - 좋아요 버튼을 누르면 좋아요의 숫자가 하나 올라가야 한다. - 좋아요 버튼을 두 번 클릭하면 꽉 찬 하트가 다시 빈 하트로 돌아가야 한다. - 좋아요 버튼을 두 번 클릭하면 좋아요의 숫자가 하..