컴퓨터 공부하는 곳

by 서상진

구독자: 0명
포스트: 52개

총 52개의 포스트

[React JS] 객체

한입 크기로 잘라 먹는 리액트: 기초부터 실전까지/객체

본 게시글은 하단의 게시글을 참고하여 작성되었다. 인프런의 리액트 강의를 듣게 되었다. 짧은 시간 멘토링을 통해 배우던 중 리액트에 대한 것을 학습하는 것이 좋다는 이야기를 들어 수강하게 되었다. 초반부의 대부분의 내용이 익숙하였으나 객체에 대한 설명 도중 알지 못하던 내용이 나와 정리하기 위해 게시글을 작성하게 되었다. 내가 제대로 알지 못

컴퓨터 공부하는 곳

2024.09.02
2
이것저것 공부한다:: 코딩 테스트 30

반복문으로 풀 수 있을 것 같았지만, filter을 쓰면 더 쉽게 풀수 있겠다 싶어 새로이 검색해보았다. https://school.programmers.co.kr/learn/courses/30/lessons/181862 구분자 쓰는 문제… function solution(myStr) { var answer = []; var

컴퓨터 공부하는 곳

2024.08.18
3
이것저것 클론코딩한다:: 로그인

인라인 참고하여 다음과 같이 수정 유효성 검사는 이 쪽을 참고 Maximum update depth exceeded 발생…. This can happen when a component calls setState inside useEffecr… useEffect는 dependency array를 가지고 있지 않다고 한다. useEff

컴퓨터 공부하는 곳

2024.08.17
7
Dev-Tino 8주차(4):: React Hook이란?

useEffect, useCallback, useMemo, useState, useContext

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

컴퓨터 공부하는 곳

2024.08.16
7
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
6
Dev-Tino 8주차(2):: HTTP란?

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

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

컴퓨터 공부하는 곳

2024.08.15
6
Dev-Tino 8주차(1):: 마크다운 문법 조사

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

컴퓨터 공부하는 곳

2024.08.14
5
이것저것 공부한다:: 프로그래머스 문제 풀이 50

https://school.programmers.co.kr/learn/courses/30/lessons/120888 중복이 없는 문자만을 배열로 받아, filter로 비교할까!?/1 싶었는데, 이 ‘중복되지 않는 것’을 고르는 것도 어렵고, filter 메소드도 잘 모르니 우선 filter 메소드부터 찾아보기로 했다. filter 메소드:; Arra

컴퓨터 공부하는 곳

2024.08.12
1
이것저것 공부한다:: CSS React 클론 코딩 간단 정리용

