맨땅에 헤딩_디지털 마케터

0. Docker Desktop Docker 플랫폼의 데스크톱 버전 사용자가 GUI를 이용해 컨테이너를 쉽게 생성, 실행, 관리할 수 있음 기능 - 이미지 빌드하거나 Docker Hub에서 이미지 다운할 수 있음 - 컨테이너 시작, 중지, 재시작, 삭제 뿐만 아니라 상태 모니터링 및 로그 확인 가능 - 컨테이너 간의 네트워크를 연결할 수 있음 - 컨테이너의 보안을 강화할 수 있음 1. Docker Desktop 설치 공식 문서 방문 https://docs.docker.com/get-docker/ Get Docker Download and install Docker on the platform of your choice, including Mac, Linux, or Windows. docs.docker.c..

안녕하세요 도커 온라인 수업을 듣고 정리하기 위해 왔습니다. 요즘 완전 핫한 개념입니다. 0.Docker란? 컨테이너를 기반으로 하는 오픈 소스 가상화 플랫폼 1. Container란? 애플리케이션의 코드, 라이브러리, 환경 설정을 포함하는 어떤 상자(?)로, 애플리케이션을 안전하고 효율적으로 실행하게끔하고, 한 곳에서 다른 곳으로 쉽게 배포가 가능해서 이식성이 높은 것이 특징입니다. 애플리케이션을 실행하기 위한 가상의 환경으로, 커널쪽을 사용하여 가볍고 효율적으로 실행할 수 있어서 요즘 완전 핫한 기술입니다. - Container 핵심 기술 1) 호스트 OS의 자원을 분리해서 각 애플리케이션을 독립성을 높여 안전하게 실행 가능 2) Container는 쉽게 이동하고 공유하고 재사용할 수 있다. 3) C..

안녕하세요 프로젝트를 위해 next.js 인강을 들으면서 새로 익혔던 next.js에 대해 2부 시작하도록 하겠습니다. 3. Link 컴포넌트 사용 매우 단순하지만 어쨌든 next 13부터 바뀐 내용이니 다뤄보도록 하겠습니다. import Link from 'next/link' 먼저 next의 link에서 Link 컴포넌트를 가져옵니다. export default function Page() { return Dashboard } a태그 처럼 사용하면 됩니다. 이렇게 바로 사용하는 경우보다는, 버튼을 눌렀을 때 움직이는 경우가 더 많습니다. 그럴 경우에는 useRouter라는 훅을 사용해서 사용할 수 있습니다. 'use client' import { useRouter } from 'next/navigati..

안녕하세요 3차 프로젝트를 끝내고 돌아왔습니다. 저희의 이번 프로젝트 포인트는 [ AI, Next.js ] 입니다. 제가 ai를 조금이라도 도입하길 원해서,,,쫄랐었구요 ㅎㅎ,,,, 그리고 next.js는 저희가 많은 인원에 페이지도 많지 않아서, 툴이 어렵더라도 도전해볼만 하지 않을까 싶어 겁없이 도전하였습니다. Next.js는 SPA인 React와 다른 SSR이 있어서 이 부분을 살리기 위해 노력을 좀 하였습니다. 저희는 사용자에게 일기처럼 정보를 입력받아서 AI를 통해 결과를 내보이는 작업이 메인이기 때문에 사실 SSR과 완벽히 맞는 프로젝트는 아니었던 것 같습니다. 그래두,,, 해봤으니까 안맞구나 느낀 것이지 않을까,,, 제가 했던 작업페이지와 다사다난했던 트러블 슈팅까지 써보도록 하겠습니다. 0..

안녕하세요 3차 프로젝트에 들어가서 요즘 조금 바쁜,,,,나날들입니다. 저희 3차 프로젝트로 next.js와 scss를 사용하기로 하였습니다. 제가 프로젝트로 next.js를 도입하면서 배웠던 몇 가지 내용을 정리해보려합니다! 0. Next.js 왜 탄생하게 되었는가? 2013년 React가 페이스북의 손을 타서 세상에 나오게 되었습니다. 당시 React는 정말 센세이션했고, 지금 10년 이상 React는 여전히 프론트엔드의 강자라고 불리죠. 다들 잘 아시겠지만, 단방향 데이터 흐름과 Virtual DOM이 큰 특징입니다. 그리고, next.js를 공부하기 전까지는 잘 와닿지 않았는데 'Client Side Rendering'을 합니다. Client Side Rendering 일반적으로 SPA에서는 CS..

