# Web Programming

baekseojin

1. StyledComponent가 뭔데...? > 스타일드 컴포넌트(Styled Components) 는 리액트의 라이브러리 중 하나다. 말 그대로 컴포넌트의 스타일을 지정해주는 문법으로, React에서 CSS를 적용하는 방법 중 널리 사용되는 한 가지이다. 2. StyledComponent 사용 방법 > 그래서 StyledComponent를 어떻게 사용하냐면,, (1) StyledComponent 라이브러리 설치 > 일단 먼저 자신의 프로젝트에 StyledComponent 라이브러리를 설치한다. (2) StyledComponent 생성 > StyledComponent를 생성할 때는 styled 함수를 사용한다. > 여기서 주의할 점

7r0a_niiiii

💡 초심으로 돌아가 개발 기초를 되새기기 위해 작성합니다. Java 객체지향 언어 하드웨어나 운영체제에 영향을 받지 않음 Servlet Container Servlet과 JSP를 실행할 수 있는 환경 웹 서비스의 기능 기본적으로 포함 자바로 개발 Apache Tomcat은 웹 서버 소프트웨어 중 하나로 Servlet Container Servlet 자바를 이용한 서버 프로그래밍 기술로 웹 환경에서 자바를 사용하기 위해 등장 자바 플랫폼에서 컴포넌트를 기반으로 하는 웹 애플리케이션을 개발할 때 사용하는 핵심 기술 (컨테이너인 톰캣에 의해 관리되는 웹 애플리케이션) 웹 애플리케이션 확장 용이, 독립적 플랫폼으로 개발 가능 장점

mhlee5894

✔ ToDo List 개발 시 주의사항 개발을 할 때는 Back, Front를 각각 만들고 각각 테스트를 해서 완성해야 한다. 이후, 둘을 연결하는 작업을 합니다. 한번에 하려고 하면 Back, Front, 둘의 통신 중에서 어디서 문제가 생긴지 모릅니다. App.js에서 여러 개의 데이터를 생성해서 출력하기 > 위에 주석에서 써두었지만, map(python -> list comprehension, lambda)는 죽어도 기억해야 한다. 모양이 별로인 것 같다. ToDo.jsx를 수정해보자. material ui를 적용한 ToDo.jsx > JS 의 신기한 문법 - 조건이 false이면 아무 일도 하지 않고, true이면 뒤의 실행문을 수행함 Java boolean 은 true, flase 만 가능 $\rarr$ and, or에는 무조건 true, false 하지만 Python, JS 에

mhlee5894

✔ Ajax 비동기적으로 서버에 데이터를 요청하는 것 최근에는 웹 서버와 웹 클라이언트를 별개의 프로그램으로 구현하기 때문에, 웹 클라이언트에서 웹 서버로 데이터를 요청해서 응답을 받아 출력하는 형태로 작성합니다. > 수행 흐름 입니다. 목적 다른 부분에 영향을 주지 않고 UI를 실시간으로 갱신하는 것 작업 과정 > 요청 $\rarr$ 응답 $\rarr$ 응답받은 데이터를 파싱 $\rarr$ 사용 요청 파라미터를 어떻게 전송하고 전송 방식은 어떻게 할 것인가? 파싱 일반 Flat File, XML, JSON 중 어떤 형태인가? JSON이 최근에 많이 사용됨 ✔ FORM에 데이터를 입력받아서 삽입하기 ajax.html 수정 > HTML BODY에 form태그 생성 name을 Serializer랑 동일하게 해야 한다. 스크립트 부분

mhlee5894

✔ Django REST API API(Application Programming Interface) 프로그램과 프로그램을 연결시켜주는 매개체 데이터의 형태로 제공될 수도 있고, 함수나 클래스 또는 패키지, 프레임워크 형태로 제공될 수 도 있습니다. OPEN API API를 누구나 사용할 수 있도록 공개한 것 CSR(Client Side Rendering) API Server는 화면 구성은 하지 않고 데이터만 제공하며, 클라이언트 프로그램에서 데이터를 받아 화면 출력을 하게 됩니다. 이런 구조를 CSR이라고 합니다. API Server구축을 할 때, Restful하게 구성하는 것을 권장 REST REpresentational State Transfer의 약자 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 종류 원칙 > 인터페이스 일관성 어떤 기기에서 접근을 하던,

