Namgyung

FE 개발자

Category

network

[모두의 네트워크] 9장 무선 랜

35. 무선 랜의 구조 무선랜이란? 무선랜은 랜케이블을 이용하지 않고 전파를 이용해 컴퓨터와 연결한다. ( ex. ) 크라이언트측에서 무선 액세스 포인트와 통신하기 위해서 무선 랜 칩과 무선랜 어댑터가 필요하다. 요즘 컴퓨터에는 랜 칩 내장되어있다. 장점 ...

[모두의 네트워크] 8장 네트워크 전체 흐름

32~34. 네트워크의 전체 흐름 네트워크의 구성 응용 계층 애플리케이션 등에서 사용하는 데이터를 송수신하는데 필요하다. 전송계층 목적지에 데이터를 정확하게(데이터 손실, 변형 없이)...

[모두의 네트워크] 7장 응용 계층

28. 응용 계층의 역할 응용 계층의 역할 웹브라우저, 메일 프로그램등 이런 애플리케이션과 데이터를 주고 받기 위해 필요한 계층이다. 이런 클라이언트 측 애플리케이션이 서버측 애플리케이션이 통신 하기 위해서는 응용계층의 프로토콜을 사용해야한다. ...

[모두의 네트워크] 6장 전송 계층

23. 전송 계층의 역할 이전 물리계층, 데이터링크계층, 네트워크계층에서는 목적지에 데이터를 보내주는 역할을 전송 계층은 데이터가 잘 도착했는지 확인한다. 전송 계층의 두가지 역할 전송 계층은 목적지에 신뢰할 수 있는 데이터를 전달하기 위해 필요하다. 오류를 점검하...

[모두의 네트워크] 5장 네트워크 계층

17. 네트워크 계층의 역할 네트워크간의 연결 구조 데이터 링크 계층에서는 네트워크 안에서의 통신만 가능하다. 네트워크 계층에서는 이런 네트워크간의 통신이 가능하게 해준다. 그러기 위해서는 라우터라는 네트워크 장비가 필요하다. MAC주소는 랜에서만 통신이 가능하고 네트...

[모두의 네트워크] 4장 데이터 링크 계층

12. 데이터 링크 계층의 역할과 이더넷 데이터 링크 계층은 랜에서 받은 데이터를 주고 받기 위해 필요한 계층이다. 이더넷 네트워크 장비 간에 신호를 주고 받는 규칙 중 하나이다. 일반적으로 가장 많이 사용되고 있는 규칙이다. 허브의 경우여러 컴퓨터가 동시에 데이...

[모두의 네트워크] 3장 물리계층

09. 물리계층의 역할과 랜 카드의 구조 물리 계층에서는 0과1의 비트열을 전기신호로 바꿔 주어야한다. 이때 랜카드가 이 변환작업을 해준다. (무선, 유선 랜카드) 10. 케이블의 종류와 구조 일반적으로 랜 케이블(랜선)이라고 하고 양끝단에는 RJ-45가 붙어있어 물리...

[모두의 네트워크] 2장 네트워크의 기본 규칙

06. 네트워크의 규칙 사전에서는 프로토콜을 아래와 같이 정의한다. ❓ 프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합...

[모두의 네트워크] 1장 네트워크 첫걸음

01. 네트워크의 구조 - 컴퓨터 네트워크란? : 2대이상의 컴퓨터가 연결되어있으면 네트워크라고 한다. 이 연결을 통해 컴퓨터간 필요한 데이터(정보)를 주고 받을 수 있다. 인터넷은 전 세계의 큰네트워크부터 작은 네트워크를 연결한 거대한 네트워크를 말한다. - 패킷이란...

맨 위로 이동 ↑

project

[AWS] s3, Route 53 도메인 설정

도메인을 등록할 s3의 버킷으로 들어간다. https://console.aws.amazon.com/route53/v2/hostedzones# [속성]-[정적 웹 사이트 호스팅]의 편집을 클릭한다. 아래와 같이 설정 후 변경사항을 ...

