125. valid palindrome - str.isalnum()이나 정규식으로 전처리 - 데크로 최적화 - pop()이나 슬라이싱으로 판별 344. reverse string - 투포인터로 스왑 - list.reverse() - s[:] 937. reorder log files - str.isdigit() - 람다 표현식, 리스트 + - list.sort(key=) 819. most common word - 정규식으로 전처리 - collections.defaultdict(int), collections.Counter() 49. group anagrams - ''.join() - collections.defaultdict(list) 5. longest palindrome substring - 투포인터 ..
전체 글
개발 일지reactjs는 state가 바뀔 때마다 해당 component 전체가 다시 렌더링 됨 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter} click me ); } console.log("call an api")는 한번만 실행하고 싶어도 state 변화할 때마다 다시 실행 component 내의 특정 부분(코드)을 state 변화할 때마다 렌더링되지 않게하기 -> useEffect 함수 사용 import { useSta..
이전 연습에서는 react를 import하고 일일히 다 설정해주었지만, npx로 create-react-app 하면 훨씬 개발하기 편함 터미널에 npx create-react-app movie-app(생성할 디렉토리 이름) 이미 존재하는 폴더 명과 같게 짓지 않도록 유의 npm(node package manager): nodeJS의 모듈들을 패키지화하여 저장하고, 패키지 설치 및 관리 도구 npx(node package runner): 일회성으로 원하는 패키지를 npm registry에 접근하여 실행하고 설치하는 도구 패키지 업데이트 시, npm은 기존 패키지 제거하고 새로 설치해야함 movie-app 디렉토리 터미널에서 npm start하면 노드 서버 실행 (ctrl + c 로 종료) react-app..
super converter에서 부모 컴포넌트(App)에서 자식 컴포넌트, 시간 변환기와 길이 변환기로 데이터 전송 x 여러 버튼에 같은 스타일을 주려면 다 복사 붙여넣기를 해야함 props 사용하면 같은 스타일을 가진 컴포넌트 재사용 가능 App(부모)에서 내가 만든 컴포넌트(Btn)에 임의의 변수명으로 property를 부여하면 Btn(자식)이 모든 property를 object형태의 인자로 받아 자식 컴포넌트 안에서 configure 가능 property 부여 시, {}안에 숫자, 문자, bool 입력. 문자는 생략가능 Btn(props)로 받으면 설정할때 props.text 처럼 사용 자식에게 함수도 prop 인자로 보내줄 수 있음 // memorization을 사용해 props 변화가 없는 컴포..
클릭마다 화면에 반영하는 기능 추가 (순서: render() -> Container() -> 클릭버튼 누르면 countUp() -> render()) JSX 환경에서 {}안에 JS코드 삽입 가능 react는 모든 것을 다시 render하는 것임에도 오직 바뀐 부분만 업데이트 -> interactive 하게 만들 수 있음 더 간단한 방법 const onClick = () => { // setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender) // setCounter(counter + 1); counter 값이 코드의 다른 부분에서 바뀌어 버그 발생 가능 // 확실하게 현재 값을 바탕으로 modify하는 코드 setCounter((current) => c..
react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다 reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다 vanillajs 로 버튼 클릭 수 화면에 띄우기 Total clicks: 0 click me react로 같은 기능 만들기 react에서는 script 안에서 element를 만들어 interactive하게 함 어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다 지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능 property에 ad..
파이썬으로 코딩을 시작해서 스파르타 코딩클럽 내일배움단에 들어와 웹개발 종합반을 수강하기 전까지 정말 간단한 프론트엔드 정도만 다뤄봤었다. html, css, js, python을 어느정도 기초는 있는 상황에서 풀스택으로 웹개발의 한 사이클이 어떻게 돌아가는지 궁금했었는데, 나와 같은 초보자에게 딱맞는 컴팩트한 강의었다고 생각한다. 많은 사람들이 만들면서 배우라고 강조를 하는데, 역시나 내가 프로그래밍 하는 것이 바로바로 눈으로 결과가 보이고, 비슷한 과정을 반복하며, 최종적으로 내가 구입한 서버와 도메인이 연결된 첫 웹사이트를 만들게 되어 뿌듯했다. 튜터이신 이범규 대표님은 프로그래밍을 어떤 태도로 접근하고, 본인을 포함한 개발자들이 어떻게 개발하는지도 간간히 소개하시면서 초보자들에게 올바른 공부 방향..
1. 배포: 누구나 내 서비스를 이용할 수 있도록 프로젝트를 서버에 올리는 것 클라이언트의 요청(html,css,js 요청 & 데이터 요청)을 언제나 응답할 수 있도록 항상 켜져있으며, 프로그램이 실행 중이어야 함 모두가 접근할 수 있게 공개 IP주소로 접근할 수 있게 해야 함 어떠한 컴퓨터나 서버의 역할을 수행할 수 있음 -> 개인 컴퓨터를 서버로 활용 시 보안에 취약 수많은 본체를 모아놓고 서버실을 운영하기도 함 통상적으로 클라우드 서비스를 활용해 코드를 인터넷 환경에 업도르 하고 그 서버를 통해 서비스 이용하게 함 ※ IP주소와 포트 IP주소: 컴퓨터마다 통신할 수 있도록 가지는 고유한 주소. 서버마다 주소 하나씩 하나의 IP에 여러 포트가 있고, 하나의 포트마다 하나의 프로그램 실행 가능 URL은..
DB 세팅 # init_db.py import requests from bs4 import BeautifulSoup from pymongo import MongoClient client = MongoClient('localhost', 27017) db = client.dbsparta # DB에 저장할 영화인들의 출처 url을 가져옵니다. def get_urls(): headers = { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://movie.naver.com/movi..
나홀로 쇼핑몰 2주차에 만든 페이지에 flask 서버 연결하고 주문하기, 주문 목록 보기 api 만들어서 ajax로 통신 from flask import Flask, render_template, jsonify, request app = Flask(__name__) from pymongo import MongoClient client = MongoClient('localhost', 27017) db = client.dbsparta ## HTML 화면 보여주기 @app.route('/') def homework(): return render_template('index.html') # 주문하기(POST) API @app.route('/order', methods=['POST']) def save_order..