전체 글 썸네일형 리스트형 Svelte 상태값 svelte 공식 홈페이지를 가보면 상단 메뉴에 REPL 이라고 되어 있는것을 볼 수 있는데 CodeSandbox, Codeit 과 같이 코드를 입력하면 스벨트에서 어떻게 작동하는지 알 수 있게 해주었다. 여기서 간단히 상태값을 리액트와 다르게 어떻게 사용하는지 알아 보면 상태값: {count} // 요기 react jsx 문법에서도 실컷 했듯이 괄호열고 변수로 가져오기 // 이 문법은 처음 보긴했는데 저런식으로 쓰는가 보다 하면 되겠다. 클릭 아직까지도 성능이 리액트보다 어떻게 훨씬 좋고 이런건 모르겠지만 상태값 선언 부터 짧은게 그냥 맘에든다. 더보기 Svelte 기본 개발환경 세팅 (SvelteKit XX) Svelte랑 Sveltekit이랑은 다르다. React와 Nextjs 같은 개념으로 생각하면 되는데 Sveltekit은 Svelte를 더 간편하게 써 줄 수 있게 하는 프레임워크다. https://svelte.dev/ 공식사이트에 들어가면 떡 하니 이렇게 프로젝트 생성부터 실행하는 것 까지 간단하게 나와 있는데 엄밀히 말하면 이것은 Svelte 프로젝트 세팅이 아니라 Sveltekit 세팅이다. 나는 React -> Nextjs 순으로 개발했을 때 더 편하고 더 나아진 점을 느꼇었기 때문에 이번에도 먼저 Svelte -> Sveltekit 순으로 가고 싶어 유튜브에 Hollo Coding 이라는 유튜버 강사님의 영상을 보면서 글을 작성해나가려 한다. npm init vite ./ // 프로젝트를 설치할.. 더보기 Svelte 를 시작하면서 이번에 회사에서 새로운 프로젝트성 플랫폼을 하나 또 들어갈 예정인데 매번 react, nextjs 를 이용해서 만들어진 서비스들만 만지다 보니 새로운 프레임워크가 땡겼다. 회사 형이 이번에 한 번 'Svelte' 라는 게 있는데 그거 이용해서 해보라는 권유에 처음은 망설였지만 단 한장의 사진으로 마음이 굳었다. Svelte에 대해 공부좀 하려고 인프런에 무료 강의를 찾아서 듣던 와중에 이 Svelte, Vue, React 각각의 방식으로 동일한 기능을 구현하는 코드를 봤을 때 뭔가 내 것으로 만들고 싶다는 느낌이 확 왔었다. 단순히 저 사진 하나에서만 봐도 기존에 쓰던 React에서 4가지나 낫다고 볼 수 있다. * 높은 가독성 유지 ( 딱 봐도 깔끔하지 않나 ) * 개발 시간 단축 ( 딱 봐도 코드량이.. 더보기 워드프레스 테마/플러그인 설치시 팝업 FTP 관련 이슈 해결방법 워드프레스 서버 설정을 마치고 테마 혹은 플러그인을 설치하려고 하면 이런 화면이 뜨게 될 것이다. 이 화면이 안뜨게 하는 방법이 있는데 wp-config.php 파일에 define('FS_METHOD','direct'); 추가해주면 된다. 복사붙여 넣기를 했다면 ''을 한번 확인해보고 저장하길 바란다. 더보기 WordPress Plugin 설치시 Could not create directory라는 에러에 대한 손쉬운 해법 원인은 권한이다. 플러그인 설치 시 정확히 기억은 안나지만 ~~~/~~~/~~~/wp-content 디렉토리에 디렉토리를 생성할수 없어서 생기는 에런데 나중에 해결하고 나서 보니 플러그인을 설치 하면 wp-content 디렉토리 안에 plugins 라는 디렉토리가 생길텐데 단순히 plugins 디렉토리를 생성하지 못해서 일어나는 일이다. 나는 wp-content 디렉토리에 777 권한 부여하고 재시작하고 나니 정상적으로 플러그인 설치가 되었다. 더보기 워드프레스 고유주소 변경 후 페이지 생성/업데이트/접속 안됨 에러 해결 이번에 워드프레스로 ec2에 직접 웹서버 구축하고 db 연결하면서 초기 세팅을 다 해주고 있는데 SEO에 유리한 측면적인 면을 위해서라도 페이지의 URL 주소를 위 사진의 글 이름 처럼 설정해주는 것이 좋은데 그러기 위해서는 .htaccess 파일에 추가적인 코드를 만들어 줘야 하고 그 과정을 거치고 이상없이 고유주소 구조를 바꾸고 페이지를 새로 생성 하게 되면 wp-json 주소로 post 요청을 쏘고 404에러를 뱉을 것이다. apache 사용자면 /etc/apache2/sites-enabled/000-default.conf 파일에서 AllowOverride를 All로 바꿔주거나 httpd 사용중이면 /etc/httpd/conf/httpd.conf 파일에서 AllowOverride를 All로 바꿔주면.. 더보기 Nestjs Pipe란 Pipe란 -> @Injectable() 데코레이터로 주석이 달린 클래스 -> Data Transformation, Data Validation을 위해서 사용 -> 메소드가 호출되기 직전 ( 핸들러로 가기 전 ) 파이프를 삽입하고 파이프는 메소드(핸들러)로 향하는 인수를 수신하고 그에 대해 작동 클라이언트 -> 컨트롤러 @Get() 핸들러 -> Service. -> 컨트롤러 @Get() 핸들러 -> 클라이언트 // with Pipe 클라이언트 -> 파이프 -> 컨트롤러 @Get() 핸들러 -> Service. -> 컨트롤러 @Get() 핸들러 -> 클라이언트 Data Transformation ? -> 데이터를 원하는 형식으로 변환 -> 숫자를 받길 원하는데 문자열로 온다면 자동으로 숫자로 바꿔준다. E.. 더보기 Nestjs DTO (Data Transfer Object) DTO는 데이터가 네트워크를 통해 전송되는 방법을 정의하는 객체다. DB에서 데이터를 얻어 Service나 Controller 등으로 보낼 때 사용하는 객체를 말한다. Interface나 class를 이용해서 정의 할 수 있지만 NestJs 에서는 class를 사용하는 것을 추천하고 있다. -> TypeScript의 클래스는 JavaScript ES6 표준을 따르므로 컴파일된 JavaScript에서 실제 엔터티로 보존되는 반면에 인터페이스는 변환 중에 제거되기 때문에 Nest는 런타임에 인터페이스를 참조할 수 없다. DTO를 사용하는 이유? -> 데이터 유효성을 체크하는데 효율적이다. -> 유지보수 하는데 더욱 용이하다. - ex) 많은 서비스, 컨트롤러 파일 등에서 게시물 생성 관련 작업에서 descr.. 더보기 이전 1 2 3 4 5 ··· 24 다음