[wanted pre onboarding] 선발과제

과제: https://codestates.notion.site/5f83f7a007664f1abcf0cdbcbbbbd521 🚀배포 배포: https://friendly-fermi-7483ff.netlify.app/ GitHub : https://github.com/Namgyun...

[번역톡] 기술스택, git convention

기술 스택 FE 주요기술스택 프레임워크: React 스타일링: styled-components 통신 api: axios 배포: firebase 형상관리: git 협업 툴 notion: api 설계 Figma: 와이어프레임설계, 디자인 소통 ...

[번역톡] 와이어프레임 설계

Figma에 이전에 회의한 내용과, API설계를 바탕으로 와이어프레임을 설계해 보았다. 크게 번역가가 로그인했을 때, 유저가 로그인을 했을 때를 나누었고, 유저와 번역가가 로그인 후 서비스를 이용하는 과정을 생각하며 설계를 했다. 유저가 번역을 요청을 하면 이후 번역가들이 보...

[번역톡] API 설계

xx(백앤드)님이 운영하고 계신 카페https://cafe.naver.com/etranscafe를 보면 번역을 의뢰하시는 분들, 번역을 해주시는 번역가 분들이 요청을 올리고 그에 대한 가격을 제시하며 거래가 이루어지고 있다. 이런 번역 요청과 의뢰자들의 수요를 보고 웹사이트 제작을...

맨 위로 이동 ↑

JavaScript

[JS] 배열 함수 정리

📖 배열 함수 정리 js 에서의 배열을 일반적인 배열의 동작을 흉내낸 객체(Object)이다. 💡 배열 함수 ✔ 배열 생성 함수 const arr1 = [] const arr2 = new Array() const arr3 = new Array(3) // [] con...

[JS] 호이스팅(Hoisting) 이란?

호이스팅(Hoisting)이란? JS는 처음에 스크립트를 읽어들일 때 변수명과 함수명만 읽은 후 변수명의 메모리공간을 할당해 둔다. 그 이후 다시 읽어들이며 변수의 데이터를 저장한다. 이 때 변수가 선언되기 이전에 그 변수를 찍으면 면수가 선언된 상태이니 undefined...

[JS] 날짜 계산 방법 (방금전, 1시간전, 하루 전, 1년 전)

js 시간 차이 계산 게시판에 보면 ‘방금전’, ‘x분 전’ 이런 식으로 표기된다. 몇분전에 표기되었는지를 파악하기 위해서는 지금 현재시간과 작성시간을 비교해야한다. 현재시간과 이전시간 비교를 위해서 현재시간과 작성시간을 getTime()으로 날짜를 초단위로 변경 후 이 ...

[JS] 이벤트루프 와 태스크 큐

JavaScript의 동작 JavaScript의 특징 중 하나는 싱글 스레드로 동작한다는 것이다. 싱글 스레드 방식이라는 것은 한번에 하나의 태스크만 처리할 수 있음을 의미한다. 하지만 브라우저의 작동을 보면 많은 태스크가 한번에 작동하는 것 처럼 보인다. 예를 들면 HTML에...

[JS] 디바운스(Debounce)와 스로틀(Throttle)

디바운스(Debounce)와 스로틀(Throttle)이란 둘 다 Dom이벤트의 실행을 제어하는 방법이다. 예를 들어 resize, scroll 를 했을때 어떤 이벤트가 실행한다고 했을 이벤트 수행에 제약을 걸어 보다 적은 이벤트가 실행되도록 한다. 사용되는예 검색어 작성하...

[JS] 이터러블

이터러블객체 란? : 이터러블객체는 for-of 문으로 순화할 수 있고 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다. const isIterable = v => v !== null && typeof v[Symbol.iterator]...

[JS] JS의 ES란? (ES3~ES8)

JS ES(ECMA Screapt)란? 바로 결론부터 말하자면 js는 언어이고, ES는 규격, 표준 즉 스펙을 뜻한다. js는 10일이라는 정말 짧은 기간에 만들어진 언어이다. 그런만큼 설계상의 미스가 있을 수 밖에 없다. 그렇기에 지속적으로 버전이 업그래이드 되고, 기능이...

