전체 글

1. 과제 내용 이응수 대리를 도와 책 찾기 프로젝트를 진행해 나가실 팀원이며 이응수 대리가 과거 작성한 코드와 결과물을 분석해서 앞으로 어떻게 하면 더 큰 규모의 프로그램을 만들어 나갈 수 있을지 코드 리뷰를 해주시면 됩니다. 실제 프로덕트라고 가정하고 리뷰한다. 확장 가능성에 주안점을 둔다. 좋은 점, 나쁜 점에 대해 솔직하게 반응한다. 본인의 개발 경험 중심으로 풀어나간다. 버그 발견 시, 추측이 아닌 구체적 방법을 제시한다. 2. 리팩토링 사항 📁 components/Books/Books.js 1. 태그의 속성이 너무 길어져 가독성을 해치기 때문에 Inline styling을 분리 2. alt 속성이 없을 경우 이미지가 손상되었을 때 정보를 알 수 없고 검색엔진에 최적화 반영이 제대로 되지 않아 ..

들어가며 자바스크립트의 특징은 single thread 기반언어이며 즉, 자바스크립트는 한개의 호출 스택을 가진다. 그렇기 때문에 한 번에 하나의 일만 처리 할 수 있는데 신기하게도 웹브라우저에서는 애니메이션 효과를 보여주며 마우스 입력을 받아서 처리하고, Node.js기반의 웹서버에서는 동시에 여러 개의 HTTP 요청을 처리한다. 자바스크립트는 무엇때문에 현재 작업 완료를 기다리지 않고 다음 작업을 수행하며 동시성(Concurrency)을 지원할까? 답은 이벤트 루프이다. 자바스크립트는 이벤트 루프 기반의 비동기 방식으로 Non-Blocking IO를 지원한다. 📌 ECMAScript에는 이벤트 루프가 없다 자바스크립트는 비동기로 동작하기 때문에 single thread임에도 불구하고 동시에 많은 작업..

들어가며 개발자는 HTML, CSS, JavaScript를 사용해 사용자에게 보여줄 페이지를 만들어 낸다. 그런데 프로그래밍을 하면서 어떤식으로 브라우저 화면에 페이지가 보여지는지에 대하여 생각해 본 적은 없었다. 입력 주소창에 URI를 입력하고 페이지로 이동했을 때 화면을 보여주고 다른 주소를 검색하면 또 다른 페이지를 보여주게 되는데 어떠한 원리로 브라우저가 웹 페이지를 표현하는 것 일까??🤔 이번 포스팅은 브라우저 작동 원리를 공부하며 배운내용을 정리해보겠다. 📌 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 응답으로 HTML문서를 읽고 해석한 후 화면에 렌더링 한다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표..

월요일 세션이 끝나고 과제 팀원 배정 엑셀을 봤는데 셀이 비어있었다. 오잉..? 멘토님이 이번 과제는 팀 전원이 참여하는 것이라고 하셨다. 네..? 그러면 8명이 전부다 참여한다구요..? 아이고 깜짝이야!.. 프론트엔드가 8명?! 당황했지만 당황하지 않은 척 오히려 좋아를 외치며 성황리에 과제를 끝마쳤다. 고생한 우리 팀 7ill-resource 칭찬해~ [Assignment 3] 자란다 #1, #2 Git repositories: wanted-preonboarding-subject-3 📋 1. 과제 요구사항 ✅ 회원가입 페이지, 로그인/로그아웃 기능 구현 폼 양식 - email, password, 이름, 주소(팝업/Damu 주소 API), 신용카드 정보(팝업), 나이, 권한 설정(부모님/ 선생님) 유저..

목요일 강의를 듣고 나서 이번 과제를 같이 진행하게 될 팀원들과 게더 타운에서 회의를 진행하며 각자 맡을 기능을 분담하였고 나는 호기롭게 상세 페이지 상품 랜덤 출력과 관심 없음 등록 기능을 하기로 했는데 이게 나중에 가져올 무서움을 모른 체 고것을 확 물 어분 것이여...! 작업하다 보니까 이 부분이 생각보다 까다로웠고 쩔쩔매다 보니 나중엔 분담과는 상관없이 서로 도와주고 있었다 하하! 📋 1. 과제 요구사항 분석 1. 상품 상세 페이지 (/product) 페이지 로드 시 랜덤 상품 출력 상품을 조회하면 최근 조회이력에 추가 관심 없음 버튼 클릭 시 다른 상품 출력 랜덤 버튼 클릭시 관심 없는 상품과 현재 상품을 제외한 다른 상품 출력 2. 상품 조회이력 목록 페이지 (/recentList) 00시 기..

프리온보딩 코스 첫번째 과제로 infinite scroll 구현하기 당첨..! 페이지네이션은 해봤어도 이건 처음인데 .. 흐흐흑 하지만 난 혼자가 아니야 우리 7ill resource 민기님과 함께라면 할 수 있다 이말이야!! 무한스크롤? 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX, User EXperience) 방식이며, 이는 마치 끝이 없는 단일 페이지에서 끝없는 정보의 흐름을 경험하게 만든다. 무한스크롤 프로세스 1. 스크롤이 페이지 최하단에 위치했는지를 확인 2. 최하단이라면 예정된 이벤트를 실시 3. 콘텐츠가 비동기식으로 하단에 추가됨 4. 비동기 요청이 끝났다면 계속 스크롤을 감시 스크롤이 페이지 최하단에 위치했는지 어떻게 확인할까? 1. sc..

다솜이는 0과 1로만 이루어진 문자열 S를 가지고 있습니다. 다솜이는 이 문자열 S에 있는 모든 숫자를 전부 같게 만들려고 합니다. 다솜이가 할 수 있는 행동은 S에서 연속된 하나 이상의 숫자를 잡고 모두 뒤집는 것입니다. 뒤집는 것은 1을 0으로, 0을 1로 바꾸는 것을 의미합니다. 예를 들어 S = 0001100일 때는 다음과 같습니다. 1. 전체를 뒤집으면 1110011이 됩니다. 2. 4번째 문자부터 5번째 문자까지 뒤집으면 1111111이 되어서 두 번 만에 모두 같은 숫자로 만들 수 있습니다. 하지만, 처음부터 4번째 문자부터 5번째 문자까지 문자를 뒤집으면 한 번에 0000000이 되어서 1번 만에 모두 같은 숫자로 만들 수 있습니다. 문자열 S가 주어졌을 때, 다솜이가 해야 하는 행동의 최..

각 자리가 숫자(0부터 9)로만 이루어진 문자열 S가 주어졌을 때, 왼쪽부터 오른쪽으로 하나씩 모든 숫자를 확인하며 숫자 사이에 'x' 혹은 '+' 연산자를 넣어 결과적으로 만들어질 수 있는 가장 큰 수를 구하는 프로그램을 작성하세요. 단, +보다 x를 먼저 계산하는 일반적인 방식과는 달리, 모든 연산은 왼쪽에서부터 순서대로 이루어진다고 가정합니다. 예를 들어 02984라는 문자열이 주어지면, 만들어질 수 있는 가장 큰 수는 ((((0 + 2) x 9) x 8) x 4) = 576입니다. 또한 만들어질 수 있는 가장 큰 수는 항상 20억 이하의 정수가 되도록 입력이 주어집니다. 📌 입력 조건 첫째 줄에 여러 개의 숫자로 구성된 하나의 문자열 S가 주어집니다. (1