일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- express
- grid
- HTML
- 프로그래머스
- github
- Babel
- react
- CSS
- axios
- SSR
- 코딩테스트
- Next.js
- render
- EC2
- git
- FIGMA
- 해시
- TAILWIND
- FigJam
- TypeScript
- useCallback
- Javascript
- hook
- Stack
- 피그마
- docker
- useMemo
- webpack
- 자료구조
- Taillwind
- Today
- Total
목록분류 전체보기 (50)
나는 오늘도 멋있다
프로젝트를 진행하는 텀이 길어지고있다... 다른 부트캠프를 시작했더니 준비할게 있다보니 늦었다. 이외에도 여러가지가 있었지만 핑계.. ? 여전히 Tailwind는 적응 되지않는다. 있는 그대로를 사용해야하는데 적시모드를 사용하다보니 Tailwind를 잘활용하지 못하는거 같아서 공식홈을 보고 css속성을 여러번 바꾸기도 했더. 이왕이면 존재하는 유틸리스 클래스를 사용하기위해서... 또한 flexbox만 사용하다보니 간단한것도 코드가 길어지는 부분을 수정하고자 Grid를 공부하면서 적용해보는중이다. 좀더 분발하자
Container 속성 속성 의미 grid-template-columns 명시적으로 아이템들의 열(가로) 크기를 지정 grid-temaplte-rows 명시적으로 아이템들의 행(세로) 크기를 지정 gird-template 명시적 행(세로), 열(가로)의 단축속성 grid-auto-columns 암시적으로 아이템의 열(가로) 크기를 정의 grid-auto-rows 암시적으로 아이템의 행(세로) 크기를 정의 grid-template-areas 영역(Area)이름을 참조해 템플릿 생성 column-gap 아이템들 열(가로)셀 간격설정 row-gap 아이템들 행(세로)셀 간격설정 gap 열(가로), 행(세로) 셀간격의 단축속성 justify-items 아이템들의 가로방향 정렬 aligin-items 아이템들의 ..
개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서 HTML구조 // 문서의 형식을 지정하여 브라우저는 해당문서를 HTML5 문서로 해석한다. // 문서의 시작을 알리며, lang속성은 문서의 언어를 지정한다. // body태그를 읽기전에 정보들 // html 파일의 기본정보(문서정보, 메타데이터, 스타일시트, 스크립트) // 문서의 본문으로서 화면에 표시되는 모든내용이 들어감 시멘틱 태그(Semantic Tag) 태그 설명 용도 문서나 섹션의 헤더를 정의 로고, 제목, 네비게이션 네비게이션 링크를 정의 메뉴, 링크목록 문서의 주요콘텐츠를 정의하며, 하나만 사용해야함 독립적으로 구분되거나 재사용가능한 콘텐츠 블록 뉴스, 기사, 블로그 포스트 문서의 섹션을 정의 제목, ..
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 1. 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있음 2. 라우팅, 데이터 모델링, AJAX등은 외부 라이브러리를 사용해서 구현해야함 3. JSX(JavaScript 확장문법)을 사용하여 브라우저에서 실행되기 전 일반 JS형태의 코드로 변환됨 4. 최소한의 단위, 데이터함수, UI를 재사용 가능한 여러조각을 컴포넌트 기반으로 나누어 사용한다. 5. React의 개발핵심은 상태값을 효율적으로 관리하는것 리액트 라이프사이클(React LifeCycle) 리액트 가상 돔(React Virtual DOM) 리엑트에서 실제 DOM에 직접 접근하여 조작하는 대신, 적은 연산 시간을 위해 추상화한 자바스크립트 객체로서 실제 DOM의 가벼운 사본..
이전 글에서는 Home component를 다루는 page.tsx에서 nav의 기능을 다루도록 하였다. 하지만 나의 프로젝트 특성상 nav기능은 모든페이지에서 적용되므로 다시 Layout.tsx에서 그리도록 변경하였다. next.js의 파일구조를 명확하게 파악하지 못하여 발생한일이다. 사진과 보다시피 사이드에서 nav가 위치하고 있고 모든 내용들이 가운데에서 렌더링 되도록 하려는 구조였다. next.js 페이지 단위로 로드가 이루어진다는 생각에 메인 page.tsx에 nav기능을 넣은거 였다. 코드는 변경된것이 없다. 다만 코드의 위치변경을 해주었다. 이러한 점은 Login창을 구현하려할때 발견하였다. 기본적으로 유지되어야하는 Layout이 적용되지 않아서 알게 되었다. 아마 React의 영향이 아닌가 ..
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 --..