Study 18

Next + React Query로 SNS 서비스 만들기 (X.com 클론코딩) - 0

Next.js 13에서 바뀐 점 - 디렉토리 라우팅이 편해짐 - 레이아웃 기능을 지원하게 되었음 - 페이지별 권한 및 로그인 체크를 미들웨어를 통해 사용 가능 - 리액트 18을 사용함으로 서버 컴포넌트를 사용 가능하게 되었다 - 기타 등등 클론코딩의 장단점 - 장점 : 아이디어 구상하는 단계를 생략할 수 있어서 좋음 - 단점 : 생각하지 않고 따라만 친다면 공부가 되지 않는다. 이번에 면접에도 몇 번 들어가면서 느낀 건데, 그냥 포트폴리오 자체가 엄청 클론코딩 느낌이 나는 사이트가 몇 개가 있었고, 그렇게 좋은 느낌을 받지는 않았던 것 같다. 실제로는 그 사람이 열심히 생각해서 만든 것일 수는 있는데 인터넷 상에서 이러한 레퍼런스들이 너무 많다 보니 사소한 부분에서도 그냥 인터넷에서 보고 따라 만든 게 ..

Study/Next.js 2024.02.25

(백준) 8983 - 사냥꾼

문제 더보기 KOI 사냥터에는 N 마리의 동물들이 각각 특정한 위치에 살고 있다. 사냥터에 온 사냥꾼은 일직선 상에 위치한 M 개의 사대(총을 쏘는 장소)에서만 사격이 가능하다. 편의상, 일직선을 x-축이라 가정하고, 사대의 위치 x1, x2, ..., xM은 x-좌표 값이라고 하자. 각 동물이 사는 위치는 (a1, b1), (a2, b2), ..., (aN, bN)과 같이 x,y-좌표 값으로 표시하자. 동물의 위치를 나타내는 모든 좌표 값은 양의 정수이다. 사냥꾼이 가지고 있는 총의 사정거리가 L이라고 하면, 사냥꾼은 한 사대에서 거리가 L 보다 작거나 같은 위치의 동물들을 잡을 수 있다고 한다. 단, 사대의 위치 xi와 동물의 위치 (aj, bj) 간의 거리는 |xi-aj| + bj로 계산한다. 예를..

Study/Algorithm 2023.08.19

브라우저 개발자 도구 - Console 사용법

오늘은 브라우저 개발자 도구 Console 에 대해서 알아보는 시간이다. F12 를 누른 뒤에 Console 탭을 클릭하거나, Ctrl + Shift + J 단축키를 사용하여 콘솔창을 열 수 있다. Console 창에서 가장 먼저 쉽게 할 수 있는 부분의 하단의 Console창에서 JavaScript 코드를 입력하고 실행할 수 있다. 변수를 선언하거나, document 객체를 통해서 웹 페이지의 DOM에 접근하여 조작하거나, $0, $1, $2, $3, $4, $_, $(), $$() 등을 이용해서 DOM 요소를 선택할 수도 있다! $0 ~ $4 : 마지막으로 불러왔던 요소를 가져올 수 있다. (Elements 에서 선택한 요소도 포함한다.) $() 와 $$() : CSS선택자를 사용하여 요소를 선택할 ..

Study/JavaScript 2023.08.08

Softeer Level 3 - [HSAT 3회 정기 코딩 인증평가 기출] 플레이페어 암호

문제링크 HSAT 3회 정기 코딩 인증평가 기출] 플레이페어 암호 입력1 HELLOWORLD PLAYFAIRCIPHERKEY 출력1 EIYVRVVQBRGW 입력2 LEMONSTRAWBERRYAPPLEIUICE WATERMELON 출력2 NALNBQEWTANRTZEZTKKOWQWUGW 풀이 더보기 1. 주어지는대로 입력을 받는다 plain_text = sys.stdin.readline().rstrip('\n') enc_key = sys.stdin.readline().rstrip('\n') 2. 암호화에 쓰이는 문자열은 한번만 쓰이므로 중복된 글자를 제거한다. enc_key = ''.join(dict.fromkeys(enc_key)) 3. 암호화된 문자열을 담을 테이블을 선언하고 J를 제외한 alphabet..

Study/Algorithm 2023.08.04

브라우저 개발자 도구 - Elements 사용법

