티스토리

carpe diem

검색하기

블로그 홈

carpe diem

carpediem9911.tistory.com/m

코딩 관련 잡다한 정보 정리

구독자: 4

방명록 방문하기

반응형

주요 글 목록

HTTP 그리고 HTTPS 들어가기 전에... 클라이언트 서버에게 요청하거나 응답을 받는 것 서버 브라우저로부터 요청을 받거나 응답을 보내는 것 HTTP 클라이언트 프로그램과 서버 프로그램은 http 메시지를 교환하여 통신한다. 💡 http는 메시지의 구조 및 클라이언트와 서버가 메시지를 어떻게 교환하는지에 대해 정의한다. o 이것이 숫자 0인지, 영어 o인지 한글 ㅇ인지 알려면 어떤 언어로 쓰여졌는지를 알아야 한다. 이현진 06139 010-8724-5697 이것을 봤을 때 각각 이름, 우편번호, 전화번호인 것을 알 수 있는 것은 우리가 정해진 형식을 이미 알고 있기 때문이다. 이처럼 http는 인터넷상 커뮤니케이션에서 사용되는 형식들 중 하나이다. 클라이언트와 서버가 메시지를 교환할 때도 교환한 데이터의 형식을 알아야만 그 데.. 공감수 0 댓글수 0 2023. 4. 16.
[SSAFY/싸피] 2월 회고 1주차 (01.30~02.03) JAVA 수업이 끝나고 첫 관통프로젝트를 진행했다. parser와 gui를 다뤄야 했는데 생각했던 것보다 더 까다로웠다. 그래도 좋은 팀원을 만나서 무사히 다 끝낼 수 있었다. JAVA 이후에는 DB에 대해 배웠다. 전공수업으로 DB를 듣기도 했었고, 프로젝트를 하면서 mysql을 사용해본적이 있어서 이해하기 수월했다. 다음주 부터 본격적으로 알고리즘 수업이 시작되는데 너무 떨린다. 2주차 (02.06~02.10) 첫 과목평가가 있었다. JAVA와 관련된 시험이었는데 생각했던 것보다 까다로운 문제들이 많았다. 난이도가 어렵다기 보다는 꼼꼼하게 생각해야하는 문제들이 많았던 것 같다. 그리고 알고리즘 수업이 시작되었다. 첫 주라 그런지 본격적인 알고리즘 보다는 자료구조와 같은.. 공감수 0 댓글수 0 2023. 3. 4.
백준 16437 양 구출 작전 문제 N개의 섬으로 이루어진 나라가 있습니다. 섬들은 1번 섬부터 N번 섬까지 있습니다. 1번 섬에는 구명보트만 있고 다른 섬에는 양들 또는 늑대들이 살고 있습니다. 늘어나는 늑대의 개체 수를 감당할 수 없던 양들은 구명보트를 타고 늑대가 없는 나라로 이주하기로 했습니다. 각 섬에서 1번 섬으로 가는 경로는 유일하며 i번 섬에는 pi번 섬으로 가는 다리가 있습니다. 양들은 1번 섬으로 가는 경로로 이동하며 늑대들은 원래 있는 섬에서 움직이지 않고 섬으로 들어온 양들을 잡아먹습니다. 늑대는 날렵하기 때문에 섬에 들어온 양을 항상 잡을 수 있습니다. 그리고 늑대 한 마리는 최대 한 마리의 양만 잡아먹습니다. 얼마나 많은 양이 1번 섬에 도달할 수 있을까요? 입력 첫 번째 줄에 섬의 개수 N (2 ≤ N ≤ .. 공감수 0 댓글수 0 2023. 2. 8.
[SSAFY/싸피] 1월 회고 🎉 스타트 캠프 (01.03~01.13) 스타트캠프라는 이름답게 싸피 생활에 적응할 수 있도록 생활 수칙이나 전반적인 커리큘럼 등을 알아가는 시간을 가졌다. 생각한 것보다 출결기준이 타이트해서 걱정되기도 했지만 그만큼 23년도를 더 열심히 보낼 수 있을 것 같아 기대되기도 했다. 원래 올빼미형이기도 하고 최근들어 계속 늦게 자는 습관을 들여서 수면패턴이 망가진 상태였는데, 싸피덕에 아침형인간으로 거듭날 수 있을 것 같다. 오히려좋아~~!!!! 그리고 반배치고사와 아이디어톤을 진행했다. 팀으로 아이디어톤을 하면서 팀원들과 친해질 수 있어서 좋았고 활동 자체도 힘들지 않고 즐겁게 참여할 수 있었다. 둘째주 첫날에는 로봇을 이용해서 다양한 미션을 수행하는 활동을 했다. 어려운 프로그래밍을 요구하는 활동이 아니.. 공감수 0 댓글수 0 2023. 2. 5.
[SSAFY/싸피] 9기 입학식 후기 1월 19일에는 설연휴를 앞두고 싸피 9기의 입학식이 있었다. 입학식을 하고 나니 이제 싸피인으로서의 생활이 시작되었다는 실감이 났다. 입학 선물로 웰컴킷도 받았다. 언박싱 모습을 찍어놨어야 하는데 깜빡했다😭 웰컴킷 안에는 후드 집업, 흰색 면티, 그리고 박스가 들어있었다. 후드 집업은 흰색, 검정색, 하늘색이 있었는데 무난한 검정색으로 골랐다. 앞으로 다가올 봄, 가을에 요긴하게 입을 수 있을 것 같다~~ 사이즈도 95로 해서 적당히 넉넉한게 아주 마음에 들었다. 티는 아직 안 입어 봤지만 흰 티는 기본템이니까 많을 수록 이득이다. 박스 안에는 셀카봉, 텀블러, 에코백이 들어있었다. 안 그래도 기존에 쓰던 셀카봉이 사라져서 필요하던 참이었는데 이렇게 받을 수 있어서 너무 좋았다. 일반 셀카봉이 아니라 .. 공감수 0 댓글수 0 2023. 1. 29.
1. 운영체제란 무엇인가 📢 주저리 주저리 때는 2020년, 코로나가 한창 유행하기 시작했을 무렵 나는 비대면으로 os 수업을 듣게 되었다. 선배들에게 말로만 듣던 그 악명높은 전필과목을 듣게 된다니 얼마나 무시무시한 내용들이 기다리고 있을지 심장이 달달 떨렸다. 수업을 듣기 전에는 os라 하면 '뭐, 윈도우10 그런거 아닌가' 라고 생각하는게 다였다. OS 수업을 들으며 내가 얼마자 무지했었는지를 절실히 깨달았고, 수업을 듣고 나서는 컴퓨터에 대한 이해도가 한층 깊어진 느낌이었다. 개인적으로 내용도 재밌어서 즐겁게 수업을 들었던 것 같다(물론 과제는 힘들었지만...ㅎ) 그렇게 한 학기를 열심히 공부했것만, 현재 운영체제에 대한 것을 떠올려보니 흐릿한 것이 복습이 필요함을 느꼈다. 그래서 OS를 정리하면서 복습하고 다시 잊어버리.. 공감수 0 댓글수 0 2023. 1. 9.
[SAFFY/싸피] 9기 합격 후기 & 준비과정 (전공자) 📆 일정 지원서 접수: 2022.10.24 ~ 2022.11.7 에세이 작성: 2022.11.8 ~ 2022.11.19 sw 적성진단(전공자): 2022.11.20 에세이&sw 적성진단 결과 발표: 2022.11.29 인터뷰: 2022.12.12 ~ 2022.12.16 인터뷰 결과 발표: 2022.12.22 😁 알게 된 경로 평소 주변에서 싸피를 하면 좋다는 이야기를 많이 들었었다. 또한 동아리를 같이 했던 지인 중에도 싸피를 하고 만족했다는 이야기를 해준 적이 있었기에 졸업을 하게 된다면 싸피에 지원하겠다고 마음먹었다. 그러던 중 마침 싸피 9기 지원서 접수가 시작된 것을 알게 되었고 신청하였다. 📑 에세이 에세이는 1문항이고, 최대 600자까지 작성이 가능했다. 600자면 많은 분량이 아니기에 꼭 들.. 공감수 1 댓글수 0 2022. 12. 27.
백준 2206 문제 N×M의 행렬로 표현되는 맵이 있다. 맵에서 0은 이동할 수 있는 곳을 나타내고, 1은 이동할 수 없는 벽이 있는 곳을 나타낸다. 당신은 (1, 1)에서 (N, M)의 위치까지 이동하려 하는데, 이때 최단 경로로 이동하려 한다. 최단경로는 맵에서 가장 적은 개수의 칸을 지나는 경로를 말하는데, 이때 시작하는 칸과 끝나는 칸도 포함해서 센다. 만약에 이동하는 도중에 한 개의 벽을 부수고 이동하는 것이 좀 더 경로가 짧아진다면, 벽을 한 개 까지 부수고 이동하여도 된다. 한 칸에서 이동할 수 있는 칸은 상하좌우로 인접한 칸이다. 맵이 주어졌을 때, 최단 경로를 구해 내는 프로그램을 작성하시오. 입력 첫째 줄에 N(1 ≤ N ≤ 1,000), M(1 ≤ M ≤ 1,000)이 주어진다. 다음 N개의 줄에 .. 공감수 0 댓글수 0 2022. 12. 13.
백준 14502 문제 인체에 치명적인 바이러스를 연구하던 연구소에서 바이러스가 유출되었다. 다행히 바이러스는 아직 퍼지지 않았고, 바이러스의 확산을 막기 위해서 연구소에 벽을 세우려고 한다. 연구소는 크기가 N×M인 직사각형으로 나타낼 수 있으며, 직사각형은 1×1 크기의 정사각형으로 나누어져 있다. 연구소는 빈 칸, 벽으로 이루어져 있으며, 벽은 칸 하나를 가득 차지한다. 일부 칸은 바이러스가 존재하며, 이 바이러스는 상하좌우로 인접한 빈 칸으로 모두 퍼져나갈 수 있다. 새로 세울 수 있는 벽의 개수는 3개이며, 꼭 3개를 세워야 한다. 예를 들어, 아래와 같이 연구소가 생긴 경우를 살펴보자. 2 0 0 0 1 1 0 0 0 1 0 1 2 0 0 1 1 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 1 1 .. 공감수 0 댓글수 1 2022. 12. 3.
백준 9019 문제 네 개의 명령어 D, S, L, R 을 이용하는 간단한 계산기가 있다. 이 계산기에는 레지스터가 하나 있는데, 이 레지스터에는 0 이상 10,000 미만의 십진수를 저장할 수 있다. 각 명령어는 이 레지스터에 저장된 n을 다음과 같이 변환한다. n의 네 자릿수를 d1, d2, d3, d4라고 하자(즉 n = ((d1 × 10 + d2) × 10 + d3) × 10 + d4라고 하자) D: D 는 n을 두 배로 바꾼다. 결과 값이 9999 보다 큰 경우에는 10000 으로 나눈 나머지를 취한다. 그 결과 값(2n mod 10000)을 레지스터에 저장한다. S: S 는 n에서 1 을 뺀 결과 n-1을 레지스터에 저장한다. n이 0 이라면 9999 가 대신 레지스터에 저장된다. L: L 은 n의 각 자릿.. 공감수 0 댓글수 0 2022. 10. 19.
프로그래머스 프렌즈4블록 문제 설명 블라인드 공채를 통과한 신입 사원 라이언은 신규 게임 개발 업무를 맡게 되었다. 이번에 출시할 게임 제목은 "프렌즈4블록". 같은 모양의 카카오프렌즈 블록이 2×2 형태로 4개가 붙어있을 경우 사라지면서 점수를 얻는 게임이다. 만약 판이 위와 같이 주어질 경우, 라이언이 2×2로 배치된 7개 블록과 콘이 2×2로 배치된 4개 블록이 지워진다. 같은 블록은 여러 2×2에 포함될 수 있으며, 지워지는 조건에 만족하는 2×2 모양이 여러 개 있다면 한꺼번에 지워진다. 블록이 지워진 후에 위에 있는 블록이 아래로 떨어져 빈 공간을 채우게 된다. 만약 빈 공간을 채운 후에 다시 2×2 형태로 같은 모양의 블록이 모이면 다시 지워지고 떨어지고를 반복하게 된다. 위 초기 배치를 문자로 표시하면 아래와 같.. 공감수 5 댓글수 1 2022. 10. 6.
백준 17178 문제 아이즈원의 팬인 시온이는 드디어 티켓팅에 성공하여 콘서트를 갔다. 콘서트장에 일찍 도착한 시온이는 기대하며 입장을 위해 줄을 섰다. 하지만 아이즈원의 인기대로 시온이를 포함한 많은 팬이 줄을 서고 있다. 콘서트의 입장이 시작되었고 입장은 티켓 번호 순서대로 이루어졌다. 하지만 입구에 너무 많은 팬이 몰려 아무도 이동할 수 없는 상황이 되었고, 결국 주최 측에서 인원을 정렬시켜 다음과 같이 간신히 사람 한 줄이 설 수 있는 대기 공간을 만들었다. 주최 측은 번호표 순서대로만 통과할 수 있는 입구를 만들어 두었지만, 줄에서는 마구잡이로 사람들이 기다리고 있다. 대기 공간을 이용하여 입장이 원활히 이루어지도록 하려고 한다. 콘서트장에 사람들이 제대로 들어갈 수 있는지 확인해보자. 사람들은 현재 5명씩 N.. 공감수 0 댓글수 1 2022. 9. 20.
백준 2504 문제 4개의 기호 ‘(’, ‘)’, ‘[’, ‘]’를 이용해서 만들어지는 괄호열 중에서 올바른 괄호열이란 다음과 같이 정의된다. 한 쌍의 괄호로만 이루어진 ‘()’와 ‘[]’는 올바른 괄호열이다. 만일 X가 올바른 괄호열이면 ‘(X)’이나 ‘[X]’도 모두 올바른 괄호열이 된다. X와 Y 모두 올바른 괄호열이라면 이들을 결합한 XY도 올바른 괄호열이 된다. 예를 들어 ‘(()[[]])’나 ‘(())[][]’ 는 올바른 괄호열이지만 ‘([)]’ 나 ‘(()()[]’ 은 모두 올바른 괄호열이 아니다. 우리는 어떤 올바른 괄호열 X에 대하여 그 괄호열의 값(괄호값)을 아래와 같이 정의하고 값(X)로 표시한다. ‘()’ 인 괄호열의 값은 2이다. ‘[]’ 인 괄호열의 값은 3이다. ‘(X)’ 의 괄호값은 2×값.. 공감수 0 댓글수 0 2022. 9. 18.
시간복잡도 정리 1. 점근표기법(Asymptotic Notation) 1) 빅 오 표기법(O(n)) 빅 오 표기법의 정의는 다음과 같다. 모든 N≥N₀에 대해 f(N)≤cg(N)이 성립하는 양의 상수 c와 N₀가 존재하면, f(N)=O(g(N))이다. 이때 g(N)이 f(N)의 상한이 된다. 예를 들어 f(N)= 4N²+N+1 이라는 식이 있을 때 2보다 큰 N에 대해서 g(N)=N², c=5라면 항상 f(N)≤cg(N)이 성립한다. 주의할 점은 g(N)을 찾을 때 가장 차수가 낮은 함수를 선택하는 것이다. 차수가 높은 함수를 선택하게 될 경우 시간복잡도를 과장해서 추정하게 되기 때문이다. 2) 빅 오메가 표기법(Ω(n)) 빅 오메가 표기법의 정의는 다음과 같다. 모든 N≥N₀에 대해 f(N)≥cg(N)이 성립하는 양의.. 공감수 2 댓글수 1 2021. 9. 8.
[프로그래밍 언어 구조론] 1장 정리 1. Programming language의 역사 1) Machine language(machine code) 특징: - 폰 노이만이 고안한 컴퓨터 아키텍쳐는 operator을 통해 명령어를 연속적인 이진코드로 변환할 수 있었다. 이 이진코드들을 machine langauge라고 한다. - machine laguage들은 fetch, decode, excution 과정을 거쳐 실행된다. 단점: - 사람이 한 눈에 보고 이해하기 어렵다. - 에러가 발생하기도 쉽다. 2) Assembly language 특징: - assembly language는 명령 코드와 메모리 위치를 표현하는 연상기호의 집합이다. - 어셈블러는 assembly language를 machine code로 변환하고, 로더는 machine.. 공감수 0 댓글수 1 2021. 9. 6.
storybook에서 public 폴더에 있는 에셋을 사용하고 싶을 때 😥 문제상황 storybook으로 컴포넌트를 테스트하는 과정에서 public 폴더에 있는 파일들을 절대경로로 불러왔더니 제대로 렌더링되지 않는 것을 볼 수 있었다. 🔨 해결책 package.json 파일에서 scripts 부분을 수정해주면 된다. // package.json { "scripts": { "start-storybook": "start-storybook -s ./public -p 9001" } } 이렇게 코드를 수정해주면 storybook에서도 static 파일을 가져올 수 있다. 공감수 1 댓글수 0 2021. 8. 8.
storybook에서 svgr 웹팩 설정이 동작하지 않을 때 😥 문제상황 storybook은 file-loader가 기본 설정으로 되어 있어서 @svgr/webpack을 설정하고 싶은 경우에는 main.js에서 unshift를 사용해 웹팩 설정을 해주어야 한다. config.module.rules.unshift({ test: /\.svg$/, use: ["@svgr/webpack"], }); next.js에서 storybook을 설치하고 @svgr/webpack을 설정해줄 때는 잘 동작했었는데, cra에서 storybook을 설치하고 @svgr/webpack을 설정하려니 동작하지 않았다. 🔨 해결책 @svgr/webpack 대신에 babel-plugin-inline-react-svg을 사용하였다. 이 경우에는 main.js에서 설정하는 방식이 웹팩과 달라진다. /.. 공감수 0 댓글수 0 2021. 8. 5.
📚 Storybook을 사용해보자! 📢 개발환경: React.js, typescript, styled-components 사용 ❗ 혹시 storybook 세팅이 되어있지 않다면 이전 게시물을 참고하자! 2021.07.25 - [웹개발/개발환경 설정] - next.js 에 typescript, storybook 설정하기 next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측 carpediem9911.tistory.com storybook을 사용하기 위해 블로그 글을 읽어보니 addon-knobs를 사용해서 컴포넌트 props를 제어하.. 공감수 2 댓글수 0 2021. 7. 27.
next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측했다. 카톡으로 웹 사이트 링크를 전달하는 경우 카톡에서 자체적으로 메타태그들을 인식해서 사이트 이름, 썸네일 등을 띄워준다. 그런데 spa 특성상 공유 링크를 전달하게 되면, 디렉토리에 해당하는 메타태그들 값이 뜨는 것이 아니라 모든 페이지가 동일한 값이 뜬다는 불편함이 있었다. 그래서 이 문제를 해결하기 위해 웹 사이트를 next.js로 바꾸기로 결정했다. 앞으로 추가하게 될 기능들이나, SEO를 위해서도 next.js로 바꾸는 것이 맞는 선택이라고 생각했다. 이왕 옮기는 김에 typescript로 전환하.. 공감수 6 댓글수 1 2021. 7. 25.
ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기 ReactComponent를 통해 svg 파일을 컴포넌트처럼 사용하면 fill 속성을 변경하여 svg 에셋의 색을 설정할 수 있다! svg 파일 코드를 뜯어보면 다음과 같다 혹은 이런 형식이다. 첫번째 svg의 경우 색상을 바꾸는 방법은 다음과 같다. import styled from "styled-components"; import { PlusIcon } from "@assets/icons/common"; const IconBox = () => { return ( ); }; const Container = styled.div` width: 20px; height: 20px .plus_icon{ width: 10px; height: 10px; path { fill: #ffffff; } } `; 이렇게 s.. 공감수 3 댓글수 0 2021. 7. 24.
서버 개발부터 배포까지(4): 로드밸런서 설정하기 2021.07.16 - [서버 개발/AWS] - 서버 개발부터 배포까지(3): elastic ip, route53, https 설정하기 서버 개발부터 배포까지(3): elastic ip, route53, https 설정하기 ec2 인스턴스를 생성하여 서버를 배포하였다면, 부가적으로 필요한 것들을 설정해줄 차레이다. 아직 인스턴스를 생성하지 못했다면 아래의 게시물을 보고 먼저 인스턴스를 생성하자. 2021.07.14 - [ carpediem9911.tistory.com 이전 글에서 https 설정까지 완료했었다. 이제 https를 통해 우리 서버에 요청을 보내면 443번 포트, http를 통해 요청을 보내면 80번 포트로 들어오게 된다. 그런데 우리가 만든 코드는 5000번 포트를 열어놓도록 설정해놓았다... 공감수 0 댓글수 0 2021. 7. 22.
서버 개발부터 배포까지(3): elastic ip, route53, https 설정하기 ec2 인스턴스를 생성하여 서버를 배포하였다면, 부가적으로 필요한 것들을 설정해줄 차레이다. 아직 인스턴스를 생성하지 못했다면 아래의 게시물을 보고 먼저 인스턴스를 생성하자. 2021.07.14 - [서버 개발/AWS] - 서버 개발부터 배포까지(2): aws로 서버 배포 서버 개발부터 배포까지(2): aws로 서버 배포 우리가 만든 api를 웹 개발 팀원들이 사용하기 위해서는 서버를 배포해주어야 했다. 그래서 ec2를 사용하여 배포하기로 결정하였다. 1. ec2 인스턴스 생성하기 먼저 aws에 로그인하여 콘솔에 접속해 carpediem9911.tistory.com 1. elastic ip 설정하기 생성한 인스턴스에 대한 정보를 보면 퍼블릭, 프라이빗 ip 주소 등이 있을 것이다. 하지만 이러한 ip 주.. 공감수 0 댓글수 0 2021. 7. 16.
서버 개발부터 배포까지(2): aws로 서버 배포 우리가 만든 api를 웹 개발 팀원들이 사용하기 위해서는 서버를 배포해주어야 했다. 그래서 ec2를 사용하여 배포하기로 결정하였다. 1. ec2 인스턴스 생성하기 먼저 aws에 로그인하여 콘솔에 접속해야 한다. https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2 https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2 ap-northeast-2.console.aws.amazon.com 만약 계정이 없다면 계정을 만들어야 한다. 나의 경우는 돈이 없는 대학생이기 때문에 프리티어로 계정을 생성하였다. 로그인을 한 후 상단 헤더에서.. 공감수 0 댓글수 2 2021. 7. 14.
서버 개발부터 배포까지(1): typescript 설정 동아리에서 진행하는 3주간의 프로젝트에서 서버 개발을 담당하게 되었다. 서버 개발은 처음이라 시행착오도 굉장히 많았는데, 그래서 내가 겪었던 오류와 해결책들을 정리해보고자 한다! 협업에서는 typescript로 개발하는것이 유지, 보수에 좋다고 하여 우리도 typescript를 사용하기로 했다. 그리고 디렉토리 구조가 복잡해질 것을 대비해 절대경로를 사용하기로 하였다. 그런데 typescript와 절대경로를 사용하니 예상치 못한 여러 에러들에 부딪혔다. 결론부터 말하자면 결국 우리는 절대경로를 포기하였다ㅠㅠㅠ 그 이유는 아래에서 설명할 것이다. 1. tsconfig.json 설정하기 typescript를 사용하기 위해서는 tsconfig.json을 작성해주어야 한다. 우리 프로젝트에서는 다음과 같이 ts.. 공감수 1 댓글수 1 2021. 7. 14.
웹 사이트의 렌더링 동작 방식을 이해해보자! 🔗 클라이언트/서버 - 클라이언트 인터넷을 통해 서버에 데이터 요청을 하는 주체를 말합니다. 우리가 사용하는 핸드본, 웹 브라우저 등이 클라이언트가 될 수 있습니다. - 서버 클라이언트가 보낸 요청을 받아서 처리한 후 결과를 다시 전송해주는 주체를 말합니다. 📜 웹 페이지 발전사 1. static sites 우리가 웹페이지에 접속하면 보게 되는 화면들은 어디서 오는 것인지 생각해보신적 있으신가요? 웹을 공부하다 보면 CSR, SSR 등의 용어를 들어본 적 있지만 정확한 개념을 알아볼 기회가 없었을 경우가 많았을 것입니다. 1990년대 중반까진 웹사이트 대부분은 정적인 웹사이트(static sites)였습니다. 서버에 여러 개의 html 문서들이 저장되어 있고, 사용자가 웹페이지에 접속할 때마다 서버로 부.. 공감수 0 댓글수 0 2021. 5. 24.
클라우드 컴퓨팅에 대해 알아보자! 서버 개발을 공부하다 보니 배포를 하기 위해 aws를 사용해야 했다. aws를 다루고 있어도 정작 aws가 대체 어떤 것인지 알지 몰랐었다. 그래서 aws가 대체 무엇인지 찾아보았더니 클라우드 중의 하나라고 했다. 하지만 클라우드도 정확히 어떤 개념인지 몰랐기 때문에, 이번 기회에 클라우드 컴퓨팅에 대해 정리하고자 한다! 📢 어원 클라우드라는 단어는 '존재는 하지만 복잡하면서 굳이 알지 않아도 되는 것'을 구름으로 추상화 한것에서 유래하였다. 💡 개념 클라우드 컴퓨팅은 인터넷(클라우드)를 통해 가상화 된 컴퓨터의 IT 리소스(CPU, RAM, SSD...)를 제공하는 것이다. 이를 통해 자신의 컴퓨터가 아닌 인터넷으로 연결된 다른 컴퓨터에서 서버, 스토리지, 데이터베이스, 네트워킹, 소프트웨어, 분석, .. 공감수 0 댓글수 0 2021. 5. 24.
개발 방법론에 대해 알아보자 어쩌다 TDD 방법론에 대해 듣게 되어서 대체 개발 방법론이 무엇인지 궁금했었다. 그래서 찾아보니 어떤 분이 블로그에 "소프트웨어를 생산하는 데 필요한 프로그래밍 개발 과정들을 정리하고 표준화하여 프로그래머들이 프로그래밍 개발과정에서 각 개인이 개발과정에서의 일관성을 유지하고 프로그래머들 간의 효과적인 협업이 이루어질 수 있도록 돕기 위한 방법론" 라고 잘 요약해주셨다. 즉, 소프트웨어 개발 방법론은 소프트웨어를 어떤 방식으로 만들어 갈지에 대한 것이다. 매우 다양한 방법론이 있으며 개발자들은 개발 상황에 맞는 방법론을 선택하면 된다. 이번 게시물에서는 여러 방법론들 중에서 TDD, BDD, DDD에 대해 정리해 보았다. ✨ TDD(테스트 주도 개발, Test-Driven Development) 일반적으.. 공감수 0 댓글수 0 2021. 5. 16.
OAuth로 구글 로그인을 구현해보자 🔐 OAuth 우리가 개발을 하다보면 구글 계정을 통한 개인 정보를 활용하고 싶은 경우가 생긴다. 이를 위해서 우리 개발 서버에서 유저의 구글 아이디와 비밀번호를 저장하고 있다면 쉽게 계정 정보에 접근할 수 있을 것이다. 하지만 이러한 방법은 보안상으로 매우 위험하다. 그래서 이를 해결하기 위해 나온 것이 OAuth 이다. 사용자의 아이디와 비밀번호를 전달하는 대신, 구글이 제공하는 랜덤하고, 일정 기간동안만 사용될 수 있는 임시 비밀번호를 개발 서버에서 전달받는 것을 OAuth가 가능하게 해준다. 우리의 개발 서버는 구글(또는 다른 서비스들)로 부터 access token(임시 비밀번호) 을 전달받고, 이 access token 을 사용하여 구글의 서비스에 접근할 수 있다! OAuth를 이해하기 위해서.. 공감수 0 댓글수 0 2021. 5. 8.
웹팩 설정하기 - 플러그인 앞의 게시물에 이어 이번에는 웹팩에서 플러그인을 설정하는 방법에 대해 정리해보았다. 🔌 플러그인 로더가 여러 형식의 파일들을 모듈로 인식할 수 있게 해주면 이 과정에서 플러그인은 코드 사이의 공백이나 변수명을 바꿔서 파일의 용량을 줄이는 역할같은 것을 해준다. 플러그인을 적용시키는 방법은 webpack.config.js 파일에서 다음과 같은 코드를 추가하면 된다. 이러한 코드를 추가하면 MyPlugin을 추가해주게 된다. const MyPlugin = require('./MyPlugin'); module.exports = { ..., plugins: [ new MyPlugin(), ] } 1. Banner Plugin 코드가 빌드되어 난독화가 진행된 경우 사람들이 코드를 알아볼 수 없다. 따라서 코드 상.. 공감수 0 댓글수 0 2021. 5. 7.
웹팩 설정하기 크롬 익스텐션을 개발할 때 boliler plate를 사용하여 개발했었다. 그러다 보니 개발환경에 변경하고 싶은 부분이 있을 때 웹팩을 수정해야하는 경우가 발생했다. 하지만 웹팩에 대해 아는 것이 없어서 설정을 건드릴 수가 없었다. 그래서 웹팩과 그 외의 개발환경을 셋팅하는 방법에 대해서 정리하고, 실제 적용까지 해볼 예정이다! jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html 프론트엔드 개발환경의 이해: 웹팩(기본) 1. 배경 먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명.. 공감수 0 댓글수 0 2021. 5. 6.

반응형

문의안내

티스토리
로그인
고객센터

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