안녕하세요 업보처럼 차곡차곡 수업 내용 복습을 미루다가 더 늦기전에 후다닥 하는 중입니다ㅠ 스프링 부트 설치는 그다지 어렵지 않고, 그 이후에 정확히 원리를 알고 이용하는 것이 중요하기 때문에 설치 후에 내용을 다뤄보도록 하겠습니다! 0. Spring Boot 설치 후 이 파일들 뭔데? 1) src/main/java 저희가 추후 작성할 대부분의 자바 파일들이 들어갈 공간입니다. 컨트롤러, DTO, 데이터 베이스 처리를 위한 엔티티, 서비스 파일 등 다양한 파일이 들어갑니다. 2) src/main/resource 여기는 자바 파일을 제외한 환경 설정 및 HTML, CSS, 정적 파일 등이 들어갈 공간입니다. 이 resource파일 내에 다양한 하위 디렉토리들이 또 있는데요, static : 정적인 파일들이..

자바 강국이라고 불리는 한국에서 개발자로서 취업을 하고자 한다면,, 자바를 빼놓을 수 없죠! 드디어 자바를 배우게 되었습니다. 기초적인 문법을 배웠고, 아직 기초적인 문법을 진행 중이지만 수업 포인트 위주로 정리하겠습니다. 그럼 start! 0.클래스와 객체, 인스턴스 클래스: 클래스는 사용자가 정의하는 자료형이자, 객체를 만들기 위한 하나의 "틀"이라고 저는 기억에 저장이 되었습니다. 객체: 클래스로 부터 생성된 무언가(?) 인스턴스: 객체가 메모리 할당이 되어 저장된 것(new 사용) 1. 메소드의 접근 제어자(Access Modifier) 자바에서는 클래스를 저장하는 묶음을 패키지(package)라고 하는데요, 이 패키지와 클래스의 저장 구조를 통해 외부에서 클래스의 접근을 보호할 수 있습니다. 2..

이제 프로젝트가 끝남과 동시에 또 수업을 시작하였습니다. 숨 돌릴 틈이 진짜 없는 느낌 ㅠㅡㅠ,,, 이번 시간에는 소켓에 대해 배웠습니다. 0. 소켓(socket)이란? 웹소켓은 HTTP와 달리 양방향 실시간 데이터 소통을 하기 위해 생겨난 기술입니다. TCP/IP의 위에서 동작하는 HTTP와 달리 조금 더 밑에서 동작한다고 합니다. 소켓은 떨어져 있는 두 호스트를 연결해 주는 도구로써 인터페이스 역할을 한다고 합니다. 소켓을 통해 데이터를 주고 받는 것은 양방향 데이터 통신 채널을 만드는 것 같습니다. - 소켓 통신 흐름도 하기의 블로그에 꽤나 쉽고 자세하게 나와있어서 읽어보시는 것을 추천드립니다. https://helloworld-88.tistory.com/215 [기본] 소켓(SOCKET)통신 이란..

전 과정 중 2차 프로젝트가 끝이 났습니다!! 룰루 ˞♡ฅ(ᐤ꒳ᐤฅ) ‹3 이번 프로젝트에서 저는 [ 프론트 개발, 팀장 ]을 맡았습니다. 이번 프로젝트가 1차보다 조금 더 길어서 그런지 조금,,,,,,,더,,,,,,,,,,,기가 빨린 느낌,,,,,,,,,,,,,,,,,, 그래도 디벨롭하는 현재까지도 잘 진행이 되고 있어 마무리가 괜찮은 것 같습니다. 발표할 때 웹 배포가 제대로 안되가지고,,,,얼마나 좌절했는지,, 다들 양해해 주셔서 감사해요 예 제가 이번 플젝에서 난생 처음 프론트를 하면서 3만에 육박하는 코드를 작성하였어요. 저도 제 컨트리뷰터 보고 감작 놀랬어요 ㅎ.................. 진짜 폭풍 코딩 하느라 바빠서 팀원들을 제대로 못챙긴것같아 미안합니다....................

안녕하세요 이번 시간에는 Redux에 대해 배웠습니다. 0. Redux란? JavaScript의 상태 관리 라이브러리입니다. 주로 React와 함께 사용되지만, 다른 JavaScript의 프레임워크나 라이브러리에서 사용 가능합니다. Redux의 목표는 애플리케이션의 상태를 예측 가능하고 효율적으로 관리하는 것입니다. 즉, 한마디로 props 지옥을 벗어나는 것입니다. 컴포넌트 수가 많아지는 대형 프로젝트에서는 왼쪽 그림처럼 state를 전해주기 위한 props를 엄청나게 많이 써야 하는 경우가 발생하죠. Redux를 사용하게 된다면, *전역*으로 상태를 관리할 수 있어서, store라는 곳에서 언제든 꺼내쓸 수가 있습니다. (오른쪽 그림과 같이) 1. Redux의 핵심 개념 1-1. Store (스토어)..