Elements DOM 요소 파해치기 - 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있다. 웹 요소에서 우클릭을 누른 후 검사 메뉴를 클릭해도 해당 요소의 DOM 노드를 확인할 수 있다. - 찾고싶은 DOM 요소를 찾기 위해서 검색 기능을 사용할 수 있다. (Ctrl + F 혹은 Command + F) - 돔 요소를 수정해볼 수 있습니다. 수정된 내용은 브라우저에서 수정된 대로 렌더링 됩니다. (내용 뿐만 아니라, 속성, 노드 타입 또한 수정이 가능함) - 특정 노드의 상태를 강제할 수 있습니다. (상태를 변경할 노드를 우클릭한 뒤 Force State를 통해 설정 가능하다, 이 기능을 이용해서 hover 등의 상태일 때를 마우스를 올리지 않고도 확인할 수 있다) - 이건 나도..

Study/JavaScript 2023.07.31

JavaScript Deep Dive - 03장 - 자바스크립트 개발 환경과 실행 방법

자바스크립트 실행 환경 모든 브라우저는 자바스크립트를 해석, 실행할 수 있는 자바스크립트 엔진이 있다. Node.js 또한 자바스크립트 엔진을 내장하고 있다. 브라우저의 목표는 HTML, CSS, Javascript를 실행하여 화면을 렌더링하는 것. Node.js 는 브라우저 환경이 아닌 곳에서 Javascript 개발 환경을 제공하는것이 목적이라, 브라우저의 Javascript와는 다르게 DOM Api를 제공하지 않는다. 대신 파일을 생성하고 수정할 수 있는 파일 시스템을 제공한다. 브라우저는 이러한 파일 시스템을 제공하지 않는다. 제공하면 브라우저의 Javascript가 사용자의 컴퓨터에 있는 파일들을 삭제하거나 수정하게 될 수 있으니까. 웹 브라우저 다양한 웹 브라우저들이 있다. 구글 크롬, 파이어..

Study/JavaScript 2023.07.31

JavaScript Deep Dive - 02장 - Javascript란?

자바스크립트의 탄생과 표준화: 브랜던 아이크(Brendan Eich)가 1995년 넷스케이프 브라우저에 처음 구현한 스크립트 언어로, ECMAScript 표준으로 정의되어 널리 사용됨. 자바스크립트의 성장과 역사: Ajax 기술의 등장으로 웹 애플리케이션 개발 환경이 확장되었으며 (비동기 통신), jQuery 라이브러리가 도입되어 DOM 조작이 용이해지며, V8 JavaScript 엔진의 등장으로 성능이 크게 향상됨. Node.js와 SPA 프레임워크(혹은 라이브러리): Node.js는 자바스크립트를 서버 사이드에서 사용할 수 있게 해주는 환경으로 대규모 웹 애플리케이션 개발에 기여함. SPA 프레임워크(혹은 라이브러리)는 단일 페이지 애플리케이션을 구축하는데 도움을 주는 기술. 자바스크립트와 ECMA스..

Study/JavaScript 2023.07.28

JavaScript Deep Dive - 01장

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션. 요구사항을 분석하고 적절하게 문제 해결 방안을 정의하는것이 중요하다. 문제 해결을 위하여 필요한것은 Computational thinking(컴퓨팅 사고)이다. 프로그래밍이란 복잡하며 명확하지 않을 수 있는 문제(요구 사항)을 정확히 이해하고 복잡한 것을 단순한 것으로 분해하고, 자료를 정리하고 구분하며, 순서에 맞게 행위를 나열하는 것이다. 이를 위해서 우리는 변수와 값, 키워드, 연산자, 표현식, 표현문, 조건문, 반복문, 흐름제어, 함수, 객체, 배열 등을 사용하여 프로그램을 만든다. 그리고 우리들은, JavaScript를 사용하여 프로그램을 짜게 되는데, 이에 관련된 내용은 2장에서 작성하도록 하겠습니다.

Study/JavaScript 2023.07.18

(백준) 2954 자바 - 창영이의 일기장

문제 창영이는 매일 밤 하루동안 일어난 일을 일기장에 남긴다. 일기장을 쓰면서 영어 공부도 같이 하기 위해서 영어로 일기를 쓴다. 또, 남들이 자신의 일기장을 보는 것을 막기 위해서 모음('a','e','i','o','u')의 다음에 'p'를 하나 쓰고, 그 모음을 하나 더 쓴다. 예를 들어, "kemija" 는 "kepemipijapa"가 되고, "paprika"는 "papapripikapa"가 된다. 창영이가 일기장에 작성한 문장이 하나 주어졌을 때, 원래 문장은 무엇인지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 알파벳 소문자와 공백으로만 이루어진 문장이 하나 주어진다. 모든 단어는 공백 하나로 구분되어져 있다. 문장의 길이는 최대 100이다. 출력 첫째 줄에 알파벳 소문자와 공백으로만 이루어진..

Study/Algorithm 2021.08.17