개발하고 싶은 초심자

(reference) 특정 페이지에서 header/footer를 보이지 않게 하고 싶은데, 어떻게 해야할까 고민하다가 구글링을 해본 결과 정말 간단하게 할 수 있는 팁이 있어 공유하여 정리해봤다. const Header = () => { ... if(window.location.pathname === '/header를 숨기고 싶은 경로') return null; return ( ... ) } const Footer = () => { ... if(window.location.pathname === '/footer를 숨기고 싶은 경로') return null; return ( ... ) } 제일 첫 페이지에 header/footer를 숨기고 싶다면 '/' , 특정 페이지에 숨기고 싶다면 그 경로를 적어주면 ..

1. 체크박스 구현 1) 체크박스를 선택하면 해당하는 값이 체크됨 2) 해제하면 해당 값을 삭제하는 것처럼 보이게 하기 2. 카테고리 1) 카테고리 지정이 아예 되어있지 않을 때는 '지정해주세요' 등의 메시지를 출력시키기 → 지정 여부에 따른 조건부 렌더링 작성? 3. 구현 과정 1) 체크박스의 내용에 대한 리스팅을 위한 상수 데이터 만들기 (배열 형태로 / 데이터 내용은 임의로 만듦) ‣ 실제 데이터를 이 내용으로 사용하지는 않았지만, 글 정리를 위해 내용을 바꿈. const category = [ {id: 0, data: 'a'}, {id: 1, data: 'b'}, ]; 2) 상수 데이터는 렌더링 될 때마다 불러올 필요 없으니 함수 바깥으로 빼기 const category = [ {id: 0, da..

프로젝트를 진행하면서, 그리고 현재 리액트로 개발을 하면서 상대 경로와 절대 경로의 사이에서 고민을 많이 했다. 상대 경로를 지정할 때 가끔 리액트에서 경로를 읽지 못하는 경우도 있고, 현재 작성하는 기능에서 멀리 있는 컴포넌트 혹은 페이지를 import를 할 때마다 번거롭고 가독성이 자꾸 나빠졌다. ex) // 상대경로 import Page from '../../components/Page'; // 절대경로 import Page from 'components/Page'; 상대 경로가 무조건적으로 좋지 않다, 절대 경로만 좋다는 의미로 작성하는 글은 아니지만 이론상으로는 속도도 빠르다고 하며, 경로 수정이 용이한 점 때문에 절대 경로의 장점이 더 극대화되어 체감이 된다. 절대 경로를 설정하는 방법은 여러..

Git 설정 로컬 레포지토리와 연결할 유저 정보를 설정합니다. $ git help -all # git에서 제공하는 모든 명령어를 볼 수 있습니다. $ git help -all # git에서 제공하는 모든 명령어를 볼 수 있습니다. 도움말 보기 help 명령어를 이용하여 각 명령어 및 옵셥의 기능에 대해 살펴볼 수 있습니다. $ git help -all # git에서 제공하는 모든 명령어를 볼 수 있습니다. $ git [command] -help # 특정 command에서 사용할 수 있는 모든 옵션을 볼 수 있습니다. 세팅 및 초기화 레포지토리를 초가화하거나 존재하는 레포지토리를 클론할 수 있습니다. $ git init # 현재 디렉토리를 기준으로 Git 저장소가 생성됩니다. $ git clone [url..

1. 배포 자동화(Automated Deployment, CI(지속적인 통합)/CD(지속적 배포)) : 한 번의 클릭 / 명령어 입력을 통해 전체 배포 과정을 자동으로 진행하는 것. → 시간이 절약된다. → 휴먼 에러(Human Error, 사람이 수동적으로 배포과정을 진행하는 중 생기는 실수) 발생 가능성을 낮출 수 있음. (⇒ 배포 과정에서 특정 과정을 생략하거나 다르게 진행하여 오류가 발생하는 것이 휴먼 에러, 배포 자동화를 통해 전체 배포 과정을 매번 일관되게 진행하는 구조를 설계한다) ✷ CI/CD 1-1. 배포 자동화 파이프라인 ‣ 파이프라인(Pipeline) : 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조. → 전체 배포 과정은 여러 단계로 분리하여 파이프라인 안에서 순차..

1. Client Deployment Pipeline ① 소스 코드를 클론해온 뒤, buildspec.yml 파일을 생성하고 파일 내용을 채운다. version: 0.2 phases: pre_build: commands: - cd client - npm install build: commands: - npm run build artifacts: files: - '**/*' base-directory: client/build 저장하고 commit, push한다. ② AWS에 접속하여 CodePipeline을 검색하여 메인 콘솔에 들어간 후 파이프라인 생성 클릭. 파이프라인 이름 설정 - 다음 - 소스 공급자는 Github(버전 2) - 다음 - Github에 연결 - 연결 이름 설정 - Github에 연결..

✷ Docker Download macOS Docker Desktop Install (intelChip / Apple Chip(M1) 설치 방법 따로 존재하기 때문에 설치 과정에서 주의할 것) M1으로 Docker 설치 방법 (인텔칩이나 우분투는 사용하지 않아 자세히 쓰지 않음) (우분투 도커 설치 방법 / Docker Engine 설치 후 Docker Compose 설치 진행할 것 / 우분투는 무조건 명령어 앞에 sudo 붙일 것) ① Mac with Apple silicon을 클릭하여 다음 명령어로 로제타 2 설치하기. softwareupdate --install-rosetta ② 사이트에 들어가서 보이는 Mac with Apple Chip으로 설치하기 ③ Docker.dmg 파일 더블 클릭 - Do..

1. 백엔드 ① ELB 생성 및 ACM을 통한 인증서 발급 (인증서 발급은 무조건 미국 동부 리전에서 만들 것. 다른 곳에 만들면 CloudFront 연결에서 안됨). ✷ ELB(Elastic Load Balancing) : 네트워크 트래픽을 분산하여 애플리케이션 확장성 개선 → 트래픽을 자동으로 분산해주는 기능. 트래픽의 짐을 덜어주는 역할. AWS 사이트에 EC2를 검색한 후 로드 밸런싱 - 로드 밸런서 - 로드 밸런서 생성을 클릭한다. Application Load Balancer(제일 왼쪽에 있는 것)의 Create 버튼을 클릭한다. Load Balancer name을 ELB로 설정한다. Add listener 버튼을 누르고 HTTPS를 추가한다. Network mapping에서 Mapping 체..