corin

무한 스크롤을 만들어보고자 한다. 이는 이벤트 스크롤로도 가능하지만 IntersectionObserver을 이용하는 것이 reflow가 덜 일어나 더 좋다고 한다. 그리고 이벤트 스크롤은 연속해서 계속 이벤트가 발생하기 때문에 Debounce, Throttle관리를 해줘야하지만, IntersectionObserver은 그런 것들을 하지 않아도 된다. 작동 원리는 대충 이해하기로는 전체 페이지가 있고, 그 안에 우리가 보는 뷰가 있다는 것을 전제로 한다. 그 중 지정된 element가 우리가 보는 뷰 안에 들어오거나 나가는 것을 감지하여 이벤트를 발생해준다. 실행 목적 1. div 태그에 a 태그를 연이어 놓고 싶다. 2. 이 a 태그는 무한으로 만들어질 수 있고 이걸 스크롤로 계속 내리고 싶다. 태그 정..

배경지식! 01. 여기서부턴 나혼자 리팩토링! 02. 악 테스트 어려워 1. PR 메세지 1. 구상 * 템플릿 분리: 일단 동적 컴포넌트로 따로 변경되지 않을 컴포넌트는 템플릿 파일에 따로 저장하였습니다. 파일로 분리해 놓는 것이 좋을 수 있지만, 적어도 지금은 분리되어있으면 가독성만 해친다고 생각하였습니다. 다만, 모달창을 하나의 폼으로 다시 정의한 과정에서 템플릿이 너무 길어졌다는 문제가 있습니다. 거슬리기는 하지만 따로 빼는 것은 다른 컴포넌트와의 통일성을 해친다고 생각해 동일하게 넣었습니다. * 컴포넌트: 일전에 했던 것처럼 컴포넌트 안에 이벤트리스너를 추가하는 함수를 구현했으나 로직들을 다른 파일에 만들어 불러오는 식으로 만들었습니다. 다만 이런 경우에 다른 파일에 종속된다고도 생각이 들었습니다..

key - value 를 이용한 데이터 저장 방법은 두 가지가 있다. - map - object 이 두 가지가 같은 것이라고 생각했다. 그러던 중 두 개념이 다른 것임을 깨닫고 어떻게 다른지 찾아보았다. 더불어 데이터를 저장하고 사용하는 과정에서 벌어질 수 있는 다양한 상황을 실험해보았다. 이렇게 다른데 왜 같은 거라고 생각했을까? 실제로는 map을 잘 안써서 그런가 - 기본 개념 / 문법 Map Object 생성 방법 const map = new Map([ ["a", "문자형 key"], [1, "숫자 key"], [[1, 2, 3], "직접 array key"], [arr, "참조 array key"], ]); const object = { a: "문자형 key", 1: "숫자 key", "[1, 2..

기존에 유저의 입력을 받는 것은 input tag를 js에 가지고 와서 value값을 확인했다. 이번에 이런 부분이 비효율적임을 느꼈고 문제가 있던 부분 2가지를 고쳤다. 1 수정전: 기본값을 value로 설정하고 클릭하면 삭제하고 초기화하면 다시 생성하는 것으로 처리 수정후: input 속성 중 placeholder을 사용할 수 있다. > 사실 이건 제시된 화면에서 이렇게 처리하고 해서 처리한 부분이었다. > 찾아보니 placeholder를 지양하자는 블로그도 있었다. (https://ibrahimovic.tistory.com/30) > 그 근거 중 내가 느낀 제일 큰 문제점은 리더기에 읽히지 않는다는 점이었는데, 만약 이 말이 사실이라면 충분히 지양될 이유라고 생각된다. > 다만 해당 문제는 상위에 ..

프리코스 때에 우테코에서 준 파일들의 형식은 App.js가 기본이 되었다. 이 위에 input/output/constant 등을 require/exports 하며 운용했다. 하지만 이번 파일의 이름은 index.js였다. 이에 대해 우리팀(나의 페어를 포함하여 3쌍의 페어)는 아래와 같이 행동했다. 1. index.js 속에 class app을 만들고 파일 Controller.js를 만들어 연결하고 controller중심으로 코드를 짠다. 2. index.js 속에 class app을 만들고 여기를 중심으로 코드를 짠다. (나!) 3. app.js를 index.js로 수정한 후 파일 Controller.js를 만들어 연결하고 controller중심으로 코드를 짠다. 여기에서 잘못된 코드는 없다.. 늘,,..

목표 1. 내가 생각한 웹 기능을 구현할 수 있는지 실험목적(어디까지 프론트엔드로 되는지 몰라서 그냥 머리속에서 웹기능을 하나씩 만들어보는중.. ) 2. 이전에는 각 element 하나하나가 기능했다면 이번엔 동일한 류의 element(여기선 책)을 만들어 이걸 어떻게 다루어볼 수 있는지 확인 구상 1. 각 책은 아래로 임의 처리함 서울에서 강릉으로 > 왜 id로 안넣었느냐? 테마별 또는 best에 중복되는 경우 동일한 책이라고 처리하기 위해 > id로 하면 같은 책인 다른 요소가 다른 id를 가져야한다고 생각했음 (예. NEW BOOk의 "코딩의.."와 best의 "코딩의.."가 같길바람) > 일단 이런 생각으로 id가 아닌 class로 처리했고, id로 같은 방식이 되는지 다시 해볼 생각. 2. JS..

문제 설명 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 3번째 사람의 무게의 합은 150kg이므로 구명보트의 무게 제한을 초과하여 같이 탈 수 없습니다. 구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다. 사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limit가 매개변수로 주어질 때, 모든 사람을 구출하기 위해 필요한 구명보트 개수의 최솟값을 return 하도록 solution 함수를 작성해주세요..

문제 설명 △△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습니다. 만약 1번↔2번 끼리 겨루는 게임에서 2번이 승리했다면 다음 라운드에서 1번을 부여받고, 3번↔4번에서 겨루는 게임에서 3번이 승리했다면 다음 라운드에서 2번을 부여받게 됩니다. 게임은 최종 한 명이 남을 때까지 진행됩니다. 이때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 ..

문제 설명 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567으로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요. 제한 사항 n은 2 이상 100,000 이하인 자연수입니다. 0. 맨날 다른거 한다고 문제를 안푸니까 쉬운 것도 어버버한다.. 그래서 쉬운 문제부터 다시 풀어보고 있다...

todo list를 만들어 보았다. 바닐라 자바스크립트로 했는데 앞서 만든 심플한 게임은 하나의 요소를 변형시키는 정도였다면, 이번에는 하나의 요소가 변형되면 다른 요소도 같이 영향을 주는 것을 연습해보았다. 1. 실행화면 2. 내 코드 분석 1) HTML 2) CSS 3) JS : 첫 번째 사진은 큰 개괄 정리 3. 실제 코드 1) HTLM To Do List 할 일: NOT YET COMPLETE 2) CSS body { width: 70%; margin: 0% auto; padding: 5%; } header { border-bottom: 3px solid black ; border-bottom-style: double; text-align: center; } main { display: grid;..