일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- this
- 프리코스
- 우아한테크코스
- TypeORM
- 프론트엔드
- api 요청 수 제한
- 유효시간 설정 url
- 자바스크립트
- 모던 자바스크립트
- concurrency limit
- 스프링부트
- AWS
- compateto
- 파일 url
- redis
- 검색
- Deep Dive
- invalid_grant
- 우아한 테크코스
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- api 비동기처리
- Dev-Matching
- oauth
- 음악 url 파일 다운로드
- 프론트엔드 과제
- 딥다이브
- 타입스크립트
- NestJS
- 프로그래머스
- bucket4j
- Today
- Total
목록웹 (68)
개발 알다가도 모르겠네요
2022년 3월, TypeORM 0.3 버전이 새롭게 배포되면서, 기존 @EntityRepository 데코레이터가 deprecated되었다. @EntityRepository() class BoardRepository extends Repository {} 기존에는 저런식으로 쓰였지만, 이제는 CustomRepository 데코레이터를 사용하거나, @Injectable()을 사용하여 서비스단에 의존성주입을 하는 방법을 사용해야 한다. 그중에서도 @Injectable이 코드가 훨씬 간단해보여 알아보고자 한다. 검색 결과, @Injectable을 이용한 대부분의 사람들이 아래와 같이 구현했다. @Injectable() export class BoardRepository extends Repository { ..
리퀘스트 처리에 관한 논리는 라우트 파일에서 클로저로 정의 할 수 있지만, "컨트롤러" 클래스를 사용하여 같은 동작을 설정할 수 있다. 기본적으로 컨트롤러 클래스 파일은 app/Http/Controllers 디렉토리에 저장된다. 기본 Controller 컨트롤러는 Laravel에 포함된 기본 컨트롤러 클래스를 확장한다. 기본 컨트롤러 클래스는 App\Http\Controllers\Controller 경로에 위치한다.
Laravel Sail Laravel의 기본 Docker 개발 환경과 상호 작용하기 위한 간단한 명령줄 인터페이스. Sail은 도커에 대한 경험이 없더라도 PHP, MySQL 및 Redis를 사용하여 Laravel 애플리케이션을 구축 가능. 기본적으로 Sail은 docker-compose.yml 파일이며 프로젝트의 루트에 저장된 sail 스크립트이며, sail 스크립트는 docker-compose.yml 파일로 정의된 도커 컨테이너와 상호 작용할 수 있는 편리한 방법을 CLI로 제공한다. 기존 어플리케이션에 Sail 설치 기존 Laravel 어플리케이션에서 Sail을 사용하려면 Composer를 사용하여 Sail을 설치하면 된다. composer require laravel/sail --dev Sail ..
라라벨은 Docker을 사용하여 라라벨 프로젝트를 실행하기 위한 기본 제공 솔루션인 Sail을 제공. Sail은 사전 Docker 경험 없이도 PHP, MySQL 및 Redis를 사용하여 라라벨 애플리케이션을 구축할 수 있는 좋은 출발점을 제공. 가장 먼저 라라벨로 만든 웹 사이트의 URL을 결정하는 라우터부터 수정해보자. 라라벨의 라우터는 최상위 디렉토리 아래에 있는 routes/web.php 파일이 우리가 수정할 대상이다. 이 파일에 아래 소스코드를 복사하여 붙여넣으면, 이후에 웹 브라우저에서 /hello/world 경로로 접속하면 "Hello World"라는 문구가 표시되는 것을 볼 수 있다. Route::get('/hello/world', function () { return 'Hello Worl..
$ ./vendor/bin/sail up Unsupported operating system [MINGW64_NT-10.0-18363]. Laravel Sail supports macOS, Linux, and Windows (WSL2). vendor/laravel/sail/bin/sail 에서 아래 부분 주석 처리. # Verify operating system is supported... case "${UNAMEOUT}" in Linux*) MACHINE=linux;; Darwin*) MACHINE=mac;; *) MACHINE="UNKNOWN" esac if [ "$MACHINE" == "UNKNOWN" ]; then echo "Unsupported operating system [$(uname -s..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/T4Qao/btrZ8NA5hE2/07i8kO0CrnGKPevaMfgt81/img.png)
servlet-context.xml Spring설정 중 InternalResourseViewResolver를 이용해 View Page를 지정. InternalResourseViewResolver는 Controller에서 return된 ModelAndView 객체에서 선언된 View Page를 지정해주는 클래스. 이 클래스를 편리하게 사용하도록 Prefix(접두어), Suffix(접미어) 사용. 접두어로 /WEB-INF/views/를 붙이고 접미어로 .jsp를 붙여 해당 위치에 있는 jsp 호출. 결론 Controller에서 /hello를 return하게 되면 /WEB-INF/views/hello.jsp를 호출.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bpQMxN/btrKHZIkFfs/9wPDujn5rIN94Cc3PNeNB1/img.gif)
App의 state에 선택한 언어 추가 App 컴포넌트의 Suggestion 컴포넌트 생성하는 쪽에 선언해둔 onSelect 코드에 selectedLanguages를 자신의 state에 추가해보자. //App.js import { fetchLanguages } from "./api.js"; import SearchInput from "./SearchInput.js"; import Suggestion from "./Suggestion.js"; export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { this.state..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cGVAmS/btrKHYh7l14/GckZv1RbimGJjsgHOKt2lK/img.gif)
화살표 방향키 입력으로 seleectedIndex 변경 키보드 이벤트를 통해, selectedIndex 값을 바꿀 수 있도록 해보자. //Suggestion.js export default function Suggestion({ $target, initialState }) { this.$element = document.createElement("div"); this.$element.className = "Suggestion"; $target.appendChild(this.$element); this.state = { selectedIndex: 0, items: initialState.items, }; this.setState = (nextState) => { this.state = { ...this.s..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/DImXi/btrKA4jA4hq/vURkXELEzaHzQ6muayXzCK/img.png)
컴포넌트 구조 App 컴포넌트가 세 컴포넌트를 제어하는 형태이다. SelectedLanguages, SearchInput, Suggestion 각각의 컴포넌트는 서로 의존성을 띄지 않는 형태로 작성해야 재사용이 가능하다. App 컴포넌트 작성 // App.js export default function App({ $target }) { this.state = { fetchedLanguages: [], selectedLanguages: [], }; this.setState = (nextState) => { //TODO: 구현해야함 }; } 그 후, App 컴포넌트를 생성하는 index.js를 선언, index.html에서 불러오게 한다. // index.js import App from "./App.js"..