일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 해시
- CSS
- Stack
- useCallback
- Babel
- docker
- 프로그래머스
- react
- 코딩테스트
- Next.js
- render
- TAILWIND
- Javascript
- FigJam
- TypeScript
- SSR
- grid
- express
- github
- webpack
- EC2
- hook
- git
- useMemo
- 피그마
- FIGMA
- Taillwind
- HTML
- axios
- 자료구조
- Today
- Total
목록2023/11 (16)
나는 오늘도 멋있다
너무 오랜만에 글을 작성한다. 가족여행을 갔다와서 글을 작성하기전에 이것저것 테스트해보고 확인을하는데 해결하다보니 시간이 오래걸렸다. 시간이 좀 지나다보니 지날글에서 했던것들을 간단히 정리해보고 가려한다. 지난글들에서는 webpack을 이용하여 개발서버를 열었고, babel-loader를 사용하여 preset - react,typescript,js등 설정하고, css또 적용하였다. 하지만 현재는 많은것들이 추가되어 작성한 코드를 토대로 리뷰하는 형식으로 작성하려한다. 1. webpack.dev.js const path = require('path'); // HTML파일 생성을 단순화하며, 나만의 템플릿을 제공하도록 할수있다. const HtmlWebpackPlugin = require('html-webp..
아 시리즈1때는 아침6시에 일어났는데.... 오늘은 새벽에 소라운스러운 일이 있어서 7시30분 되서야 시작한다... 저번 글에서는 CRA처럼 npm run start를 입력했을때 개발중인 웹을 확인할 수 있도록 webpack-dev-server를 열었다. 정말 열릴정도로만의 패키지를 사용하였고, 이번글에서는 추가적인 모듈들을 추가할예정이다. (지난번에 추가해야했어할 모듈들도 있었지만 하나씩 어디에 쓰이는지 확인하고자 추가하지 않았던 모듈들을 추가할예정이다) 1. Polyfill 이 뭘까? 폴리필은 JS의 최신문법을 지원하지 않는 구형 브라우저에서 해당기능을 구현하는 코드 조각이다. 즉 오래된 브라우저에서 최신 기능을 사용할 수 있도록 도와주는 코드 조각이나 라이브러리를 말한다.(약간 모방해주는?) 이러한..
SSR을 구현하기위해 Next.Js를 공부하게 되었고, SSR을 React로만으로도 구현하고싶어서 express를 이용하여 구현하였다. 이후에는 SSR, CSR의 차이점을 보게되었고, SSR은 webpack을 이용하여 설정했기때문에 CSR도 webpack으로 구현해야하는 상황이다. 그래서 여기까지 와버렸다. 하나를 시작하려했더니 갑자기 해봐야 할 것 들이 늘어났다... Webpack이란? JS 애플리케이션을 번들링하기 위한 JS모듈 번들러이다. 프로젝트에서 사용되는 여러 모듈과 종속성을 효율적으로 관리하고, 번들로 묶어 하나의 파일로 만드는 것 이다. 나는 기본적으로 React를 시작할때 CRA명령어를 통해 프로젝트를 시작하거나, 테스할때도 해당 명령어를 사용해서 빠르게 사용한다. webpack은 초반에..
요즘 정신이 말짱하다. 학습하는대로 내머리에 다들어오는데 누군가가 머리를 계속 감겨주는 것 같은 느낌이다. 그래서 TypeScript를 좀더 알아보려고한다. 어느순간부터 TypeScript를 쓰고있었고 React에 타입을 명시하기 바빳다. 이런 기분에 학습하면 좀더 TypeScript를 더 다룰수 있을까해서 급하게 적어본다. 지금 당장 Google에만 TypeScript란 이라고 치면 엄청나게 많은 블로그들이 많이 뜬다. 그래서 나는 나처럼 깊게 알지 못하는 사람이 있을 수 있다고 생각하여 공식문서를 봤다. "프로그래머들이 작성하는 가장 흔한 오류는 타입 오류입니다: 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우입니다. 이는 단순한 오타, 라이브러리 API를 이해하지 못한 것, 런타임 동작에 ..
React를 통해서 CRUD를 구현했다. (디자인은 신경쓰지않고 기능에만 집중했다...) 클라이언트를 구성하는건 어렵지 않았다. 다만 이렇게하고싶다 라는 생각때문에 조금씩 바뀐다.. 내가 작성한 코드를 처음으로 리뷰해본다. GitHub - JangIkIk/React-TodoList Contribute to JangIkIk/React-TodoList development by creating an account on GitHub. github.com [프로젝트 구조] React-TodoList ├─ .gitignore ├─ README.md ├─ backend │ ├─ .env │ ├─ express.ts │ ├─ package-lock.json │ ├─ package.json │ └─ tsconfig.j..
Git(Version Control System)이란? 분산형 버전 관리 시스템으로, 특정 시점의 버전을 다시 꺼내올 수 있는 시스템이다. 프로젝트를 버전별로백업, 관리하여 프로젝트를 유지보수 하면서 발생할 수 있는 여러 문제들을 미연에 방지하고 해결하는 역할 Github란? Git을 기반으로 소소코드를 온라인에 저장하고, 공유할수 있게하는 소스코드 관리 서비스 * 용어 [Git 레포지터리]: 저장소, 소프트웨어 파일이나 폴더 등 각종 정보를 저장해두는 공간 [Git 브랜치]: 독립적으로 어떤 작업을 진행하기 위한 "차원" [Git 커밋]: 코드 수정사항을 기록하는 명령(스냅샷) [Git Pull Request]: 수정한 코드가 있는 브랜치를 검토 후 병합해달라고 요청하는것을 말함 [Git 코드리뷰]: ..
이제는 모든 설정을 맞췄으니 코드를 작성해야한다. 이미 CRUD를 구현하고 테스트까지 해본상황이다. 글을 쓰면서 다시 만들려고했지만 NextJS로도 만들어봐야해서 리뷰느낌으로 작성할 예정이다. 이글에서는 React(TypeScript)로 진행하였고, API는 Express, DB mysql(phpMyAdmin)을 사용했다. GO GO 저번글에서는 컨테이너를 만들고 phpMyAdmin에 접속까지 했다 이제는 미리짜놓은 코드의 맞춰서 테이블을 만들고 데이터가 들어오는것을 확인하려한다. 1.먼저 왼쪽의 메뉴창에서 새로운 DB만들기를 클릭한다. 2.데이터베이스명 을 입력하고 만들기를 클릭한다. 3.testDB 에 테이블명을 입력하고 컬럼수를 입력한다. 4. 여기서 컬러명을 입력하면 된다. 단! 나는 간단한 To..
[블라블라] 기본적인 CRUD를 적용해서Todo-List를 만들어보려 한다. mysql도 써보지않아서 고생을많이했다.. phpMyAdmin도 마찬가지... 그래도 무사히 끝냈다. 클라이언측은 type때문에 조금 고생하고... 간단하게 짜려고 상태관리를 안쓰니 Props drilling 이 살짝일어났다. 클라이언트는 꾸민게 없으니 반나절이면 했지만 Docker를 이용한 mysql과 phpMyAdmin을 사용하는데 시간이 걸렸다. 먼저 Docker를 설치했다. 누구나 쉽게 설치할수있도록 작성해놓았다. Doker 란? (설치방법) [학습이유] 프론트엔드 취직을 위해 포토폴리오를 만들려고 한다. 그때마다 클라이언트-서버-DB가 필요했다. 간단하게 오픈API, Json-server를 사용할수도 있지만, 나의 프로..