일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- Next.js
- grid
- SSR
- TAILWIND
- useMemo
- CSS
- useCallback
- FIGMA
- 자료구조
- webpack
- render
- docker
- git
- express
- react
- EC2
- TypeScript
- 프로그래머스
- FigJam
- 해시
- github
- Babel
- axios
- Stack
- HTML
- Javascript
- 코딩테스트
- Taillwind
- 피그마
- hook
- Today
- Total
목록Web (38)
나는 오늘도 멋있다
개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서 HTML구조 // 문서의 형식을 지정하여 브라우저는 해당문서를 HTML5 문서로 해석한다. // 문서의 시작을 알리며, lang속성은 문서의 언어를 지정한다. // body태그를 읽기전에 정보들 // html 파일의 기본정보(문서정보, 메타데이터, 스타일시트, 스크립트) // 문서의 본문으로서 화면에 표시되는 모든내용이 들어감 시멘틱 태그(Semantic Tag) 태그 설명 용도 문서나 섹션의 헤더를 정의 로고, 제목, 네비게이션 네비게이션 링크를 정의 메뉴, 링크목록 문서의 주요콘텐츠를 정의하며, 하나만 사용해야함 독립적으로 구분되거나 재사용가능한 콘텐츠 블록 뉴스, 기사, 블로그 포스트 문서의 섹션을 정의 제목, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dQmWAv/btsBVFk5izS/mxn6vstIE313uTtkDdF3Vk/img.png)
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 1. 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있음 2. 라우팅, 데이터 모델링, AJAX등은 외부 라이브러리를 사용해서 구현해야함 3. JSX(JavaScript 확장문법)을 사용하여 브라우저에서 실행되기 전 일반 JS형태의 코드로 변환됨 4. 최소한의 단위, 데이터함수, UI를 재사용 가능한 여러조각을 컴포넌트 기반으로 나누어 사용한다. 5. React의 개발핵심은 상태값을 효율적으로 관리하는것 리액트 라이프사이클(React LifeCycle) 리액트 가상 돔(React Virtual DOM) 리엑트에서 실제 DOM에 직접 접근하여 조작하는 대신, 적은 연산 시간을 위해 추상화한 자바스크립트 객체로서 실제 DOM의 가벼운 사본..
1. 로컬브랜치 확인하기 git branch 2. 로컬브랜치 삭제하기 // git branch -d git branch -d yellow 3. merge되지 않은 로컬 브랜치 강제 삭제하기 //git branch -D git branch -D yellow 1. 원격브랜치 확인하기 git branch -r 2. 원격브랜치 삭제하기 // git push origin -d git push origin -d yellow
1. 로컬에서 변경할 브랜치 확인하기 git branch 2. 로컬 브랜치명 변경하기 // git branch -m [original_branch] [new_branch] git branch -m oldbracnh youngbranch 3. 변경된 로컬 브랜치명 확인하기 git branch 4. 원격 저장소에 반영하기 // git push origin :original_branch new_branch git push origin :oldbracnh youngbranch 5. 변경한 브랜치로 이동한후 기존에 가리키던 원격 브랜치경로 삭제 git branch --unset-upstream 6. 변경된 브랜치와 원격브랜치 맞춰주기 //git push --set-upstream origin git push --..
상황(강제로 진행하는거기 때문에 개인프로젝트 할경우만 사용 !비추천) sub브랜치에서 하나의 기능을 완성한후에 main 브랜치로 merge를 했다. 이후 sub브랜치에서 조금한 수정사항이 생겨서 변경후에 기존 merge를 취소하고 다시 merge하려 한다. 1. main 브랜치로 이동 // git switch git switch main 2. 로컬 과 원격 저장소의 main 브랜치 상태를 맞춰준다 // (HEAD->main) // git pull origin git pull origin main 3. 병합전 commit 해시를 확인 // git의 참조 이동과 관련된 로그를 확인함 git reflog 4. 돌아갈 commit 을 입력하여 상태돌리기 // git reset --hard git reset --..
@tailwind base; - Tailwind css에서 기본 스타일을 주입하는 부분으로, 기본 스타일 및 글로벌 스타일을 정의하는 부분 - ex) 기본태그들의 초기화 or 프로젝트 전체적으로 사용될 css등(font 등) @tailwind components; - Tailwind css에서 컴포넌트 클래스를 주입하는 부분으로, 컴포넌트 단위의 스타일을 정하는 역할 - ex) 버튼,모달,카드 등의 UI컴포넌트 관련 @tailwind utilities; - Tailwind css의 다양한 유틸리스 클래스를 사용하기 위한 역할 - ex) 레이아웃, 텍스트, 색상, 간격 등 @tailwind variants; - Tailwind css의 가상클래스를 쓰기 위한 역할 우선순위는 utilities > compo..
학습계기 Css파일에 클래스를 정의해서 사용하는 기본사용법, React의 styled-component등 사용해 봤다. 하지만 사용하다보면 이것 또한 불편하다. 그래서 Css 프레임워크를 찾아보다가 Tailwind를 접하게되었고, 많은기업에서도 사용하는 거 같아서 요번 프로젝트에 도입하기위함 tailwind는 Utility-First 컨셉을 가진 css의 프레임워크 이다. [장점] 1. Utility-First 컨셉으로 빠르게 원하는 디자인 개발을 할 수 있다. 2. 클래스 작명을 고민할 필요가 없다. 3. HTML-CSS를 왔다갔다 할 필요가 없다. 4. 클래스명의 속성을 변경하기위해 CSS파일에서 클래스를 찾을 필요가 없다. 5. 기본 스타일 값을 자유롭게 커스텀 6. 반응형 디자인에 유용한 클래스들..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/SMSWt/btsBvSZBImt/kcIUx6aLYNasfxV8D7kFz0/img.png)
CORS란? 웹브라우저에서 다른출처(프로토콜,도메인,포트)의 리소스를 공유하는것을 가능하게 하는 메커니즘이다. 출처(Origin)란? URL: HTTPS://www.domain.com:3000/user?query=name&page=1#first 프로토콜(Protocol): http, https 호스트(Host): 도메인 포트(Port): 포트번호 패치(Path): 사이트내부경로 쿼리스트링(Query string): 요청 key 와 value값 프래그먼트(Fragment): 해시태그 출처(Origin): 프로토콜 + 호스트 + 포트 동일 출처 정책 (Same-Origin Policy) SOP는 동일한 출처에서만 리소스를 공유할수 있는것을 말한다. 즉 웹 브라우저에서 실행되는 스크립트가 한 출처에서 불러온 ..