맨 위로 이동 ↑

etc

[프로그래머스 2기] 빅데이터 플랫폼 프론트엔드 엔지니어링 지원 후기

📄 프로그래머스 프론트엔드 엔지니어링 지원 후기 프로그래머스에 개발자 채용 정보를 보려고 잠시 들렸다가 프론트앤드 엔지니어링 국비지원이 있다는 것을 알게되었다. 어차피 이력서 준비하며 자소서도 써야하고, 겸사겸사 지원해보기로 했다. 60명 정도만 뽑고 경쟁률이 높을 것 같...

번들러 란?

초기의 js는 간단한 작업을 위해 만들어졌지만, 지금은 js로 구현가능한 기능들이 많아지며 코드의 양과 복잡성이 높아졌다. 점점 불어나는 코드를 기능이나 페이지별로 분리해서 관리를 해도 복잡한 의존관계를 개선하기는 힘들어졌다. 그래서 그 복잡도를 낮추기 위해 모듈 방식을 사용하게 ...

마크다운(Marckdown) 문법 정리

마크다운 이란? 존 그루버가 만든 마크다운(Markdown) 은 읽기 쉽고 쓰기 쉽게 만들어진 일반 텍스트 작성 문법으로, 사용법이 간단해서 누구나 쉽게 배울 수 있고, 빠르게 글을 쓸 수 있습니다. 또한 html 태그 구조를 아는 분이라면, 더욱 쉽게 사용할 수 있습니다. ...

정규표현식(RegExp)

정규표현식(RegExp) 정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 ‘검색’하거나 ‘치환’하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다. 역할 문자 검색(search) 문자 대...

[웹 기획] 화면설계

UX 스토리보드 : UX 구현에 수반되는 사용자와 태스크, 인터페이스 간 상호작용을 시각화 하여, 개발자/디자이너의 의사소통을 돕는 도구이자 완성해야 할 앱 서비스와 예상되는 사용자 경험을 미리 보기 위한 방법론을 말한다. Feature List ...

[jQuery] Ajax사용법

Ajax 기본 골격 $.ajax({ type: url : data: dataType: success: function(result){ }, error:function(){ } }) 매개변수 ...

맨 위로 이동 ↑

pre_onboarding

[wanted pre onboarding] 선발과제

과제: https://codestates.notion.site/5f83f7a007664f1abcf0cdbcbbbbd521 🚀배포 배포: https://friendly-fermi-7483ff.netlify.app/ GitHub : https://github.com/Namgyun...

맨 위로 이동 ↑

coding-test

[프로그래머스 - JS] LV.2 기능 개발

🔗 문제 LINK ♟ 풀이 순서 각 작업에 걸리는 시간을 계산해 배열로 만든다. workingPeriod = [] (100% - 현 진행%)/작업속도 소수점올림 이 앞으로 걸리는 시간 wokingPeriod를 forEach(period,index)로 돌면서 ...

[프로그래머스 - JS] LV.2 멀쩡한 사각형

🔗 문제 LINK ♟ 풀이 순서 선에 걸리는 사각형의 갯수 = gcd * (w / gcd + (h / gcd - 1)) 이다. => w+h-gcd w 와 h의 최대공약수를 구한다. w*h - w+h-gcd 를 return 한다 👾 코드 const...

[프로그래머스 - JS] LV.2 오픈채팅방

🔗 문제 LINK ♟ 풀이 순서 배열record의 문자열을 공백기준으로 배열로 변경해 2차원 배열로 나타낸다 => mapRecords = map(), split(“ “) records를 forEach로 돌면서 마지막 id와 nickname 찾아서 객체로 나타내기 ...

[프로그래머스 - JS] LV.1 신고 결과 받기

🔗 문제 LINK ♟ 풀이 순서 id_list = 모든 이용자 ID (arr) report = 신고한 이용자의 ID와 신고당한 이용자의 ID (arr) k = 신고 횟수 정답을 적을 길이id_list인 빈배열 생성 신고당한 유저와 신고횟수를 객체로 나타내기 ...

