본문 바로가기

분류 전체보기416

[ 스파르타 / TIL ] 내일배움캠프 #23 오늘 한 것 알고리즘 문제 풀기 리액트 강의 듣기 노트 정리 [ React ] 리액트 실행하기 리액트 시작 명령어 npx create-react-app 프로젝트이름 VS code 터미널에 위와 같이 명령어를 입력하면 아래와 같이 리액트 파일이 만들어지기 시작한다. 리액트 파일 다운로드가 완료가 되면 아래와 codesign.tistory.com 회고 첫 프로젝트가 끝나고 오늘 다시 새로운 팀이 배정이 되었다. 아직 서로서로가 어색하지만 그래도 다들 좋은 분이신 것 같다. 대부분 다른 분야에서 일을 하시다가 오신 분들이 계시는데 그래서인지 배울게 많은 것 같다. 디자인 분야에서 일하다 오신 분은 디자인 감각이 있으시고 다른 분은 좋은 조언을 많이 해주신다. 앞으로 프로젝트 시작까지 2주라는 시간이 있다. 프.. 2022. 11. 30.
[ React ] VSCode에서 create-react-app 설치방법, 현재폴더에서 리엑트 설치방법 Visual Studio Code 터미널 열기1. VSCode를 연다.  2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다.쇼트컷으로  control + shift + ` 를 누르면 새 터미널이 열린다.  3. 화면하단에 새로운 터미널 창이 열린다.  4. 프로젝트를 생성하고 싶은 파일 위치로 이동한다.ls : 현제 위치에서의 파일 목록 조회가 가능하다.cd: 원하는 파일을 열고 그곳으로 이동한다.  'ls'를 눌러 현제 위치를 파악한 뒤'cd 파일명'을 적어준다. (파일 루트를 안다면 한 번에 다 적어줘도 된다. Desktop/Code/Frontend) 원하는 파일 위치로 이동했다면 아래 리액트 시작 명령어로 리액트를 설치해 준다.    리액트 시작 명령어 np.. 2022. 11. 30.
[ 스파르타 / TIL ] 내일배움캠프 #22 목차데이터 타입의 종류비트(bit)와 바이트(Byte)Hoisting(호이스팅)이란?변수 영역에는 변수만 저장하고 데이터 영역에는 데이터만 저장하는 이유 1. 데이터 타입의 종류기본형(Primitive Type) 값이 담긴 주소 값을 바로 복제한다.ex.Number, String, Boolean, null, undefined, Symbol 참조형 (Reference Type)값이 담긴 주소 값들로 이루어진 묶음을 가리키는 주소 값을 복제한다.ex. Object - Array, Function, Date, RegExp, Map & WeakMap, Set & WeakSet  2. 비트(bit)와 바이트(Byte)컴퓨터가 의사소통을 하기 위해 필요한 언어이다. .. 2022. 11. 29.
[ KPT ] SWIVEE 프로젝트 회고 KPT 회고 방법론이란? KPT(Keep, Problem, Try) 회고란 회고 방법론 중 하나이다. 팀으로 프로젝트를 진행한 뒤 진행한 프로젝트를 돌아보며 잘하고 있는 것을 더 잘하기 위해, 또는 다음에는 수정할 부분들을 돌아보게 효율적인 회고가 이루어지게 해 준다. Keep : 이번 프로젝트에서 진행한 과정 중 다음 프로젝트에서도 유지했으면 하는 부분. Problem: 이번 프로젝트에서 발생한 문제점을 객관적으로 판단. Try : 해당 문제점을 해결할 수 있는 현실적인 방안 제시, 다음 프로젝트를 위해 해야 할 노력 Feel : 이번 프로젝트를 통해 느낀 점 Keep Notion에 각자 담당하고 있는 부분을 진행 중 또는 완료로 표기하여 각자 진행 사항들을 확인하는 것 좋은 것 같다. 덕분에 프로젝트.. 2022. 11. 28.
[ WIL ] 내일배움캠프 4주차 이번 주 깨달음 문제점 자바스크립트의 강의만 보고 Firebase에서 데이터를 가져오기, 올리기, 필터링 구현을 시작했는데 코드의 세부적인 부분을 이해하지 못해서 에러가 나도 해결하는 데까지 시간이 오래 걸렸다. 해결 방안 코드의 한 줄 한 줄 출력을 해보고 addDoc, getDoc 등 그저 이런 기능을 구현하는구나라고 생각하고 넘기지 말고 정확한 구현 기능을 조금 더 검색을 해보고 사용을 해야겠다. 문제점 메인 페이지 → 특정 신발 페이지 이동시 해당 정보를 가져오는 과정에서 모든 신발들을 가져왔다. 해결 방안 각 신발마다 이름이 달라서 신발의 이름을 기준으로 정보를 가져오기로 했다. 넘겨받은 신발 이름으로 dbService에서 같은 신발의 이름을 가진 정보를 출력하게 했다. // 현재 넘겨 받은 신.. 2022. 11. 28.
[ 스파르타 / TIL ] 내일배움캠프 #20 오늘 한 것 swivee 페이지 에러 수정 보드 페이지에서 리뷰 페이지로 이동 오늘의 깨달음 Cannot set properties of null (setting 'innerHTML') 신발 리뷰들 중에 리뷰를 클릭하면 리뷰 상세 보기로 넘어가는 것을 구현하려고 하는데 아래와 같은 에러가 떴다. 해결 HTML이 렌더링이 되지 않았는데 자바스크립트가 먼저 동작해서 일어난 에러였다. 그래서 window.location.hash = '#review' 로 먼저 리뷰 페이지로 이동시켜준 뒤에 HTML 태그를 렌더링하는 receiveDataFromBoard() 함수가 실행시켜 주었다. 2022. 11. 28.
[ 스파르타 / TIL ] 내일배움캠프 #19 오늘 한 것 포스팅된 리뷰 수 구현 보드 페이지에서 리뷰를 눌렀을 때 리뷰 페이지로 이동 회고 오늘은 정말 한게 없는 것 같다. 하나 성공한 것은 특정 신발이 클릭됐을 때 그 신발에 따른 리뷰들의 개수를 구현하는데 거의 하루를 다 썼다. 데이터를 가져오는 부분에서 자꾸 에러가 나서 끝내 JSON을 사용하여 구현에 성공하였다. 우리 팀의 코드에 aync, await이 많아 렌더링 되는 페이지 순서가 꼬였는지 페이지가 로드되기 전에 리뷰 개수를 가져오려는 함수에서 에러가 나서 페이지 자체가 렌더링이 되지 않았다. 그래서 처음 렌더 하는 함수에 합쳐서 출력하니까 구현이 가능해졌다. 2022. 11. 25.
[ 스파르타 / TIL ] 내일배움캠프 #18 오늘 한 것 포스팅된 리뷰들의 사진 크기 수정 아이콘 간격 수정 이미지를 올렸을 때 "+ 사진 올리기" 버튼의 텍스트가 이미지 파일 이름으로 변경되게 설정 게시물 흐름 변경 오늘의 깨달음 이미지를 올렸을 때 "+ 사진 올리기" 버튼의 텍스트가 이미지 파일이름으로 변경되게 설정 처음에는 사진이 올려졌을때 버튼에 이미지 파일 이름을 어떻게 올려야 될지 조금 막막했다. 일단 버튼 event를 가져오기 때문에 가져온 내용물 중에 버튼 이름을 뽑아내야 했다. 하지만 아직 event.target.parentNode, children을 잘 사용할 줄 몰라 출력을 해보면서 원하는 값을 찾아 나갔다. 처음에는 "+ 사진 올리기"를 가져오게 아래와 같이 적어주었다. const btnName = event.target.pa.. 2022. 11. 24.
[ 스파르타 / TIL ] 내일배움캠프 #17 오늘 한 것 board.js에서 Firebase 연결 board.js파일에 사진 올리기 버튼 클릭 시 Firebase에 올라가게 하기 오늘의 깨달음 404 not found board.js에서 Firebase를 연결하는 순간 페이지가 동작을 하지 않고 "404 page not found"라는 에러만 떴다. board.js 연결하기 전에는 잘 동작하던 웹이 board.js만 연결하면 안 되는 게 board.js에 문제가 있는 것 같아서 거의 두 시간가량을 board.js만 보고 있다가 깨달았다... 해결 firebase.js 파일과 board.js는 같은 위치에 있었다. 하지만 나는 아래와 같이 파일을 하나 더 나가서 엉뚱한 곳에서 firebase.js 파일을 불러왔던 것이다. import { dbServ.. 2022. 11. 23.
728x90

티스토리툴바