분류 전체보기 177

React) DOM이란? DOM 이해하기! (나름 쉬운 설명)

DOM이란 무엇일까? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 구글에 검색하면 위와 같은 설명을 볼 수 있다. 근데 잘 이해가 가지 않으니 하나하나 뜯어서 살펴보려고 한다. 1. 문서(Document) 말이 어렵게 느껴질 수 있지만 우리가 흔히 말하는 "문서"를 생각하면된다. 웹 페이지는 일종의 문서다. 세부적으로도 나눠지지만 쉽게 생각해서 웹 페이지 하나하나를 웹 문서라고 생각해보자. 이 문서는 웹 브라우저를 통해 해석되어 화면에 나타난다. 마치 프랑스어로 쓰여진 문서를 번역기를 통해 보여지는 거라고 생각하면 쉽다. 프랑스어로..

Front-end/React 2021.12.22

JAVA) JDK설치(15버전)

자바를 시작하기에 앞서 자바를 사용하기 위한 환경을 위해 JAVA JDK와 이클립스를 설치합니다. ​ ​ ​ 구글에 java jdkdownload 검색하여 맨 처음나오는 사이트로 들어간다. 밑에 링크! https://www.oracle.com/kr/java/technologies/javase-jdk15-downloads.html ​ 컴퓨터 운영체제에 따른 설치파일을 다운로드 받으면되는데, 저는 윈도우 64bit여서 맨 밑에 것을 다운로드 받았습니다. 다운을 받을때는 로그인을 하라고 뜨는데, 회원가입을 해야 다운을 받을 수 있습니다. ​ ​ 로그인- 다운로드 - 해당 파일을 더블클릭하면 설치 창이 뜹니다. ​ 계속 넥스트를 눌러서 진행하면 됩니다. (밑의 사진은 8버전인데, 제가 사진을 준비 안해서 다를 ..

c언어) 3. 자료형 int, float,char 등등

자료형이란 말 그대로 자료의 형태를 의미합니다. C언어는 변수 선언에 앞서, 그 변수에 어떤 형태를 담을 것인지 정해야 합니다. ​ 왜 자료의 형태를 정해야 할까요? 예를들어, 밀짚바구니에 액체를 담으면 밑으로 다 빠져나가고 작은 컵에 큰 과일을 넣을 수 없습니다. 그렇다고 엄청큰 상자에 방울토마토를 담으면 남는 공간이 많아서 버리는 공간이 많아집니다. ​ 컴퓨터의 메모리에는 한계가 있기에 공간을 효율적으로 사용하기 위해 필요한 만큼만 공간을 만들고(=자료형 선언) 이름을 붙이는겁니다(=변수 선언). 즉, 자료형을 정하는 것은 딱 맞는 공간을 만드는 것입니다. ​ 여기까지 자료형을 왜 선언하는지 이해하셨다면 자료형을 더 알아보도록 하겠습니다. ​ 한때 수포자였거나 예전에 배운것을 다 까먹은 분들을 위해(..

C언어) 2. C언어 기초단어, 변수, 변수선언

1. 변수란? 변수를 짧은 문장으로 정의하자면, 말 그대로 "변하는 수". 여러가지로 변할 수 있다는 것을 의미합니다. ​ 무엇이 변할까? 변수를 하나의 바구니 라고 생각하면, 그 안에 여러가지 담고싶은 것을 담는 의미입니다. ​ 컴퓨터는 데이터를 메모리에 저장하고, 메모리는 여러 개의 방으로 구성되어있습니다. 이 메모리의 여러 방을 변수라고 생각하면 됩니다. ​ ​ 2. 변수 선언 방이 엄청 많은데, 방에 이름이 없으면 방을 구분하기 어렵겠죠? 그래서 방에 이름을 붙혀줍니다. 이렇게 방에 이름을 붙이는 작업을 = "변수의 선언" 이라고 합니다. ​ 변수를 선언하는 방법은 간단합니다. 변수선언 공식: [자료형 + 원하는이름 + (= )+( 저장하길 원하는 것)] 밑의 사진에 노란색 부분이 변수 선언 부분..

Python) 1. 파이썬 다운로드 설치 및 사용

1. 아래의 홈페이지에 가서 다운로드 클릭 https://www.python.org/downloads/ ​ 2. 설치 경로 저장 맨 밑의 "Add Python 3.8 to PATH"는 꼭 체크 해주시고 Install Now를 하던, 그 밑에것을 클릭하던 상관은 없습니다. ​ ​ 3. 설치 경로를 원하는 장소에 해주세요 (이왕이면 기본 설치 장소가 제일 좋습니다) ​ ​ 4. 설치가 완료되면 컴퓨터의 시작부분에 이렇게 생성됩니다. 여기서 IDLE는 "통합 개발 환경"으로, 파이썬 코드를 입력하는 공간입니다. ​ ​ 5. IDLE를 클릭! 아래의 사진처럼 나오면 파이썬이 잘 설치된 것입니다. 매우 간단하죠?ㅎㅎ ​ ​ ​ 코드가 길고 해당 코드를 여러 번 사용해야 한다면, 쓴 코드를 저장하고 꺼내쓰는 방법으..

