티스토리

차곡차곡 개발일지

검색하기

블로그 홈

차곡차곡 개발일지

hunffy.tistory.com/m

초보 개발자의

구독자: 0

방명록 방문하기

728x90

주요 글 목록

px,em,rem css를 작성할 때 단위로 쓰이는 여러가지 단위들이있는데, 절대단위와 상대단위로 나눌수있다. 절대단위로는 px 상대단위로는 vw,vh,em,rem등이 있다. px 보통 픽셀이라고 부르며, 모니터에 따라 상대적으로 표시된다. 그러므로 반응형 웹에는 적절하지 않을 수 있다. em, rem em은 부모의 글꼴크기에 영향을 받는다. rem은 루트요소의 글꼴크기에 영향을 받는다. 이해를 돕기위해 예제를 해보기로했다. 예제. PX EM REM .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-size: 1rem; } EM : 부모태그에 font-size에 따라 달라진다. 즉 부모태그에 적용된 font-size가 1em이 된다. 예제. 기본 권장값으로 설정되.. 공감수 0 댓글수 0 2024. 3. 18.
호이스팅이란? 면접에서 단골질문 호이스팅이다. 간단하게 설명들을 보면 함수 혹은 변수를 가장 상단으로 올려주는 현상(?)이라고 알수있다. 이번에 확실하게 알아두고자 공부를 해보았다. 단어 말 뜻 그대로 끌어올린다는 뜻이다. - 인터프리터가 변수와 함수의 메모리 공간을 선언하기전에 미리 할당하는것을 의미한다. - 변수와 함수의 선언부가 각자의 현재 스코프 영역 최상단으로 옮겨지는 것을 의미한다. 결국, 코드가 시작되기 전에 변수, 함수 선언이 해당 *스코프의 최상단으로 끌어 올려지는 것을 말한다. 더 정확히 말하자면 끌려 올려지는 것처럼 보인다. 코드가 실제로 끌어올려지진 않는다. *스코프 : 범위를 뜻한다. 즉 변수에 접근할 수 있는 범위 자바스크립트는 코드를 실행하기 전에 함수와 변수 선언을 Lexical Envi.. 공감수 0 댓글수 1 2024. 2. 24.
간단한 예제를 통해 API호출해보기 ( API & fetch ) API ( Application Programming Interface ) 란 프로그램들이 서로 상호작용을 할 수 있게 도와주는 매개체. 비유를 통하자면, 손님(클라이언트)가 메뉴를 요청(request)하면 점원(서버)가 냉장고(데이터베이스)에서 쿼리를통해 요청에 대한 메뉴를 찾아, 메뉴(response)를 손님에게 전달해주는 과정을 통해 알 수있다. 여기서 점원의 역할이 API라 할 수 있다. // api 호출 해보기 // fetch("주소") : 내장함수, api호출 할 수 있도록 도와주는 내장함수 async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonRe.. 공감수 0 댓글수 0 2023. 12. 25.
동기 & 비동기 👉 들어가면서... 동기방식은 코드순서대로 실행되기때문에, 위의 코드가 완료되지않으면, 완료될때까지 기다렸다가, 다음코드가 실행된다. 하지만, 이러한 방식은 효율적이지 못하기때문에 비동기방식을 사용한다. 비동기방식은 먼저 완료된 코드부터 실행되는 방식이다. 동기방식은 이어달리기라고 생각하면될거같다. 👉 코드 //동기적 방식 function taskA() { console.log("A작업 끝"); } taskA(); console.log("코드 끝"); //비동기적 방식 function taskB(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskC(a, cb) { setTimeout(() => { cons.. 공감수 0 댓글수 2 2023. 12. 23.
Spread 연산자 사용 Spread 연산자란, 기존 객체나 배열의 요소들을 다른 배열이나 객체로 복사 할 수 있다. //spread 연산자사용 (객체) const cookie = { base: "cookie", madeIn: "korea", }; const chocochipCookie = { ...cookie, toping: "chocochip", }; const blueberryCookie = { ...cookie, toping: "blueberry", }; const strawberryCookie = { ...cookie, toping: "strawberry", }; console.log(chocochipCookie); console.log(blueberryCookie); console.log(strawberryCookie.. 공감수 0 댓글수 0 2023. 12. 23.
비구조화 할당 비구조화 할당이란 , 배열이나 객체의 속성을 해체하여 개별 변수에 값을 담을 수 있는 JS 표현식. //배열의 비 구조화 할당(구조분해 할당) 적용 전 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; //비 구조화 할당(구조분해 할당) 적용 let arr2 = ["one", "two", "three"]; let [one1, two2, three3] = arr2; console.log(one1, two2, three3); //배열선언 분리 비 구조화 할당 let [one11, two22, three33] = ["one", "two", "three"]; console.log(one11, two2.. 공감수 0 댓글수 2 2023. 12. 23.
포인터란?(정적할당, 동적할당) 변수의 주소값을 저장하는 변수라고 할 수 있다. 아래의 그림(?)을 참고해보자. 개념정리 int *ip; 포인터 변수를 선언할 때 사용하는 *를 사용하여 포인터변수 ip를 생성한다. 그리고 변수 k를 생성한다. 포인터변수 ip는 본인의 주소를 갖고있고, 다른 변수의 주소를 가질 수 있다. ip = &k; &기호를 사용하여 k에 주소를 ip에 저장해주면 포인터 변수 ip에는 그림과같이 k의 주소가 저장된다. 실제 코드로 간단히 확인할 수 있다. ip의 값에 k 변수의 주소값이 저장되어있는것을 확인할 수 있다. 포인터 변수를 활용하여, 2개의 매개변수를 받아, 해당 변수들의 값을 바꿔주는 코드를 예제로 풀어봤다. 예제) #include #include void swap(int*,int*); int main(.. 공감수 0 댓글수 2 2023. 9. 26.
프로세스와 쓰레드 개념 및 차이점 프로세스와 쓰레드에 대해 알아보던 중 사전적 의미만 봐서는 이해가 잘 되지않았다. 그래서, 구글링과 유튜브를 찾던 중 얄팍한코딩님의 유튜브영상을 통해 이해할 수 있었다. 이해한 것이 정확히 맞는지 모르겠지만 일단 정리해둬야겠어 블로그를 작성했다. 만약, 틀린부분이 있다면 댓글을 달아주시면 감사하겠습니다. 프로세스(Process)란? - 메모리상에서 실행중인 프로그램을 말하며, 프로세스는 최소 하나의 스레드를 보유하고 있고, 별도의 주소공간을 독립적으로 할당 받는다. 스레드(thread)란? 스레드는 프로세스 안에서 실행되는 흐름의 단위를 말한다. 프로세스와 스레드의 차이점. 프로세스는 자원을 공유하지않고, 쓰레드는 자원을 공유한다. 사전적의미를 백번 보는것보다 내 경우는 그림을 통해 이해하는게 빨랐다. .. 공감수 0 댓글수 0 2023. 9. 22.
CORS와 SOP란? CORS란? CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻. 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. CORS는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 어플리케이션은 리소스가 자신의 출처(도메인,프로토콜 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 출처란? 예를들어 , https://hunffy.github.io:123/abcd/svelte?page=4#orgin protocol Host Port. Path Query Fragment 생략가능 String 위의 구성 요소 중에서 .. 공감수 0 댓글수 0 2023. 8. 19.
JWT란? JWT(Json Web Token)의 줄임말 으로써, 정보를 비밀리에 전달하거나, 인증할때 주로 사용하는 토큰으로, Json객체를 이용한다. 클라이언트와 서버사이에서 통신할 때 권한을 위해 사용하는 토큰이다. 웹에서 정보를 Json형태로 주고 받기 위해 표준규약에 따라 복잡하고 읽을수 없는 String형태로 생성한 암호화된 토큰으로 통신을한다. 구성요소 header , payload , signature 세 파트로 나뉘어져 구성되어있다. 헤더(header) 어떠한 알고리즘으로 암호화 할 것인지, 어떠한 토큰을 사용할 것 인지에 대한 정보가 들어있다. 정보(payload) 전달하려는 정보(사용자 id나 데이터들 이것들을 클레임이라고도 부른다)가 들어있다. 정보는 수정이 가능하여 더 많은 정보를 추가할 수 .. 공감수 0 댓글수 0 2023. 8. 18.
SQL이란? Sql이란? 관계형데이터베이스를 다루기위한 프로그래밍 언어입니다. sql을 사용하면 데이터베이스 내에서 원하는 정보를 검색,수정,삭제등 데이터를 관리하고 정리할수있습니다. 1 . CRUD Create : 데이터를생성, 데이터베이스에 삽입하는 작업입니다. sql에서는 insert를 사용합니다. Read : 데이터베이스에 데이터를 조회하는 작업입니다. sql에서는 select를 사용합니다. Update : 데이터베이스에 데이터를 수정하는 작업입니다. sql에서는 update를 사용합니다. Delete : 데이터베이스에 데이터를 삭제하는 작업입니다. sql에서는 delete를 사용합니다. 2. DDL , DML DDL(Data Difinition Language) - 데이터베이스의 구조를 정의하거나 변경할때 .. 공감수 0 댓글수 0 2023. 8. 15.
HTTP 프로토콜 HTTP(Hyper Text Transfer Protocol) Web browser 와 Web server가 통신을 할때 사용하는 통신규칙 웹을 구성하는 가장 중요한 요소. 클라이언트:요청 서버:응답 Request Message GET/POST : method 웹 서버와 웹 브라우저가 어떻게 통신할지. 1.html : 웹서버에게 요청하는 정보가 무엇인지 나타내준다. HTTP 1.1 : 웹브라우저가 현재 사용하고있거나 사용할수있는 HTTP의 버전을 나타낸다. Host : 인터넷에 연결되어있는 컴퓨터 한대,한대를 식별해준다. 요청하는 웹서버의 주소를 나타낸다. 하나의 웹서버가 여러개의 도메인을 서비스할수있다. host가 만약 localhost:8080이라면 8080포트 번호에 등록되어있는 웹서버를 의미한다... 공감수 0 댓글수 0 2023. 6. 30.
자바 면접준비 1. 스프링과 스프링부트 스프링 : 자바기반의 백엔드 프레임워크. 특징 : 의존성 주입(DI), 제어반전(IOC) 등이 있다. 의존성주입(DI) : 구성요소간의 의존관계가 소스코드 내부가 아닌 외부의 설정파일을 통한 방식. JAVA에서 데이터를 저장하고 가져오는 기능을 외부의 Oracle Database,JDBC,iBatis 등 서로다른 프레임워크로 짤 수 도 있다. 이 때 스프링을 이용하면 그때마다 필요한 부분을 뺐다 꼈다 하면서 적절한 상황에 필요한 기능을 해낼 수 있다. 제어반전(IOC) : 객체(인스턴스)의 생성부터 소멸까지 객체 생명주기 관리를 개발자가 아닌 컨테이너가 대신 해주는 것. 스프링 부트 : 스프링의 확장 버전 스프링 개발을 더 쉽게 만들어주는 역할을한다. 스프링을 이용하여 개발을 할.. 공감수 0 댓글수 0 2023. 5. 29.
RestAPI 개념 Representational State Transfer Application Programming Interfac의 약어 웹 서비스 간에 데이터를 교환하기 위한 표준 방법론. REST는 네트워크 아키텍처의 원칙을 따라 설계된 API 스타일이다. REST API는 HTTP 프로토콜을 기반으로 작동, 클라이언트와 서버 간의 통신을 단순화하고 서비스르 유연하고 확장 가능하게 만들어준다. REST API는 일반적으로 웹 서비스에서 사용되며, JSON 또는 XML 형식의 데이터를 주고받는 데 사용된다. 클라이언트가 서버에게 요청을 보내고, 서버는 그 요청을 처리하여 결과를 클라이언트에게 반환하는 방식으로 동작한다. 클라이언트는 HTTP 메소드(GET,POST,PUT,DELETE 등)를 사용하여 원하는 작업.. 공감수 0 댓글수 0 2023. 5. 22.
프론트엔드 로드맵 프론트엔드 필수 관심/취직 HTML/CSS HTML : 구조 CSS : 디자인 JS : 액션 3가지 동시에 학습하기. CSS에서는 Flex, Grid 학습하기. ▼ Type Script ◀ Java Script ▶ JQuery 프론트 개발자 필수언어 JS (실행 컨텍스트, 프로토타입, 프로미스, 호출스텍, 이벤트루프 이해 필수) TS도 꼭 학습하기. ▼ React, React Router React나 Vue 중 하나 선택해서 라우팅을 위한 React-Router, Context API ▼ Git/GitHub Redux(toolkit) GraphQL ▼ Next.js(SSR) ▶ React 노드버드 ◀Emotion/Styled Components ▲ React-Query/SWR 출처 공감수 0 댓글수 0 2023. 5. 16.
프론트엔드 면접준비(질문 및 답변) 1. 호이스팅? 변수가 선언되고 초기화됐을 때 선언부분이 최상단으로 올라오는 현상. 2. 클로저란? 내부함수가 외부함수의 맥락에 접근할수 있는 것. 장점: 전역변수의 사용을 줄이고, 정보를 은닉할수있다. 3. this? this는 함수를 호출할 때 결정된다. 1. 전역범위에서 사용되면 this는 전역객체를 가르킨다. 2. 함수에서 사용될때도 this는 전역객체를 가르킨다. 3. 객체에 속한 메서드에서 사용될 때 this는 객체를 가르킨다. 4. 객체에 속한 메서드의 내부함수에서 사용될 때 this는 전역객체를 가르킨다. 5. 생성자로 사용될때 this는 생성자로 인해 생성된 객체를 가르킨다. 4. 타입스크립트? 자바스크립트의 상위확장버전. 컴파일 단계에서 오류를 포착할 수 있다. 디버깅이 쉽다. 5. 리.. 공감수 0 댓글수 0 2023. 5. 15.
Database(Join)이란? ● 정의 데이터베이스 내의 여러 테이블의 레코드를 조합하여 하나의 열로 나타내는 것. 테이블로 저장된다. 서로 관계있는 데이터가 여러 테이블로 나뉘어 저장되므로 각 테이블에 저장된 데이터를 효과적으로 검색하기 위해 조인이 필요하다. user grade name no no name john 1 1 1학년 hun 2 2 3학년 jun 3 3 2학년 ho 4 4 4학년 ● 조인의 종류 1. 내부조인(INNER JOIN) 여러 애플리케이션에서 사용되는 가장 흔한 결합방식. 기본 조인형식으로 간주됨. 2개의 테이블(A,B)의 컬럼 값을 결합함으로써 새로운 결과 테이블을 생성한다. 명시적 조인(explicit)과 암시적 조인(implicit) 2개의 구문이 존재한다. 명시적 조인 SELECT * FROM user .. 공감수 0 댓글수 0 2023. 3. 24.
session이란? ● 세션이란? 특정 시간의 구간을 의미하며, 세션 관리는 사용자의 상태를 유지하는 방법을 말한다. 브라우저를 종료하기 전까지 유지된다. ● 세션관리 목적 사용자의 정보를 일정 조건동안 유지하기 위해. 페이지를 이동할 때 마다 로그인을 요구하지 않고 세션을 통해 이미 로그인 한 사용자임을 입증할 수 있다. ex) 세션에 로그인정보를 미리저장해놓으면 메일확인, 검색 및 작업을 할 때 마다 새로 로그인을 하지않아도 된다. ● 쿠키란? 특정 웹 사이트를 방문 했을 때 만들어지는 정보를 담는 파일을 지칭한다. 상태 정보를 유지하는 기술 그렇다면,,, ● 쿠키와 세션의 차이점? 쿠키는 방문자의 정보를 방문자 컴퓨터의 메모리에 저장하는 것을 말한다. 세션은 방문자의 요청에 따른 정보를 방문자 메모리에 저장하는 것이 .. 공감수 0 댓글수 0 2023. 3. 13.
axios란? ● 기본 개념 : axios는 브라우저, node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드와 프론트엔드 통신을 쉽게하기 위해 Ajax와 함께 사용한다. ● 특징 : 1) 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 2) Promise API 사용 3) 요청과 응답 데이터의 변형 4) HTTP 요청 취소 5) HTTP 요청과 응답을 JSON 형태로 자동 변경 1 . 먼저, axios를 사용하기위해 다운로드를 해줘야한다. yarn add axios npm i axios 를 입력하여 설치해주고, 사용 할 컴포넌트나 페이지에 import axios from 'axios' 임포트해주면 해당 페이지,컴포넌트에.. 공감수 0 댓글수 0 2023. 3. 10.
async await async 와 await 은 자바스크립트의 비동기 처리 패턴 중 최근문법이다. 비동기 처리는 결과를 예측할 수 없기 때문에 동기식의 처리가 필요하다. async 와 await 은 기존 동기식 처리의 단점을 보완하고 가독성을 높여준다. promise : 자바스크립트에서 비동기 처리에 사용되는 객체. async는 promise의 코드를 깔끔하게 줄여주기 때문에 가독성을 높혀준다. function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다. await 뒤에 오는 부분은 반드시 promise를 반환해주어야 하고, async가 붙은 funcition에도promise를 반환해야 한다. ex) async function asyncMain() { let result = aw.. 공감수 0 댓글수 0 2023. 3. 2.
UTF-8,react,reflow 1.UTF-8(Unicode Transformation Format - 8bit) UTF-8은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나. UTF-8로 표현 가능한 길이는 최대 6바이트지만 다른 인코딩과의 호환을 위해 4바이트까지만 사용한다. 그래서 한 글자가 1~4바이트 중 하나로 인코딩될 수 있으며, 1바이트 영역은 아스키 코드와 하위 호환성을 가진다. 장점: 기존의 HTML 태그나 자바스크립트 등 아스키로 구축된 사이트를 별다른 변환 처리 없이 그대로 쓸 수 있는 엄청난 장점이 있었다. 크로스플랫폼 호환성도 뛰어났다. 실체 처리속도도 더 빠르다든가 하는 엔지니어링 측면에서의 수많은 장점도 존재한다. 가장 큰 장점은 단일인코딩 UTF-16은 하위 인코딩 문제가 매우 심각했는데, 인코딩에 여.. 공감수 0 댓글수 0 2023. 2. 21.
데이터 베이스 : DML, DDL , DCL 개념정리. ● DML(Data Manipulation Language) select , insert, update , delete등 데이터 베이스 사용자와 DB시스템간의 인터페이스를 제공. DB를 처리하는데 사용한다. ● DDL(Data Definition Language) 객체의 생성,변경,삭제 명령어를 뜻한다. creat,alter,drop,rename 등이 있다. 주로 DB 관리자나 DB 설계자가 사용한다. ● DCL(Data Control Language) 객체 권한 부여등의 제어어. DB관리자가 데이터관리를 목적으로 사용한다. commit,rollback,grant,revoke등이 있다. 공감수 0 댓글수 0 2023. 1. 30.
get방식과 post방식 ● GET방식 ○ URL에 변수(데이터)를 포함시켜 요청한다. ○ 데이터를 헤더에 포함하여 전송한다. ○ URL에 데이터가 노출되어 보안에 취약하다. get방식은 데이터를 URL에 넣도록 설계되어, 데이터를 보낼수있는 양에 한계가 있습니다. http 에서는 get방식의 url길이에 제약을 두지않지만, 브라우저에서 최대길이를 제한하고있다. ● POST방식 ○ URL에 변수(데이터)를 노출하지않고 요청한다. ○ 데이터를 BODY(바디)에 포함시킨다. ○ URL에 데이터가 노출되지 않아 기본 보안이 되어있다. POST방식은 BODY에 데이터를 넣어서 전송한다. 메세지의 길이 제한은없지만 최대요청을 받는 시간이 존재하여 클라이언트에서 페이지를 요청하고 기다리는 시간이 존재한다. 공감수 0 댓글수 0 2023. 1. 24.
Java의 특징(면접준비) 1. Java의 특징 ● 자바는 객체지향 프로그래밍 언어 객체 지향 프로그래밍 (Object-Oriented Programming, OOP)은 프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. ○ 객체지향 1. 캡슐화 - 클래스 내부의 변수와 메서드를 패키징 2. 다형성 - 프로그램 언어 각 요소들(상수, 변수, 식, 객체, 메소드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질을 가리킨다. 3. 상속 - 중복되는 코드의 재사용성 4. 추상화- 객체들의 공통적인특성(변수,메서드)들을 묶어 표현하는 것 ○ 기본자료형을 제외한 모든요소들이 객체로 표현된다. ○ 장점 : 운영체제가 독립적이다, Gabage.. 공감수 0 댓글수 0 2023. 1. 18.
2023년 1월 11일 수요일 DB 쿼리문간단정리. 프로젝트 진행중에 예전에 학습했던 SQL 쿼리문이 기억이 나질않아, 찾아보았다. ● SELECT 1) select 컬럼명 from 테이블명; ex) 학생(테이블) = [학번,이름,학년] 컬럼3가지가 있다고 가정하자. select 학번 from 학생; 을 해주면 학생테이블에 학번컬럼에 해당하는 모든값을 조회해준다. 2) select * from 학생; 을 해준다면 학생테이블의 모든컬럼의 값을 조회해준다. 3) select 학번 from 학생 where = 09; 학생테이블의 학번컬럼 중 09학번인 값들을 출력해준다. 4) select 학번 from 학생 where=09 order by 학번 ASC/DESC; 09학번인 값들을 출력해주되, orederby를 통해 정렬방식을 해당컬럼의 오름차순정렬,내림차순정렬.. 공감수 0 댓글수 0 2023. 1. 11.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.