[프로그래머스 - JS] LV.2 문자열 압축

🔗 문제 LINK ♟ 풀이 순서 answer = 문자열 압축 후 문자열의 길이들 배열에 넣어둠 str = 압축한 문자열 count = 2 (연속된문자의 수, 2가 기본값) arr = 단위k개로 쪼갠 배열 단위k개로 쪼개서 배열로 생성 k개단위로 잘라 압축한...

맨 위로 이동 ↑

Python

[Python] Flask-GET,POST요청

Post // index.html 폴더 function makeReview() { // 1. html <from></from>태그 안의 val 값 가져오기 let title = $("#title").val(); let author = $("#...

[Python] Flask-기초

Flask란 Flask은 Django, FaskAPI와 같이 대표적인 Python 프레임워크 중 하나이다. Flask는 장고에 비해 배우기 쉽다. 적은 코드라인으로 앱 구축이 가능하다. 라이브러리를 자유롭게 사용하여, 응용 프로그램을 빠르게 확장할 수 있는 유연...

[Python] mongoDB조작

시작하기 from pymongo import MongoClient # pymongo를 import 하기 client = MongoClient('localhost', 27017) # mongoDB는 27017 포트로 돌아갑니다. db = client.dbname ...

[Python] 크롤링

기본 세팅 import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Geck...

맨 위로 이동 ↑

TranslationTalk

[AWS] s3, Route 53 도메인 설정

도메인을 등록할 s3의 버킷으로 들어간다. https://console.aws.amazon.com/route53/v2/hostedzones# [속성]-[정적 웹 사이트 호스팅]의 편집을 클릭한다. 아래와 같이 설정 후 변경사항을 ...

[번역톡] 기술스택, git convention

기술 스택 FE 주요기술스택 프레임워크: React 스타일링: styled-components 통신 api: axios 배포: firebase 형상관리: git 협업 툴 notion: api 설계 Figma: 와이어프레임설계, 디자인 소통 ...

[번역톡] 와이어프레임 설계

Figma에 이전에 회의한 내용과, API설계를 바탕으로 와이어프레임을 설계해 보았다. 크게 번역가가 로그인했을 때, 유저가 로그인을 했을 때를 나누었고, 유저와 번역가가 로그인 후 서비스를 이용하는 과정을 생각하며 설계를 했다. 유저가 번역을 요청을 하면 이후 번역가들이 보...

[번역톡] API 설계

xx(백앤드)님이 운영하고 계신 카페https://cafe.naver.com/etranscafe를 보면 번역을 의뢰하시는 분들, 번역을 해주시는 번역가 분들이 요청을 올리고 그에 대한 가격을 제시하며 거래가 이루어지고 있다. 이런 번역 요청과 의뢰자들의 수요를 보고 웹사이트 제작을...

맨 위로 이동 ↑

React

[React] JSX ( html과 jsx의 차이 )

