항해9973 항해99 7주차 WIL - 인스타그램 클론코딩, 실전 프로젝트 시작 드디어 인스타그램 클론코딩까지 마치고, 실전 프로젝트가 시작되었다! 클론코딩을 하면서 한번 더 느낀 점이 있었다. 나는 꽤 CSS를 즐긴다는 것...? 와이어 프레임 만드는 것도 즐겁고 CSS를 구성하면서 뷰의 완성본을 만드는 것도 즐겁다. 아직 코드 구현은 매번 힘들고 고민이 많고 수십번의 구글링을 거치고 있지만, 신기하게도 CSS는 그 구글링 과정조차 나를 즐겁게 하고 있다. 미니프로젝트처럼 내가 만드는 프레임에 맞춰 CSS를 하는 것은 쉽지 않다. 아무래도 나는 디자이너가 아니다보니 첫 구성은 힘든 것 같았다. 하지만 클론코딩처럼 이미 구현되어 있는 CSS를 참고해본다거나 팀끼리 프레임이 잘 만들어져서 CSS를 만들게 되면 그렇게 즐거울 수가 없었다. 그래서 살짝 실전프로젝트에서 디자이너인 미래님을.. 2022. 8. 28. 항해99 4주차 WIL - 라이프사이클(클래스형 vs 함수형), react hooks 벌써 4주차 WIL 이다. 4주차는 사실 그렇게까지 힘들진 않았다. 팀원들과의 협업도 잘 되고 팀원들과 성격도 잘 맞고 대화도 잘 되서 하루하루 힘들지만 행복하게 시간을 보냈다. 그런데 4~5주차 넘어가는 지금이 조금 힘들다. 5주차 WIL이 약간 걱정되는 밤이다. 너무 힘들어서 어제는 눈물이 났다. 눈물이 거의 없는 편인데도 서러운 부분이 있었다. 어쨌든,,, 잘 극복하고 이번 한주를 보내길 바라며 지난주 WIL을 작성해본다! 🤗 좋았던 것은! 리액트 기초반 강의 완강, 입문+숙련 학습자료 완독 및 블로그 정리 완료, 자바스크립트 하루 목표 완료! 모두 목표했던 일정을 완료하였다. 🕶️ 아쉬웠던 것은! CS 책을 이틀이나 누락했다. 스터디 발표 공유하는 날에는 열심히 준비했는데 앞뒤로 사실 챕터를 읽지.. 2022. 8. 8. 항해99 27일차 TIL - 리액트 심화과제 뷰 구성 & 오늘 배운 것 ✅ 리액트 심화과제 뷰 구성 기존에는 뷰 만들기부터 먼저 했다면, 심화 과제에선 어제 와이어 프레임 구성했던 것처럼 페이지와 기능이 너무 많아서 아래 내용을 보고 기능 분배하기 부터 시작했다!! 기능을 분배하고 어떻게 하지 고민하다가 컴포넌트 별로 뷰를 구성할 사람을 나누기로 했다!! 이름이 나와서 뷰 구현 나눈 것은 캡처에서 제외했다. 조금 어려웠던 것은, 내가 조장이라서 미리 git hub에서 레포지토리 만들고 컴포넌트 ,페이지, 라우터, 리덕스 부터 패키지 설치까지 미리 해두고 commit을 했는데 혹시나 실수나 패키지 부족한 점이 있을까봐 걱정했었다. 다행히 확인결과 오류는 없는 것으로!! 뷰 구성하면서 추가적으로 컴포넌트가 늘어나긴 했지만 그래도 아직까지는 깨끗한 폴더인 것 같다! 오늘 사실 학.. 2022. 8. 6. [리액트 React] 심화 학습 자료 정리 🔹 Redux-Toolkit-Todolist 최종 완료 깃헙 주소 : https://github.com/jennywoon/Redux-Toolkit-Todolist.git ✅ Redux Toolkit 1️⃣ 리덕스툴킷이란? 👌 리덕스툴킷 리덕스툴킷은 이전에 배운 리덕스를 개량한 것으로 생각하면 된다. 리덕스럴 사용하기 위해 작성했던 duck 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스 툴킷이다. 줄여서 RTK 라고도 한다. 👌 새로운 것이 아니다 리덕스 툴킷은 배웠던 리덕스의 구조나 패러다임이 모두 똑같다. 즉, 새로운 것이 아니다. 리덕스의 전체.. 2022. 8. 5. 항해99 25일차 TIL - (리액트) 투두리스트 기능 업데이트 & 오늘 배운 것 🔹 최종 Git Hub 주소 : https://github.com/jennywoon/Final-todolist.git ✅ 두 번째 React Todo List 최종 완료! 항해에서 과제로 내 준 기능을 모두 구현하고 styled-component를 수정하면서, 기술매니저님께서 기능 업데이트를 해보라고 해서 2조 팀원들과 기능을 업데이트 해보았다! 업데이트는 총 6가지 이다. 1️⃣ Detail 페이지에 Layout을 연결하여 위에 Header 모양까지 보여주었다. 2️⃣ Header 상단에 머티리얼 UI 로 추가하였다. 3️⃣ 상세페이지에서 머티리얼 UI 버튼을 누르면 홈으로 돌아갈 수 있도록 기능 구현 4️⃣ ID 값 오류 수정 원래는 const nexiId = useRef(0) id : nextId .. 2022. 8. 4. [리액트 React] 심화반 강의 1주차 정리 ✅ Javascript Re-start! (1) - 기본 1️⃣ 변수와 상수 🔹 변수 생성의 3단계 ▶️ 선언 -> 초기화 -> 할당 - 선언 : 실행 컨텍스트에 변수 객체를 등록(스코프가 참조하는 대상이 되도록) - 초기화 : 변수 객체에 등록된 변수를 위헤 메모리에 공간을 확보(여기서 변수는 보통 undefined로 초기화) - 할당 : undefined로 초기화된 변수에 실제 값을 할당 👌 var var는 가급적 사용하지 않는 것이 좋다. - var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스코프를 가진다. - var는 선언과 초기화를 한번에 한다. - 재선언이 가능하다. - 선언하기 전에도 사용할 수 있다. // var는 이런 식의 사용도 가능하다. // var name은 선언! name .. 2022. 8. 4. 이전 1 2 3 4 ··· 13 다음
