javascript 37

[프로그래머스/JavaScript] 시저 암호

https://school.programmers.co.kr/learn/courses/30/lessons/12926 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1) 풀이 해당 문제는 좀 고민이 많았던 문제였다 난이도가 어려웠던 건 아닌데, 아스키 코드를 적용시켜 대문자, 소문자를 구분하려다보니 비슷한 형태인데 다 따로 코드를 적어주어 뭔가 낭비되는 느낌이 컸다..😂 그래서 다른 분들의 풀이를 봤는데, 어차피 n이 아무리 커도 25까지이기 때문에, 그냥 소문자 대문자를 한 문자열에 집어넣고 반복문으로 탐색해서 확인하는 방법을 많이 쓰셨다..! 나는 생각지..

[프로그래머스/JavaScript] 나누어 떨어지는 숫자 배열

https://school.programmers.co.kr/learn/courses/30/lessons/12910 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1) 풀이 이번 문제는 난이도 자체는 꽤 쉬웠으나 sort에서 '아..! 맞다!' 라고 생각했던 문제,, 자바스크립트의 기본이라면 기본이었는데 왜 까먹고 있었던 걸까 알고리즘 문제는 개발과는 또 다른 영역이다 .. 우선 간단하게 반복문으로 divisor로 딱 나눠떨어지는 요소들만 answer에 집어넣었다 그다음엔 answer에 하나도 들어갈 요소가 없는 경우 -1을 집어넣는 것 처리! (이제 보니..

[프로그래머스/JavaScript] 문자열 내림차순으로 배치하기

https://school.programmers.co.kr/learn/courses/30/lessons/12917 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1) 풀이 오랜만에 프로그래머스를 풀다보니 내 실력을 가늠할 수 있는 것 같다 😥 앞으로는 분발해서 자료 안 찾아보고도 할 수 있도록 연습해야지.. 해당 문제는 문자열 하나를 가지고 문자 하나하나를 내림차순으로 정리하는 문제였다! 대문자를 소문자보다 작다고 표현하는 걸 봐서 아스키코드 순이니까 그냥 냅다 비교하면 간단할 거라 생각해서 반복문 두개로 돌리고 삽질하다가.. 문득 문자열은 sort 할 ..

[React] 반복되는 컴포넌트 효율적으로 사용 (map() 함수)

※배워가고 있는 학생입니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다😊 1) 개요 웹 어플리케이션을 만들다 보면 반복되는 코드를 작성할 때가 있다. 그래서 오늘은 리액트에서 반복되는 코드를 효율적으로 작성하는 방법에 대해 적어보려 한다! 2) map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용해서 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) • callback: 새로운 배열의 요소를 생성하는 함수 - currentValue: 현재 처리하고 있는 요소 - index: 현재 처리하고 있는 요소의 inde..

웹/React 2021.07.24

[React] JSX

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드립니다!😁 리액트를 막 배우기 시작하면서, 처음 부딪친 난관은 바로 JSX 였다! html 만 공부하던 나에게 조금 혼란을 주는 문법이었는데, 오늘 스터디에서 현직자분이 가르쳐주신 덕분에! (감사합니다ヽ(✿゚▽゚)ノ) 조금 명확해질 수 있었다. 그래서 알게 된 이참에 저서를 참고해서 조금 정리해두려고 한다. 1) JSX 문법이란? 근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. -React 문서- JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번..

웹/React 2021.07.11

#4 숫자야구

※소소한 개인 프로젝트 기록입니다. 1) 과정 이번엔 숫자야구다. 숫자야구의 방식은, 상대방이 고른 4개의 숫자를 맞히는 게임이다. 가령, 상대방이 1234 를 골랐다고 하자. 내가 제출한 정답이 1243일 경우 2스트라이크 2볼이 되는데, 자리수, 숫자 모두 같을 경우 스트라이크로, 자리는 다르지만 정답에 포함되어있는 숫자일 경우 볼로 처리한다. (위와 같은 경우에는 1,2가 자리, 숫자가 똑같아서 2스트라이크. 4,3은 자리는 다르지만 정답에 포함되어 있으므로 2볼.) 내가 만든 게임에서는 10번의 기회 내에 정답을 제출하면 승리(홈런), 10번의 기회 내에 정답을 맞히지 못하거나 혹은 아웃(0스트라이크 0볼)이 3번 될 경우 패배하고 정답이 무엇인지 출력된다. 앞서 간략하게 설명했지만 그래도 들어있..

