본문 바로가기

프로그래밍446

Git branch 다루기 Git 설정 # 버전 히스토리를 식별할 때 사용할 이름을 설정합니다. $ git config --global user.name "[firstname lastname]" # 각 기록과 연결할 이메일 주소를 설정합니다. $ git config --global user.email “[valid-email]” 도움말 보기 # git에서 제공하는 모든 명령어를 볼 수 있습니다. $ git help -all # 특정 command에서 사용할 수 있는 모든 옵션을 볼 수 있습니다. $ git [command] -help 세팅 및 초기화 # 현재 디렉토리를 기준으로 Git 저장소가 생성됩니다. $ git init # URL을 통해 리모트 레포지토리를 로컬 레포지토리에 복제합니다. $ git clone [url] Sta.. 2022. 8. 22.
Stack Overflow 클론코딩 레퍼런스 찾기 프론트엔드 1. https://github.com/Mayank0255/Stackoverflow-Clone-Frontend Front-end Framework: React.js (with Redux) Styling: SASS and BOOTSTRAP 백엔드 1. https://github.com/Mayank0255/Stackoverflow-Clone-Backend For handling index requests: Node.js with Express.js Framework As Database: MySQL with Sequelize API tested using: POSTMAN 2. https://github.com/ValeryKorzhavin/stackoverflow Java 12 Spring Boot.. 2022. 8. 19.
기술면접 대비(JavaScript, React, 운영체제, 자료구조) JavaScript Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요. 호이스팅: 함수 안 선언들을 해당 함수 유효 스코프의 최상단에 선언하는 것 let. const변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않음 TDZ: 선언 전에 변수를 사용하는 것을 비 허용하는 개념적 공간 var, function, import의 선언은 TDZ의 영향을 받지 않음 브라우저 렌더링 브라우저 렌더링 방식에 대해 설명하세요. 브라우저라는 것은 인터넷에 접속할 때 사용하는 크롬, 사파리, 파이어폭스 등을 말함 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 2. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 3... 2022. 8. 18.
NFT 민팅 사이트 만들기 NFT 민팅 사이트 완성 숙경의 민팅 사이트 ssukhackathon.netlify.app 전체 만든 과정 1. 프로그램을 이용해서 자동으로 조합된 이미지와 JSON파일 준비 피그마를 활용하여 이미지 생성 Figma Created with Figma www.figma.com 위에는 내가 작성한 nft이미지를 담은 피그마 파일이다 (여러개를 요소별로 만들어 다양한 조합을 유도) 비주얼 스튜디오를 들어가서 코드 작성 //index.js const nftName = "K-Birdz Egg"; const description = "K-Birdz, Flappy Bird Style P2E game with K-culture made by youtuber JoCoding"; const hiddenImgUrl = "i.. 2022. 8. 17.
Tree 자료구조 트리 단방향 그래프 하나의 뿌리로부터 가지가 사방으로 뻗은 형태 노드(Node) : 트리 구조를 이루는 모든 개별 데이터 루트(Root) : 트리 구조의 시작점이 되는 노드 부모 노드(Parent node) : 두 노드가 상하관계로 연결되어 있을 때 상대적으로 루트에서 가까운 노드 자식 노드(Child node) : 두 노드가 상하관계로 연결되어 있을 때 상대적으로 루트에서 먼 노드 리프(Leaf) : 트리 구조의 끝 지점이고, 자식 노드가 없는 노드 문제풀이 Tree 구현을 위한 기본적인 코드가 작성되어 있습니다. Tree 자료구조의 특성을 이해하고 FILL_ME_IN 을 채워 테스트를 통과해주세요. class Tree { constructor(value) { // constructor로 만든 객체는 .. 2022. 8. 16.
AWS 서버 배포 자동화 파이프라인을 구축 EC2인스턴스 생성 후 개발환경 구축 방법 $ sudo apt update $ nvm install node $ sudo apt install npm 노드가 잘 설정되지 않을 경우에는 아래의 링크를 들어간다 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager.. 2022. 8. 9.
CI/CD 배포 자동화 파이프라인(Pipeline) - 정의: 소스 코드의 관리~실제 서비스 배포 과정을 연결하는 구조 - 단계 1. Source: 소스 코드에 변경이 있을 경우, 감지하고 다음 단계로 전달하는 작업 수행 2. Build: source단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공 3. Deploy: build단계에서 전달받은 결과물을 실제 서비스에 반영 - 배포 자동화가 필요한 이유 1. 시간 절약 2. 휴먼 에러(Human Error)방지 CI(continuous integration)/CD(continuous deployment) - 정의 CI는 지속적 통합의 약자로, 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식 CD는 지속적 통합 과정이 끝나면 고객에게 배포하는 것.. 2022. 8. 8.
Amazon Web Service를 이용한 웹 애플리케이션 배포 기본 개념 - EC2(Elastic Compute Cloud): 아마존 웹 서비스에서 제공하는 클라우드 컴퓨팅 서비스, 후불제 서비스 AMI라는 다양한 소프트웨어 구성이 포함된 템플릿을 제공하여 손쉽게 운영체제를 선택하고 구성할 수 있음 - S3(Simple Stofage Service): AWS에서 제공하는 클라우드 스토리지 서비스 Amazon Web Service를 이용한 웹 애플리케이션 배포 - E2C 인스턴스 생성 및 연결 $ bash $ cd ~ - 인스턴스 개발 환경 구축 $ sudo apt update $ nvm install node $ sudo apt install npm #git을 통해 서버 코드 클론 받기 # 홈 디렉토리로 이동 ubuntu@ip-172-31-41-164:~$ cd ~.. 2022. 8. 5.
Lighthouse Lighthouse란? - Lighthouse는 다양한 지표를 이용하여 웹페에지의 성능 검사를 해줄 뿐만 아니라 개선책도 제공함 - 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사 가능 - 내 블로그를 검사해보며 개선책을 찾아보도록 함 1. 설치하기 1-1. 웹에서 바로 확인하기 - 크롬에서 검사하고 싶은 페이지의 화면을 띄우고 개발자 도구(control+f12)를 열음, lighthouse 탭을 클릭 - 'Analyze page load' 버튼 클릭하기 - 검사 후 리포트 생성 1-2. 다르게 분석 결과 뽑아내기 방법 //Node CLI에서 실행하기 //첫번째, 전역 모듈로 설치 npm install -g lighthouse //두번째, 명령어로 검사를 실.. 2022. 8. 4.

티스토리툴바