다른 작업 폴더에서 작업을 하고 클론받은 프로젝트 파일에 옮겨서 작업하려고 했을때, 이미지를 넣어두는 곳을 정하지 않아서 일단 public 폴더에 images 폴더를 만들어 넣어보려고 했는데 계속 불러올 수 없다고 하길래 궁금증이 생겼다. 처음에는 상대경로 설정을 잘 못 작성했나 해서 이곳저곳 넣어보며 확인했는데 public에 들어가면 애러가 발생했다. 먼저 결론을 말하자면 import하지 않고 css(스타일드컴포넌트 사용중) url에 상대경로를 넣어주니 제대로 나오긴 했다. jsx에서 public 폴더의 접근하려면 환경변수를 사용하라는게 공식문서에 있다고 한다. (아니 근데 왜 images경로를 빼도 이미지가 나오는거지?.. 두개 다 정상적으로 이미지가 나오는데.. 원래 경로설정이 하위폴더를 안적어도..

팀에서 깃허브에 작업한 파일을 올릴때 우리팀은 4가지 단계를 걸치기로했다. 1. main : 배포 및 운영될 곳 2. dev : 배포 전 코드리뷰를 진행 할 곳 3. frontend / backend : 프론트엔드와 백엔드의 브랜치 분리 4. feature : 프론트엔드에서 각자 작업하는 부분을 브랜치로 생성해서 작업 먼저 깃허브에서 브랜치 상태에는 main, dev, frontend 를 추가해두었다. 이상태에서 프론트엔드 브랜치를 가서 코드를 눌러 주소를 복사후 클론해도 해당 프로젝트 메인의 것이 클론되었다. 단순히 생각했을때 해당 프로젝트폴더에서 브랜치에 들어가 주소를 클론하면 될거라 생각했다. 그러다가 클론될 주소가 main이든 dev든 frontend든 다 같다는걸 보고서 특정 브랜치를 다운받아야..

스택오버플로우 사이트에서 공용 컴포넌트로 사용되는 header, nav, aside, footer 을 나누어 작업하기로 했다. 분배받은 aisde 부분은 홈화면이나 Question페이지, 상세 질문 페이지에서 공통적으로 우측에 나오는 부분이다. 우리 팀은 리액트, 스타일드 컴포넌트를 사용하고 리덕스로 상태관리를 하자고 정했고 일단 컴포넌트를 나중에 불러와 사용할 수 있도록 작업해 두었다. 경로 ~ ~ └─src ├─assets │ └─favicons-sprite16.png ~ ~ ├─shared │ ├─Footer │ ├─Header │ ├─Sidebar // aside 부분 │ ├─Nav │ ├─App.jsx ├─index.css └─index.js Sidebar.jsx import { Containe..

사용자 요구사항 정의서 분석 단계에서 요구되는 모든 문서를 작성해보고 이를 실제 프로젝트를 진행하는 구현 단계에서 참조 자료로 활용해보면 좋겠으나 시간이 부족하다는 점과 실제 개발 업무가 아닌 학습을 위한 프로젝트 과정임을 감안하여 내용을 축소해야 합니다. 하지만 분석 단계에서 작성하는 ‘사용자 요구사항 정의서'는 매우 중요합니다. 그러므로 우리는 ‘사용자 요구사항 정의서'를 작성해 볼 필요가 있습니다. 항목 설명 요구사항 ID : 요구사항별로 유일한 ID를 부여하여 기입합니다. 요구사항명 : 도출된 요구사항을 요약할 수 있는 명칭을 기입합니다. 구분 : 도출된 요구사항을 기능 / 성능 / 품질 / 인터페이스 / 데이터 / 운영 / 제약사항 중에서 선택하여 기재합니다. 요구사항 설명 : 사용자 요구사항을..

컴포넌트 종류 1. 클래스형 컴포넌트 import React, { Component } from 'react' export default class List extends Component { render() { return ( List ) } } 2. 함수형 컴포넌트 2-1. 일반 함수형 import React from 'react' export default function List() { return ( List ) } 2-2. 화살표 함수형 import React from 'react' const List = () => { return ( List ) } export default List 여러 프레임워크나 라이브러리에 따라 다양한 종류가 있겠지만 내가 택한 것은 강의에서 추천한 위의 snippe..

웹페이지(브라우저) 렌더링 과정 렌더링 엔진은 HTML 파일과 SytyleSheet를 해석해서 렌더트리를 만든다. HTML 해석 -> DOM Tree SytyleSheet 해석 -> CSSOM Tree // CSS Object Model DOM Tree + CSSOM Tree -> Render Tree Render Tree는 화면에 표시되는 모든 노드의 컨텐츠와 스타일 정보를 포함하고있고 렌더트리가 형성되면 레이아웃 단계로 진행이 된다. 브라우저 내에서 뷰포트와 노드들의 정확한 위치와 크기들을 계산하는 단계를 레이아웃(Layout)이라고 하고 전문용어로 리플로우(Reflow)라고 합니다. Reflow(Layout이라고도 함), Repaint(Redraw라고도 함) 그런데 브라우저 렌더링 과정과 reflo..

블랙잭은 지겨워 문제 평범한 블랙잭 게임에서 수시로 패배하자 흥미가 떨어진 김코딩은 박타짜에게 게임룰을 변형하여 새로운 카드 놀이를 해 볼 것을 제안합니다. 새로운 룰은 다음과 같습니다. 1. 숫자로 이루어진 카드를 여러 장 받습니다. 2. 3장씩 카드를 고르고, 3장에 적힌 숫자들의 합이 소수인지 확인합니다. 3. 받아든 카드로 만들 수 있는 소수의 개수가 많은 사람이 이기게 됩니다. 예로, [1, 2, 3, 4]라는 카드를 받았을 때 만들 수 있는 숫자는 6, 7, 8, 9이고, 소수는 7 하나이기 때문에 가지고 있는 소수의 개수는 1개입니다. [2, 3, 4, 8, 13]라는 카드를 받았을 때 만들 수 있는 숫자는 9, 13, 18, 14, 19, 23, 15, 20, 24, 25이고, 소수는 13..

새로운 치킨 소스 레시피 문제 개업 이래로 항상 승승장구하는 '승승장구 치킨집'의 비결은 소스에 있다. 수많은 타사 브랜드 치킨집들이 승승장구 치킨집의 소스 비결을 알아내려고 했으나 빈번히 포기했다. 그 이유는 5대째 내려오는 '비밀의 승승장구 치킨 소스 비율 레시피'는 70억 인구 중 사장님만 알고 있기 때문이다. 최근, 누리꾼 사이에서 이 레시피의 일부분을 발췌했다는 소문을 듣게 되었다. 그 소문은 다음과 같다. N 가지의 재료 중에 단 M 가지만을 사용하여 조합한 모든 경우의 수 중 하나이다. 재료는 0과 1로만 이루어진 숫자로 암호화가 되어 있고, 항상 1로 시작하며 복호화를 할 수 없다. 재료의 순서에 따라 맛이 달라지기 때문에, 재료를 넣는 순서가 다르다면 다른 레시피이다. 이 소문을 참고하여..