본문 바로가기

반응형

전체 글

(83)
비밀번호 암호화 만들기(css, javascript) 오늘은 비밀번호 암호화 css 만들기를 진행해보도록 하겠습니다. 업무상 비밀번호 암호화를 구현하는 부분을 진행했어야 했는데 자바스크립트와 css를 이용해서 간단하게 구현해보았습니다. 결과는 다음과 같습니다. 비밀번호 암호화 만들기 원리는 keyup 이벤트가 발생했을 때 is-active 클래스가 생성되면서 opacity 값을 변하게 하는 것이라고 생각하면 됩니다. html scss .lessor_deposit_num{ display: none; position: absolute; top: 0; left: 80px; padding: 9px 0 0 3px; white-space: nowrap; &.is-active{ display:flex; } .lessor_deposit_circle{ display: in..
시저 암호 - 프로그래머스 level1 오늘은 시저 암호 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12926 코딩테스트 연습 - 시저 암호 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀 programmers.co.kr 풀이 방법 문자열 반복문을 돌면서 소문자인지 공백인지 대문자인지 확인해주고, 아스키코드를 기준으로 정답 문자열에 누적해주면 됩니다. 소스 코드 function solution(s, n) { let answer = ''; const largeA = 65; const la..
직사각형 별찍기 - 프로그래머스 level1(javascript) 오늘은 직사각형 별찍기 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12969 코딩테스트 연습 - 직사각형 별찍기 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수 programmers.co.kr 풀이 방법 - 이중 포문으로 반복을 돌릴 수도 있겠지만 그렇게 하는 것보단 repeat함수를 통해서 * 반복을 할 수 있습니다. 소스 코드 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => {..
평균 구하기 - 프로그래머스 level 1(javascript) 오늘은 프로그래머스 평균 구하기 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12944 코딩테스트 연습 - 평균 구하기 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 arr programmers.co.kr 풀이 방법 - 단순히 더해준 후에 배열의 길이만큼 나눠주면 됩니다. 소스 코드 function solution(arr) { return arr.reduce((acc,cur)=>acc+cur) / arr.length; }
하샤드 수 - 프로그래머스 level1 오늘은 하샤드 수를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12947 코딩테스트 연습 - 하샤드 수 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하 programmers.co.kr 풀이 방법 - 숫자 => 문자로 변환한 후에 split으로 쪼개준 후, reduce를 이용해서 합을 구해줍니다. 소스 코드 function solution(x) { const sum = String(x).split('').map((v)=>+v).reduce((acc,cur)=..
React 살펴보기 - (React 특징, 장단점) 오늘은 React 살펴보기편!입니다. 목차는 다음과 같습니다. 1. React란 무엇인가? 2. React의 장점 3. React의 단점 4. 일반적인 SPA 아키텍처 5. hello world 띄우기 1. React란 무엇인가? - React란 무엇인지 정의해보겠습니다. - React는 프레임워크가 아닌 UI 컴포넌트 라이브러리입니다. - 여러 컴포넌트로 UI를 구성하는 방식은 React의 핵심 철학입니다. - 컴포넌트 기반 아키텍처는 React 이전에도 존재했지만 순수한 자바스크립트 언어로 구현해냈다는데서 의미가 큽니다. 2. React의 장점 - 1. 단순한 앱 개발 : 선언형 스타일이며, 강력하고 개발자 친화적인 DOM 추상화를 제공합니다. - 2. 빠른 UI : 뛰어난 성능을 제공합니다. 이는 ..
수박수박수박수박수박수? - 프로그래머스 level1 오늘은 수박수박수박수박수박수? 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12922 코딩테스트 연습 - 수박수박수박수박수박수? 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 programmers.co.kr 풀이 방법 - 1번 풀이 : '수'는 짝수 인덱스에 '박'은 홀수 인덱스에 나타나기 때문에 최종 문자열에 인덱스에 따라서 다르게 문자를 넣어주면 됩니다. function solution(n) { let answer = ''; for(let inde..
제일 작은 수 제거하기 - 프로그래머스 level 1 오늘은 제일 작은 수 제거하기 문제를 풀어보겠습니다. 문제는 다음과 같습니다. https://programmers.co.kr/learn/courses/30/lessons/12935 코딩테스트 연습 - 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1 programmers.co.kr 풀이 방법 - 1. 먼저 Math.min을 이용해서 작은 값을 뽑아냅니다. - 2. 반복문을 이용해서 작은 값을 만나면 splice 연산을 이용해서 배열 내에서 제거해줍니다. - 3. 마지막으로 배열의 길이가 0이면 -1 아니면 제거된 ..