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 이..
Today I Learned 알고리즘 온라인 강의 1주차 수강 알고리즘 실시간 강의 수강 알고리즘 강의 수강 내용 *시간 복잡도 입력값의 길이는 보통 N으로 표현 상수는 신경쓰지 않고 지수만 비교한다. 52N+103->N N²+2->N² *점근 표기법 최악의 경우: 빅오(Big-O)표기법 O(N) 최선의 경우: 빅 오메가(Big-Ω) 표기법 Ω(1) 빅오 표기법이 중요하다! 어려웠던 부분 파이썬은 들여쓰기가 중요하다 아직 알고리즘이 어려워서 강의 내용대로 코드를 작성했는데 최댓값이 잘못 산출되는 문제가 있었다. 다시 확인해 봐도 틀린 부분이 없는 거 같아서 뭔가 싶었더니 else 부분의 들여쓰기가 잘못된 것이었다. 파이썬에서는 들여쓰기가 중요하다는 것을 또 한 번 배우고 가는 경험이었다. python 의..
Today I Learned 파이썬 문법 기초 강의 듣기 github branch 공부하기 top 이동 버튼 추가하기 파이썬 문법 기초 *변수선언: 변수이름 = 값 *문자열 길이 구하기: len( ) *문자열 잘라내기(슬라이싱) a[4:15] / a[3:] / a[:5] phone = "02-123-1234" result = phone.split('-')[0] print(result) *리스트 a = [1,5,3,7] 추가하기 a.append(3) 수정하기 a[1] = 4 정렬하기 a.sort( ) a.sort(reverse=True) 요소 확인 print(5 in a) *딕셔너리 people = [ {'name': 'bob', 'age': 20, 'score':{'math':90,'science':70..