bravo my life!

1. 개요 replace는 특정 문자열을 찾고, 내가 지정한 문자열로 변경하는 함수다. 특정 문자열을 찾을 때 동일한 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. 이런 경우에는 정규식을 통해 검색된 모든 문자를 변경할 수 있다. 2.기본 사용 replace('찾을 문자열', '변경할 문자열') let string = 'hello world, JavaScript' string.replace('Java', 'Type') // 기대값 // string = 'hello world, TypeScript' 특정 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. let string = 'hello world, JavaScript, JavaScript, JavaScript' string.repl..

1. 개요 참조타입을 복사할 때는 불변성을 지켜주며 복사를 하자. 2. 불변성 관리의 이유 리액트의 상태 업데이트와 관련이 있다. 리액트는 상태 업데이트를 통해 렌더링을 하게 되는데, 리얼돔과 버추얼돔을 비교하며 참조값이 바뀐 내용이 있다면 버추얼돔의 내용을 리얼돔에 반영하는 과정에서 리렌더링이 일어나게 된다. 리액트의 렌더링 과정은 1. 렌더 페이즈 - 버추얼돔과 리얼돔을 비교하는 단계 2. 커밋 페이즈 - 변경된 컴포넌트를 리얼돔에 적용하고 리렌더링을 하는 단계 로 이루어지는데 리액트는 버추얼돔과 리얼돔을 비교할 때 얕은 비교를 하게 되고 이 과정에서 참조값만을 비교하게 된다. 객체타입은 참조타입이라고 하는 만큼 얕은 복사시 참조값이 변경이 되기 때문에 불변성을 지키지 않는다면 원치 않는 리렌더링이 ..

Set 객체 자바스크립트의 표준내장객체로 원시값, 객체 모두 유일한 값을 저장할 수 있다. 사용 수단중 하나로 중복을 제거한 값을 저장하는 방법으로 사용될 수 있다. 사용방법 let numberArr = [39, 40, 41, 0, 1, 2, 40, 41, 0, 1] //중복된 값이 존재한다. 39, 40, 41, 0, 1 let newArr = new Set(numberArr) //기대값 //Set(6) { 39, 40, 41, 0, 1, 2 } let newArr = new Set(numberArr).size //Set의 요소의 개수는 .size를 사용한다. //기대값 //6 let newArr = new Set(numberArr).add(99) //Set의 요소의 추가는 .add를 사용한다. //기..

1. 데이터 타입 JavaScript가 어떠한 데이터를 처리함에는 규칙이 존재한다. 기본적으로 지켜야 할 것은 데이터 타입을 지켜줘야 하는 것인데, 사용되는 데이터의 타입은 아래와 같다. ⚬ 원시데이터 - boolean - null - undefinded - number - string - symbol ⚬ object JavaScript를 하며 대표적으로 사용할 것은 number, string일 것이다. 2. number, string 숫자열이, 문자열이라고도 한다. 숫자열의 가장 큰 특징은 연산이 가능한 것이다. console창에 alert(1+1) 을 입력해보자. 브라우저에서 경고창이 뜨고 내용으로는 2가 표시될 것이다. alert의 인자로 숫자열을 입력했기 때문에 연산의 결과가 표시되는 것이다. 문..

앞으로 JavaScript를 배워보려 한다. 기초라 생각하고 가볍게 넘어간 부분이 너무 많기 때문에 복습겸 공부를 시작했다. 1. JavaScript? 유저와의 상호작용을 위한 언어. HTML은 정적인 언어이기 때문에 유저에게 정보를 전달하는 기능으로 제한된다. 하지만 JavaScript는 동적인 언어이기 때문에 유저와 상호작용을 하고 유저가 적극적으로 웹을 조작할 수가 있다. 2. 상호작용은 어떻게? 유저와 상호작용할 수 있는 이벤트는 여러가지가 있다. 그 중 가장 기본적인 세가지는 다음과 같다. onclick(): 클릭을 감지하는 속성. onchange(): 내용의 변경을 감지하는 속성. onkeydown(): 키보드의 키 입력을 감지하는 속성. 3. JavaScript의 작동은 브라우저에서 확인이 ..