mhlee5894

✔ Django 가상 환경 프로그램을 독립적으로 실행할 수 있는 환경 C와 Python은 컴퓨터에 C나 Python이 설치되어 있지 않아도 실행이 가능 소스 코드와 라이브러리를 합쳐서 별도의 실행 프로그램을 생성하기 때문 Java는 JDK(자바가 제공하는 API)의 라이브러리는 포함시키지 않고 실행 프로그램을 생성하기 때문에, Java 프로그램을 실행하기 위해서는 반드시 JDK가 제공하는 라이브러리가 컴퓨터에 존재해야하는데, 이것을 **JRE(Java Runtime Environment)라고 합니다. 명령어로 가상 환경 생성 Django 설치 및 프로젝트 생성과 실행 Django 설치 : pip install django 가상 환경을 사용하지 않으면 한 번만 설치하면 됩니다. django 프로젝트 생성 django를 사용할 수 있도록 디렉토리를 생성합니다. - 은 현위치 이 때,

baekseojin

1. local storage > ### (1) local storage란? local storage는 웹 브라우저에서 제공하는 데이터 저장소다. > ### (2) local storage의 특징 local storage는 사용자의 로컬 컴퓨터에 데이터를 저장하므로, 페이지를 새로고침하거나 브라우저를 닫아도 데이터는 유지된다. local storage는 키-값 쌍으로 데이터를 저장한다. 각각의 키-값 쌍은 문자열 형태로 저장되며, 자바스크립트를 사용하여 이러한 데이터에 접근하고 수정할 수 있다. 로컬 스토리지는 일반적으로 브라우저의 JavaScript API인 localStorage 객체를 통해 사용된다. local storage는 세션과 관련된

baekseojin

1. useEffect란?🧐 > #### useEffect의 개념 useEffect는 React에서 제공하는 Hook으로, 외부 시스템을 통해 컴포넌트를 동기화할 수 있게 해준다. 2. useEffect 왜 쓰는 건데...?🤷 > #### useEffect를 사용하는 이유 너무 오래걸리는 함수의 경우 UI 렌더링을 블록킹 할 수 있다. => useEffect는 렌더링이 다 끝나고 읽기 시작하기 때문에 이런 문제를 보완해 줄 수 있다. component 안에 바로 함수를 넣으면 리렌더링 될 때마다 매번 실행된다. debugging 용도로도 사용 할 수 있다. 3. useEffect 어떻게 쓰는 건데...!!!😲 > #### useEffect 사용 방법

baekseojin

1. 활용 1 > ### user를 state로 만들고 props 전달시켜서 렌더링 시키기 > ### 활용 1 결과 props.user에 아저씨가 렌더링되었다! 2. 활용 2 > ### 1. boxes에 있는 정보를 이용해서 on인 애들은 배경 검은 색 만들고 아닌 애들은 흰색 만들기 2. box 클릭하면 색깔 토글시키기 > ### 활용 2 결과 ![](https://velog.velcdn.com/images/baekseojin/post/c53fbe63-1

baekseojin

1. useState란? > useState를 알아보기 전에 먼저 state에 대해 알아야 할 필요가 있다. state는 간단하게 생각하면 변수이다. state는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. state는 변수이다. setState는 state를 변경시켜주는 함수이다. useState는 state, setState를 return 하면서 초기값을 설정해주는 hook이다. > 정리하자면, useState는 reack Hooks 중 하나로, 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해 주는 도구를 제공해 준다. 1-1. 왜 useState 를 사용할까? > 유동적이지 않은 데이터를 저장할 때는 var,

mini_mouse_