C언어) 1. C언어 시작하기 #include <stdio.h>

C언어를 처음 시작하는 순간, 처음에 있는 문장부터 도통 뭔지... 너무 어려웠습니다. 그래서 C언어가 크게 어떻게 구성되어있는지 소개하도록 하겠습니다. ​ 우선 가장 기본적인 C언어 사진을 가져왔습니다. 단어마다 색상이 다른데, 이 색상은 각자 환경설정에 따라 다릅니다. #include : 표준입출력 헤더파일 선언문. "이제부터 파일 사용할게!"라고 말하는 느낌의 문장입니다. C언어 안에 라는 헤더파일이 있는데 이 파일을 가져오는 것입니다(선언). 안의 입력, 출력등의 내장함수(명령문)를 사용하겠다고 선언하는 문장입니다. ​ **내장함수란? C언어에 기본적으로 들어있는 명령문(함수)입니다. 예를들어, sum이라고 입력하면 프로그램이 자동으로 더하기를 계산합니다. 여기서 sum이 내장함수입니다. ​ vo..

C언어) Visual Studio 시작하기, 글꼴, 설명

시작하기에 앞서 설치한 프로그램이 보이지 않을경우, 왼쪽 하단의 윈도우 그림을 클릭하면 최근에 추가한 앱 목록에 visual studio가 있습니다 ​ 프로그램을 실행시킨 뒤, 새 프로젝트 만들기 선택 ​ 빈 프로젝트 선택 ​ 프로젝트 이름과 저장할 위치를 원하는 곳으로 설정해 줍니다. ​ 요렇게 Project1이 생성되어 밑에 소스파일이 생성됩니다. [소스파일 - 우클릭 - 추가 - 새 항목] 소스파일을 생성할때 C언어로 작성하기 때문에 -> C++파일 선택 파일이름은 원하는대로 작성해주세요. 주의!! 파일이름 끝에 ".c"또는 ".cpp"라고 C언어파일임을 적어야 합니다! 다 적으셨으면, 추가를 눌러 소스파일을 생성해주세요. ​ 이제 새로운 소스파일이 생성되었습니다. 빈 칸에 원하는 C언어를 작성하여..

C언어) 실습을 위한 Visual Studio설치하기

C언어 코드를 직접 작성하고 결과를 보기 위해서는 visual studio라는 프로그램을 설치해야 합니다. https://visualstudio.microsoft.com/ko/vs/ Visual Studio 2019 | 무료 다운로드 Visual Studio에서 코드 완성, 디버깅, 테스트, Git 관리 및 클라우드 배포를 사용하여 코드를 작성할 수 있습니다. 지금 Community를 무료로 다운로드하세요. visualstudio.microsoft.com 위의 링크로 들어가면 이러한 화면이 나옵니다. 다운로드 -> community 2019버전으로 다운받아 설치를 시작합니다. ​ 이런식으로 설치가 시작되는데, 시간이 꽤 오래걸립니다(저는 50분 정도..?) 설치가 어느정도 되면 C언어를 사용할것이기 때문..

프로그래머스 level 1) 약수의 합(Python)

문제 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. 입출력 예 n return 12 28 5 6 입출력 예 설명 입출력 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 입출력 예 #2 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. 정답. def solution(n): a = [] for i in range(1, n+1): if n % i == 0: a.append(i) return sum(a) 위의 코드를 한 줄로 나타낼 수 있다. def solution(n): return sum([i for i in range(1, n+1) if n%i==0])

React) 이미지/파일 업로드 버튼 커스텀

에서 파일 업로드 버튼을 만들었는데 너무 밋밋하고 버튼 이름을 커스텀할 수 없다. 업로드 버튼을 커스텀 하려면 기존의 태그를 숨긴 뒤, 새로만든 버튼에 연결해야 한다. 1. 기존에 만든 에 ref 추가 //ref를 사용하기 위해 useRef()라는 Hook함수를 사용한다. const fileRef= useRef(); *ref 란? 리액트에서 DOM에 이름을 붙이는 것. ref로 지정해둔 fileRef를 통해서 해당 함수를 실행할 수 있다. 2. CSS파일에서 해당 input태그 숨기기 .image_input { display: none; } 3. 새로 커스텀 버튼 만들기 그냥 일단 만들어봐! 4. 버튼에 연결된 함수 만들기 이 함수는 ref로 과 연결되있어서 input태그를 대신 누르게 된다. const..

Front-end/React 2021.11.27
반응형