scroll-snap을 적용한 페이지를 제작 중이었다. scroll-snap을 적용하기 위해서는 컨테이너 하나와 그 컨테이너 내부에 스크롤할 요소들이 들어가 있어야 한다. 또한 컨테이너는 overflow 속성이 스크롤 가능하도록 되어있어야 한다. scroll-snap의 적용은 크게 어려울 것이 없어서 수월하게 진행되었다. 다만 문제는 scrollTo를 이용한 스크롤의 제어가 작동하지 않는 것이었다. scrollTo를 이용해 다음 아이템으로 스냅하고 싶었는데 스크롤은 미동도 없었다. scroll-snap을 비활성화하면 scrollTo가 정상적으로 작동하는데 scroll-snap만 켜지면 작동하지 않았다. 원인은 스크롤의 대상이었다. 지금껏 window.scrollTo 로 브라우저 창의 스크롤을 열심히 제어하려고 시도했는데 생각해보면 브라우저의 높이는 100vh로 맞춘 상태여서 스크롤이 될리가 없었다. snap 컨테이너가 overflow 되며 생긴 스크롤을 브라우저의 스크롤로 착

React 문자열 줄바꿈 처리 \n을 `` 태그로 바꾸면 되는 간단한 문제지만 React에서는 보안을 위해 문자열로 태그를 입력시 그냥 문자열로 인식하도록 되어있다. 두가지 방법으로 해결할 수 있다. 1 2

JS 코딩테스트 연습 2021. 11. 18 (목) 문제 시저 암호 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. _알파벳을 n칸씩 밀기 위해서는 알파벳의 순서에 대한 데이터가 필요하기 때문에 우선적으로 정의했다. 문자열이 대소문자 구분을 요구하기 때문에 대문자 배열과 소문자 배열을 각각 만들었다. 띄어쓰기와 대소문자를 구분하기 위해 삼항연산자를 중첩하여 작성했다. 문자열을 한글자씩 꺼낸 뒤 알파벳 배열에서 일치하는 인덱스를 찾고 n을 더해서 반환하였다. "z" 의 경우 1칸 밀리면 "a" 로 돌아가야하기

JS 코딩테스트 연습 2021. 11. 17 (수) 문제 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. splice 메소드는 원본이 수정되는 것으로 알고 있었는데 계속 자른 부분이 반환되어서 잠깐 고민을 했으나 메소드의 결과를 변수에 할당하거나 직접 리턴할 경우 자른 부분이 저장된다는 사실을 떠올려냈다. 잊고 있었던 사실을 상기할 수 있는 문제였다. 정수 내림차순으로 배치하기 **함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로

JS 코딩테스트 연습 2021. 11. 16 (화) 요즘은 React API 위주로 공부하다보니 머리가 뒤죽박죽이 되어버렸다. 아직 배우는 단계이고 React를 실용성 있는 프로젝트에 응용할 수준은 아니다보니 배우면서 지식이 늘어가는 것에 대한 성취감은 있을지 몰라도 어떤 문제를 해결했다 혹은 뭔가를 만들었다는 것에 대한 성취감은 느껴본지 너무 오래되었다. 그래서 오늘은 오랜만에 JS의 기초적인 메소드 등 문법에 대한 복습도 할 겸 프로그래머스의 JS 코딩 테스트 문제를 풀어보기로 했다. JS로 해결 가능한 문제가 생각보다 많아서 낮은 난이도부터 하나씩 차례대로 풀어볼 예정이다. 문제 평균 구하기 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. _reduce() 메소드를 비교적 최근에 알게 되었는데

JavaScript 지속적으로 내용 추가 예정 > JavaScript JavaScript(이하 JS)는 웹 개발에서 콘텐츠를 바꾸고 움직이는 등 페이지의 동적 처리를 담당한다. 자료형 String String은 문자열 리터럴을 말하며, 따옴표로 감싸서 작성한다. 우리가 흔히 말하는 문자, 글자는 물론 숫자 또한 따옴표로 감싸서 작성하면 문자열 리터럴이 된다. 백틱(`)으로 감싸는 작성법은 보간법으로, ${}`를 이용하여 변수에 할당된 값을 출력하는 기능을 갖고 있다. Number 정수(int) 및 부동소수점(float) 숫자를 말한다. Boolean true와 false로 이루어진 논리 데이터 형식이다. Boolean이 아니지만 true, false와 같은 의미를 갖는 값이 존재한

HTML, CSS, JS 복습 2021. 07. 31 (토) 최근 여러 이유에서 블로그 업로드를 잠시 쉬었다. 업로드를 쉬기 전에는 데이터 사이언스에 대해 알아보고자 파이썬 공부를 하는 중 이었는데, 다룰 줄 아는 언어라고는 SQL 밖에 없었던 나는 파이썬에서 SQL과는 다른 매력을 느꼈다. 당연하지만 SQL로는 불가능했던 개발이라는 분야가 파이썬에서는 가능했고, 그 부분에서 흥미와 매력을 느꼈다. 그러면서 자연스레 당초 계획했던 데이터 사이언스가 아닌 무언가를 뚝딱뚝딱 만들어내는 개발 분야에 관심이 쏠리기 시작했고, 파이썬 기초를 끝내고 난 시점에서는 개발언어를 제대로 배워봐야겠다는 생각을 갖고 있었다. 그 중 제일 먼저 눈에 들어온 분야가 웹이었다. 프로그래밍 언어라고는 파이썬을 기초만 겨우 끝낸 수준이었고, 그 외 다룰 줄 아는 언어가 없는 코딩 문외한인 나에게 웹개발은 '그나마'