서린이

React에서 불필요한 상위 노드 없이 자식 노드 감싸기 - React.Fragment프론트엔드 개발을 하다보면, 재사용성 및 역할 분리를 위해 컴포넌트를 세분화하게 된다. 컴포넌트를 나누다 보면 종종 불필요하게 상위 노드를 추가"해야 하는 상황이 있다.이번 글에서는 React에서 불필요한 상위 노드를 추가해야할 때 어떻게 처리하는지에 대해 작성해보려고 한다.1. 문제 상황우선 내가 마주한 상황은 다음과 같다.공통으로 사용되는 Layout이 존재하고, 여기에 어떤 컴포넌트를 넌다고 해보자.// 오류 발생 : JSX expressions must have one parent element.const TestComponent = () => { return ( 제목 ..

JavaScript로 코드를 작성할 때에 정말 자주 쓰는 API, console!항상 console.log()만 사용하다가 이번에 다른 기능도 좀 써보자는 마음으로 글을 작성해본다.공식 문서에도 자세하게 나와있지만 몇개를 정리해보자면 다음과 같다.함수명용도 / 적합한 데이터예시 코드console.log()대부분의 기본 출력 (문자열, 숫자, 객체 등)console.log('hello')console.table()배열 또는 객체의 표 형태 출력console.table([{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }])console.dir()객체 구조를 트리 형태로 출력console.dir(document.body)console.error()에러 메시지 출력 ..

문제N개의 정수가 주어진다. 이때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오.입력첫째 줄에 정수의 개수 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어진다. 모든 정수는 -1,000,000보다 크거나 같고, 1,000,000보다 작거나 같은 정수이다.출력첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다. Do you mean Switch statements are not suitable logical comparisons? => Yes, that's correct. Switch statements in JavaScript are not suitable for logical comparisons like ``, or `Th..

다른 사람들도 이 강의를 듣기 전에 리뷰가 궁금할 수 있다고 생각해 글을 써본다. 우선 나의 현재 학습수준을 말하자면1. 비전공자(통계전공)2. 부트캠프로 Vue.js를 2개월정도 학습3. 부트캠프 이전에 개발 경험 X 프론트에 대해서 진짜 발톱의 때만큼 알고 있지 않을까... 생각한다.그래도 SPA, Component가 대강 무엇인지 정도는 알고있는...? 1. 강의 정보 이번에 후기를 이야기하고자 하는 강의는 이것이다. 인프런 | 처음 만난 리액트(React)총 16개의 섹션으로 구성되어 있으며, 총 강의 시간은 5시간 15분이다. 2. 강의 후기 혹시나 초보자 분들이 "오 기초인데 강의 시간이 5시간 15분밖에 안돼? 하루만에 들을 수 있겠네!"라고 생각한다면....그렇지 않다...섹션 대..

Q.어떤 수식이 주어졌을 때, 괄호를 제거해서 나올 수 있는 서로 다른 식의 개수를 계산하는 프로그램을 작성하시오.이 수식은 괄호가 올바르게 쳐져 있다. 예를 들면, 1+2, (3+4), (3+4*(5+6))와 같은 식은 괄호가 서로 쌍이 맞으므로 올바른 식이다.하지만, 1+(2*3, ((2+3)*4 와 같은 식은 쌍이 맞지 않는 괄호가 있으므로 올바른 식이 아니다.괄호를 제거할 때는, 항상 쌍이 되는 괄호끼리 제거해야 한다.예를들어 (2+(2*2)+2)에서 괄호를 제거하면, (2+2*2+2), 2+(2*2)+2, 2+2*2+2를 만들 수 있다. 하지만, (2+2*2)+2와 2+(2*2+2)는 만들 수 없다. 그 이유는 쌍이 되지 않는 괄호를 제거했기 때문이다.어떤 식을 여러 쌍의 괄호가 감쌀 수 있다...

난이도시간 제한메모리 제한골드 52초128MB 문제N개의 정수로 이루어진 수열 A[1], A[2], …, A[N]이 있다. 이 수열에서 두 수를 골랐을 때(같은 수일 수도 있다), 그 차이가 M 이상이면서 제일 작은 경우를 구하는 프로그램을 작성하시오.예를 들어 수열이 {1, 2, 3, 4, 5}라고 하자. 만약 M = 3일 경우, 1 4, 1 5, 2 5를 골랐을 때 그 차이가 M 이상이 된다. 이 중에서 차이가 가장 작은 경우는 1 4나 2 5를 골랐을 때의 3이 된다.입력첫째 줄에 두 정수 N, M이 주어진다. 다음 N개의 줄에는 차례로 A[1], A[2], …, A[N]이 주어진다.출력첫째 줄에 M 이상이면서 가장 작은 차이를 출력한다. 항상 차이가 M이상인 두 수를 고를 수 있다.제한1 ≤ N ..

DTL : Template에서 프로그래밍적 기능을 제공하는 시스템으로, DTL Syntax에는 Variable, Filters,Tags, Comments 가 있다. 1) Variable - render 함수의 세번째 인자로 들어가며, 딕셔너리 데이터를 사용한다. 딕셔너리의 key에 해당되는 문자열을 사용해 상세 값에 접근할 수 있다. 2) Filter - 표시할 변수를 수정할 때 사용하며, 약 60개의 built-in template filters가 제공되어있다. 2) Tags - 반복 또는 논리를 수행하여 제어 흐름을 만든다. if, for 등이 있으며 약 20여개의 built-in template tags가 제공되어있다. HTML form : 사용자가 입력한 데이터를 서버로 전송하기 위한 요소로, t..

기본적으로 홈페이지에 배너나 푸터는 어느 페이지를 열어도 항상 있는 경우가 있다.이렇게 모든 페이지에 기본적으로 들어가는 형식들을 하나의 폴더에서 관리하면 편하지않을까?? manage.py가 있는 폴더와 같은 경로에 정적 파일을 모아둘 static 과 templates 폴더를 생성한다. 이 안에 여러 앱에 적용시킬 파일들을 작성해둔다. 이 이후에는 프로젝트의 setting.py에 가서 추가적인 설정을 진행한다! TEMPLATES 안에있는 'DIRS'의 value에 위의 내용을 추가한다.여러 과정에서 통일성있게 작성하기위해 html문서를 작성하는 파일들은 templates로 폴더명을 통일했다. static도 정의해줘야하므로 templates와 마찬가지로 setting.py에서 다음 체크된..

[가상환경 생성]python -m venv venv# python -m venv (폴더명)source venv/Scripts/activate# 가상환경 켜기 (폴더명)/Scripts/activatepip install django# django 설치하기 # 타인에게 프로젝트를 공유시에는 내가 설치한 모듈들을 공유해야하기 때문에 설치목록을 따로 작성해준다.pip freeze > requirements.txt# pip freeze > (파일명).txtpip install -r requirements.txt# pip install -r (파일명).txt# 후에 위의 파일로 모듈을 설치하고 싶을 때 사용 # 후에 가상환경까지 보내버리면 불필요한 파일까지 공유하게 되므로 .gitignore를 통해서 필수적인 파일..

vscode 창의 가장 하단의 오른쪽에 현재 파일의 오른쪽 Go Live 옆에 있는 부분이 ' Select Language Mode' 이다.이부분이 django html로 설정이 되어있어서 자동완성이 안되는 것이었다.이 부분을 현재 사용하고자하는 언어에 맞게 변경하자!!!나는 html 파일을 작성하고 있어 HTML로 변경하였다.