본문 바로가기
반응형

전체 글

 (424)
[Spring Boot 스터디] 한준교 #1 주차 - 섹션 1, 2 "다음부턴 요약을 해볼게..." 🦫Section 1. 프로젝트 환경설정 프로젝트 생성 준비해야할 것. Java 11 설치 → 버전 이슈 때문에 Java 17 IDE (InteliJ) 설치 https://start.spring.io/ (옛날에는 Spring 프로젝트를 밑바닥 부터 만들었지만 요즘은 Spring-boot 를 기반으로 Spring 프로젝트를 만듬!!) Spring-boot 기반으로 Spring 프로젝트를 만들어주는 사이트이다 (Spring 에서 운영중임!!) 과거에는 Maven을 주로 사용했지만 요새는 거의다 Gradle 을 사용한다고 한다… SNAPSHOT은 아직 출시 전이므로 SNAPSHOT 이 아닌것들중 제일 높은 버전을 선택! Group은 회사 이름을 작성하는 곳인데 대학생인 관계로 hello 로 채운다! Artifa..
[Spring Boot 스터디] 황현진 #1 주차 - 섹션 1, 2 "👋 🌸" 📌 View 환경설정 1️⃣ welcome page 만들기 src / main / resources / static / index.html 이 경로에 아래 코드를 붙여 넣으면 welcome page(홈화면)를 만들 수 있다. (정적 페이지) Hello hello 2️⃣ thymeleaf 템플릿 엔진 thymeleaf 템플릿 엔진을 사용하면 동적인 페이지를 만들 수 있다. @Controller public class HelloController { @GetMapping("hello") public String hello(Model model) { model.addAttribute("data", "hello!!"); return "hello"; } } 안녕하세요. 손님 📌 빌드하고 실행하기 콘솔창을 킨다. ..
[Spring Boot 스터디] 이지원 #1 주차 - 섹션 1, 2 "Hello Spring" 개발 환경 설정 JDK 20 IntelliJ - Spring Boot html 렌더링 방법 Client의 html을 렌더링하는 방법에는 대표적으로 아래의 3가지 방법이 있다. 정적 컨텐츠 MVC와 템플릿 엔진 API 정적 컨텐츠 static 파일들을 그대로 제공한다. CDN의 역할과 비슷하다. 특별한 작업 없이 단순히 파일을 전송하고 제공하는 역할이다. 정적 파일을 호스팅하는 기능이다. src -> main -> resources -> static 폴더 내부에 정적 파일들을 위치시킨다. Spring 서버가 자동으로 폴더 내부의 파일들을 정적 파일로 제공한다. 예를 들어 static 폴더 내부에 index.html이라는 다음 파일을 위치시킨다면 서버를 접속할때 메인화면이 아래 파일로 변경된다. Hello ..
[Spring Boot 스터디] 이정욱 #1주차 - 섹션 1, 2 ".... . .-.. .-.. ---" 테스트 라이브러리 정리 spring-boot-starter-test는 스프링 부트 테스트를 위한 라이브러리다. junit은 테스트 프레임워크로서 사용된다. mockito는 목 라이브러리로 사용된다. assertj는 테스트 코드 작성을 편하게 해 주는 라이브러리다. spring-test는 스프링과의 통합하여 테스트할 수 있게 지원해 주는 라이브러리다. View 환경설정 스프링부트는 WelcomePage를 제공한다. static/index.html을 올려두면 Welcome Page를 적용할 수 있다. Welcome Page 적용한 모습 또한 thymeleaf 엔진을 사용하고 있어, controller를 이용해 값을 반환하고 사용하는 것이 가능하다. java/hello/hellospring/controller..
[Spring Boot 스터디] 류건 #1주차 - 섹션 1, 2 "안녕, 봄" 1. 스프링 프로젝트 생성 (스프링 부트 기반) https://start.spring.io/ → 요즘은 Gradle을 많이 씀. → Group에는 기업의 도메인을 씀 → artifact : 프로젝트명? → dependency : 어떤 라이브러리를 땡겨 쓸건지 thymeleaf, Spring Web 사용! 위와 같이 설정 후 Generate → IntelliJ 프로젝트 폴더에 압축 해제하면 프로젝트 생성 완료! main → java & resources(자바 파일 제외 모든것 → HTML, …) build.gradle → 설정파일. main 실행 시 Tomcat 어쩌구에 뜨는 포트 번호를 웹페이지에서 입력해보기 localhost:8080 → gradle 말고 intellij에서 직접 실행하고 싶으면 set..
[Spring Boot 스터디] 목진협 #1 주차 - 섹션 1, 2 "Hello Spring" 1. IntelliJ - Spring Boot 개발 환경 설정 Spring Boot 백엔드 개발은 IntelliJ를 가장 많이 활용한다고 한다. 먼저, 스프링 부트 스타터 사이트에서 Spring 프로젝트를 생성한다. https://start.spring.io/ - 스프링 부트 스타터 위와 같이 설정한 후에 Generate하고, IntelliJ 프로젝트 폴더에 압축 해제하여 프로젝트 실행! HelloSpringApplication 파일의 main을 실행했을 때, 위와 같은 실행 화면이 나오면 성공! localhost:8080 에 접속했을 때 웹화면이 출력된다. 2. 라이브러리 살펴 보기 스프링 부트 라이브러리 spring-boot-starter-web spring-boot-starter-tomcat: 톰캣..
spring Boot 스터디 1주차 조현상 개발 환경 설정은 intellij , java11 , spring start io로 세팅하였다. 환경 설정이 다 되었는 지 체크하는 방법은 src -> main -> java -> hellospring -> HelloSpringApplication 파일에서 run 시켜주면 된다. 문제 없이 run이 된다면 http://localhost:8000 주소로 들어가면 성공이다. 웹 개발 방법은 정적 컨텐츠 , MVC와 템플릿 , API 3가지 방법이 있다. 우선 첫 번째로 정적 컨텐츠 방법은 src -> main -> resources -> static 에 들어가서 html을 작성하는 것이다. 기본적으로 스프링은 index.html을 기본경로? 로 세팅이 되어있기 때문에 index.html 을 작성하면 http..
[인공지능 스터디] 이정욱 #1주차 모두를 위한 딥러닝 - 기본적인 머신러닝과 딥러닝 강좌 섹션 0 ~ 섹션 6 섹션.1 머신러닝의 개념과 용어 What is ML? Programming의 한계 Spam filter: 이 메일이 스팸인지 아닌지를 판별하기 위한 규칙 Automatic driving: 또한 너무 규칙이 많다 이러한 한계를 극복하기 위해 Supervised/Unsupervised learning Supervised learning: 정해져 있는 데이터를 가지고 학습 특정 사진들의 label을 알려주면서 학습 Unsupervised learning: label이 정해지지 않은 데이터들을 학습 데이터를 보고 스스로 학습한다. Supervised learning 이미지 라벨링: tag가 되어있는 이미지를 통해 학습 Email spam filter: 라벨된 이메일을 통해 학습 Training data set ..
[2023 신입부원 기초 스터디] 박승환 #8주차 마지막 JS @@ 요즘 알바를 너무 많이 해서 올리는 걸 신경을 못 썻네요 ㅎㅎ 늦어서 죄송합니다. 마지막 강의를 보니 실습 영상이더군요! 따라하면서 만든 결과물을 올리도록 하겠습니다!@@ 모달창 만들기 할 일 목록 만들기 지금 시간 알기 컴퓨터와 가위바위보 하기 늦었지만 오늘에서야 js블로그를 마무리 했다. 방학동안에는 HTML, CSS, JavaSctipt를 복습 및 추가적인 공부를 하면서 40일 프로젝트에 도움을 줄 것이고, 아직 JS에 대해서는 배울게 많은 것 같다. 파이썬과 비교해보면 JS는 내가 기입한 대로 흘러가는 느낌이라면, 파이썬은 논리적으로 생각을 해야되는 느낌? 설명을 잘하지는 못하겠다. 뒤에 있을 40일 프로젝트와 자율스터디 때 React를 배울 것인데 앞서 3개와 React를 공부해서 프론트엔..
[2023 신입부원 기초 스터디] 도승준 #8주차 20시간동안 깨어있었던 건에 대하여 이번 주차는 배웠던 JS 내용을 활용해 모달 만들기, 할 일을 체크해주는 할 일 앱 만들기, 디지털 시계만들기, 가위바위보 게임 만들기 등을 실습해보는 내용이었는데, 아무래도 전 주차 내용이 어렵다 보니 하나하나 이해하고 넘어가기 힘들었고, 좀 완벽하게 이해하고 넘어가려다 보니 이렇게 됐는데.. 늦어서 죄송합니다. (쿼리셀렉터 다루는게 너무 어렵더라구요..) 다들 종강도 했으니 조금은 쉬어가면서 공부하시길 바라고 ! 저도 이제 한숨 자고.. 다시 의지 충만한 윙크 부원으로 돌아가 실습들을 다시 한 번 해볼 생각입니다. 모두 한 학기 고생 많으셨어요~
[2023 신입부원 심화 스터디] 박지민 #마지막주 React.js 섹션 3~6 섹션 3. State 1. State 소개 - state는 props의 값에 따라 내부의 구현에 필요한 데이터 - props는 사용자가 component를 사용하는 입장에서 중요한 것 2. State 사용 class App extends Component { constructor(props) { super(props); this.state = { Subject: { title: "WEB", sub: "World wid Web!" } }; } render() { return ( title={this.state.Subject.title} sub={this.state.Subject.sub} ); } } export default App; App.js가 내부적으로 사용된다면 state를 통해 사용 Compone..
[2023 신입부원 심화 스터디] 신진욱 #마지막주 React.js 섹션 3 - 6 #귀칼보단 리액트지 ㅋ 섹션 3 - State 소개 1. state 소개 - state는 props의 값에 따라서 내부에 구현에 필요한 데이터들 2. state의 사용 class App extends Component { constructor(props) { super(props); this.state = { // state에서 subject를 초기화 Subject: { title: "WEB", sub: "World wid Web!" } // 하나의 값을 다룰 때! }; } render() { return ( title={this.state.Subject.title} sub={this.state.Subject.sub} ); } } export default App; - App.js가 내부적으로 사용된다면 state를 통해 사용..
[2023 신입부원 심화 스터디] 김윤희 #마지막주차 React.js 섹션3 ~ 7 #치타는힘드러 섹션3. State 소개 1. state 소개 props는 사용자가 컴포넌트를 사용하는 입장에서 중요 state는 props의 값에 따라서 내부에 구현에 필요한 데이터들 2. state의 사용 class App extends Component { constructor(props) { super(props); this.state = { Subject: { title: "WEB", sub: "World wid Web!" }, }; } render() { return ( title={this.state.Subject.title} sub={this.state.Subject.sub} ); } } App.js가 내부적으로 사용하는 형태는 state를 통해 사용한다. state값을 subject라는 컴포넌트의 pro..
[2023 신입부원 기초 스터디] 김승혁 #8주차 - JS 모달 만들기 html + css + 'js' 를 이용해서 모달창을 열고 닫아보겠습니당 다른 코드까지 가져오기는 너무 길고 js만 가져오면 ~ const openButton = document.querySelector('.open'); const container = document.querySelector('.container'); const closeButton = document.querySelector('.close'); openButton.addEventListener('click', () => { container.style.display = 'flex'; openButton.style.display = 'none'; }); closeButton.addEventListener('click', (..
[2023 신입부원 기초 스터디] 이총명 #8주차 - JS 해치웠나..? 1 . 모달 실습 강의대로 하면 심심해서 살짝 바꿔봤어요! index.html 👉눌러보세요👈 즐겁고 행복한 하루! 😍감사합니다😍 style.css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; height: 100vh; flex-direction: column; justify-content: center; align-items: center; background-image: ..
[2023 신입부원 기초 스터디] 한승훈 #8주차 - 섹션6 0. 인사말 안녕하세요. 뭔가 오랜만이 아니라 요즘 자주 보는 기분이네요. 기분탓입니다. 다들 6/21에 스파이더맨:어크로스 더 스파이더버스 개봉하신 거 아시나요? 저는 오늘로 3회독 완료했습니다. 방학하고 시간 되실 때 꼭 보는걸 추천드립니다. 8주차는 실습 과제였습니다. 실행 화면과 코드를 이용하여 배운 것을 간단히 정리해보도록 해요. 1. Modal 연습문제 가장 먼저 할 일은 클릭할 버튼을 가져오는 것입니다. openButton을 이용합니다. 처음 화면에서는 css에서 container의 display:none; 설정 때문에 보이지 않는 것입니다. display 속성에 접근하여 none을 flex로 바꾸면 감춰져있던 모달 창이 보이게 됩니다. 버튼은 반대로, none으로 바꿔주면 됩니다. 그러면 ..
[2023 신입부원 기초 스터디] 조상혁 #8주차 - Js 실습 예제 가위바위보 게임 js 실습 코드 // 무료 강의 👉 https://youtube.com/playlist?list=PLI33CnBTx2MZGD7zAQ810_B8dDU_E8gaq // 이 아래 코드를 작성하세요. const buttons = document.querySelectorAll('button'); const computerChoice = document.querySelector('.computer-choice'); const userChoice = document.querySelector('.you-choice'); const winner = document.querySelector('.result'); const result = ['가위', '바위', '보']; const show = (user,..
[2023 신입부원 기초 스터디] 김찬중 #7주차 js(보충) [메소드] 1. 문자열 메소드 // 문자열을 대문자로 변환 toUpperCase() // 문자열을 소문자로 변환 toLowerCase() // 문자열 앞과 뒤의 공백을 제거 trim() // 문자열 앞의 공백 제거 trimStart() // 문자열 뒤의 공백 제거 trimEnd() // 옵션의 카운트만큼 반복, 새로운 문자열로 반환 repeat() // 좌측부터 문자열의 시작에 다른 문자열을 채운다. padStart() // 우측부터 현재 문자열에 다른 문자열을 채운다. padEnd() // 문자열에서 특정 문자열을 찾고, 해당 문자열이 첫번째로 나타내는 index 리턴 indexOf() // 문자열이 특정 문자열을 포함하는지 확인 includes() // 문자열이 특정 문자로 시작하는지 확인 start..
[2023 신입부원 기초 스터디] 최종은 #8주차 - 배우긴했으니예제를만들어보자 JS기초기에 HTML, CSS 부분은 강사분이 깃허브에 올려주셨다 사랑합니다🤸🏻‍♂️ 1.모달 만들기 우선 모달이란? 기존의 브라우저 페이지 위에 새로운 레이어를 까는것이다 이를 HTML, CSS, JS로 만들어보게따 학습목표: HTML요소를 선택하여 JS에서 처리하긔 -> 버튼을 클릭하면 모달창이 나오게 만들긔 👉눌러보라우 🕺🕺🕺🕺🕺 둠칫둠칫 Close 이건 HTML * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans..
[2023 신입부원 기초 스터디] 정찬우 #8주차 - 스터디 끝~ 이번 주차는 그대로 보고 따라 하는 실습 주차여서 딱히 블로깅 할 게 없다. HTML을 시작으로 CSS, JS까지 한 번씩 기초는 다진 것 같다. 계속 스터디를 하면 할수록 웹에 빠지게 되었고, 이번 방학 때는 웹에 대해서 더 자세히 공부해 보고 싶어서 어제 서점에 가서 웹 관련 책을 샀다. 아직 많이 해본거는 아니지만 조금 공부 해보고 느낀 것은 물론 백도 재밌지만 나는 프론트쪽에 더 흥미를 느끼는 것 같다. 앞으로 방학 때 윙크에 무슨 스터디가 있을지는 모르지만 열심히 참여해 볼 생각입니다~ 공항 출발하기 1시간 전까지 실습하고 블로깅하고 떠납니다✈✈
[2023 신입부원 기초 스터디] 김찬중 6주차 - JS문법(2) 안녕하세요 아마 제 글이 5주차부터 멈춰서 스터디를 안하는건가 생각하신분도 있을 수 있는데 강의는 끝까지 완강했는데 블로깅을 못했습니다... 그래도 이렇게 포기하지 않고 끝까지 하는 모습 봐주시면 감사드리겠습니다..! [섹션2] 1. 조건문 조건문이란 특정한 조건을 정하고 해당 조건에 따라서만 실행되도록 하는 것을 말합니다. 웹사이트에서 사용하려면 아마 로그인 시도를 하고 아이디와 비밀번호를 입력하였을 때 서버에 저장된 사용자 정보와 일치하면 참, 일치하지 않으면 거짓 이런식으로 활용할 수 있을 것 같습니다. 대표적인 조건문으로는 if와 switch가 있습니다. 1-1. if if (조건) { 내용 } if 조건문은 기본적으로 이런 구조를 유지하게 됩니다. 예를들어, 로그인시에 if (내가입력한내용 ==..
[2023 신입부원 기초 스터디] 박민규 #7주차 - 나태해진 나의 JS 블로깅.. 문자열 메소드 대소문자 변환 변수.toUpperCase() : 변수가 문자열일때 모든 문자를 대문자로 변환. 변수.toLowerCase() : 변수가 문자열일때 모든 문자를 소문자로 변환. 공백 제거 변수.trim() : 문자열의 앞 뒤 공백을 제거함. 변수.trimStart() : 문자열의 앞 공백을 제거함. 변수.trimEnd() : 문자여르이 뒷 공백을 제거함. 반복 변수.repeat(횟수) : 횟수만큼 문자를 반복 (원본을 해치지 않음) 추가 변수.padStart(10, "d") : 변수 앞에 "d"의 갯수와 변수의 길이 총 합 10만큼 "d"가 추가됨. 변수.padEnd(10, "d") : 변수 뒤에 "d"의 갯수와 변수의 길이 총 합 10만큼 "d"가 추가됨. IndexOf() const st..
[2023 신입부원 기초 스터디] 한승훈 #7주차 안녕하세요 여러분, 오랜만에 다시 인사드립니다. 다들 즐거운 방학 보내고 계신가요? 다들 보고 싶을지도요! 사실 뻥입니다 ㅋ 의 뻥입니다 ㅎㅎ 1. 문자열 메소드 나중에 기억이 안나는 것이 있어도 알아보기 쉽게 vs코드에 새로운 파일 하나로 정리해뒀습니다. 다만 실행하면 오류가 뜨긴 합니다. ㅎㅎ 2. 배열 메소드 강의 중 언급된것처럼, 메소드는 지금 당장 하나하나 싹 외우기보다는...(가능하다면 좋겠지만) 이런 게 있구나~ 하고 알아보는 강약조절이 필요한 곳이 아닌가 싶습니다 ㅎㅎ....희망사항입니다. 3. 이벤트 이벤트는 웹 페이지에서 입력 장치를 통해 입력을 받아 특정 기능일 사용하는 것입니다. 약간 tkinter생각이 나네요. 4. 모듈 모듈은 여러 기능을 가진 여러 코드를 하나의 파일로 정리한 ..
[2023 신입부원 심화 스터디] 정호용 #7주차 react - section 3 ~ 📌section 3 // Section 3. State(1) - 소개 // State 는 Props 와 같이 봐야 이해가 잘 된다! // 컴포넌트를 만드는 리액트의 관점에서는 props가 User Interface인 셈이다. // State는 Props 값에 따라 내부 구현에 필요한 데이터 값들 이다. // State // Props과 State가 철저히 분리 되어야 한다. // 철저히 격리시켜서 양측의 편리함 도모 // Section 3. State(2) - 사용 class App extends Component{ constructor(props){ super(props); this.state = { Subject:{title:"WEB", sub:'World Wide Web!'} // State 만들기..
[2023 신입부원 심화 스터디] 이정욱 #마지막주차 React.js 섹션3 ~섹션7 State state와 props props props는 컴포넌트 외부에서 전달되는 읽기 전용 데이터이다. Props는 함수 매개변수처럼 동작하며, 컴포넌트가 렌더링될 때마다 값이 전달됩니다. state state는 컴포넌트의 내부 상태를 나타내는 데이터입니다. 컴포넌트 내에서 선언하고 초기화되며, 컴포넌트의 생명주기 동안 변경될 수 있습니다. 컴포넌트 내에서 **this.state**를 통해 접근하고, **this.setState()**를 사용하여 업데이트합니다. App.js class App extends Component { constructor(props) { super(props); this.state = { subject: { title: "WEB", sub: "World Wide Web!!!..
반응형

티스토리툴바