전체 글
React의 조건부 렌더링을 사용하는 6가지 방법
0. 조건부 렌더링과 초기 코드 리액트를 배울 때 state를 배우자마자 익혀야 할 것이 있습니다. 바로 "조건부 렌더링" (Conditional Rendering)입니다. 특정 값에 따라서 다른 컴포넌트를 그리고 싶을 때 사용하는 방법으로, 웹 상에서 여러 방법을 확인할 수 있습니다. 글을 작성할 기본 코드는 아래와 같습니다. App.js import React, { Component } from "react"; import "./App.css"; class App extends Component { constructor(props) { super(props); this.state = { isLoggedIn: true, }; } render() { return ( 조건부 ..
Javascript랑 Python으로 코딩하세요? ChatGPT 쓰세요
복세편살. 복잡한 세상 편하게 살기 위해 소프트웨어를 만들고 있건만 코딩하는 것이 쉽지가 않습니다. 그럴 때는? 역시 ChatGPT입니다. 저는 최근에 파이썬 코드를 짜면서 ChatGPT 무서움을 느끼고 있습니다. 예를 들어 requests 모듈이 아니라 비동기로 http get을 하는 코드를 만들고 싶을 때 이렇게 물어봅시다 이렇게 답변이 옵니다. ChatGPT가 답변해준 코드 전문입니다. import asyncio import aiohttp async def fetch(session, url): async with session.get(url) as response: return await response.text() async def main(): urls = ['https://www.example..
검색의 어려움: 너 나 좋아해? 근데 왜 고백 안해? 원본찾기
틱톡하고 유튜브 숏츠에 많이 나오는 너 나 좋아해? 근데 왜 고백 안해? 나 까인거 아니었나 너 나한테 고백한 적 없잖아 의 원본을 찾고 싶었다. 일단, 구글에 안나온다. 두번째는 숏츠나 유튜브 영상 댓글에도 없다. 어쨌든 찾았다 https://youtu.be/tYp6A2yYO3c?t=1144 이게 원본입니다.
(1인 개발자) 혼자서 코딩해서 돈을 번다는 것
0. 기술로 자급자족 혼자 벌어먹고 살기에 쉽지 않은 세상입니다. 저도 개발과 전혀 상관없는 회사를 다니면서 저녁과 주말에는 코딩으로 시간을 보내고 있습니다. 오늘 첫 페이지의 MVP를 개발했고 이제 스타일링을 하려고 CSS가 잘 꾸며진 몇 개의 사이트를 찾아보고 있습니다. 세상은 혼자서 살아남기 쉽지 않습니다. 그래서 규모의 경제가 있는 것이고, 개인이 모여 법인을 구성하여 사업을 진행하는 것이죠. 하지만 클라우드, API, 수많은 라이브러리와 프레임워크가 생기면서 개발의 허들이 낮아지고 자바스크립트를 통한 풀스택이 생기면서 개인형, 소규모 창업과 성공이 늘어나고 있어 보입니다. 개발의 허들이 낮아지면서 애플은 Apple silicon을 통해서 하드웨어를 저전력의 고성능을 만들어내고 있고, Google..
Mac에서 python 최신 버전으로 업데이트하기
brew를 이용하자 맥용 패키지 관리는 brew가 짱이다. Mac에서 brew를 통해 파이썬을 업데이트 하기 전에, brew 자체를 업데이트하자 인터넷에서 누가 한번에 파이썬 업데이트 할 수 있다고 알려줬는데, 저거 틀린 명령어다. brew update 우선 이 명령어로 brew 최신 버전을 다운로드 받고, brew upgrade python 이걸로 최신 버전 파이썬을 다운로드 받는다. Path까지 깔끔하게 잡혀있는 듯.
(React Router v6) 리액트에서 라우터 사용하기-1
Router v5에 대한 설명은 하지 않습니다. React-router-dom에는 여러개의 컴포넌트가 있습니다. 몇 가지만 적어보자면 1. BrowserRouter React Router는 여러가지의 형태의 라우터를 지원합니다. 리액트 네이티브에서 사용할 수 있는 NativeRouter도 있죠. 우리는 지금 앱이 아닌 브라우저에서 돌아가는 웹 개발을 하고 있습니다. 그래서 "브라우저 라우터"로 외우시면 됩니다. BrowserRouter는 간편 URL(Clean URL이라 합니다)을 이용하여 브라우저 주소창에 현재 위치를 저장합니다. 그리고 브라우저에 내장된 히스토리 스택을 사용해서 탐색합니다. 최초에 프로젝트를 실행할 때 모든 App이 실행되는 곳에 이 컴포넌트로 감싸줘야 합니다. 보통은 index.js..
[HOOKS] useRef의 설명과 예시코드
0. React에는 왜 Hooks가 있을까? (공통 글) 리액트는 라이브러리이다. 기존에 HTML, CSS, Javascript로만 구성된 프로젝트에서 JSX를 해석해 줄 Babel만 있으면 부분적으로 도입할 수 있다는 이야기다. 처음에 리액트는 클래스형 컴포넌트가 많이 쓰였다. 여러 가지 이유가 있었지만, 함수형 컴포넌트는 내부적으로 상태를 가지고 있을 수 없기 때문이었다. Q. 왜 함수형 컴포넌트는 상태를 저장할 수 없나요? A. 우리가 무언가를 '저장'한다고 생각해봅시다. 변수를 선언하지 않고 저장하는 방법이 있을까요? 없습니다. 클래스는 그 자체가 객체로 태어나면서 변수 안에 데이터를 가지고 있을 수 있습니다. 하지만 함수는 어떤가요? 함수는 실행형 문구입니다. 그냥 한 번 '실행'되고 끝나는 것..
[HOOKS] useEffect의 설명과 예시코드
0. React에는 왜 Hooks가 있을까? (공통 글) 리액트는 라이브러리이다. 기존에 HTML, CSS, Javascript로만 구성된 프로젝트에서 JSX를 해석해 줄 Babel만 있으면 부분적으로 도입할 수 있다는 이야기다. 처음에 리액트는 클래스형 컴포넌트가 많이 쓰였다. 여러 가지 이유가 있었지만, 함수형 컴포넌트는 내부적으로 상태를 가지고 있을 수 없기 때문이었다. Q. 왜 함수형 컴포넌트는 상태를 저장할 수 없나요? A. 우리가 무언가를 '저장'한다고 생각해봅시다. 변수를 선언하지 않고 저장하는 방법이 있을까요? 없습니다. 클래스는 그 자체가 객체로 태어나면서 변수 안에 데이터를 가지고 있을 수 있습니다. 하지만 함수는 어떤가요? 함수는 실행형 문구입니다. 그냥 한 번 '실행'되고 끝나는 것..