본문 바로가기

프론트엔드58

CSS-in-JS Library | styled-components란? ( + 직접 사용해본 후 느낀점 ) styled-components란? [ index ] 1. styled-components란? 2. styled-components의 장점과 단점 3. 왜 styled-components를 사용해야 할까? 4. styled-components를 직접 사용해보며 느낀 장점과 단점 5. 결론 1. styled-components란? https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components is the result of wondering how w.. 2023. 11. 16.
Date Picker Library 비교 분석 Date Picker Library 비교 분석 들어가며... 프로젝트에서 장소 예약을 위해 날짜와 시간을 선택할 수 있도록 하는 기능을 개발하게 되었습니다. 이 부분을 더 효율적으로 개발하기 위해 라이브러리를 사용하기로 했고, 여러 후보군 중 프로젝트에 가장 적합한 라이브러리가 무엇인지 비교해보고 결정하기로 했습니다. 이번에 라이브러리들을 찾아 비교해보면서 느낀 것은 각각의 라이브러리들 모두 기본적으로 필요한 기능들을 갖추고 있으며 대체로 비슷한 수준이었습니다. 따라서 구현하고자 하는 기능에 따라 적합하다의 기준이 달라질 수 있습니다. 아래의 내용들은 주관적인 견해임을 감안해 참고만 하시기를 바랍니다. 구현하고자 하는 기능 날짜 선택 특정 범위 한정으로 날짜 선택 제한 시간 선택 예약 가능 시간에 한하여.. 2023. 11. 15.
클로저 | Closures 클로저 | Closures [index] 1. 클로저란? 2. 실행컨텍스트 관정에서 본 클로저 3. 클로저의 활용 사례 4. 클로저와 관련된 문제점 5. 결론 1. 클로저(closures)란? 1-1. 클로저에 대한 정의 클로저는 자신이 생성될 때의 렉시컬 환경(Lexical environment)을 기억하는 함수 함수와 그 함수가 선언되었을 때의 렉시컬 환경(어휘적 환경)의 조합이다. 선언되었을 때란, 내부 함수가 선언되었을 때를 지칭한다. 주변 상태(어휘적 환경)에 대한 참조나 함께 묶인(포함된) 함수의 조합을 의미한다. MDN 에서의 클로저의 정의는 다음과 같다. A closure is the combination of a function enclosed with references to its s.. 2023. 10. 17.
SPA(Single Page Application)란? SPA(Single Page Application)란? [INDEX] 1. SPA란 무엇인가 2. SPA 장점 3. SPA 단점 + SPA의 단점인 SEO 문제를 보완할 수 있는 여러가지 방법들 1. SPA란 무엇인가 SPA란 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말합니다. 초기 페이지 로드 후 서버가 더 이상 HTML을 보내지 않습니다. 처음부터 HTML을 모두 다운로드하면 됩니다. 서버는 쉘 페이지를 보내고 브라우저는 사용자 인터페이스(UI)를 렌더링합니다. 그런 다음 클릭하면 SPA가 데이터 및 마크업에 대한 요청을 다시 보냅니다. 서버는 필요한 원시 자료를 다시 전송하고 브라우저는 이를 받아 업데이트된 UI를 렌더링하여 전체 페이지를 새로 .. 2023. 10. 10.
WEB/네트워크/ HTTPS (Hypertext Transfer Protocol Secure) HTTPS | Hypertext Transfer Protocol Secure [INDEX] 1. HTTPS란? 2. HTTP와 HTTPS의 차이점 3. HTTPS의 장점 (HTTP와 비교) 4. HTTPS 통신 흐름 1. HTTPS란? HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전입니다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정합니다. HTTP는 암호화되지 않은 데이터를 전송합니다. 즉, 브라우저에서 전송된 정보를 제3자가 가로채고 읽을 수 있습니다. 이는 이상적인 프로세스가 아니었기 때문에, 통신에 또 다른 보안 계층을 추가하기 위해 HTTPS로 확장되었습니다. HTTPS는 HTTP .. 2023. 9. 18.
프로그래머스 / 코딩 기초 트레이닝 / 수 조작하기 2 수 조작하기 2 문제 설명 정수 배열 numLog가 주어집니다. 처음에 numLog[0]에서 부터 시작해 "w", "a", "s", "d"로 이루어진 문자열을 입력으로 받아 순서대로 다음과 같은 조작을 했다고 합시다. "w" : 수에 1을 더한다. "s" : 수에 1을 뺀다. "d" : 수에 10을 더한다. "a" : 수에 10을 뺀다. 그리고 매번 조작을 할 때마다 결괏값을 기록한 정수 배열이 numLog입니다. 즉, numLog[i]는 numLog[0]로부터 총 i번의 조작을 가한 결과가 저장되어 있습니다. 주어진 정수 배열 numLog에 대해 조작을 위해 입력받은 문자열을 return 하는 solution 함수를 완성해 주세요. 제한사항 2 ≤ numLog의 길이 ≤ 100,000 -100,000 .. 2023. 9. 18.
프로그래머스 / 코딩 기초 트레이닝 / 수열과 구간 쿼리 2 수열과 구간 쿼리 2 문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e, k] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 k보다 크면서 가장 작은 arr[i]를 찾습니다. 각 쿼리의 순서에 맞게 답을 저장한 배열을 반환하는 solution 함수를 완성해 주세요. 단, 특정 쿼리의 답이 존재하지 않으면 -1을 저장합니다. 제한사항 1 ≤ arr의 길이 ≤ 1,000 0 ≤ arr의 원소 ≤ 1,000,000 1 ≤ queries의 길이 ≤ 1,000 0 ≤ s ≤ e 2023. 9. 18.
프로그래머스 / 코딩 기초 트레이닝 / 수 조작하기 1 수 조작하기 1 문제 설명 정수 n과 문자열 control이 주어집니다. control은 "w", "a", "s", "d"의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다. "w" : n이 1 커집니다. "s" : n이 1 작아집니다. "d" : n이 10 커집니다. "a" : n이 10 작아집니다. 위 규칙에 따라 n을 바꿨을 때 가장 마지막에 나오는 n의 값을 return 하는 solution 함수를 완성해 주세요. 제한사항 -100,000 ≤ n ≤ 100,000 1 ≤ control의 길이 ≤ 100,000 control은 알파벳 소문자 "w", "a", "s", "d"로 이루어진 문자열입니다. [내가 푼 방식] 단순하게 split으로 문자열 .. 2023. 9. 18.
프로그래머스 / 코딩 기초 트레이닝 / 등차수열에 특정한 항만 더하기 등차수열에 특정한 항만 더하기 문제 설명 두 정수 a, d와 길이가 n인 boolean 배열 included가 주어집니다. 첫째항이 a, 공차가 d인 등차수열에서 included[i]가 i + 1항을 의미할 때, 이 등차수열의 1항부터 n항까지 included가 true인 항들만 더한 값을 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ a ≤ 100 1 ≤ d ≤ 100 1 ≤ included의 길이 ≤ 100 included에는 true가 적어도 하나 존재합니다. [ 내가 푼 방식 ] 단순하게 반복문으로 작성했다. idx대로 순차적으로 돌면서 해당 하는 항일 때만 합산하는 방식으로 코드를 짰다. 규칙성 찾기 include.length === n include[i] === i .. 2023. 9. 17.