- 전체보기(131)
- node.js(27)
- React(18)
- JavaScript(18)
- 알고리즘(18)
- db(8)
- algorithm(7)
- 문제풀이(7)
- express(6)
- CSS(5)
- web(5)
- data structure(4)
- API(4)
- mysql(4)
- hooks(4)
- XSS(3)
- js(3)
- component(3)
- browser(3)
- sql(3)
- Fetch(3)
- function(3)
- git(3)
- cors(3)
- ajax(3)
- array(2)
- Graph(2)
- scope(2)
- object(2)
- csrf(2)
- github(2)
- server(2)
- http(2)
- 미들웨어(2)
- Module(2)
- linked list(2)
- 라우터(2)
- queue(2)
- Fetch API(2)
- Web Architectures(2)
- tree(2)
- for loop(2)
- closure(2)
- Hash Table(2)
- this(2)
- Binary Search Tree(2)
- CODESTATES(2)
- Index(2)
- branch(2)
- programming(2)
- ES6(2)
- fs(2)
- gui(2)
- npm(2)
- instance(2)
- protocol(2)
- inheritance(2)
- session(2)
- 서버(1)
- useEffect(1)
- while loop(1)
- px(1)
- for ~ in(1)
- Browser Security Model(1)
- 라우트(1)
- tranition(1)
- package.json(1)
- async(1)
- padding(1)
- class(1)
- while(1)
- module.exports(1)
- exports(1)
- &&(1)
- width(1)
- 고차함수(1)
- ESLint(1)
- UI(1)
- abstraction(1)
- layout(1)
- hoisitng(1)
- stream(1)
- control-flow(1)
- 문자열(1)
- margin(1)
- double linked list(1)
- cli(1)
- 반복문(1)
- https(1)
- Route(1)
- REST API(1)
- json(1)
- working tree(1)
- hash function(1)
- 클로저(1)
- require(1)
- color picker(1)
- if statement(1)
- foreach(1)
- 화이팅(1)
- Buffer(1)
- data type(1)
- Big O(1)
- select(1)
- commit(1)
- new(1)
- State(1)
- chunk(1)
- arrow function(1)
- Javascipt(1)
- DOM(1)
- nvm(1)
- for in loop(1)
- middleware(1)
- styled components(1)
- repository(1)
- button(1)
- html(1)
- hook(1)
- @property(1)
- border(1)
- __dirname(1)
- http vs https(1)
- 명령어(1)
- Table(1)
- 재귀(1)
- form(1)
- pull(1)
- style(1)
- workbench(1)
- blobal scope(1)
- aws(1)
- key&value(1)
- 용어정리(1)
- height(1)
- 변수(1)
- 자료형(1)
- CRUD(1)
- methods(1)
- readFile(1)
- em(1)
- __filename(1)
- promise.all(1)
- 토이(1)
- 생성자(1)
- authentication(1)
- textarea(1)
- Auth(1)
- 클라이언트(1)
- encapsulation(1)
- tag(1)
- routing(1)
- Event(1)
- 정규표현식(1)
- modules(1)
- 배열(1)
- instantiation(1)
- 물레방아(1)
- promise(1)
- Stack & Queue(1)
- 메피스토텔레스(1)
- 자료구조(1)
- Sequelize(1)
- schema(1)
- push(1)
- fs module(1)
- runtime(1)
- framework(1)
- Polymorphism(1)
- OOP(1)
- Box Model(1)
- stack(1)
- react router dom(1)
- commands(1)
- lifecycle(1)
- operator(1)
- 객체(1)
- path(1)
- recursion(1)
- 시간복잡도(1)
- 연산자(1)
- piping(1)
- callback(1)
- AMD(1)
- CommonJS(1)
- 저장소(1)
- call stack(1)
- 1일1문(1)
- MVC(1)
- local scope(1)
- input(1)
- 공간복잡도(1)
- Prototype(1)
- await(1)
[css] styled-components
goalstyled-components로 css 구성하기효용 : 스타일을 입히는 것 + 동시에 + 해당 스타일을 가진 컴포넌트를 만들 수 있다. ex) div 스타일링 : styled.div ex) input 스타일링 : styled.input
[React] 12 - Hooks : useRef
goaluseRef() 에 대해서 알아보자.코드를 통한 비교\-> (button 초기화를 클릭한 후) focus가 name으로 이동하는 것을 확인할 수 있다.
Project1
useEffect( () => { // componentDidMount, componentDidUpdate 역할 return () => { // componentWillUnmount 역할}})
[Auth] session
goalsession에 대해서 알아보자.var session = require('express-session')주어진 옵션으로 세션 미들웨어를 만든다.세션 데이터는 쿠키에 저장되지 않으며, 단지 세션 ID만 저장된다. 세션 데이터는 "서버에 저장"된다.
[DB] sequelize
goalsequelize에 대해서 알아보자.Sequelize는 Postgres , MySQL , MariaDB , SQLite 및 Microsoft SQL Server를 위한 약속 기반 Node.js ORM설치 : npm install --save sequelizeDB
[React] 11 - react-router-dom
goalreact-router-dom을 사용해서 라우트하는 방법을 알아보자.웹 애플리케이션에서 사용하는 모든 구성 요소는 react-router-dom에서 가져와야한다.일반적으로 다음과 같이 라우터에서 최상위 요소를 rapping한다.history API를 사용해서
[React] 10 - Hooks : useEffect (2)
goalreact hook useEffect 에 대해서 알아보자.예를 들어, 외부 데이터에 구독(subscription)을 설정해야 하는 경우, 메모리 누수가 발생하지 않도록 정리(clean-up)하는 것은 매우 중요하다.effect에서 함수를 반환하는 이유는?effe
[React] 10 - Hooks : useEffect (1)
goalreact hook에 대해서 알아보자react component 내에서 데이터를 가져오거나 (예를 들면, fetch를 사용해서 api 정보를 가져오는 등) DOM을 직접 조작하는 (예를 들면, onClick 등을 활용) 동작을 뜻한다.이름의 어원 : 다른 com
[React] 9 - Hooks
goalhook에 대해서 알아보자Hook을 사용하면 component로부터 state 관련 로직을 추상화할 수 있다.따라서 컴포넌트 별로 독립적인 테스트와 재사용이 가능하다. Hook은 계층 변화 없이 state 관련 로직을 재사용할 수 있도록 도와줍니다.
[React] 6 - 이벤트
goal리액트의 이벤트 처리방식에 대해서 알아보자JSX 문법을 사용해서 "함수로 이벤트 핸들러를 전달"한다.preventDefault를 명시적으로 호출해야 한다.
[React] 5 - Component > 컴포넌트의 생명주기
goalcomponent 생명주기의 모든 것모든 컴포넌트는 여러 종류의 “lifecycle methods”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.=> when an instance of a component is being
[React] 4 - Component > state
goalComponent의 모든 것컴포넌트 내부에서는 값을 바꿀 수 없다. 그렇다면 "값을 바꿔야 하는 경우"에는? 여기서 state가 필요하다.리액트에서는 컴포넌트의 상태를 관리하기 위해 state를 사용한다.state는 "값을 저장하거나 변경할 수 있는 객체"로 보
[React] 3 - Component > property
goalComponent의 모든 것기존 웹 프레임워크는 MVC 방식으로 (모델 (=>정보) / 뷰 (=>화면) / 컨트롤러 (=> 구동) ) 3가지로 코드를 분리하여 관리했다.코드를 효율적으로 관리할 수 있지만, 3가지 각 요소들의 의존성이 너무 높아서 조금만 수정하려
[React] 2 - ES6 문법 / Component
goalREACT에 필요한 자바스크립트 ES6문법에 대해서 알아보자.\`\` (백틱)으로 표현하는 문자열나열된 자료를 추출 or 연결시 사용배열 , 객체 { }, 함수인자 표현식 ( ) 에서만 사용한다....으로 표현한다.
[MySQL] 데이터베이스
MySQL 시리즈의 모든 포스팅는 조현영님의 node.js 교과서 (길벗) 를 참고하였습니다. >GOAL What is DB? MySQL 설치 워크벤치 설치 What is DataBase? 서버와 클라이언트의 연결에서 모든 데이터는 변수에 저장되었다. it mea
[Node.js] JSON에 대해
goaljson() 과 JSON.parse, JSON.stringify 헷갈리는 표현 알아보기json() 은 fetch 전용 기능이다.응답을 받을 때, json형태로 받고 싶을 때 사용 (.html, .text 등도 사용가능)객체를 강제로 문자열로 변환하려고 하며 예를