도시의 침묵보다는 바다의 속삭임이 좋아요

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

※배워가고 있는 학생입니다. 틀린 부분이 있다면 댓글로 피드백 부탁드려요😆 1) 개요 진짜 별거 아닌데, 가끔씩 자바스크립트 문법에서 세미콜론을 붙이냐 안 붙이냐 를 고민한 적이 좀 있다. 그래서 이참에 헷갈리는 거 정리해보려고 한다! 원칙은 아니고, 권고사항이니 참고만 해라! 2) 문법 1. 함수 선언문(function statement)와 함수 표현식(function expression) 함수 선언문 - 함수 끝에 세미콜론을 붙이지 않음 함수 표현식 - 세미콜론을 붙이는 것을 권장 //함수 선언식 function add(x,y){ return x+y; } //함수 표현식 const add = (x,y) => { return x+y; }; 똑같은 식을 함수 선언식과 함수 표현식으로 나타낸 것이다. 하나..

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

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

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

https://programmers.co.kr/learn/courses/30/lessons/12909 코딩테스트 연습 - 올바른 괄호 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 programmers.co.kr 1) 풀이 해당 문제의 풀이과정은 따로 적어두지 않을 예정이다! 자기 전에 오늘 공부 안 했다는 죄책감때문에 가볍게 푼 문제라 백준에서 푼 문제와 풀이 방식이 똑같다! 풀이를 적어놓은 그 글을 대신 첨부하겠다. 2021.03.06 - [알고리즘 | 자료구조/백준] - [백준/c++] 9012 - 괄호 2) 최종 소스코..

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

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

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

https://programmers.co.kr/learn/courses/30/lessons/42586 코딩테스트 연습 - 기능개발 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 programmers.co.kr 1) 풀이 작업의 진행상황(progresses)과 진행속도(speeds)가 들어있는 벡터가 각각 하나씩 주어진다. 벡터 사이즈와 작업의 인덱스(ex. progresses idex 0에 들어있는 작업=speeds idex 0에 들어있는 작업) 가 동일하므로, 각각의 벡터에 동일한 인덱스의 값을 확인하고 작업을 완료할 때까지의 날짜를 구하면 된다. 우선, 1..