OneMoreEnergyDrink OneMoreEnergyDrink

Next.JS토픽 소개프리렌더링Vercel을 이용한 호스팅파일 시스템 기반 라우팅등 Next.JS로 해결할 수 있다.리액트를 활용한 클라이언트 사이드 렌더링의 경우 초기로딩이 느리고 검색 엔진에 제공할 수 있는 정보가 적다.프로젝트 생성위 코드로 next.js 프로젝트를 생성할 수 있다.위 명령어로 개발 모드로 들어갈 수 있다.npm run devnpx create-next-app .css 적용@를 이용하여 전역 경로를 설정할 수 있다.위와 같이 app.js 에서 import 하면 전역 css를 적용할 수 있다.전역 css 적용하기다음과 같이 css를 적용할 수 있다.styles에서 css를 정의한다.초기 프로젝트는 다음과 같이 4개의 디렉토리를 가지고 있다.Next.js에서 css 적용하기.라우팅페이지..

코드잇 부스트에서 조각집이라는 토이 프로젝트를 진행하였다.교내 산학 프로젝트에서 진행했던 프로젝트 이후로 프론트엔드로 프로젝트를 해본 것은 이번이 두번째였다.코드잇에서 기능 목록 및 피그마 디자인을 주어 기존 프로젝트에서 가장 스트레스를 받았던 디자인을 하지 않아도 되어서 편했다.약 3주의 기간이 주어졌지만 추석 연휴 및 교내 축제 일정이 껴있었고, 축제에서 맡은 역할이 있었기 때문에 실질적으로는 1주일밖에 개발을 진행하지 못했던거 같다. (사실 전부 핑계이고 내가 나태했었다..)기술 스택?이전 산학 프로젝트에서는 리액트를 활용하여 웹 개발을 했었고, 이번 코드잇의 커리큘럼에서도 리액트 위주로 학습을 진행했기 때문에 자연스럽게 리액트를 선택하게 되었다.Typescript를 2주 정도 배운 뒤에 진행됐던 ..

Git 시작하기Git이란?Git은 프로그래머의 협업 및 버전 관리를 위한 툴이다.개발자라면 필수적으로 사용할 수 있어야 한다.GitHub란?Git은 버전 관리를 할 수 있는 툴이고,GitHub는 Git으로 관리하는 프로젝트를 올려 둘 수 있는 사이트이다.Git 써보기repository와 commitRepository: 프로젝트 디렉토리가 버전(변경사항)별로 저장된다.Commit: 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 행위repository 만들기디렉토리 안에서 git init을 통해 깃에 연결할 수 있다.연결되면 .git이라는 디렉토리가 내부에 생성된다.첫 commit 해보기git config user.name "qktjwl123"git config user.email "qktjwl12..

유닉스 커맨드 시작하기유닉스 커맨드란?유닉스로부터 파생된 여러 운영체제가 있고 대부분 비슷한 커맨드를 공유하는데,웹 배포, 서버 컴퓨터 사용 등 여러 작업에서 유닉스 커맨드를 사용한다.그를 유닉스 커맨드라고 부른다.유닉스는 1970년대초에 개발된 운영체제이다.터미널? shell? bash?터미널: 인풋을 받고, 아웃풋을 출력해 주는 프로그램shell: 커맨드를 해석해 주는 프로그램shell은 여러 종류가 있고 그 중 bash(Bourne again shell)을 제일 많이 사용한다.커맨드의 기본 형태cal -j 10 2020위 커맨드는 2020년 10월달을 달력을 출력한다.또 -뒤에 알파벳을 붙인 것을 옵션이라한다.명령에 뒤에 따라 붙는 단어를 인자/아규먼트라고 한다.커맨드 매뉴얼: manman에 아규먼..

리액트로 데이터 다루기배열 렌더링하기mock 데이터 추가하기json파일을 생성해주고 이를 js 파일에서 import 하여 사용할 수 있다.mock 데이터는 네트워크로 받아온 데이터를 흉내내는 파일이다.map으로 배열 렌더링하기map 메소드 안에서 jsx를 리턴하면 jsx를 여러개 추가한 것처럼 동작한다.sort로 정렬 바꾸기items.sort( (a,b) => b.rating - a.rating ) items.sort( (a,b) => b[rating] - a[rating] )sort 함수를 이용하여 mock 데이터를 정렬 시킨 뒤 렌더링 할 수 있다.filter로 아이템 삭제하기app.js에서 handleDelete함수를 정의하여 ReviewListItem의 Prop으로 보낸다.그 뒤 ReviewLis..

React 시작하기리액트의 탄생기능이 추가되며 코드가 복잡해지기 시작했고 따라서 이를 효율적으로 개발할 수 있는 React가 등장하였다.마크주커버그는 페이스북을 만들었고 빠르게 성장함에 따라 여러 기능이 추가되었다.나의 첫 리액트 프로젝트리액트 프로젝트를 시작할 수 있다.개발 모드 실행npm run startnpm init react-app 리액트 개발자 도구 살펴보기React 개발자 도구를 사용하면 컴포넌트 등 여러 정보를 얻을 수 있다.React 개발 기초리액트 최신 버전에 대한 안내index.js 파일을 보면 ReactDOM.render가 아닌 ReactDOM.createRoot 함수를 사용하는 코드가 생성된다. 수업의 코드를 그대로 사용하면 개발자 도구 콘솔창에 아래와 같은 경고 메시지가 나타날 ..

쿠키쿠키의 특징로그인을 한 뒤 서버에서는 response로 쿠키 값을 보내주고 이는 자동으로 클라이언트에 기록된다.서버에서 설정해둔 기간 동안은 쿠키로 사용자를 인지하여 로그인 상태를 유지할 수 있다.쿠키 사용법서버에서 set-cookie 헤더를 리스폰스로 보내주면 웹 브라우저는 알아서 쿠키 값을 저장해 둔다.리퀘스트를 보낼 때 주소에 해당하는 쿠키가 저장되어 있다면 웹 브라우저가 알아서 쿠키를 보내준다.권장되지 않지만 자바스크립트에서도 쿠키를 생성, 참조, 수정할 수 있다.추가, 수정하기위 코드는 쿠키를 등록하고, 만약 기존에 session-id 라는 쿠키가 있다면 수정한다.document.cookie = "session-id=1234; Domain=codeit.kr; Path=/; HttpOnly; ..

웹 기초 다지기fetch 함수와 response 객체fetch 함수는 Promise 객체를 반환이 객체의 then 메소드로, '리스폰스가 왔을 때 실행할 콜백'을 등록할 수 있음.이렇게 등록된 콜백들은 then 메소드로 등록한 순서대로 실행되고, 이때 이전 콜백의 리턴값을 이후 콜백이 넘겨받아서 사용할 수 있음처음 넘어온 response는 각종 부가 정보들과, 실제 내용을 함께 갖고 있는 하나의 객체(object)가 넘어옴, 따라서 reponse 객체의 text라는 메소드를 호출해서 내용을 가져와야 함.개발자 도구란?프론트 엔드 개발자에게 유용하다.https://developers.google.com/web/tools/chrome-devtools 위 링크에서 자세한 내용을 볼 수 있다.웹, url이란?u..