✨ React - JSX ( html과 jsx의 차이 ) js코드 위에서 html코드처럼 작성할 수 있도록 만들어진게 jsx 이다. React가 처음 나왔을때 jsx가 없었다. 그래서 function App(){ return React.createElement('h1',...

[React] porp-types란?

prop-types prop-types는 전달받은 데이터의 type이 의도된 바와 일치하는지를 검사해주는 모듈이다. type 검사를 왜 할까? : 작업하는 프로젝트의 규모가 커질수록 예상치 못한 곳에서 에러가 발생하는 일이 많아진다. 이때, 수많은 데이터를 전달하고 받다 보면...

맨 위로 이동 ↑

DOM

[DOM] Dom요소 선택하기

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 이때 선택자 API는 DOM에서 Element 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공한다. id를 이용한 요소 노트 취득 만약 id가 여러개 존재할 경우...

[DOM] Dom이란?

DOM ( Document Object Model ) 우리가 작성한 HTML 문서는 브라우저의 렌더링 엔진을 통해 HTML문서를 파싱(해석)하게된다. 그렇게 파싱이 끝나면 브라우저가 이해할 수 있는 자료구조인 DOM을 생성하게된다. (이때 브라우저마다 다른 랜더링엔진을 사용하며 ...

맨 위로 이동 ↑

CSS

[CSS] 웹접근성, IR 기법

IR기법이란? 웹 접근성을 준수하여 이미지에 대체 텍스트를 제공해야한다. 이렇게 작성한 대체 텍스트는 스크린리더기, 검색엔진의 내용 수집에 이용될 수 있다. 이미지에 의미가 있을 경우 : 로고이미지, 배너 슬라이드 이미지등 이미지에 의미가 담겨있는 경우. alt 가장 보편...

[CSS]반응형 웹 미디어쿼리

반응형 웹이란? 웹사이트가 모바일기기와 다른 다양한 화면의 크기에서 더 나은 사용자 경험을 주기위한 방법 중 하나이다. 반응형웹은 하나의 템플릿으로 화면의 사이즈를 감지해 그에 맞춘 화면을 보여준다. 지금 이 블로그도 반응형이다. 화면의 가로를 줄이고 늘려보면 사이즈에 맞는 화면...

맨 위로 이동 ↑

Web

[Web] 웹 저장소들의 특징(Web Storage, Cookie, Cache)

📖 [Web] 웹 저장소들의 특징(Web Storage, Cookie, Cache) 개발자 모드를 보면 Application탭에 Storage를 볼 수 있다. Local Storage, Session Storage, Cookies 등 이 브라우저 저장소는 앱또는 웹에 방문...

[Web API] 로컬스토리지에 데이터 저장, 삭제 하기

로컬스토리지에 데이터 저장 및 제거 파일 하나에 로컬스토리지에 저장,삭제 하는 함수를 만들어서 export해서 사용하면 편하다. // Local Storage에 저장 const setLocalData = (key, value) => localSto...

맨 위로 이동 ↑

Pythons

[Python] 기본 문법

python의 기본적인 문법 Type type() #타입확인 int() #정수로 변환 23.45 => 23 float() #실수로 변환 123 => 123.0 str() #문자열로 변환 bool() #boolean으로 변환(True/False)

맨 위로 이동 ↑

Git

[Git] Good Commit Message

commit message 작성 이전의 커밋 메시지 혼자 git을 사용할때는 commit message를 내가 보기편한 방식으로 작명하면되었다. 하지만, 코드의 내용이 많아지고 복잡해 질수록 메시지를 이해하는데 어려움을 격게 된다. 그러므로 협업할때 미리 commit messa...

맨 위로 이동 ↑

bookmark

Bookmark

자주 참고하는 사이트 정리 웹 디자인 Behance Dribbble 노트폴리오 Awwwards Canva input 디자인 GD 웹 design Awards 이미지 freepik pixabay Unsplash pinterest 파비콘으로 변형 img =...

맨 위로 이동 ↑

jQuery

[jQuery] Ajax사용법

Ajax 기본 골격 $.ajax({ type: url : data: dataType: success: function(result){ }, error:function(){ } }) 매개변수 ...

맨 위로 이동 ↑

AWS

[AWS] s3, Route 53 도메인 설정

도메인을 등록할 s3의 버킷으로 들어간다. https://console.aws.amazon.com/route53/v2/hostedzones# [속성]-[정적 웹 사이트 호스팅]의 편집을 클릭한다. 아래와 같이 설정 후 변경사항을 ...

맨 위로 이동 ↑

errorHandling

Warning:〈p〉cannot appear as a descendant of〈p〉

react에서 p태그 안에 p태그를 작성했더니 저런 경고메시지가 콘솔에 찍혔다. 그냥 html에 찍었을 때는 저런 경고창이 뜨지는 않았다. p태그 안에있는 p를 span 태그로 바꾸어주었더니 경고메시지가 사라졌다. p태그 안에 p태그 작성 HTML에서 p태그의 p는 pa...

맨 위로 이동 ↑