1. 그리드 1) 그리드의 법칙 최소 한개의 row가 container 안에 배치되어야 합니다. 최소 한개의 column이 row 안에 배치되어야 합니다. row는 항상 container 안에 배치되어야 합니다. row 아래에는 column 단위만 포함할 수 있습니다. (contents 를 넣고자 하는 경우 column 안에 포함시켜야 합니다.) 개별 column 은 항상 row에 직접 연결된 자식 개체여야 합니다. 2) container 부트스트랩의 최상위 오브젝트입니다. 컨테이너 안에 다른 요소들이나 콘텐츠들을 포함할 수 있습니다. 3) column row 안에 직속으로 들어가는 자식요소 입니다. 뷰포트 상에 좌우로 나열되는 규격을 만들어줍니다. 각 column 사이에 생기는 간격을 gutter라고 ..
1. 브라우저의 Workflow 1. Dom Tree 생성 브라우저가 HTML을 전달받으면, 브라우저의 랜더 엔진이 이를 파싱하고 DOM 노드로 이루어진 트리를 생성합니다. 각 노드는 HTML 엘리먼트들과 연관되어 있습니다. 2. Render Tree 생성 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱하고, DOM Tree 의 내용을 올바른 순서로 칠할 수 있도록 랜더 트리를 생성합니다. 3. Layout (reflow) 각 노드들에 스크린 좌표가 주어지고 어디에 나타나야 할지 위치가 주어집니다. 4. Painting 랜더링 된 요소들에 색을 입히는 과정. 트리의 각 노드들을 순회하면서 paint() 메서드를 호출합니다. 위 과정은 점진적인 프로세스지만 더 나은 사용자 경험을 위해 랜더링 ..
웹 프로그래밍 스쿨 22주 차 포스팅입니다!😃 이번 주도 역시 엄청 바쁘게 지나갔는데요! 자료구조 시간에는 Graph의 개념과 순회 방식, MST에 대해 배우고, 트러블 슈팅 시간에는그 동안 묵혀두었던 일치율과 추천 알고리즘에 대해 상담하고, DB 중복 query 제거에 대해서 배우고, 나머지 시간에는 진행중인 프로젝트의 오류 나는 부분을 고쳐가며 지낸 결과! 서버가 어느정도 안정화가 되어 클라이언트 쪽 스쿨분들이 작업하신 코드와 합쳐서 포스트맨이 아닌 브라우저를 통해서 눈으로 FastFlix 화면을 볼 수 있게 되었습니다.(감격) 재생 가능!! 영상을 보면 메인화면 부터 로고, 영화 리스트 화면, hover 시에 화면 커지고 리스트가 밀리는 것 까지 정말 똑같이 구현이 돼서 너무 신기했고, 열심히 크롤..
웹 프로그래밍 스쿨 21주 차 포스팅입니다!😃 어느덧 팀 프로젝트 기획을 시작한 지 3주가 지났습니다! 1주 차에는 어떤 애플리케이션을 카피할지 정하고 mvp의 범위를 정하는데 집중했다면 2주 차와 3주 차에는 mvp의 범위 내에서 기능들의 상세 사항을 정하고, 실제로 구현하고, 생각했던 것들과 일치하는 지 확인하는 시간들이었습니다. 위 사항들을 실현하기위해 정말 많은 회의와 스프린트 미팅, 트러블 슈팅을 거쳤는데요! 먼저 처음에는 팀 프로젝트 진행을 처음 하다 보니 각 스쿨이 다른 스쿨의 교육내용과 클라이언트와 서버 사이드의 로직의 흐름을 서로 정확히 알고 있지 않아서 서로의 파트에서 어떤 도움이 필요하고 어떻게 데이터를 전달할지를 이야기하는데 회의시간을 많이 할애했는데 이러한 이야기들을 하면서 서로의..
웹 프로그래밍 스쿨 20주 차 포스팅입니다!😃 이번 주에는 저번 주에 시작했던 자료구조 heap에 대한 수업을 마무리하고, 알고리즘의 설계 패러다임들에 대해 알아보고, 1. 완전탐색(brute-force, exhaustive search) 2. 분할정복(divide-and-conquer) 3. dp(동적 계획법) 4. 탐욕 알고리즘(greedy algorithm) 그 중 한 분류인 완전탐색에 관련된 문제들을 풀어보는 시간을 가졌습니다. 알고리즘 문제들이 이렇게 분류가 되어있는지 모르고 여태까지 뭔가 아이큐 테스트를 하는 느낌으로 문제를 풀어왔던게 좀 아쉬웠는데요 😂 기술면접을 위해서도, 좋은 코드를 짜기 위해서도 열심히 준비해두면 좋다는 강사님의 말씀이 있었지만.. 아직 첫 수업만으로는 재귀함수도 익숙해..
