TIL

[HTML/CSS] 100일 코딩 챌린지 - 실습(9, 10일차)

9,10일차는 과제였습니다. 화면을 보여주고 html과 css로 똑같이 구현하는 것입니다. 혼자서 만든 화면입니다,,하하하하하 맨왼쪽에 줄 만드는 것만 찾아봤더니, border-left라고 합니다,, .yellow { color: rgb(252, 228, 206); border-left: 5px solid rgb(247, 209, 85); } 이렇게 추가해줬습니다. 그리고 노란 부분에만 border가 5px 추가되면 오른쪽으로 5px 밀리는 게 되어버려서, 흰 부분에도 투명한 border-left를 추가해 5px 오른쪽으로 밀어줍니다. li { margin: 14px 0; padding-left: 10px; border-left: 5px solid transparent; } 또, 커서가 올라갔을 때 커서..

[HTML/CSS] 100일 코딩 챌린지 - html 레이아웃 만들기(8일차)

요즘 유데미에서 100일 코딩 챌린지라는 걸 듣고있습니다...ㅎㅎ 매일 듣고 실습한 내용을 올리려고 합니다. 앞부분은 기초적인 내용이 대부분이라, 강의는 거의 넘기고 퀴즈, 실습만 푸는 식으로 진행했습니다. 막 넘기면서 강의를 듣던 중, 이 화면을 따라서 만들어보라는 챌린지가 있었습니다. 제가 따라 만들어본 화면입니다,,하하 저는 어떻게든 생김새만 따라하자는 생각에 css만 건드리기 바빴는데, 맥스쌤은 html에 main과 footer 태그부터 추가하시는 걸 보고 많은 생각이 들었습니다,, Max' Challenge for Wednesday, August 4th Learn about the basics of web development - specifically dive into HTML & CSS. E..

[WebSocket]Express 서버에 WS 합치기, 프론트와 데이터 공유하기

WS는 WebSocket을 사용하기 위한 npm 패키지로, 노드에서 핵심적이다!! 그런데 WebSocket은 http와 다른 프로토콜이므로, 1. npm i ws 2. express를 이용해 http 서버를 만든 후 해당 서버를 WebSocket 서버에 넣어주면 끝~~ const server = http.createServer(app); const wss = new WebSocket.Server({ server }); server.listen(app.get('port'), () => { console.log(app.get('port'), '번 포트에서 대기 중'); }); ws가 http와 다른 점이 있다면 아무래도 서버로부터 정보를 얻기 위해 매번 request를 넣을 필요가 없다는 것이다. 그러므로 ..

[WebSocket] Http vs WebSocket

http와 WebSocket은 둘다 프로토콜인데, 작동하는 방식이 다르다. 프로토콜이란 일종의 컴퓨터끼리 원활하게 데이터를 주고받기 위해 만들어진 통신 규약이다. http와 WebSocket은 프로토콜이므로 브라우저와 백엔드 사이에서만 동작하지 않고, 서버와 서버 사이에서도 동작한다. 먼저 http는 모든 서버에서 작동하는 방식으로, 클라이언트가 request를 보내면 서버로부터 response를 받는 구조이다. http의 특성상 서버로부터 한 번 reponse를 받으면 서버는 클라이언트가 누군지 잊어버리게 되는데, 이 특성을 stateless라고 한다. 즉 서버는 클라이언트로부터 request를 받아야 response를 줄 수 있는 것이다. 반면, WebSocket은 한 번 request와 accept..

[Swift][iOS][SwiftUI] #0801 json mock 데이터 파싱해서 화면에 뿌리기

위 영상을 참고해 진행했다! 실제로 서버에서 데이터를 받아오기 전, 프론트에서는 가짜데이터를 만들어서 파싱을 구현하는데, 이 때 만드는 가짜데이터를 mock 데이터라고 한다. 오늘은 이 mock데이터를 파싱해서 화면에 리스트로 뿌려보았다. 1. mock 데이터 생성하기 [ { "id": 1, "code" : "String", "title": "방제", "type": "팀전", "level": 15, "max_participant": 2, "password": "mockpasswd", "created_user_id": "" }, { "id": 2, "code" : "String", "title": "방제1", "type": "팀전", "level": 20, "max_participant": 4, "pass..

[코틀린][안드로이드] #0721 계산기 앱 만들기 - 3

이때까지 한 걸 되돌아보자. splash 애니메이션과 계산기 버튼을 누를 경우 연산자와 피연산자를 나누어 로그에 띄우는 것까지 완료하였다. 이제 본격적으로 계산 로직을 짜보자. 1. 값을 받아 계산하기 여기서 괄호를 쓰지는 않기 때문에 후위연산자를 사용하지는 않을 것이다. 다만, 곱셈과 나눗셈을 먼저 계산한 후 덧셈뺄셈 계산하는 부분에 전달할 것이다. class CalcUtil { fun getResult(expr: String): Double{ val calcUnits: List = expr.split(" ") as MutableList val handleUnits = ArrayList() val result= ArrayList() var i = 0 while(i < calcUnits.size){ if..

#0720 [안드로이드][코틀린] 계산기 앱 만들기 - 2

시작하기 앞서, 이때까지 한 작업을 되돌아보자. 사진과 애니메이션(lottie json)을 통해 로딩화면을 구상하였고, 비동기처리를 통해 3초후에 계산기 화면이 띄워지도록 하였다. 계산기 화면도 간단하게 구상하였다. 그럼 먼저 계산기 버튼을 다듬어보자 1. 계산기 버튼 다듬기 우선, 버튼의 text를 아래와 같이 수정한다. 2. 버튼 입력이 UI에 반영되게 하는 코드 작성 class MainActivity : AppCompatActivity() { private var activityMainBinding : ActivityMainBinding? = null private var liveExpr : MutableLiveData = MutableLiveData("") override fun onCreate(..

#0718 [안드로이드][코틀린] 계산기 앱 만들기 - 1

특강 때 쓰려고 간단하게 계산기 앱을 만들어보았다. 간단한 것 치고는 애니메이션에 비동기처리까지 있다...!!ㅋㅋㅋ 그럼 시작! 1. 모듈 불러오기 android { compileSdk 32 defaultConfig { applicationId "com.example.calculator" minSdk 29 targetSdk 32 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'..