- 문제점 requests와 beautiful soup을 이용하여 지니뮤직의 웹페이지를 크롤링하던 중 문제가 발생하였다. 크롤링하려는 항목은 순위, 곡명, 가수이다. 15위인 저스틴비버의 peaches가 19금 등급의 곡인데 크롤링시 필요하지 않은 19금이라는 문자열까지 가져오게 된다. for song in songs: number = song.select_one('td.number').text[0:2].strip() title = song.select_one('td.info > a.title.ellipsis').text.strip() artist = song.select_one('td.info > a.artist.ellipsis').text.strip() print(number, title, artis..

서버와 클라이언트를 좀 더 심도 있게 다루는 법을 배웠고, AWS를 이용하여 서버를 구매한 뒤 가비아를 통해 만든 도메인을 연결해 실제로서비스되는 방법처럼 배울 수 있는 주차였다. 1. 버킷리스트 사이트 만들기 간단한 버킷리스트 사이트를 만들고 4주차 때와 같이 GET, POST 방식을 이용하여 리스트를 서버에 기록하고 보여주는 연습을 하였다. 이번에 배운 POST는 지금까지와는 다르게 약간 추가된 것이 있는데, 각각의 리스트에 클라이언트 측에는 보이지 않는 번호를 부여해야 했다. 번호를 부여하는 이유는 동일한 리스트가 있을 경우에 대비함이다. 예를 들어 리스트 중에 "박물관 가기"가 두 개가 있다고 생각해보자. 첫 번째 박물관 가기를 완료시킨다면 번호가 부여되지 않았을 경우 "박물관 가기"라는 리스트가..

1. Flask Flask 프레임워크는 서버 구동을 위한 편한 코드의 모음이다. 서버를 구성하는 일은 어려운 일이기 때문에, 프레임워크의 사용이 필요하다. 튜터의 말로는 실무에서도 장인정신으로 한 땀 한 땀 밑바닥부터 서버를 만드는 일은 거의 없다고 한다. 그만큼 어렵고 시간이 많이 걸리는 일이기 때문에 프레임워크의 사용이 거의 필수적이라고 한다. 프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 3분 요리/소스세트라고 생각하면 되겠습니다. 2. 폴더, 파일 정리 static 폴더 : html 파일 내의 이미지, js, css 등을 저장할 폴더. templates 폴더 : html 파일을 저장할 폴더. app.py : flask 메인 python 파일. 3. API 만들기 API..

Python을 이용해 back end의 기초적인 부분을 공부할 수 있는 3주차로 구성이 되어 있었고, 실제로 MongoDB를 이용해 데이터의 저장, 추가, 불러오기, 찾기, 바꾸기, 지우기를 할 수 있었다. 1. MongoDB 에러 발생 해결법 어려운 부분은 크게 없었는데 의외의 복병이 있었다. Python에서 MongoDB로 데이터 조작을 위한 실행이 되지 않았다. m1 pro 맥북때문인지, 통신회선의 문제인지는 모르겠으나 스파르타코딩클럽 FAQ에서 문제를 해결할 수 있었다. 해결은 아래와 같다. #mongoDB #-기본코드 from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.내주소.mongodb..

1. JavaScript에서 기억해야 할 것. 변수, 자료형, 함수, 조건문, 반복문 나는 현재 반복문 작성에서 취약함을 보이는 듯 하다. 튜터의 설명으로는 이전에 작업했던 코드를 그대로 붙여넣기하여 작업하는 것을 추천한다고 한다. 이는 곧 편리함과 오타로 인한 오류를 줄여줄 수 있다. ex) 아래와 같은 코드는 학습중에도 많이 봐온 코드이고, 튜터의 설명으로도 실제로 많이 사용되는 코드라고 한다. 다른 반복문 작업을 할 때에는 a_list의 내용만 바꿔서 작업하면 될 것으로 보인다. let a_list = ['사과', '딸기', '배', '감'] for (let i = 0; i < a_list.length; i++) { console.log (a_list[i]) } 2. 간단한 홀수, 짝수 판정 코드 ..