맹정의 행복코딩랜드

https://school.programmers.co.kr/learn/courses/30/lessons/12921 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스에서 소수 문제를 풀다가, 처음 푼 코드는 시간 초과로 통과하지 못했다. 그러다가, 친구가 "에라토스테네스의 체"로 구현이 가능하다고 알려주어 찾아보게 되었다. 다음에도 잊지않도록 블로그에 기록 하려고 한다. 소수 문제는 무조건 "에라토스테네스의 체" 잊지말자! let solution = (n) => { let arr = Array(n+1).fill(true).fill(false,0,2..

# ref? HTML 에서 id 를 사용하여 DOM 에 이름을 다는것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는방법이 있다. 이것이 바로 ref(reference 줄임말) 개념이다. 리액트 컴포넌트 안에서는 id를 사용하면 안되나요? 👉 리액트 컴포넌트 안에서도 id 사용할수 있습니다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달합니다. 하지만 특수한 경우가 아니면 권장하지는 않습니다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 문제는 생기지 않습니다. # 그럼 ref는 어떤 상황에서 사용해야 할까? 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 일반 순수 자바스크립트로 및 jQuery로 만든 웹 사이트에서 inpu..

# 이벤트 핸들링? DOM 요소들과 상호 작용하는것을 이벤트 라고 한다. 예를 들어, 버튼에 마우스 커서를 올렸을때 onmouseover 이벤트를 실행하고 클릭했을때는 onclick 이벤트를 실행한다. # 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저 HTML 이벤트와 인터페이스가 동일하다. import {useState} from 'react'; const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕하세요!'); const onClickLeave = () => setMessage('안녕히가세요!)'; const [color,setColor] = useSta..

안녕하세요! 이번에 프로젝트를 진행하면서, 많이 접한 CORS 에러에 대해서 얘기해보고자 합니다. ❗CORS 그게 ㅁ..뭔데..? - CORS(Cross-Origin Resource Sharing) 란? 다른 출처의 리소스 공유에 대한 허용/비허용 정책이다. 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. - 결국 CORS 는 서로 다른 출처(Orgin) 간에 리소스를 전달하는 방식을 제어하는 체제이다. - CORS 요청이 가능하게 하려면 서버에서 특정 헤더인 Access-Control-Allow-Orgin과 함께 응답해야한다. CORS 정책을 위반하여 무언가를 요청 하게 되면 브라우저가 보안상의 이유로 차단을 해버립니다..

프로젝트를 시작하며 12월 27일부터 2월 4일까지 진행하는 부트캠프에 참여하고있다. 6주라는 시간동안, 1주차에는 프로젝트 주제를 선정하고 개발을 진행하면서 개발 회고록을 작성할 예정이다. 진행상황 팀원들과 주제를 선정하고, 현재 개발 진행 중이다. 자세한 것들은 매주차별로 나누어 회고록을 작성할예정이다. 배운점 React-Router-Dom 항상 페이지 이동부분에서 어려워 이해도 못하고구현을 못했었는데, 5시간 삽질 결과 승리했다..! 문서화의 중요성 여러명이서 프로젝트를 진행하면서, API 설계, 기능명세서, ERD, 깃 커밋컨벤션, 백로그를 작성하였다. 문서화를 이렇게 자세하게 쓴적은 없었는데, 막상 써보니 중요성을 많이 깨달았다.

안녕하세요. 맹정입니다! 오늘은 컴포넌트에 대해서 알아볼 예정입니다. # 함수 컴포넌트와 클래스형 컴포넌트 다음 코드는 함수 컴포넌트 입니다. import './App.css'; function App(){ const name = '리액트'; return {name}; } export default App; 다음 코드는 클래스형 컴포넌트입니다. import { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트와 함수 컴포넌트의 차이점 1. 클래스형 컴포넌트의 경우, 이후 배울 state 기능 및 라이프 사이클 ..

안녕하세요. 맹정입니다! 오늘은 JSX에 대해 알아봅시다. # import 문 import logo from "./logo.svg"; import "./App.css"; import 문은 특정 파일을 불러오는것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import 문을 사용하여 다른 파일들을 불러와 사용할 수 있습니다. 잠깐! 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능입니다. 자바스크립트를 실행 할수 있게 해주는 환경인 Node.js 에서 지원하는 기능입니다. 참고로 , Node.js 는 import 가 아닌 require 라는 구문으로 패키지를 불러올 수 있습니다. 이러한 기능들을 브라우저에서 사용하기 위해 번들러(bundler) 를 사용합니다. 대표적인 번들러로는..

안녕하세요. 맹정입니다! 대규모 애플리케이션 중 프론트엔드에서 돌아가는 애플리케이션 구조를 관리하려면 어떻게 해야할까요? 그래서 요즘 많이 쓰는 리액트에 대해서 정리해보고자 합니다. # 왜 리액트인가? 우선 리액트를 알아보기전에, 자주 나올 용어를 정리해봅시다. Anguler, Vue.js : 이 프레임워크들은 주로 MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View-Model) 아키텍처 사용 React : 자바스크립트 라이브러리로 MVC, MVM 등의 구조가 아닌 오직 V(View) 만 신경 쓰는 라이브러리 잠깐! MVC, MVVM, MVW 의 구조가 지닌 공통점은 모델과 뷰가 있다는것. 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용..