줄바꿈 word-break, 글자 흘러넘침 word-wrap 속성 정리 word-break 박스 내에 텍스트를 뿌릴 때 가끔, 글 길이가 너무 길면 내가 의도했던 디자인과 다르게 보기싫게 글이 박스 밖으로 삐져나올 때가 있다! ⇒ 그럴 때 써주는 css 속성이 word-break 이다. word-break 속성 종류 word-break: normal; word-break: break-all; word-break: keep-all; normal ( 기본값 ) 기본 줄 바꿈 규칙 ( 텍스트가 길면, 박스 밖으로 삐져나온다 ) break-all 텍스트가 문자( 글자 하나하나 )단위로 잘려 아래로 줄바꿈된다 ( 글자단위가 의미없다면 주로 이거) keep-all 한중일(CJK) 텍스트에서는 단어단위로 잘려 아래로 줄바꿈된다 ( 단어 단위로 끊어져 있는게 나을 것 같다면 이걸 쓰자) word-wrap word-wrap word-w

baekseojin

1. map() 함수 > map 함수란? map 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수다. 1-1. map() 함수 기본 사용법 numbers 배열 객체를 선언하고 [1,2,3,4,5] 로 초기화하였다. map() 함수를 통해 배열 요소의 각 값에다가 * 2 를 한 결과를 return 하고 있다. result 배열 객체에는 [2,4,6,8,10] 의 결과값을 가지는 배열객체가 반환되게 된다. 2. map() 을 통해 컴포넌트 반복하기 위 코드에서 items라는 배열을 만들고, map() 함수를 사용하여 각 항목에 대한 `` 태그를 생성하여

baekseojin

1. Props란? > props는 properties의 줄임말로, 컴포넌트끼리 값을 전달하기 위한 수단이다. props는 수정할 수 없다. (Read-Only) 2. Props 사용방법 > 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 2-1. 1개의 props 넘기기 > 출력결과 안녕하세요. 백서진 입니다. 2-2. 2개의 props 넘기기 > 출력 결과 안녕하세요. 백서진 입니다. javascript의 비구조화 문법을 사용하여 props를 다음과 같이 생략 가능하기도 하다. <h

baekseojin

0. React Project 시작하기 1. React란? > #### React 소개 React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있다. 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다. > #### React 특징 1. JSX 2. 컴포넌트 3. Virtual Dom 4. 단방향 데이터 바인딩 수업내용 1 : 리액트 코드 맛보기 1-1. JSX(JavaScript Syn

baekseojin

🤔 본문에 앞서, ES6란? > ES란, ECMAScript의 약자로 자바스크립트의 표준, 규격을 나타내는 용어이다. 뒤에 숫자는 버전을 뜻하고 ES5는 2009년, ES6은 2015년에 출시되었다. ES6을 사용하면, 한결 코드가 간결해지고 생산성이 향상되기 때문에 사용을 권장한다. 1. 변수 선언 방식(var, let, const) > var는 재정의와 재선언 모두 가능하다. let은 가변 변수로 재정의가 가능하지만 재선언은 불가능하다. const는 불변 변수로 재선언과 재정의 모두 불가하다. 다만, var는 예기치 못한 값을 반환할 수 있는 등 여러 문제점들이 있어 잘 사용하지 않으며, let과 const 키워드를 사용하

shdrnrhd113

✏️ WWW - World Wide Web 하이퍼텍스트와 멀티미디어를 통해 서비스를 이용할 수 있도록 구축되어 있다. 사용자끼리 정보를 공유할 수 있는 공간을 의미한다. 인터넷 상의 다양한 정보를 효과적으로 검색할 수 있는 시스템 ✏️ HTTP protocol 요청 (request) 와 응답 (Response) 의 형태로 이루어진 웹 통신 규약 ✏️ Web Server & Client web server - 클라이언트의 요청을 처리하여 응답함 client - 웹 서버에 원하는 정보를 요청함 클라이언트가 웹 서버에 index.html 파일을 요청 웹 서버는 index.html 을 클라이언트에게 응답으로 전송 클라이언트의 웹브라우저는 index.html 파일을 해석해 클라이언트에게 웹 페이지를 보여줌 ✏️ Web Page 클라이언트가 웹 서버에 정보를 요청한 후,

wjdwogns_jay1205