스터디 시간에 본 코드를 받았다. 1) 기본적인 디자인을 수정하여 위와 같이 정리 2) hover시에 줄거리(overView)가 뜨도록 정리 3) 다섯개 즈음에서 잘라 여러 층을 이루도록 구현… 을 인라인 스타일로 구현해야 했다. CSS의 다양한 스타일을 다뤄본 적이 없던 것은 아니지만, CSS를 react로, 인라인으로 다뤄본 것은 처음이라(평소에는 외

컴퓨터 공부하는 곳

2024.08.10
1
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
5

1
Dev-Tino 7주차(2):: CSS 박스 모델

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

컴퓨터 공부하는 곳

2024.08.08
6
Dev-Tino 7주차(1):: 리액트 프로젝트 폴더 구조

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

컴퓨터 공부하는 곳

2024.08.08
2
이것저것 공부한다:: 프로그래머스 코딩 문제 40(다음주 20 추가 풀이)

https://school.programmers.co.kr/learn/courses/30/lessons/120895 프로그래머스 120895번, 문자열을 바꾼 뒤 return하는 문제이다. replace 등의 메소드가 있으리라 생각했지만 일단 위와 같은 식으로 진행하였다. 결과는 당연히 오류였다. 웹 서칭을 진행한 결과 두 가지 방법이 대세였다. 1

컴퓨터 공부하는 곳

2024.08.05
4
이것저것 공부한다:: 벨로퍼트와 함께하는 모던 리액트 입문 1장 1~10

1장 1:: 1장 1번은, 리액트와 HTML로 이루어진 카운터 예시가 어떻게 다른지를 설명한다. HTML+JS의 경우 HTML에 이벤트를 부여하려면 HTML을 구성한 후 id를 사용하여 각 DOM을 선택한 뒤, 원하는 이벤트가 발생하면 DOM의 특정 속성을 바꿔주어야 한다고 한다. 그러나 이런 이벤트가 중첩될 경우, 처리해야 할 이벤트와 관리해야 할 상태값

컴퓨터 공부하는 곳

2024.08.05
5
Dev-Tino 6주차(3):: JSX란?

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

컴퓨터 공부하는 곳

2024.08.04
7
Dev-Tino 6주차(2):: CSS 선택자란? 선택자 문법.

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

컴퓨터 공부하는 곳

2024.08.04
3
Dev-Tino 6주차(1) :: HTML이란? 태그란?

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

컴퓨터 공부하는 곳

2024.08.04
3
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
3
이것저것 공부한다:: 프로그래머스 5페이지 풀이

아 이거 좀 좋다 싶었던 거

천성이 게으른지라 코딩 테스트를 먼저 찾아 해본 적이 없다. 이번 기회로 많은 걸 시도해보게 되는 것 같다. https://school.programmers.co.kr/learn/courses/30/lessons/120807 문제 120807번 ‘숫자 비교하기’, 3차는 생각만 해두고선 if로 풀어두었는데… 3차를 자유자재로 사용하시는 분들이 신기하였다

컴퓨터 공부하는 곳

2024.07.27
2
이것저것 공부한다:: React 시작하기

다음은 이 게시글을 참고하여 이루어졌다. React를 공부하기 위해 기본적인 세팅을 진행하였다. 위 게시글에서는 React의 학습 및 개발을 위해 깔면 좋은 프로그램으로 다음을 소개하였다:: -Node.Js : JS 런타임 구동 환경. -Yarn : 조금 개선된 버전의 npm이라고 함. 더 나은 속도와 캐싱 시스템을 사용하기 위함이라 하였으나

컴퓨터 공부하는 곳

2024.07.26
2
Dev-Tino 5주차(1):: Node.js란? / Node.js 설치법

Node.js 설치법

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

컴퓨터 공부하는 곳

2024.07.26
2
이것저것 공부한다:: JS 문법 중 모르는 것. 기본 문법.

map, filter, find, spread,

자바 스크립트의 문법 중 모르는 부분에 대하여 조금 더 알아보고자 한다. 내가 미처 알지 못한 기본 문법은 다음과 같다:: map filter find spread Rest 1. Map -ES6에서 나온 신 문법으로. 값들을 매핑하기 위해 나온 새로운 데이터 구조, 객체이다. -키 값으로 모든 값을 가질 수 있다. -Map은 삽입된 순서대로 반복되어

컴퓨터 공부하는 곳

2024.07.20
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
이것저것 프로젝트한다:: 안드로이드 스튜디오 작업을 하며 헷갈렸던 것

tools:context [START] 참조 : https://developer.android.com/studio/write/tool-attributes 1) 일단 tools는 namespace이며 design-time (디자인 타임) 속성이라고 합니다. 2) 실제로 앱이 build 될 때는 빌드 툴이 tools 관련 속성을 제거하여 APK 사이즈나 실

컴퓨터 공부하는 곳

2024.07.15
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
5
Dev-Tino 3주차(2):: 동기/비동기, 블로킹/논블로킹

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

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

컴퓨터 공부하는 곳

2024.07.11
3
Dev-Tino 3주차(1):: DOM과 Virtual DOM

html, DOM, JS, javaScript

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

컴퓨터 공부하는 곳

2024.07.11
8
이것저것 프로젝트한다:: 숫자 맞추기 게임(1)

<!DOCTYPE html> <html> <head> </head> <body> <h1> 랜 덤 숫 자 게 임 !1 1!~ !!` </h1> <div> <input type="number" id ="input">

컴퓨터 공부하는 곳

2024.07.11
5
이것저것 프로젝트한다:: 투두리스트편(2)

레이아웃은 어떻게 정의하더라

저번에 투두 리스트를 이 정도로 만들어두었다. 지금 상태에서 끝내면 클론 코딩 그 이상도 이하도 아니다. 이 투두 리스트를 개선할 방법을 고민해보았다. 지금 상태에서 개선하고 싶은 점은 다음과 같다:: -편집 버튼 추가하기, 편집할 수 있게 만들기. -focus(커서를 올려두었을 때를 의미한다. onfocus 이벤트라고 한다. onblur는 onfocus와

컴퓨터 공부하는 곳

2024.07.11
2
이것저것 프로젝트한다::투두리스트편(1)

재활이 필요하다

투두 리스트 테스트 코드를 짜오란다. 그래서 이것저것 준비해봤다. 다른 것은 생각하지 않고 ‘항목을 동적 생성' 할 수 있도록 하는 데에만 초점을 맞추어 다음과 같은 코드를 짰었다. main.html <!DOCTYPE html> <html lang="kr"> <head> <title>기본적인 To-do list</title>

컴퓨터 공부하는 곳

2024.07.04
9
Dev-Tino 2주차(4)::XML, JSON, YAML

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

컴퓨터 공부하는 곳

2024.07.03
3
Dev-Tino 2주차(3):: Javascript란?

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

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

컴퓨터 공부하는 곳

2024.07.03
3
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
6
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
8
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
모바일 프로그래밍 팀 시애틀 "헬시(헬로! 시흥)" 계정 삭제 방침

본 어플리케이션은 한국공학대학교 모바일 프로그래밍 수업 제작물 ‘헬로 시흥!’의 프로토 타입입니다. 본 어플리케이션의 로그인 및 회원 가입을 위해 입력하신 정보는 암호화되어 안전하게 보관됩니다. 계정의 삭제를 희망하실시 다음 이메일 쪽으로 연락주십시오:: 양식은 다음과 같습니다:: 아이디에 사용한 이메일/비밀번호를 입력한다 본 계정의 삭제를 요청한

컴퓨터 공부하는 곳

2024.06.20
7
[이것저것공부한다] 소스 코드를 블로그에 올리고자 할 때, 코드 블럭, 코드 스크립터.

공부하기 존낸쉬름 심지어 물리적인 기록은 잘 하지 않던 나임 그럼에도불구하고……. …뭐라도 쓰면… 포트폴리오에 도움이 된다 하여 이것저것 공부하고 기록으로 남겨보는 중이다 이것은 코드 스크립터. 이런 ‘html 블럭’을 지원하는 사이트에 코드를 입력할 수 있는 코드 블럭을 만들어주는 사이트라고 한다. 이 사이트에 들어가 원하는 언어의 코드를 입력하고

컴퓨터 공부하는 곳

2024.03.31
11
[C++]20240330/동적으로 할당받지 않은 메모리는 포인터로 반환 불가다

C++ 어렵당

본 코드를 적으니 HEAP[0329_homework.exe]: Invalid address specified to RtlValidateHeap( 000001BCCF310000, 00000017EC17FBC0 ) 0329_homework.exe이(가) 중단점을 트리거했습니다. ..를 출력하며 코드가 멈췄다. 이를 보고 찾아보니 이는 처음 할당받은 크기와 재

컴퓨터 공부하는 곳

2024.03.31
5
00-3. 프로젝트 실행

부제) 펜슬은 왜 스샷>그대로 복붙을 지원하지 않는거죠

안드로이드 스튜디오를 키면 나오는 첫 화면이다. 이곳에서 New Project를 누른다. 그럼 이런 화면이 나오는데, 그냥 입문하고자 연 것이라면 나는 >Empty Activity<를 키는 것을 추천한다… No Activity 켰다가 아무것도 연결되지 않은 빈 화면을 맛봤다. 이 곳에서 이름과 경로를 지정한다. 아래와 같은 화면이 뜨면 성공한 것이다.

컴퓨터 공부하는 곳

2024.03.17
2
00-2. [Android Studio/안드로이드 스튜디오] SDK를 업데이트해보자

걍 버추얼 머신 설치라고 생각해도 됨

이번에는 안드로이드 개발에 앞서 가상 기계를 설치해보기로 한다. More Option에 들어가 Virtual Device Manager를 누른다. 중간에 adb.exe 경고창이 뜨는데, 위 아래 둘 다 체크하거나 위쪽만 체크하면 된다. 이후, 좌측 상단의 + > Create Virtual Device를 눌러 가상 머신을 만들면 된다. 디바이스는 적당히

컴퓨터 공부하는 곳

2024.03.17
13
00. [Android Studio] 안드로이드 스튜디오 설치/ 안드로이드 설치 방법

00. [Android Studio] 안드로이드 스튜디오 설치/ 안드로이드 설치 방법

이번에 모바일 관련하여 공부를 하게 되었다. 이에 대해 자세히 알아볼 겸, 복습을 위해 포스트를 작성해본다. 안드로이드 스튜디오 설치 파일은 이 곳에서 다운받는다:: 이렇게 진행하다보면 3번 즈음 (윈도우)‘다운로드 링크’를 알려준다. 이를 따라가자. 최신 다운로드 링크는 이 쪽이다. 이 때, 안드로이드 가상 디바이스 역시 설치하는 것을 추

컴퓨터 공부하는 곳

2024.03.17
16

컴퓨터 공부하는 곳

[React JS] 객체

한입 크기로 잘라 먹는 리액트: 기초부터 실전까지/객체

이것저것 공부한다:: 코딩 테스트 30

이것저것 클론코딩한다:: 로그인

Dev-Tino 8주차(4):: React Hook이란?

useEffect, useCallback, useMemo, useState, useContext

Dev-Tino 8주차(3):: map 함수를 사용할 때 key를 사용해야 하는 이유

react key 속성, map() 함수,

Dev-Tino 8주차(2):: HTTP란?

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

Dev-Tino 8주차(1):: 마크다운 문법 조사

이것저것 공부한다:: 프로그래머스 문제 풀이 50

이것저것 공부한다:: CSS React 클론 코딩 간단 정리용

Dev-Tino 7주차(4):: CSS의 인라인 스타일, 내부 스타일, 외부 스타일

Dev-Tino 7주차(3):: react state란? 사용법과 사용 이유!

Dev-Tino 7주차(2):: CSS 박스 모델

Dev-Tino 7주차(1):: 리액트 프로젝트 폴더 구조

이것저것 공부한다:: 프로그래머스 코딩 문제 40(다음주 20 추가 풀이)

이것저것 공부한다:: 벨로퍼트와 함께하는 모던 리액트 입문 1장 1~10

Dev-Tino 6주차(3):: JSX란?

Dev-Tino 6주차(2):: CSS 선택자란? 선택자 문법.

Dev-Tino 6주차(1) :: HTML이란? 태그란?

Dev-Tino 5주차(3):: 프레임워크와 라이브러리

Dev-Tino 5주차(2):: Node.JS vs 브라우저 환경

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

이것저것 공부한다:: 프로그래머스 5페이지 풀이

아 이거 좀 좋다 싶었던 거

이것저것 공부한다:: React 시작하기

Dev-Tino 5주차(1):: Node.js란? / Node.js 설치법

Node.js 설치법

이것저것 공부한다:: JS 문법 중 모르는 것. 기본 문법.

map, filter, find, spread,

Dev-Tino 4주차:: Git 3 way merge

Dev-Tino 4주차(2):: JavaScript에서의 코딩 스타일, 코드 리팩토링

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

Dev-Tino 4주차(1):: JavaScript 화살표 함수란?

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

이것저것 프로젝트한다:: 안드로이드 스튜디오 작업을 하며 헷갈렸던 것

Dev-Tino 3주차(5):: JavaScript 기본 문법, ES6에 추가된 문법

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

Dev-Tino 3주차(4):: git 관련 용어, 상태, 명령어들

git......

Dev-Tino 3주차(3):: JavaScript의 비동기 처리 방식(Promise, async, await)

Dev-Tino 3주차(2):: 동기/비동기, 블로킹/논블로킹

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

Dev-Tino 3주차(1):: DOM과 Virtual DOM

html, DOM, JS, javaScript

이것저것 프로젝트한다:: 숫자 맞추기 게임(1)

이것저것 프로젝트한다:: 투두리스트편(2)

레이아웃은 어떻게 정의하더라

이것저것 프로젝트한다::투두리스트편(1)

재활이 필요하다

Dev-Tino 2주차(4)::XML, JSON, YAML

Dev-Tino 2주차(3):: Javascript란?

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

Dev-Tino 2주차(2)::Git workflow

Dev-Tino 2주차(1):: Git/Github

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

Dev-Tino 2주차::UX (User eXperience)란?

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

Dev-Tino 2주차:: 인터페이스-API

Dev-Tino 1주차(4)::MPA와 SPA

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

Dev-Tino 1주차(3):: CSR/SSR

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

Dev-Tino 1주차(2):: 프론트엔드, 백엔드(Front-end, Back-end)

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

Dev-Tino 1주차(1):: 인터페이스(Interface)

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

모바일 프로그래밍 팀 시애틀 "헬시(헬로! 시흥)" 계정 삭제 방침

[이것저것공부한다] 소스 코드를 블로그에 올리고자 할 때, 코드 블럭, 코드 스크립터.

[C++]20240330/동적으로 할당받지 않은 메모리는 포인터로 반환 불가다

C++ 어렵당

00-3. 프로젝트 실행

부제) 펜슬은 왜 스샷>그대로 복붙을 지원하지 않는거죠

00-2. [Android Studio/안드로이드 스튜디오] SDK를 업데이트해보자

걍 버추얼 머신 설치라고 생각해도 됨

00. [Android Studio] 안드로이드 스튜디오 설치/ 안드로이드 설치 방법

00. [Android Studio] 안드로이드 스튜디오 설치/ 안드로이드 설치 방법