티스토리

2022
검색하기
블로그 홈

블로그 홈

2022

2022gygy.tistory.com/m
신고

__g__ 님의 블로그입니다.

구독자
1
방명록 방문하기
구독하기

주요 글 목록

  • 항해99 Week I Learn - week08 실전 프로젝트를 시작하면서 초반에 가장 시간을 많이 쏟았던 부분은 기획이었다. 우리 조는 인원도 다른 조에 비해서 가장 많은 인원이었는데 그렇다고 딱히 진행이 더디거나 한 부분은 없었다. 어떤 주제로 만들 것인가로 이틀 정도를 사용하고 또 그러면서 이번에 처음 디자이너 분과 협업을 진행하기 때문에 디자인을 기다리면서 일단 사용할 기능들 위주로 먼저 각자 연습해보기로 했다. 나는 사용자가 직접 색깔을 지정할 수 있는 기능을 넣고 싶었기 때문에 처음에는 react-color 라는 라이브러리를 설치했는데 팀원 분의 추천으로 최종적으로 react-colorful 라는 라이브러리를 사용했다. 훨씬 핸들링하기도 쉬웠고 사용하기가 편했기 때문이다. view를 그리는 부분에서 flex를 적극적으로 활용해서 구조를 그렸.. 공감수 0 댓글수 0 2022. 7. 3.
  • 항해99 Week I Learn - week07 이번주 클론 코딩을 하면서 느꼈던 것은 사용자일 때 편하게 썼던 모든 기능들은 개발자의 노력이 아주 많이 들어갔겠구나! 였다. 크몽을 클론하면서 이런 기능도 도전하면 나중에 실전에서도 써먹을 수 있을 것 같아서 도전했던 거였는데 생각보다 더 어려웠다. 체크할 항목이 너무 많았고 그것들을 담아서 백으로 보내 주는 것도 지금 수준에서는 버겁게 느껴졌다. 프로젝트 생성 부분을 가장 카피하고 싶었는데 그 부분에서 많이 타협을 한 게 아쉬웠다. 아직 개념이 제대로 잡히지 않아 리덕스에 담긴 값을 이용하는 부분에서 아직 값이 들어오지 않은 에러가 뜨는 것을 해결하는 것이 어려웠다. 공감수 0 댓글수 0 2022. 6. 27.
  • URL URL URL은 웹을 뒷받치는 주소체계다. 웹에 존재하는 파일을 다른 파일과 구별하는 효과적인 식별자가 필요하다. 웹에서는 파일을 자원 또는 리소스(resource)라고 부르는데 방대한 웹에서 이 자원을 구별하는 식별자가 바로 URL이다. 즉, URL은 웹에서 접근가능한 자원의 주소를 일관되게 표현하는 형식이다. URL의 구성 URL을 구성하는 부분에도 명칭이 있고 각자의 역할이 있다. 프로토콜: URL은 자원을 접근하는 방법인 스킴(scheme)으로 시작한다. 스킴보다는 프로토콜이라고 부르는게 일반적. 호스트: 그리고 호스트 주소가 나온다. IP 또는 www.example.com과 같은 도메인명을 쓴다. 호스트명:포트번호 형태로 포트번호를 쓸 수 있는데 선택사항이다. 경로: 호스트 주소 다음에 /으로 .. 공감수 0 댓글수 0 2022. 6. 23.
  • 항해99 Week I Learn - week06 주특기 주차를 지나서 이제 다시 미니 프로젝트, 클론 프로젝트를 진행 중이다. 1주차에 진행했던 미니 프로젝트와는 확연히 다른 느낌이다. 그때도 물론 나름대로 나눠서 작업을 했었지만 지금은 제대로 나눠서 작업을 하다보니 모든 것이 쉽지 않았다. 일단 언어가 다르다보니 서로가 원하는 걸 설명을 해도 한 번에 이해하기 어려웠던 것 같다. 그래서 여러 번 풀어서 설명하고 또 최대한 구체적으로 예시를 들어서 말하게 되었다. 그리고 확실히 협업을 할 때마다 느끼는 건 git으로 관리하는 게 쉽지 않다는 점이다. 같은 파일을 건드리는 순간 병합할 때 충돌은 피할 수 없는 일이고, 그로 인해 종종 화면 공유를 하며 합쳐진 파일을 다시 작업을 했었다. 협업을 하면서 정말 더 세세하게 나누고 그래야 불필요한 충돌을 피할.. 공감수 0 댓글수 0 2022. 6. 20.
  • 파일을 압축할 때 압축 데이터에서 반복되거나 불필요한 부분을 없애 데이터의 양(용량)을 줄이는 방식을 말한다. 저장공간을 절약하거나 데이터 전송시간을 줄일 때 등 사용한다. 데이터 크기를 줄이는 인코딩 과정과 저장된 데이터를 원래 형태로 복원하는 디코딩 과정이 존재한다. 인코딩하기 전의 데이터 크기와 인코딩하고 나서의 데이터 크기의 비율을 압축률이라 한다. 압축 방식에 따라 크게 원본이 유지되는 무손실 압축과 회복 불가능한 손실 압축으로 나눈다. 무손실 압축 손실 압축 데이터의 내용을 바꾸지 않고 원래 내용 그대로 디코딩할 수 있는 기술 압축 과정에서 데이터 손실이 전혀 없어 입력 데이터와 복원된 데이터가 완전히 같다. 버린 데이터가 없어 압축 효율은 떨어진다. 의료 영상, 설계도면 등 자료를 손실하면 안 되는 분야에서 .. 공감수 0 댓글수 0 2022. 6. 16.
  • 항해99 Week I Learn - week05 Axios 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. 백엔드와 프론트엔드 통신을 쉽게 하기 위해서 Ajax와 더불어 사용한다. Axios 특징 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용 Promise(ES6) API 사용 요청 및 응답 인터셉트 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 XSRF를 막기위한 클라이언트 사이드 지원 axios vs fetch axios fetch 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF 보호를 해준다 별도 보호 없음 data 속성을 사용 body 속성을 사용 d.. 공감수 0 댓글수 0 2022. 6. 13.
  • 파일 시스템과 블록 파일(File) 논리적인 저장 단위로, 관련된 정보 자료들의 집합에 이름을 붙인 것이다. 컴퓨터 시스템의 편리한 사용을 위해 정보 저장의 일괄된 논리적 관점을 제공한다. 일반적으로 레코드(Record) 혹은 블록(Block) 단위로 비휘발성 보조기억장치에 저장된다. 파일 속성(File attribute) 또는 파일의 메타데이터(metadata) 파일을 관리하기 위한 각종 정보들이다. 파일 자체의 내용은 아니다. 파일 이름, 유형, 저장된 위치, 파일 사이즈, 접근 권한, 소유자, 시간(생성/변경/사용) 등 파일에 대한 전반적인 정보를 말한다. 디렉토리(directory) 컴퓨팅에서 파일을 분류하기 위해 사용하는 이름공간이다. 파일 시스템 안에서 파일과 다른 하부 디렉토리들로 구성된다. 수많은 컴퓨터에서 .. 공감수 0 댓글수 0 2022. 6. 9.
  • 항해99 Week I Learn - week04 react 컴포넌트 선언하는 방식은 클래스형과 함수형이 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었다. 현재 클래스형 컴포넌트를 자주 사용하지 않지만, 여전히 사용하는 기업들이 있으므로 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { return( ) } } export default App; 함수형 컴포넌트 import React from 'react'; import '... 공감수 0 댓글수 0 2022. 6. 6.
  • 프로그래밍 언어 알고리즘 알고리즘이라는 용어는 문제를 해결하기 위한 절차나 방법을 의미하는 단어로 넓은 범위에서 사용된다. 구체적으로 설명하면, 알고리즘은 '문제나 과제를 해결하기 위한 처리 절차를 하나하나 구체적인 순서에 따라 표현한 아이디어나 생각' 이라고 할 수 있다. 알고리즘이란 '생각' 또는 '아이디어'이기 때문에 형태가 없다. 따라서 어떤 것을 다른 사람에게 전달하려면 눈에 보이도록 표현해야 한다. 레시피, 악보, 사용 설명서는 알고리즘을 다른 사람에게 전달하기 위해 사람이 이해하기 쉬운 문장, 사진, 도형, 일러스트 등을 이용해 표현한 것이다. 프로그래밍 사람에게 전달하듯 컴퓨터에게도 어떤 명령을 내려야 하는데, 이때 문장, 일러스트, 그림, 사진 등은 컴퓨터가 이해할 수 없기 때문에 컴퓨터가 이해할 수 있.. 공감수 0 댓글수 0 2022. 6. 2.
  • 항해99 Week I Learn - week03 주특기 주차로 접어들고 나서 상태가 아주 메롱이다. 아, 리액트란 무엇인가. 돔과 가상돔은 무엇인가, 라이프 사이클이란 무엇인가. 버전이 왜 이렇게 많은가. 쏟아지는 새로운 문법과 형식에 머리가 받아들이지 못하는 중……. 가장 헷갈리는 건 내가 그냥 정해주는 변수 이름인 건지, 반드시 이렇게 써야 하는 것인지가 헷갈린다는 거다. 모든 게 뒤죽박죽인 상태……. DOM(Document Object Model, 문서 객체 모델) 웹 페이지에 대한 프로그래밍 인터페이스. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공. 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 노드 트리 구조 (하나의 부모 줄기가 여러개의 자식 나뭇가지, 나뭇.. 공감수 0 댓글수 0 2022. 5. 29.
  • 15. 캐시가 뭔가요? 무어의 법칙에 따라 최근까지 CPU의 처리속도가 급격하게 증가하였다. 그러나 프로세서의 발전 속도를 메인 메모리가 따라가지 못하고 있다. 이로 인해 데이터를 가져와 CPU에서 빨리 처리를 해도 다음 연산에 필요한 데이터가 오는 속도가 너무 느리기 때문에 시스템 성능 향상에 한계가 있다. 즉, 병목 현상이 일어난다. 이러한 부분을 극복하기 위해 캐시가 등장했다. CPU와 메인 메모리 사이에 위치하며 속도 간극을 줄여주는 완충재 역할을 한다. 캐시(cache) 컴퓨터 분야에 사용되는 용어로, 데이터를 미리 복사해 놓는 임시 장소. 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 .. 공감수 0 댓글수 0 2022. 5. 26.
  • 항해99 Week I Learn - week02 항해를 시작하면서 느낀 점은 시간이 아주 빠르게 지나간다는 것이다. 2주 차에는 알고리즘 문제를 풀면서 컴퓨팅적 사고와 언어 기초 다지기를 했는데 모르는 문제를 붙잡고 있다 보면 금방 한 시간이 지나가곤 했다. 두 시간도 금방 지나가기도 했다. 문제를 풀고 같은 조원들과 풀이를 공유하면서 느꼈던 것은 다들 선호하는 함수나 코드가 있다는 것이다. 아주 당연한 소리긴 하지만. 아주 간단한 내장 함수임에도 나는 떠올리지 못하고 팀원들은 그것을 이용해 풀었을 때 느꼈다. 필요한 문법을 사용해서 쓰긴 하지만 순수하게 내가 떠올려서 쓰는 경우는 없었다. 보통 내가 익숙한 것들만 그렇게 이용했을 뿐. 그래서 기본적으로 많이 쓰이는 내장 함수라던가, 코드들을 좀 더 내 것으로 만들어야겠다고 생각했다. 그래야 짤 수 있.. 공감수 4 댓글수 0 2022. 5. 22.
  • react S.A.실습 과제 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); // 변수가 함수 안에 선언되었기 때문에 함수 밖에서 사용할 수 없음. // 이 콘솔을 작동 시키고 싶다면 변수 선언을 바깥으로 빼면 가능. console.log(b); // 1줄에 선언된 변수 b의 값. hi(); // 함수 안에서 선언된 a = 1, b = 100. b++이므로 1을 더해 (1, 101) 출력 c.. 공감수 0 댓글수 0 2022. 5. 20.
  • 호이스팅과 TDZ 보호되어 있는 글입니다. 공감수 0 댓글수 0 2022. 5. 20.
  • 얕은 복사와 깊은 복사 얕은 복사(shallow copy) 얖은 복사는 참조(주소)값의 복사를 나타낸다. const obj = { vaule: 1 } const newObj = obj; newObj.vaule = 2; console.log(obj.vaule); // 2 console.log(obj === newObj); // true obj 객체를 새로운 newObj 객체에 할당하였으며 이를 참조 할당이라 부른다. 복사 후 newObj 객체의 value값을 변경하였더니 기존의 obj.value값도 같이 변경된 것을 알 수 있다. 두 객체를 비교해도 true로 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결.. 공감수 0 댓글수 0 2022. 5. 20.
  • JavaScript 불변 객체 만드는 방법 const 이 중 const 키워드를 사용하면 상수 변수 선언을 할 수 있다. 그리고 const는 상수로 취급되기 때문에 다음과 같이 값을 변경하려고 시도하면 에러가 발생한다. const str = 'hello'; str = 'hey'; // Uncaught TypeError: Assignment to constant variable. Object.freeze() 자바스크립트에서 제공하는 Object.freeze()는 MDN 문서에서 "객체를 동결하기 위한 메서드"라고 설명하고 있다. 즉, Object.freeze를 사용하면 동결된 객체를 만들 수 있고, 동결된 객체에는 속성을 추가하거나 제거하는 동작이 불가능한 Immutable한 객체를 만들 수 있는 것이다. 또한 Object.freeze로 동결된 객.. 공감수 0 댓글수 0 2022. 5. 20.
  • JavaScript 자료형 데이터 타입 JavaScript 데이터 타입 기본 타입 (원시 타입 : Primitive Type) 참조 타입 (객체 타입 : Reference Type) 숫자(number),문자열(string),불린(boolean), undefined, null, 심벌(symbol) Object (객체, 배열, 함수, 정규 표현식) 원시 자료형은 모두 “하나”의 데이터(=정보)를 담고 있다. 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적이다. 참조 자료형은 기존에 고정된 크기의 보관함이 아니다. 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장한다. 동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주.. 공감수 0 댓글수 0 2022. 5. 20.
  • JavaScript 특성 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이다. 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다. 따라서 변수는 어떤 순간에는 문자열일 수 있고 다른 순간에는 숫자일 수도 있다. let hi = '안녕' console.log(hi); // 안녕 출력 hi = 22 console.log(hi); // 22 출력 JavaScript의 문제점 런타임에 타입이 결정된다. 즉, 소스가 빌드될 때 자료형을 결정하는 것이 아니라 실행 시 결정된다. 매번 타입을 써줄 필요가 없기 때문에 프로그래머가 빠르게 코드를 작성할 수 있지만, 런.. 공감수 0 댓글수 0 2022. 5. 20.
  • 79.곳곳에 도사리는 위험 (보안 위협) 클라이언트 공격 클라이언트 공격 종류는 단순히 스팸이나 추적 뿐만 아니라 신용카드 번호, 은행 계좌 또는 비밀번호같은 개인 정보 유출이 포함된다. 인터넷 활동 추적 웹사이트와 광고업체가 힘을 합쳐 사용자의 검색 데이터를 모으고, 사용자의 관심사를 파악할 수 있는 상세 자료로 만들어 상업적 용도로 사용하는 것이다. 추적을 줄이는 방법 ◦ 제 3자 쿠키(방문한 웹사이트가 아닌 다른 웹사이트에서 온 쿠키)를 금지 ◦ 트래커(인터넷 추적에 사용되는 소프트웨어)를 비활성화하는 브라우저 애드온을 사용 ◦ 자바스크립트를 차단 등 보호 수준을 최대한으로 설정해두면 많은 웹사이트를 제대로 사용할 수 없지만, 사용할 때만 일시적으로 보호 수준을 낮추고 다시 재설정하는 식으로 이용하는 것이 방어하기에 유리하다. 스팸 대량으.. 공감수 0 댓글수 0 2022. 5. 20.
  • 028-하샤드 수 function solution(x) { x += ""// x에 문자열을 더해 string으로 변환 var total = 0;// 자릿수의 합을 더할 변수 for (let i = 0; i < x.length; i++) { // x의 길이만큼 반복 total += Number(x[i]) } if (x % total == 0) { // x가 total로 나누어 떨어진다면 true 반환 return true } else { return false } } 공감수 0 댓글수 0 2022. 5. 18.
  • 027-콜라츠 추측 function solution(num) { for (let i = 0; i 공감수 0 댓글수 0 2022. 5. 18.
  • 026-제일 작은 수 제거하기 function solution(arr) { var min = arr.indexOf(Math.min(...arr)) // 변수에 배열 중 가장 작은 수의 인덱스 값을 담음 if ( arr.length > 1 ) {// arr의 길이가 1보다 클 때 arr.splice(min,1)// 그 인덱스를 제거 return arr; } else {// arr의 길이가 1일 때 return [-1]; } } 공감수 0 댓글수 0 2022. 5. 18.
  • 025-정수 제곱근 판별 function solution(n) { var answer = 0; var root = Math.sqrt(n) // 제곱근을 root에 담음 if (root % 1 == 0) { // 제곱근을 나눴을 때 양의 정수일 때 return Math.pow(root+1, 2) } else { return -1// 아니라면 -1 반환 } } 공감수 0 댓글수 0 2022. 5. 17.
  • 024-정수 내림차순으로 배치하기 function solution(n) { var answer = ""; n = String(n)// n을 문자열로 변환 var list = [];// 문자열로 변환한 n을 담을 빈 배열 for (let i = 0; i < n.length; i++) { // n의 길이만큼 반복 list.push(n[i]);// 빈 배열에 넣음 } list.sort(function(a, b) { // sort() 이용해 내림차순으로 정렬 return b - a; }); for (let k = 0; k < n.length; k++) { // n의 길이만큼 반복 answer += list[k]// 내림차순 순서대로 문자열 더하기 } return Number(answer); } 공감수 0 댓글수 0 2022. 5. 17.
  • 023-자연수 뒤집어 배열로 만들기 function solution(n) { var answer = []; n = String(n) //n을 문자열로 변환 for (let i = 0; i < n.length; i++) { // n 길이만큼 반복 answer.unshift(Number(n[i]));// n을 다시 숫자로 변환 후 배열 뒤에서부터 추가 } return answer; } 공감수 0 댓글수 0 2022. 5. 17.
  • 022-자릿수 더하기 function solution(n) { var answer = 0; n = String(n);// n을 문자열로 변환 for (let i = 0; i < n.length; i++) { // n의 길이만큼 반복 answer += Number(n[i]); // 다시 숫자로 변환해 값을 더함 } return answer; } 공감수 0 댓글수 0 2022. 5. 17.
  • 021-이상한 문자 만들기 function solution(s) { var answer = "";// 이상한 문자열을 담을 빈 문자열 let s_list = s.split(" ");// 공백 기준으로 s를 나눠 배열에 담음 for (i = 0; i < s_list.length; i++) {// s의 길이만큼 반복 for ( k = 0; k < s_list[i].length; k++) {// s의 i번째 인덱스의 길이만큼 반복 if (k % 2 == 0) {// 짝수 번째 자리일 때 대문자로 변환 answer += s_list[i][k].toUpperCase() } else if (k % 2 == 1) {// 홀수 번째 자리일 때 소문자로 변환 answer += s_list[i][k].toLowerCase() } } if ( i !.. 공감수 0 댓글수 0 2022. 5. 17.
  • 020-완주하지 못한 선수 function solution(participant, completion) { // 배열들을 유니코드 값으로 재정렬 participant.sort(); completion.sort(); for (let i = 0; i < participant.length; i++) { if (participant[i] !== completion[i]) {// 같은 인덱스의 값이 일치하지 않을 때 return participant[i]; } } } 더보기 // 효율성이 떨어지게 처음 짰던 코드 function solution(participant, completion) { for (let i = 0; i < participant.length; i++) { for (let k = 0; k < completion.lengt.. 공감수 0 댓글수 0 2022. 5. 16.
  • 019-수박수박수박수박수박수? function solution(n) { var answer = '';// 값을 받을 빈 문자열 for (let i = 0; i < n; i++) { if (i % 2 == 0) { // n.length의 홀수 자리일 때 answer += "수" } else if (i % 2 == 1) { // n.length의 짝수 자리일 때 answer += "박" } } return answer; } 공감수 0 댓글수 0 2022. 5. 16.
  • 018-서울에서 김서방 찾기 function solution(seoul) { // 배열에서 "kim"을 가진 인덱스를 반환 return "김서방은 " +seoul.indexOf("Kim")+"에 있다"; } 공감수 0 댓글수 0 2022. 5. 16.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.