로그인/회원가입
컴퓨터 공부하는 곳

Dev-Tino

by 서상진

다른 컬렉션 보기
포스트
32개
최신화부터
1화부터
  • Dev-Tino 8주차(4):: React Hook이란?

    useEffect, useCallback, useMemo, useState, useContext

    React 컴포넌트의 생명주기 리액트의 컴포넌트는 라이프 사이클(생명주기)가 존재한다 Mount(생성될 때), Update(업데이트할 때), Unmount(제거할 때) 세 가지로 나뉜다. -Mounting: DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 한다. -Updating: 컴포넌트가 업데이트될 때를 말하며, props, stat

    컴퓨터 공부하는 곳
    2024.08.16
    8
  • Dev-Tino 8주차(3):: map 함수를 사용할 때 key를 사용해야 하는 이유

    react key 속성, map() 함수,

    본 게시글은 위 문서를 참고하였다:: map과 함께 사용하는 key props react에서는 list를 렌더링하기 위해 map 메소드를 함께 사용한다. 리턴하는 가장 바깥쪽 JSX props로 key 값을 입력하지 않으면 ‘Warning': Each child in a list should have a unique “key” props’ 경고를

    컴퓨터 공부하는 곳
    2024.08.16
    7
  • Dev-Tino 8주차(2):: HTTP란?

    HTTP 메소드 5가지 차이점과 특징, JS에서 API 호출하는 법

    HTTP:: (HyperText Transfer Protocol) 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고, 웹 서버는 HTTP 응답으로 응답한다. 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환한다. 간단히 말해, HTTP 프

    컴퓨터 공부하는 곳
    2024.08.15
    7
  • Dev-Tino 8주차(1):: 마크다운 문법 조사

    작은 프로젝트를 위해 Github을 사용한 적이 있다. 좋은 기회였다. Github과 Github Action의 사용법을 익히기 위한 프로젝트로 프로젝트의 주제는 자유롭게 택할 수 있었으나, 프로젝트의 소개와 내용만큼은 Readme 파일에 작성해야 했다. .README 파일 Github 프로필, 혹은 Repository에 대한 설명을 담기 위

    컴퓨터 공부하는 곳
    2024.08.14
    6
  • Dev-Tino 7주차(4):: CSS의 인라인 스타일, 내부 스타일, 외부 스타일

    <!DOCTYPE html> <html lang="ko"> <head> </head> <body> <div id="headerDiv"> 환영합니다 <b class="Developer">개발자님에게는</b> <b>공부</b>가 필요하세요 </div> <div id="bodyDiv"> 스타일을

    컴퓨터 공부하는 곳
    2024.08.08
    5
  • Dev-Tino 7주차(3):: react state란? 사용법과 사용 이유!

    라디오 버튼 그룹을 통해 어떤 버튼을 누르느냐에 따라 서버에 다른 정보를 부여하고 싶다고 하자. 그런 경우 나는 변수를 사용할 것이다. 어떤 버튼이 눌렸는지, 혹은 페이지가 변경되었는지를 확인하고 그 변수값을 직접 변경시키는 식으로 위 알고리즘을 구현할 것이다. 그러나 리액트에서는 이런 식으로 알고리즘을 짜면 안된다. 1. 리액트는 일반 변수는 바뀌더

    컴퓨터 공부하는 곳
    2024.08.08
    7
    1
  • Dev-Tino 7주차(2):: CSS 박스 모델

    CSS에 포함되는 모든 요소의 외장은 박스이다. 이 박스를 이해하는 것은 CSS를 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠이다. 이번 포스팅에서는 CSS의 박스 모델과 박스의 작동 방식, 그리고 박스와 관련된 용어에 대해 이해하도록 노력한다. CSS 박스 모델 문서의 레이아웃을 계산할 때, 브라우저의

    컴퓨터 공부하는 곳
    2024.08.08
    6
  • Dev-Tino 7주차(1):: 리액트 프로젝트 폴더 구조

    최근에는 리액트에 대해 공부하고 있다. 아직까지 리액트를 본격적으로 배우지는 않았고, 리액트를 공부하는 데에 필요할 기본적인 지식을 공부하며 정리하는 데에 많은 시간을 쏟고 있다. 지금 이 포스트도 그 맥락이다. 리액트를 사용하기 위해서는 리액트의 구조에 대해 알아야 한다. 그 뿐만 아니라 우리는 ‘프로젝트 폴더 구조 설계’ 에 대해서도 공부해야 한

    컴퓨터 공부하는 곳
    2024.08.08
    2
  • Dev-Tino 6주차(3):: JSX란?

    const element = <h1>Hello, world!</h1>; 위와 같은 문법이 있다. 이는 문자열이나 HTML이 아니다. ‘JSX’라 불리는, 자바 스크립트를 확장한 이 문법은 UI가 어떻게 생겨야 하는지를 설명하기 위해 React와 함께 사용할 것을 권장한다. JSX는 React 엘리먼트(element)를 생성한다. JSX -JSX

    컴퓨터 공부하는 곳
    2024.08.04
    8
  • Dev-Tino 6주차(2):: CSS 선택자란? 선택자 문법.

    CSS란? CSS(Cascading Style Sheet), 웹 페이지를 꾸미기 위해 작성하는 코드. 이는 프로그래밍 언어(*컴퓨터에서 작동하는 소프트웨어를 만들기 위한 도구, 파이썬 등이 있다)나 마크업 언어(*태그<>를 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지, html이 대표적 예시이다.)는 아니다. 이는 Style sheet

    컴퓨터 공부하는 곳
    2024.08.04
    6
  • Dev-Tino 6주차(1) :: HTML이란? 태그란?

    지금 당장 F12를 눌러보자. 콘솔창 하나가 딱 뜬다. (이는 ‘개발자 도구’ 창으로 스크립트를 실시간으로 실행하거나 로컬에서 변경 가능하다.) 그 곳의 요소창을 누르면 보이는 것은 꺽쇠 괄호(표준어는 홑화살괄호이다.) 와 영문을 알 수 없는 문자들이다…. 이건 HTML로 이루어진 코드이다. HTML, 웹을 이루는 데에 꼭 필요한 요소. HTML HTM

    컴퓨터 공부하는 곳
    2024.08.04
    7
  • Dev-Tino 5주차(3):: 프레임워크와 라이브러리

    내가 아는 교수님께서는 소프트웨어의 개발을 늘 ‘집 짓기’에 비유하셨다. 땅을 단단하게 고른다(기반을 쌓는다.). 집을 짓는 데에 필요한 도구를 결정하고 재료를 준비한다. 기본적인 뼈대를 만들어 세우고(큰 틀 잡기) 외벽을 짓는다. 마지막으로 속을 채운 뒤 계속해서 유지 보수하면 완벽하다. 프레임워크와 라이브러리는 ‘집 짓기에 필요한 도구’이다. ‘

    컴퓨터 공부하는 곳
    2024.07.27
    3
  • Dev-Tino 5주차(2):: Node.JS vs 브라우저 환경

    둘의 차이점, 브라우저 정의 Node.JS, 둘의 차이.

    Node JS에 대한 것은 이 쪽을 참고한다:: https://withglyph.com/fleshgolem_com/1028311983 저번 게시글에서 Node.JS에 대해 이야기하였다. 자바 스크립트를 실행시키는, V8 엔진으로 만들어진 런타임 환경 Node JS는 브라우저에 종속적이던 JS를 브라우저 환경이 아닌 곳에서도 작동시키려는 시도, 서비스이

    컴퓨터 공부하는 곳
    2024.07.27
    4
  • Dev-Tino 5주차(1):: Node.js란? / Node.js 설치법

    Node.js 설치법

    Node. JS 자바 스크립트를 실행시키는 런타임 환경, V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 핵심 키워드:: -구글 V8 자바스크립트 엔진 -고성능 네트워크 서버 -단일 쓰레드 이벤트 루프 기반 -비동기 I/O 처리 -자바스크립트 -개발 생산성 향상 -방대한 모듈 제공(NPM) 이전의 JS(Ja

    컴퓨터 공부하는 곳
    2024.07.26
    3
  • Dev-Tino 4주차:: Git 3 way merge

    2학년이 될 때까지는 github을 만들어 포트폴리오를 쌓으라는 말만 들었지, co-op한 적이 없어 github을 쓴 적이 없었는데. 3학년으로 올라오니 github을 이용하여 과제 할 일이 정말 많았다. merge와 rebase를 급하게 배우고 적용했다. conflict 오류도 자주 냈다. 다른 것도 있지만 어떤 부분을 작업할지 (역할 분담)를 제대로

    컴퓨터 공부하는 곳
    2024.07.19
    3
  • Dev-Tino 4주차(2):: JavaScript에서의 코딩 스타일, 코드 리팩토링

    리팩토링-화살표 함수를 사용하여.

    문체가 있고 그림체가 있듯이 코딩에도 스타일이 있다. 회사마다, 프로젝트마다 자기 나름대로의 코딩 규범이 있고, 오류와 conflict를 막기 위해 우리는 그 코딩 규범을 제대로 지켜야 한다. 그 관점에서 보면 나는 다른 분들에 비해 부족하다. 코딩 규범에 대해 제대로 찾아본 적이 없기 때문이다. 이번 글에서는 JavaScript의 코딩 규칙을 알아보고

    컴퓨터 공부하는 곳
    2024.07.19
    4
  • Dev-Tino 4주차(1):: JavaScript 화살표 함수란?

    화살표 함수 사용법과 주의점

    화살표 함수란? 함수 표현식에 대한 간결한 대안. ES6에서 도입되었으며 자바 스크립트에서 사용하던 기존의 함수 선언식이나 함수 표현식에 비해 간결하고 쉽게 함수를 표기하기 위해 고안되었다. 함수를 쓰긴 써야 하는데 내용이 너무나도 짧은 경우가 있다. function 키워드를 넣기에는 아쉽고, 그렇다고 함수로 선언하지 않기에는 좀 내용이 있는 경우

    컴퓨터 공부하는 곳
    2024.07.18
    3
  • Dev-Tino 3주차(5):: JavaScript 기본 문법, ES6에 추가된 문법

    자바스크립트, 자바스크립트 문법 특징, 자바 스크립트 기본 개념, 자바스크립트 추가된 개념

    많은 이들이 알고 있듯, 자바스크립트는 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당하도록 하는 언어이다. 이언어는 HTML이나 CSS와 달리 C언어, 자바와 같은 일반 프로그래밍 언어와 비슷한 구조를 가진다. 기본 문법에 대해서는 이런 유튜브나 시판의 책을 참고하도록 하자. 자바스크립트는 객체 기반의 스

    컴퓨터 공부하는 곳
    2024.07.15
    4
  • Dev-Tino 3주차(4):: git 관련 용어, 상태, 명령어들

    git......

    나는 github을 처음 써보았을 때 터미널이나 cmd 대신 응용 프로그램의 UI를 이용하였다. 내 첫 단체 프로젝트는 안드로이드 스튜디오를 이용한 작업이었고, 안드로이드 스튜디오는 github 계정을 연결한 이에 한하여 간단한 클릭 몇 번으로도 commit하고 push할 수 있도록 인터페이스를 제공하기 때문이었다. 이런 식인데, 이게 여간 편리한 게

    컴퓨터 공부하는 곳
    2024.07.15
    3
  • Dev-Tino 3주차(3):: JavaScript의 비동기 처리 방식(Promise, async, await)

    앞부분에서 동기/비동기식에 대하여 간략히 설명하였다. SW에서의 비동기에 대해서는 아래 게시글을 참고한다:: JavaScript는 싱글 스레드 언어(*한 번에 하나의 작업만을 수행할 수 있는 언어. 다른 작업이 중간에 끼어들 수 없으며 기존에 수행하던 작업이 끝나야만 그 다음 작업을 수행할 수 있다.)로 한 번에 하나의 작업만 수행할 수 있다. 이전 작업

    컴퓨터 공부하는 곳
    2024.07.12
    7
  • Dev-Tino 3주차(2):: 동기/비동기, 블로킹/논블로킹

    동기, 비동기, 블로킹, 논블로킹, AJAX

    서문:: 시작하기에 앞서 초등학교 과학 수업 시간에 전구와 회로에 대해 배운 적이 있을 것이다. 전구의 직렬, 병렬 연결에 대한 것이다. 전구 뿐만 아니라 전지도 직렬, 병렬 연결을 한다. 이것저것 순서를 바꾸어 다양한 방식을 시도하는 것이다. 직렬 연결은 각 요소를 한 줄에 연결하는 것이고(하나가 망가지면 다른 것도 망가진다.) 병렬 연결은 각 요소를

    컴퓨터 공부하는 곳
    2024.07.11
    4
  • Dev-Tino 3주차(1):: DOM과 Virtual DOM

    html, DOM, JS, javaScript

    사이틀르 만들기 위해서는 html, CSS, JS(*javascript)따위를 이용하여 긴 문서를 작성해야 한다. 이미지가 하나도 없는 줄글을 입력하면 멋진 사이트가 실행된다. 이게 어떻게 가능한걸까? 이 ‘멋진 사이트’를 만들기 위해, 서버는 리소스를 파싱(*데이터 처리 과정에서 일어나는 변환 작업을 지칭하는 범용적인 용어, 다양한 문맥에서 사용될 수도

    컴퓨터 공부하는 곳
    2024.07.11
    10
  • Dev-Tino 2주차(4)::XML, JSON, YAML

    YAML이란? 구성파일을 작성하는 데에 일반적으로 사용되는, 사람이 읽을 수 있는 다목적 직렬화 언어이다. 효율적인 데이터 표현과 가독성을 보장하기 위해서는 YAML 파일에 사용되는 구조와 데이터 유형 및 규칙을 이해하는 것이 중요하다. -데이터를 한 줄에 실어 보내는 것이 아니라 사람이 보기 좋게 작성하는 데에 목적을 둔다. -파이썬과 같이 줄바꿈과

    컴퓨터 공부하는 곳
    2024.07.03
    4
  • Dev-Tino 2주차(3):: Javascript란?

    자바랑 자바스크립트랑 비슷한 거 아녀?

    이는 자바와 다르다… 자바스크립트란? 웹 개발을 위한 프로그래밍 언어의 일종으로 HTML과 CSS 언어를 업데이트하거나 바꿀 뿐만 아니라 데이터를 계산하고, 다루거나 확인할 수 있는 언어이다. 웹페이지에 생동감을 불어넣기 위해 만들어졌다. 이를 통해 작성한 소스 코드를 스크립트(script)라고 부른다. 특별한 준비나 컴파일 없이 보통의 문자 형태로 작

    컴퓨터 공부하는 곳
    2024.07.03
    4
  • Dev-Tino 2주차(2)::Git workflow

    앞서 git에 대한 설명을 하였다. 이 곳에서는 git을 사용하며 알면 좋은 workflow에 대해 설명한다. workflow의 사전적 정의는 다음과 같다:: ‘작업 절차를 통한 정보 또는 업무의 이동’ (위키피디아) 공식에서는 다음과 같이 git에 대한 설명을 친절하게 진행하지만:: 언어 장벽이 접근을 어렵게 만든다… 한국어를 주로 쓰는 우리는

    컴퓨터 공부하는 곳
    2024.07.03
    4
  • Dev-Tino 2주차(1):: Git/Github

    포트폴리오는 꼭 여기에 만들라고 항상 이야기 듣는 것

    3학년이 되며 늘 들은 소리가 바로 이것이다. ‘Github 계정을 만들라’! Github이란 뭘까? Git은 무엇일까? Git이란? Git이란 일종의 ‘분산 버전 제어 시스템’(Distributed Version Control System)이다. 프로젝트의 로컬 복제본이 완전한 ‘버전 제어 레포지토리’라고 생각해도 좋다. 오프라인으로, 원격으로 쉽게 작

    컴퓨터 공부하는 곳
    2024.07.03
    7
  • Dev-Tino 2주차::UX (User eXperience)란?

    User Experience가 아니라 User eXperience라니...

    UX는 UI와 항상 붙어 나오는 단어이다. User Experience(사용자 경험)이란 ‘사용자가 어떤 시스템, 제품, 서비스를 직-간접적으로 이용하며 느끼고 생각하게 되는 총체적 경험’을 이른다. Adobe사는 이를 ‘사람들이 제품과 상호작용하는 방식’이라 표현한다. “를 들어, 방의 불을 켜고 싶을 때는 전등 스위치와 상호 작용을 하게 됩니다. 색

    컴퓨터 공부하는 곳
    2024.07.02
    3
  • Dev-Tino 2주차:: 인터페이스-API

    인터페이스에 대해 이야기를 나누던 도중 API에 대한 이야기가 나왔다. 인터페이스에 대해 찾아보다보면 API에 대해 알 수밖에 없다고 말이다. 그 정도로 그 둘은 밀접한 관련이 있다는 말을 들었으나, 나는 API와 인터페이스랄 것이 별개의 것이라고 여기고 살았던지라 그에 대한 이야기와 그 중요성을 그냥 보고도 넘겼던 것 같다. 이 장에서는 그렇게 전

    컴퓨터 공부하는 곳
    2024.07.02
    3
  • Dev-Tino 1주차(4)::MPA와 SPA

    MPA, SPA, multi page application, single page application, CSR... SSR...

    본 게시글은 https://dilshankelsen.com/single-page-applications-vs-multi-page-applications/ 을 많이 참고하였다 이 게시글을 보기 전에 다음을 참고하면 좋다:: 일반적으로 많은 웹 페이지는 MPA 형식으로 구현되었다. 한 페이지에서 다음 페이지로 넘어가기 위해 새로 html 페이지를 만드는

    컴퓨터 공부하는 곳
    2024.06.28
    4
  • Dev-Tino 1주차(3):: CSR/SSR

    CSR, SSR, Client Side Rendering, Server Side Rendering, HTML에서의 렌더링

    글리프에도 사진 사이즈 조절이 있었음 좋겠다 렌더링 웹사이트를 사용자에게 보이기 위해 우리는 렌더링을 거쳐야만 한다. 렌더링이란 일반적으로 컴퓨터 프로그램을 사용하여 2D 또는 3D 모델에서 사실적인 이미지(photorealistic) 또는 사실적이지 않은 이미지(non-photorealistic)를 생성하는 프로세스이다. 이는 위키피디아의 정의로 대다수

    컴퓨터 공부하는 곳
    2024.06.28
    10
  • Dev-Tino 1주차(2):: 프론트엔드, 백엔드(Front-end, Back-end)

    프론트 엔드, 백 엔드, FrontEnd BackEnd 차이점, 프론트엔드 백엔드 특징

    저번 내 과제가 딱 이 모양 이 꼴이었다 프론트엔드, 백엔드 웹 개발에 대해 배울 때 제일 먼저 배우는 개념 둘. ‘프론트 엔드’와 ‘백엔드’. 나는 부끄럽게도 둘에 대해 제대로 탐구하지 않아 겉핥기정도로만 기억하고 있었다. 프론트 엔드는 ‘사용자와 상호작용하는 UI/UX’,백엔드는 ‘프론트엔드에서 받은 정보를 정리하고 저장하는 데이터 베이스’…. 정

    컴퓨터 공부하는 곳
    2024.06.28
    6
  • Dev-Tino 1주차(1):: 인터페이스(Interface)

    인터페이스, Interface, 인터페이스의 정의

    게시글의 내용과 관련이 있거나 없거나.. 본 게시글에서는 인터페이스에 대한 개념을 정리해본다. 내가 알고 있던 ‘인터페이스’는 자바의 인터페이스이다. 나는 개념을 학교의 첫 학기, 자바 수업의 중간고사를 본 이후에야 제대로 배웠다. ‘클래스들이 구현해야 하는 동작을 강제하는 일종의 추상 클래스.’ 그것이 내가 알고 있던 ‘인터페이스’의 모든 것이었다.

    컴퓨터 공부하는 곳
    2024.06.28
    5
글리프 소식
고객센터
  • (주)펜슬컴퍼니
  • 대표: 배준현
  • 개인정보관리책임자: 배준현
  • 사업자등록번호: 610-88-03078
  • 주소: 서울특별시 강남구 강남대로100길 14, 6층
  • 전화: 02-565-7695
개인정보처리방침
이용약관
통신판매업신고: 2023-서울강남-4541