본문 바로가기

JavaScript

(28)
2024.2.26 기록 (코드카타 문자열 다루기 기본) 문자열 s의 길이가 4혹은 6이고, 숫자로만 구성되어있는 지 확인해주는 함수 solution을 완성하기. ex) a234 = false , 1234 = true 우선 문자열의 길이가 4 혹은 6이어야 대전제 조건이 성립한다. if ( s.length === 4 || s.length === 6 ){} 다음 숫자로만 되어있는 지 확인하기 위해서 숫자가 아니라면 false를 반환하거나, 위의 조건과 동시에 숫자로만 이루어져있어야 한다. parseInt를 사용하여 숫자여부를 판단하기로 하였다. parseInt() - JavaScript | MDN parseInt() 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다. developer.mozilla.org func..
2024.1.30 기록 ( preventDefault 에 관하여) 이번에 React를 이용한 과제 제출중, div태그를 form태그로 변경하고 싶은 욕심이 생겼다 (시멘틱 태그를 적극 이용하고 싶었다) 현재 작업중인 코드는 Main.jsx라는 중앙 컨트롤러를 두고 각 세부 컴포넌트에서 작업을 진행, 최종적으로 Main.jsx로 전달하는 기능을 갖추고 있다. return ( 고정될 박스 위치 박스가 나올 위치 ) } 따라서 retrun문 하단은 심플하게 출력하는게 목적이었는데, div태그를 form태그로 변경하면서 문제가 발생했다. 기본적으로 HTML태그는 각각의 type를 가지고 있는데 Css라면 reset.css를 통해 일괄 초기화가 가능하지만, 이 부분에 있어서는 type를 미리 정해주는 방식을 채용하거나 preventDefault를 적용하여 기본 이벤트속성을 진행..
2024.1.17 프로그래머스 1레벨에서 자주 쓰이는 메서드 메서드라 함은 보통 지정된 역할을 가진 명령어 정도라고 생각하면 될 거 같다. 예를 들자면 reduce는 배열내에 있는 모든 요소의 합을 출력한다. 여기서 중요한건 결과값을 반환하는지, 그것이 존재한다 아니다와 같은 True or False로 반환하는지, 마지막으로 그 결과가 이전 값에 영향을 주는 지 이렇게 세 가지 요소가 있다. True or False로 반환하는 값은 boolean 값을 반환한다고 할 수 있다. 많이 사용 된 메서드는 isInteger : 정수 여부를 묻는 메서드 - 보통 소수를 제외한 정수, 양수등을 요구할 때 쓰인다 isNan : NaN인지 묻는 메서드 - 보통 문자열과 숫자열을 걸러낼 때 쓰인다 배열메서드도 참 많이 쓰인다. 대표적으로 처음 언급한 reduce가 있고, join..
2024.1.16 기록 (팀 프로젝트를 마치며) 이번 주 까지 약 2주의 시간동안 바닐라 자바스크립트를 이용한 프로젝트들이 마무리 되었다. 한 주는 개인 프로젝트, 한 주는 팀 프로젝트로 진행되었다. 각각의 주차마다 얻어가는 것들이 제법 많았다. 첫 번째 주는 개인 프로젝트를 진행했다. 첫 주에는 firebase를 이용한 호스팅을 준비했던 터라, .env를 이용한 깃허브 예외파일을 설정하는 방법부터, 어떻게 하면 효율적으로 정렬을 시행할 지, 그리고 무엇보다도 프로그래밍적 사고, UX 라는 것들이 의미하는 부분들을 피부로 느낄 수 있는 부분이었다. 가끔 그런 생각을 한다. UI/UX라는 과정을 들으면 UI는 많이 들어 본 단어지만 UX라는 단어는 상당히 생소해서 한 번쯤 검색을 거쳐 보곤 한다. 나 또한 이 과정을 밟기 전까지 몇 번, 검색을 거쳐봤다..
2024.1.12 기록 (fetch와 비동기) 이번에 작업을 하며 TMDB의 openAPI를 통해 자료를 받는 과정이 제법 많이 익숙해져있었다. 하지만 fetch로 자료를 받는 과정에서 async / await 같은 경우는 거의 관습적으로 사용하고 있어 이 부분을 왜 사용해야하는지, 그리고 반드시 어디에 사용해야하는지 에 대한 이론정리가 조금 모자랐던 것 같았다. 늘 그렇지만 이럴때는 고유명사들이 문제인데, 공부를 하면서 메서드에 많은 어려움을 느끼곤 했었다. export async function loadJSON(url) { const response = await fetch(url); const data = await response.json(); return data; } 현재 당면한 문제는 위의 코드로 작성된 fetch가 간헐적으로 서버통신에..
2024.01.11 기록 ( const와 preventDefault) 가끔은 사소한 실수가 몇시간을 고민하게 만들곤 하는데 오늘이 바로 그런 날이었다. CSS에는 reset.css라는 교복같은 초기화 기능이 있듯 eventListener에도 preventDefault 라는 초기화 기능이 있다. HTML태그에는 기본적으로 가진 값들이 있다. 예를들면 button은 디폴트 타입이 summit이다. 제출하면 화면이 새로고침된다. 따라서 이 부분에 충돌이 일어날 가능성을 제거하기위해 eventListener 이벤트의 click 기능을 사용한다면 preventDefault를 붙여주는 것이 오류를 줄일 수 있다. function sendReview(e) { e.preventDefault(); const는 선언과 동시에 할당을 하며 절대 불변의 상수가 된다. 처음 배우는 기초에 가깝지..
2024.1.10 기록 (javascript의 셋업과 모듈) 일찍이 firebase를 사용하면서 import와 export하며 사용하는 모듈식 구조는 눈에 들어왔던 기억이 있다. 이번에 개인프로젝트를 마치며 팀 프로젝트를 진행하게 되었다. 팀원중 한 분의 개인프로젝트 파일을 개량화하고 조금 더 기능을 첨가해 완성하는 것이 이번 팀 프로젝트의 과제였다. 여기서 조금 많은 걸 이해할 수 있게 되었는데, 첫 번째는 사람마다 프로그래밍하는 방법이 정말 다양하다. 바닐라자바스크립트만을 사용하고 같은 API를 사용했음에도 불구하고 불러오는 방식, 적용하는 방식이 다 달랐다. 그 중 우리 팀이 선정한 프로젝트는, 가장 모듈화가 완벽하게 이루어진 팀원의 프로젝트였는데 이 코드를 이해하는 데 제법 시간이 걸렸다. 지저분하게 작성되었다거나, 알 수 없는 로직의 구성이어서 오래 걸렸..
2024.1.8 정렬 알고리즘 3가지(버블, 선택, 삽입) 오늘까지 4일정도의 알고리즘 수업을 마쳤다. 처음 알고리즘은 기본적으로 접근법이 조금 근본에 가깝다고 느껴졌다. 메서드를 이용해서 값을 구하는게 아닌, 어떠한 상황에서라도 적용 할 수 있는 식을 구현하는 느낌에 가까웠다. 그 중 마지막에 배웠던 정렬 알고리즘 3가지를 기억할 겸 나누어 기록하고자 한다. 가장 먼저 정렬을 수행할 때 대전제 조건이 존재한다. 1. 버블 정렬 버블정렬은 조건에 만족하는 (예를 들면 가장 큰 숫자라던가) 요소를 배열의 맨 끝(혹은 앞)으로 밀어내는 정렬방식이다 비교방식은 인접한 두 숫자를 반복해서 비교해서 원하는 위치(맨 끝 혹은 앞)쪽으로 계속 밀어넣는 방식인 셈이다. [2, 1, 6, 4, 5] 이러한 배열에서 오름차순(원하는 결과는 [1, 2, 4, 5, 6]이 될 것이다..