프로젝트 설명 팀명: B반 3조 - The Leaders 팀 프로젝트명: Food Diary 먹을텐데~ 오늘 무엇을 먹어야 할지 고민될 때 사용자들이 먹을 것을 추천해준다. 오늘 내가 먹은 음식을 자랑해서 사용자들과 공유한다. 와이어 프레임 개발해야 하는 기능들 학경 [ ] SPA [ ] 메인 페이지 성완 [ ] CRUD [ ] Authentication를 이용하여 회원가입 | 로그인 구현 [ ] 회원가입 | 로그인 구현 | 소셜 로그인 && 로그인 회원가입 페이지 [ ] Authentication uid 내게시물 모아서 보기 [ ] Cloud Storage 이미지 업로드 | 다운로드 url 희령 [ ] 마이 페이지 [ ] Authentication 에서 제공하는 uid 를 이용해서 내 게시물 조회하기 ..
Today I Learned 웹 퍼블리싱 강의 수강 git 특강 수강 firebase 실시간 강의 수강 git 특강 git 비교하기 $ git diff 현재 작업 디렉터리에서의 작업 내역과 최신 커밋을 비교하기 git 되돌리기 revert: 작업을 취소한 새로운 커밋을 생성함 (기존의 커밋 내역은 유지됨) $ git revert reset: 특정 커밋으로 되돌아가기 (기존의 커밋 내역에 영향이 갈 수도 있음) soft reset: 커밋을 했다는 사실만을 되돌리기 $ git reset --soft mixed reset: 스테이지에 추가했다는 사실까지 되돌리기 $ git reset --mixed hard reset: 변경사항을 만들었다는 사실까지 되돌리기 (작업 디렉토리까지 되돌리기) $ git reset ..
JS로 하는 SPA 정리 SPA와 MPA의 차이점 SPA MPA 개념 Single Page Application 한 개의 페이지로 구성됨 Multiple Page Application 여러 개의 페이지로 구성됨 렌더링 방법 Client Side Rendering 최초 한 번만 전체 리소스를 다운받음 Server Side Rendering 매번 전체 페이지가 렌더링됨 장점 1. 필요한 리소스만 부분적으로 로딩함 2. 자연스러운 페이지 이동이 가능함 (깜빡임X) 3. 컴포넌트별 개발이 용이함 1. 검색엔진최적화(SEO)가 유리함 (검색엔진이 크롤링하기 좋음) 2. 첫 로딩이 짧음 단점 1. 초기 로딩 속도가 느림 2. 검색엔진최적화(SEO)가 어려움 3. 보안 이슈 (핵심 비즈니스 로직 최소화 필요) 1. ..
Today I Learned 웹 퍼블리싱 강의 3주차 수강 오전에 JS로 하는 SPA 특강 수강 저녁에 DB이해 특강 수강 웹 퍼블리싱 3주차 강의 내용 strong 태그와 em 태그 중요한 내용이라서 Bold 효과를 주고 싶을 때는 strong 태그를 사용하면 된다. 위 이미지에서 증시, 환율, 숫자 부분에 strong 태그를 적용하고 font-weight는 따로 사용하지 않았다. 더 자세한 내용 https://www.codingfactory.net/11014 vertical-align 속성 이해하기 그동안 아이콘을 넣을 때마다 코드에 vertical-align: top;이 적혀있는 걸 봤는데 주석 처리를 해봐도 아무런 변화가 없길래 어떤 기능을 하는 녀석일까 궁금했다. 그런데 이번에 드디어 그 효과를..
Today I Learned 웹 퍼블리싱 강의 2주차, 3주차 수강 웹 퍼블리싱 2주차 강의 내용 padding 값으로 텍스트 정렬하기 .api_atcmp_wrap .atcmp_fixer .atcmp_header { position: relative; padding: 8px 18px 0; } /* 전체삭제 텍스트 */ .api_atcmp_wrap .atcmp_fixer .atcmp_header .option { position: absolute; top: 9px; right: 18px; } 최근 검색어와 전체삭제를 양 끝에 위치하기 위해 padding 값을 이용해서 정렬을 해주었다. 좌측의 최근 검색어는 따로 위치를 설정할 것은 없고 우측의 전체 삭제 텍스트는 추가적으로 right: 18px;을 넣어준다..
Today I Learned 웹 퍼블리싱 강의 1주차~2주차 수강 웹 퍼블리싱 강의 1주차 내용 CSS transition transition: all 0.3s ease-in-out; transition에 어떤 다양한 효과들이 있는지 궁금해서 검색해봤다. https://poiemaweb.com/css3-transition a태그 밑줄, 색상 제거하기 a { text-decoration: none; color: inherit; } color: inherit; 상위 클래스에서 지정한 색깔을 그대로 가져오는 문법 나는 color: white 로 색상을 직접 변경하는 방법을 사용했었는데 강의를 들으면서 inherit라는 더욱 간단한 속성도 알게 되었다. css에 이렇게 코드를 작성하면 모든 a 태그에 적용된다...
Weekly I Learned 팀 프로젝트만 진행됐던 지난주와는 달리 이번 주에는 온전히 강의만 듣는 시간이었다. 원격으로 온라인 강의를 수강한다는 것은 집중력과 의지의 문제인 거 같다. 강의 듣다가도 자꾸 딴짓하게 되고 졸리기도 하고.. 그나마 zep이라는 온라인 공간에 다 같이 모여서 공부한다는 게 힘이 되었다. 그리고 녹강 외에도 zoom에서 실시간으로 튜터님들의 다양한 특강(자료구조 알고리즘, CS 기초 등)이 진행되었는데 동기 분들의 각종 드립과 함께하며 재밌게 들을 수 있었다ㅋㅋ 파이썬과 자바스크립트 강의는 둘 다 하루만에 끝난 것에 비해 자료구조 알고리즘 강의는 5주차에 달하는 과정이기도 하고 내용도 금방 이해할 수 없어서 강의를 듣는 데 많은 시간이 소요되고 있다. 모든 내용을 이해할 순 ..
Today I Learned 알고리즘 강의 3주차 수강 웹 퍼블리싱 강의 1주차 수강 알고리즘 강의 3주차 내용(정렬) *python에서 두 변수의 값 바꾸기 (swap) a = 3 b = 4 a, b = b, a print(a) >>>4 print(b) >>>3 *정렬이란? 데이터를 순서대로 나열하는 방법 *정렬의 유형 :버블 정렬, 선택 정렬, 삽입 정렬, 병합 정렬 웹 퍼블리싱 1주차 강의 내용 *퍼블리싱: Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것. 마크업 : HTML을 통해 기본 뼈대를 만듭니다. 스타일링 : CSS로 마크업에 색상 등의 속성을 입혀 스타일을 지정합니다. 부가 기능 : Javascript로 특정 요소에 기능을 ..
Today I Learned 알고리즘 강의 수강 실시간 CU 특강(CPU 주제) 수강 실시간 알고리즘 강의 수강 알고리즘 강의 내용 *이진 탐색: 일정한 규칙으로 정렬되어 있는 데이터일 때만 사용 가능 O(log n)의 시간 복잡도를 가짐 *재귀 함수: 자기 자신을 호출하는 함수 재귀 함수를 호출할 때는 반드시 끝나는 지점(탈출 조건)을 설정해줘야 한다. def count_down(number): print(number) count_down(number - 1) #count_down 함수 안에서 count_down을 호출하고 있음 *문자열 슬라이싱 "가나다라마바사"[0:6] # 가나다라마바 "가나다라마바사"[0:1] # 가 "가나다라마바사"[1:-3] # 나다라 "가나다라마바사"[1:-1] # 나다라마바..
Today I Learned 알고리즘 온라인 강의 수강 튜터님 실시간 보충 강의 수강 알고리즘 강의 내용 어레이와 링크드 리스트 Array LinkedList 정의 크기가 정해진 데이터의 공간 크기가 정해지지 않은 데이터의 공간 특정 원소 조회 O(1) O(N) 중간에 삽입 삭제 O(N) O(1) 데이터 추가 모든 공간이 다 찼다면 새로운 메모리 공간을 할당받아야 한다. 모든 공간이 다 찼어도 맨 뒤의 노드만 동적으로 추가하면 된다. 정리 데이터에 접근(조회)하는 경우가 빈번할 때 사용한다. 데이터 삽입과 삭제가 빈번할 때 사용한다. 링크드 리스트의 연결고리는 '포인터', 각 화물칸은 '노드' 자료구조 선택 시 참고사항: 1.삽입 시간 2.삭제 시간 3.검색 시간 4.정렬 요구 python class 이..