보호되어 있는 글입니다.

보호되어 있는 글입니다.

다른 작업 폴더에서 작업을 하고 클론받은 프로젝트 파일에 옮겨서 작업하려고 했을때, 이미지를 넣어두는 곳을 정하지 않아서 일단 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..