HTML: Hyper Text Markup Language로 웹사이트에서 정보와 구역등을 설정 할 수 있습니다. > 현재는 HTML5의 버전을 사용하고 특징은 semantic한 언어입니다. 기본적인 태그: HTML의 문법 형태는 아래와 같습니다! `` 태그 : 이미지를 삽입하는 태그! `` 태그는 닫아주는 태그 없이 사용합니다~! src 속성은 source 로써 파일 경로를 불러오고, alt 속성은 이미지가 어떤이유로 출력 되지 않을 경우, 이미지의 설명 텍스트가 대체되어 출력되는 역할을 합니다. `` 태그 : 블록 요소 Heading 즉 제목이나 부제목 표현할때 쓰입니다. ``태그는 가장 큰 제목이기 때문에 하나의 문서에서 반드시 하나만 사용합니다. ``태그 : 블록 요소 본문의 내용을 쓸때 사용합니다! (주요 텍스트 단락을 표현) ``태그 : unorde

ubermensch0608

그런 REST API로 괜찮은가 RESTful API는 소프트웨어 개발에서 많이 사용되는 용어이다. 나도 컴퓨터공학 기초를 배울 때 대략적으로만 배웠을 뿐, 자세히 설명할 수 없었다. 회사에서 프론트엔드 개발자로 일하면서, 내부 API가 일관성과 직관성이 부족하다는 느낌을 받았다. 하지만, RESTful한 API가 무엇인지 몰라서 개선 방법을 요구할 수 없었다. 그러던 중에 네이버 개발자 컨퍼런스에서 발표된 REST API에 대한 영상을 보고, REST API의 의미와 원칙이 도움이 될 것이라 생각하여 더 자세히 알고 싶어졌다. 이 영상에서는 RESTful API가 무엇인지부터, 어떻게 그 철학을 추구할 수 있는지까지 설명하고 있으므로, 참고하면 좋을 것 같다. 네이버 컨퍼런스 - Day1, 2-2. 그런 REST API로 괜찮은가 REST는 무엇인가 REST는 REpresentat

hosunghan0821

글의 목적 > GraphQL이란 것이 무엇인지 알아보고, Client-Server 통신에 사용되는 방식들에 어떤 차이가 있는지 알아보는 글 입니다. GraphQL이란? > Facebook 에서 만든 어플리케이션 레이어 쿼리 언어이다. GQL 은 SQL과 같은 쿼리 언어이다. SQL은 DB, GQL 는 웹클라이언트가 데이터를 서버로부터 가져오는데 사용하는 언어이다. 어떤 특정 플랫폼에 종속적이지 않다. 일반적으로 GQL은 네트워크 레이어의 HTTP POST 메소드와 웹소켓 프로토콜을 활용한다. GraphQL 사용하는 이유 GraphQL의 가장 큰 장점은 Client가 원하는 데이터를 query를 통해 얻을 수 있고, ENDPOINT 하나로 자원들을 관리할 수 있다는 점이라 생각한다. GraphQL 을 사용할 때 어려운점,아쉬운점 GraphQL을 사용할 때, Clinet가 무분별하게 쿼리를 요청할 경우,

hosunghan0821

글의 목적 > 이전 개인프로젝트에서 공부하고 사용했던 WebRTC 기술에 대해서 다시 리마인드를 하는 글 입니다. 사용한 기술 스택 Client : Android Webview (ChromeClient) Signaling Server : Node.js + Socket.IO 키워드 정리 >WebRTC(Web Real Time Communication) : WebRTC는 서버를 최대한 거치지 않고 P2P로 브라우저나 단말 간에 데이터를 주고받는 기술의 웹표준이다. 웹에서 실시간 미디어 스트림을 송수신할 수 있는 유일한 표준이고, 또유일한 P2P 표준이다. WebRTC는 표준임과 동시에 표준을 구현한 오픈소스의프로젝트 이름이다. MCU,Mesh(P2P) :WebRTC 피어간 연결하는 방식을 나타내는 용어이다. ![](https://velog.velcdn.com/images/hosunghan0821/post/c3bbd1fc-10