개발일기 2021.07.04

#3-2 계산기(+α 버전)

※소소한 개인 프로젝트 기록입니다. 1) 과정 2021.06.27 - [개발일기] - #3-1 계산기 에 이은 프로젝트입니다. #3-1 계산기 ※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '계산기'이다. 왜 3-1 이냐면, 현재 코드까지는 오직 두개의 수만 계산할 수 있기 때문! 이번에도 역시나 'Zero cho'님의 강의에서 아이 sebada.tistory.com 이전 글에서 언급한 계산기 응용 버전이다. 코드를 많이 수정한 것은 아니고, 이전 버전이 오직 숫자 2개만 연산이 가능했다면, 이번엔 연달아 숫자를 받아서 연산하는 것이나, = 를 눌러 나온 최종 값에 또 다른 연산을 시작하는 방식으로 여러개의 수를 계속해서 연산할 수 있는 계산기를 만들었다. const operCal=(va..

개발일기 2021.07.02

#3-1 계산기

※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '계산기'이다. 왜 3-1 이냐면, 현재 코드까지는 오직 두개의 수만 계산할 수 있기 때문! 이번에도 역시나 'Zero cho'님의 강의에서 아이디어를 얻었다. (감사합니다🙇‍♀️ 강의 잘 보고 있습니다.) 항상 zero cho님의 유튜브 강의를 통해 강의를 보다가, 이번에 내신 자바스크립트 책이 온/오프라인으로 나와서 전자책으로 보고 있다!! 관련 링크는 아래 참고자료 칸에 첨부하도록 하겠다. 어떤 강의를 보고 클론 코딩을 하더라도, 항상 그분들 코드보다 조금씩은 더 기능을 추가해보려고 노력하는 편이라 이번에도 별거 아니지만 기능을 추가해보았다. 내가 임의로 추가한 기능과 함께 계산기의 전체적인 기능을 아래 적어보겠다. - 사칙연산(더하기,..

개발일기 2021.06.27

[JavaScript] 클릭한 요소 인덱스 구하기 (querySelectorAll, onclick...)

querySelectorAll을 쓰면서 가끔 겪는 문제가 있다. 선택한 요소 중 특정 요소만 효과를 주고 싶은데, 그러면 그 요소의 인덱스를 알아야 한다는 것! 그래서 구글링을 해보다가 할 수 있는 방법을 찾았긴 찾았다. 이게 과연 성능 등을 고려해도 좋은지는 모르겠지만....! 그래도 오늘의 성과이니 기록해두려고 한다. 아래의 예제는 모든 button 요소들을 저장한 buttons 에서, 내가 클릭한 인덱스(buttons[n])의 요소가 가지고 있는 textContent를 alert 창으로 띄우는 기능이다. const buttons=document.querySelectorAll('button'); for(let i=0;i{ alert(buttons[idx].textContent); } })(i); } ..

웹/JavaScript 2021.06.26

#2 쿵쿵따 게임

※소소한 개인 프로젝트 기록입니다. 1) 과정 이번 프로젝트는 '세음절의 단어로 끝말잇기를 이어가는 쿵쿵따 게임'! 얼마 전에 알게 된 'zero cho'님의 강의를 참고하여 zero cho님 강의에서 나오는 방식+나만의 아이디어로 탄생한 프로젝트이다. (https://www.youtube.com/c/ZeroChoTV/featured) 내 글을 보시진 않겠지만... 강의 최고예요 zero cho님.. 이제야 알게 돼서 너무 아쉽... 아무튼, 쿵쿵따 게임 진행 방식을 간략하게 설명하자면 다음과 같다. 1. 쿵쿵따 게임을 함께 할 인원 n명을 입력한다. (취소를 누르면 게임을 진행하지 않는다) 2. 자신이 입력한 인원이 맞는지 확인하고, 1번부터 n명까지 차례로 입력창에 단어를 입력하여 끝말잇기를 이어간다..

개발일기 2021.06.25
728x90