맨땅에 헤딩

➡️ async와 defer를 제대로 이해하기 위해서는 HTML의 실행순서에 대한 이해가 선행되어야 한다. 이런 이해가 바탕에 있어야, 왜 굳이 async와 defer를 사용해야하는지 그 필요성에 대해서 알 수 있다. 🧷 선행학습 🔎 HTML의 문서파싱 순서와 동작원리 html은 기본적으로 위에서부터 아래로 태크를 해석한다. 위에서부터 태그를 해석하면서 돔트리를 형성한다. 그렇게 형성된 트리에 의해서 유저는 브라우저 화면을 통해서 개발자가 만든 화면을 볼 수 있다. 🕵️‍♀️ 발생가능 문제점 2가지 이러한 HTML의 성질때문에 문제가 발생할 수 있다. 위에서부터 순차적으로 태그를 파싱하므로 body태그의 위에 위치한 태그를 body보다 먼저 해석하기 시작한다. script태그가 모두 수행될때까지 아래로 ..

🧷 링크 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 🙋‍♀️ 내 생각 대/소문자 구분이 없다는 가정이 있기때문에, 대문자나 소문자 하나로 통일하고 시작해야겠다고 생각했다. 'p'나 'y'를 얼마나 가지고 있는지는 filter()를 통해 조건을 거리고 length를 이용해서 길이를 구한다음, 비교한다. ✅ 내 코드 func..

useEffect를 이해하기 위해서는 리액트라이프 사이클에 대한 이해가 선행되어야한다. ➡️ useEffect를 정확하게 이해하기 위해서, 리액트 라이프사이클을 공부했다. useEffect를 공부하면서 다른 부분보다 제일 헷갈렸던 부분이 실행순서였다. 훅스의 라이프사이클뿐만 아니라 클래스형의 라이프사이클를 알면 이 부분이 조금 더 쉽게 이해가 된다. 이 글은 리액트 라이프사이클이란 무엇인가, useEffect는 어떤 실행순서로 진행되는가를 중점적으로 다룰 것이다. (useEffect를 이해하기 위해 공부한 것이기 때문에, 글은 클래스형보다는 useEffect훅에 더 초점이 맞춰질 것이다.) 🖥 리액트 라이프사이클이란? "생명주기 메서드" 컴포넌트가 생성, 업데이트, 소멸되는 과정을 단계적으로 관리하고 제..

🧷 링크 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 🙋‍♀️ 내 생각 타입이 array인 seoul안에서 "Kim"이 몇번째에 위치하는지를 찾는 문제이다. array에서 특정 문자열의 index를 찾을 때 사용하는 메서드만 알면 풀기 쉬운 문제이다. ✅ 내 코드 function solution(seoul) { let location = seoul.findIndex(v=>v==="Kim") return `김서방은 ${location}에 있다` } 몇번째에 있는지 그 index만을 리턴하는 ..

➡️ 이미지나 비디오가 박스크기에 들어가면서도 가로세로비를 유지하여 찌그러지며 왜곡되는 현상을 방지하기 위해 height: auto; / object-fit: contain; / object-fit: cover; 을 사용한다. 1. 기능 콘텐츠의 가로세로비 유지 2. 방법 1️⃣ height: auto; 2️⃣ object-fit: contain; 3️⃣ object-fit: cover; 이미지나 비디오를 화면에 그리다보면 원본사진의 사이즈와 콘텐츠가 들어가야하는 박스사이즈가 달라서 찌그러지는 왜곡현상이 발생할 때가 있다. 예를 들면 아래와 같은 상황인데 짱구가 위아래로 조금 찌그러져있는 것을 확인할 수 있다. 인위적으로 찌그러지는 상황을 만들기 위해서 아래의 img에 width: 700px; heigh..

🧷링크 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 🙋‍♀️ 내 생각 처음에 문제를 잘못생각해서 코드를 짜서 패쓰가 안되었는데, 잘못 생각한 이유는 아래와 같다. ❌ 잘못 생각한 코드 const arr2 = [...arr] arr2.sort((a,b)=>b-a).pop() return arr2.length ? arr2 : [-1] sort()를 이용해서 arr안에 들어있는 값들을 내림차순으로 정렬한 뒤, pop()을 통해 가장 마지막 값을 제거했다..

🧷링크 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 🙋‍♀️ 내 생각 a===b인 경우는 둘중 아무 수나 리턴하면 되기때문에 생각하기 어렵지 않다. a와 b사이의 값들을 더하기 위해서, for문을 사용해서 a와 b 사이라는 범위를 지정하고 그 안에서 1씩 더하거나 빼는을 써야겠다고 생각했다. (a=3, b=5이면 3부터 시작해서 5까지(범위), 3,4,5처럼 1차이 나게) 그런데 a가 더 클 경우와, b가 클 경우로 나뉘기 때문에 a===b일 경우를 제외하고는 a>b, b>a로 경우를 나누어서 어디부터 시작해서, 더할지 뺄지를 ..

🧷 정의 리액트 라우터(React Router)란? React 애플리케이션에서 클라이언트 측 라우팅을 구현하는 데 사용되는 라이브러리. 단일 페이지 애플리케이션(Single Page Application, SPA)을 개발할 때, 사용자가 다양한 URL로 이동하거나 페이지를 변경할 수 있도록 도와주는 라이브러리 (라우팅: 웹 애플리케이션에서 다른 페이지나 뷰로 사용자를 네비게이션하는 프로세스) 🧷원리와 주요기능 라우터를 정확하게 이해하기에 앞서, window.loacation에 대해 공부하였다. location과 URL에 대한 이해가 있다면 리액트 라우터에 대해서 더 이해가 잘 될 것이라고 생각한다. window.location ( Web API란? / pathname, search, hash ... ) ..

자바스크립트나 리액트로 코드를 짜다보면 e.target.value와 같이 event를 사용하는 경우가 많다. 이때 사용하는 e의 이벤트는 무엇이며, 어떤 역할을 하는지, 어떻게 활용할 수 있는지를 중점으로 공부하였다. 🧷선행학습 Web Event는 Web API중의 일부이며, 자바스크립트 언어의 일부는 아니다. Web Event를 정확하게 이해하기 위해서는 Web API가 무엇인지 알아야한다. 이전에 Web API에 대해 공부하고 정리하여 포스팅한 적이 있다. window.location ( Web API란? / pathname, search, hash ... ) Web APIs에는 종류가 정말 많은데 오늘은 그 중 window.locaion에 대해 공부했다. 우선 window.location을 이해하기..

Web APIs에는 종류가 정말 많은데 오늘은 그 중 window.locaion에 대해 공부했다. 우선 window.location을 이해하기 위해서는 Web APIs가 무엇인지 이해하는 것이 필요하다. 🧷선행학습 web API란? 우선 mdn의 공식문서에는 위와 같이 정의되어있다. 개발하는 동안 사용할 수 있는 모든 API 및 interface(객체)를 의미한다. 웹 API를 이해하기 위해서는 또 API가 무엇인지를 알아야한다. 🧷선행학습 API란? API는 쉽게 말해서 설명서나 버튼같은 것이다. 그 안에 무엇이 들어있는지 자세하게 알지는 못해도, 이미 짜여있는 것들을 쉽게 꺼내어 쓸 수 있도록 도와주는 역할을 한다. ➡️ web API는 미리 브라우저에 내장되어있어서 개발자가 쉽게 꺼내어쓸 수 있는 ..