Typora을 사용해서 md파일에 정리를 하면서 강의를 들었는데, 마크다운 형식으로 티스토리에 옮겨오니 조금씩 깨지거나 달라지는 부분이 생겨서.. 보기에 너무 불편하고 맘에들지 않아서 그냥 깃허브에 실습 코드까지 함께 업로드 했다. https://github.com/Yoon-Suji/EPRO-webfullstack-study 조금 시간이 지난 강의이지만, 이만큼 자세하게 알려주는 강의도 없는 것 같다. 인프런에서 다른 스프링 강의도 들어봤지만 이 강의가 훨씬 좋았다. 처음 웹 개발 입문하는 분들에게 추천! 근데 아예 쌩노베로 듣는다면 좀 어려울 것 같기도...?
스터디📖/웹 개발 기초
2. DB 연결 웹 앱 1. JavaScript - FE 1) 자바스크립트 변수 - 연산자, 타입 변수: var, let, const로 선언 가능, 어떤 것을 사용하는 가에 의해 scope(변수의 유효범위) 달라짐 https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90 var 변수 선언은 호이스팅이 일어나고, const, let 변수 선언은 호이스팅이 발생하지 않음 연산자: +, -, *, /, % 등.. const name = "jiyong"; const result = name || "default"; //name이 없으면 default가 쓰임 const data = 11; const result = (data..
코드를 외부에 공개하지 말라고 되어 있어서.. 프로젝트 조건과 하면서 구글링으로 찾았던 부분들을 간단하게 정리했다. 정말 간단한 HOMEPAGE인데도 CSS 배치를 하는 부분에서 애를 많이 먹었다.. 갈 길이 멀다.. 😥 1. 웹 프로그래밍 기초 Project A - HOMEPAGE 웹 백엔드 톰캣서버를 통해서 자기소개 페이지가 동작되야 합니다. (ex http://localhost:8080/aboutme/index.html 에서 노출) 서블릿페이지하나를 생성해서, url을 입력했을 때 시간데이터가 화면에 노출돼야 합니다. 웹 프론트엔드 html layout tag를 사용합니다. classname은 일정한 컨벤션을 유지합니다. 의미에 맞는 tag를 최대한 사용합니다. (div 사용은 최대한 자제) pos..
1. 웹 프로그래밍 기초 5. Servlet - BE 1) Servlet이란? 자바 웹 어플리케이션(Java Web Application) WAS에 설치(deploy)되어 동작하는 어플리케이션 자바 웹 어플리케이션에는 HTML, CSS, 이미지, 자바로 작성된 클래스(Servlet도 포함됨, package, 인터페이스 등), 각종 설정 파일 등이 포함 서블릿이란? 자바 웹 어플리케이션의 구성요소 중 동적인 처리를 하는 프로그램의 역할 서블릿을 정의해보면 서블릿(servlet)은 WAS에 동작하는 JAVA 클래스 서블릿은 HttpServlet 클래스를 상속받아야 함 서블릿과 JSP로부터 최상의 결과를 얻으려면, 웹 페이지를 개발할 때 이 두 가지(JSP, 서블릿)를 조화롭게 사용해야 합니다. 예를 들어, ..
1. 웹 프로그래밍 기초 4. 개발환경 설정 - BE Java Code Conventions (프로그래머들끼리의 약속) 클래스명 : 첫글자를 대문자로 프로젝트명, 패키지명 : 소문자 Apache Tomcat이란? 아파치 톰캣(Apache Tomcat)은 아파치 소프트웨어 재단(Apache Software Foundation, ASF)에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다. 컴퓨터에 운영체제를 설치해야만 컴퓨터를 사용할 수 있는 것처럼, 자바를 이용하여 작성된 웹 어플리케이션은 WAS가 있어야만 실행할 수 있습니다. 이때 가장 많이 사용되는 WAS가 아파치 톰캣이라고 말할 수 있습니다. 강의가 꽤나 오래 전 강의라 바뀐 부분이 많아서 댓글을 보면서 ..
1. 웹 프로그래밍 기초 3. CSS - FE 1) CSS 선언방법 CSS 구성: selector { property: value; } 적용 방법 inline: HTML 태그 안에 적용. 다른 CSS 파일에 적용한 것보다 가장 먼저 적용 internal: head안에 style 태그로 지정. 유지보수 어렵. 별도의 CSS 파일 관리하지 않아도 되며 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없음. external: 외부파일로 지정. 가급적 이 방법으로 구현하는 것이 가장 좋음. internal과 external은 우선순위 동일 -> 나중에 선언된 속성 반영 2) 상속과 우선순위 결정 상위에서 적용한 스타일이 하위에도 반영된다. (색상, 글자 크기 등) box-model이라고 ..
1. 웹 프로그래밍 기초 2. HTML - FE 1) HTML Tags 2) HTML Layout 태그 header section nav footer aside 3) HTML 구조설계 유튜브 드림코딩 강의에 잘 설명되어 있음.. 4) class와 id 속성 id 고유한 속성, 하나하나에 특별한 제어가 가능하고 검색에 용이 class 중복해서 사용 가능. 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열 가능 전체적인 스타일을 일관성있게 지정하기 위해 사용 보통 회사마다 개발단계에서 약속을 만들어 자기들만의 규칙 사용. id 사용을 금하고 class만 사용하기도..
www.boostcourse.org/web316 웹 프로그래밍(풀스택) 부스트코스 무료 강의 www.boostcourse.org 부스트코스의 웹 프로그래밍(풀스택) 강의를 들으면서 개인적으로 정리한 내용입니다. 사실 정리라기 보다 강의를 조금이라도 열심히 듣기 위해.. 거의 옮겨젹은 거라고 볼 수 있겠네요..😅😅 typora를 이용해서 .md파일로 작성했는데 티스토리로 옮기는 과정에서 많이 깨져서.. 아직 원인을 찾는 중입니다... 1. 웹 프로그래밍 기초 1. Web 개발의 이해 - FE/BE 1) 웹 프로그래밍을 위한 프로그램 언어들 저급언어: 기계 중심의 언어, 기계어(Machine Language) 고급언어: 사람 중심의 언어 컴파일러: 고급언어를 저급언어로 번역하는 과정(컴파일)을 수행하는 도구..
