wil11 [WIL 2023.08.20] 내배캠 14주차 📝 Situation(상황): 이번주 목표 최종프로젝트 아이디어 기획 기술스택 선정 팀 컨벤션 정하기 와이어 프레임 구상 👀 Task(임무): situation 중 문제들 의견 충돌 생각보다 오래 걸리는 기획단계 🔍 Action(접근방법): 해결시도 자신의 의견에 대한 근거를 바탕으로 팀원에게 설명 어피니티 다이어그램을 통해 추상적이던 개념을 구체화 프로젝트 구조 및 사용자 플로우 설정 📃 Result(결과): action 후 성과 다이어그램을 활용하여 시각적인 자료로 한눈에 확인이 가능해졌다. 2023. 8. 20. [WIL 2023.08.13] 내배캠 13주차 📝 Situation(상황): 이번주 목표 둘러보미 페이지 만들기 📓 Point(정리): 이번주 요약 최종 프로젝트 전 마지막 팀 프로젝트를 시작했다. 외부api 선정부터 꼬여서 다사다난했던 일주일이었던 듯... 카카오맵에 경로를 그리는 것이 상당한 시련이었다. 나는 다른분들 api 가져오실동안 회원가입, 댓글, 페이지 상단 이동, 내정보 수정, 에러페이지 등등 유저상태 관리와 동작에 주로 작업했다. 그리고 css작업 쫌쫌따리.. 상당히 힘들었던 한주 였던듯 하다. 2023. 8. 13. [WIL 2023.08.06] 내배캠 12주차 📝 Situation(상황): 이번주 목표 기존에 만들었던 투두리스트를 TS를 이용하여 리팩토링 한다. Next.js 학습하기 👀 Task(임무): situation 중 문제들 기존에 만들었던 투두리스트를 TS를 이용하여 리팩토링 한다. 정적 이미지 파일 사용하기 react-router-dom 사용하기 redux 사용하기 🔍 Action(접근방법): 해결시도 정적 이미지 파일 사용하기 원래 자바스크립트 환경에서는 export { default as all } from "./all.png"; export { default as culture } from "./culture.png"; export { default as game } from "./game.png"; 이미지 폴더 안에 index.js 파일을 .. 2023. 8. 6. [WIL 2023.07.30] 내배캠 11주차 📝 Situation(상황): 이번주 목표 TypeScript가 개발자에게 어떤 이점을 제공하는지 파악한다. 컴파일러의 개념에 대해서 공부하고 tsc를 어떻게 사용하는지 파악한다. 기본 타입의 종류와 사용법을 익힌다. enum, object literal의 차이점과 언제 사용하면 좋을지 파악한다. 주요 유틸리티 타입을 학습한다. S.O.L.I.D 원칙을 기반으로 좋은 객체 지향 설계 방법을 이해한다 👀 Task(임무): situation 중 문제들 1] 용어의 정립이 안됨. 강의를 듣는데 무슨 뜻인지 못알아듣는 문제가 생겼다. 절차적 프로그래밍(PP) vs 객체지향 프로그래밍(OOP) 정적언어 vs 동적언어 함수 vs 메서드 Parameter vs Property vs 인자 vs 생성자 2] 후발대 수업.. 2023. 7. 31. [WIL 2023.07.23] 내배캠 10주차 📝 Situation(상황): 이번주 목표 외부API를 활용해 서비스를 만드는 아웃소싱 프로젝트 우리팀의 경우에는 지도 서비스(카카오map)를 지원하는 웹사이트를 만들기로 결정 위치기반 시스템으로 우리 동네 소모임을 검색, 생성 및 참여할 수 있다. 커밋 COME IT (community meeting service) "다양한 취미를 함께 즐기며 새로운 친구들과 만날 수 있는 친목 모임, 함께해요!” 👀 Task(임무): situation 중 문제들 여러 문제들 중에서도 메인페이지와 소개페이지에서 쓰는 Slider 컴포넌트를 공용 컴포넌트로 사용 중이었는데 슬라이더의 내용이 될 아이템이나 크기, 한번 이동 시 움직이는 거리, 슬라이더 너비, 구조 등등 모두 다 다르다 보니까 처음 설계해놓은 슬라이더로는 .. 2023. 7. 24. [WIL 2023.06.25] 내배캠 6주차 📝 Situation(상황): 이번주 목표 Styled Components를 배워보고, 활용할 수 있다. 콜백, promise, async/await 차이를 설명할 수 있다. 이들을 활용해 코드를 구현할 수 있다. 리덕스를 사용한 전역 상태 관리를 자유롭게 활용할 수 있으며 전역 상태의 필요성을 설명할 수 있다. React-router-dom의 핵심 개념과 관련 hooks에 대해 이해할 수 있다. Dynamic route 기법과 useParam hook을 이용하여 동적 라우팅을 구현할 수 있다. 👀 Task(임무): situation 중 문제들 이전에 만들었던 Todo List에 1. 설정했던 state를 develop해서 Redux를 이용한 전역 데이터로 관리해보기 2. React Router Dom을.. 2023. 6. 25. [WIL 2023.06.18] 내배캠 5주차 📝 Situation(상황): 이번주 목표 ES6 문법을 습득하였고 리액트 컴포넌트 안에서 map, filter를 활용할 수 있다. 모던 웹에서 리액트가 탄생한 배경을 알고 화면 내에서 재사용 가능한 컴포넌트 단위를 나눌 수 있다. 불변성을 지켜야 하는 이유를 이해하고 있으며 props, state를 활용해 함수를 전달할 수 있다. 리액트 입문강의를 활용해 투두리스트 페이지 만들어보기. 👀 Task(임무): situation 중 문제들 완료 취소 간 상호이동 id 값의 중복 input validation 적용 컴포넌트 분리 🔍 Action(접근방법): 해결시도 todoUpdateClickBtn(item.id)} > 완료 객체의 id값을 가져와서 const todoUpdateClickBtn = (id) =.. 2023. 6. 19. [WIL 2023.06.11] 내배캠 4주차 📝 Situation(상황): 이번주 목표 지난주 개인과제로 만들었던 영화검색 사이트를 develop 영화별 상세 페이지와 상세페이지 내 댓글 기능을 필수로 하여 팀으로 사이트 완성하기 👀 Task(임무): situation 중 문제들 그 중 나는 local storage를 이용하여 댓글 기능을 만드는 역할을 맡았다. 댓글의 CRUD 구현하기와 댓글창 UI를 깔끔하게 만드는데에 목표를 두었다. 🔍 Action(접근방법): 해결시도 먼저 폼태그 안에 인풋창을 두어 제출란을 만들었다. // 코멘트 표시 function displayComments() // 코멘트 HTML 생성 function createCommentHTML(comment, index) // 새 코멘트 저장 function saveCommen.. 2023. 6. 12. [WIL 2023.06.04] 내배캠 3주차 📝 Situation(상황): 이번주 목표 개인 과제인 영화 검색 페이지 만들기가 이번 주의 목표였다. 저번주 한 주간 자바스크립트 학습한 이론강의를 몸소 손으로 익혀보는 시간이었다. 역시 가만히 앉아서 강의를 듣는 것과는 달라서 여러 고비를 만났다. 👀 Task(임무): situation 중 문제들 1. 데이터가 불러와지지 않는 문제 2. 데이터를 불러와서 카드 생성은 어떻게 하는 것? 3. 검색기능은 어떻게 만드는 것인가 4. 무한루프 하는 자동슬라이드를 만들기 5. 요소들 위치 조정 및 css 수정 🔍 Action(접근방법): 해결시도 위 문제들의 답을 찾기 위해 가장 먼저 찾았던 것은 구글 검색이었다. 오픈 api라는 개념 조차 무엇인지 생소했기 때문에 단어의 의미부터 파악했으며 이후 이걸 코드로.. 2023. 6. 7. [WIL 2023.05.28] 내배캠 2주차 📝 Situation(상황): 이번주 목표 자바스크립트 5주차까지 완강 개인과제 와이어 프레임 구성 및 Starting Assignments 작성 👀 Task(임무): situation 중 문제들 자바스크립트 이론 강의를 들으며 개인적으로 궁금했던 사항 중에 강의 안에서 해결되지 않았던 내용들이다. 프레임워크 vs 라이브러리 차이점 nodemon의 사용 자바 스크립트에서 ‘=’ ‘==’ ‘===’ 의 차이점 부족한 사고력? 컴퓨팅 사고와 개발실력을 늘리는 공부법 함수 표현식에서의 호이스팅 과정 문제사항이 생길 때 먼저 구글링을 해보고 그래도 이해가 잘 되지 않으면 튜터님에게 질문을 하는 방식으로 풀어갔다. 이번 주에 가장 충격 받은 순간은 개인 과제 발제 때가 아닐까 개인 과제라고 해서 그냥 알고리즘 문.. 2023. 5. 29. [WIL 2023.05.21] 내배캠 1주차 Situation(상황): 이번주 목표 팀프로젝트 (팀소개 페이지 만들기) 우리팀 인원은 총 5명으로, 페이지에 각자의 카드를 생성해서 모달창 팝업형식으로 소개내용을 띄우기로 했다. 내 역할은 팀원 개별 소개 페이지 HTML / CSS / JS 작성 개인적으로 그저 팝업되는 카드가 아닌 스무스한 동작을 추가하여 열리게 하고 싶었다. 어떻게 구성을 해볼까 고민하다가 transition과 자바스크립트를 이용하면 할 수 있을 것 같았다. Task(임무): situation 중 문제들 협업의 꽃, GIT활용 저번주에도 협업의 경험은 있었지만 그때는 git에 대해 전혀 모르던 상태여서 slack을 통해 각자 파일을 전달하면서 합텨가며 작업을 했었는데 너무 번거롭고 구분이 어려운 문제가 있었다. 프로젝트 전에 특강.. 2023. 5. 22. 이전 1 다음
